agentscript/mvc/helloKeys.html at master · backspaces/agentscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<html>
    <head>
        <title>Keys</title>
    </head>

    <body style="font-family: 'Arial', sans-serif; font-size: 16px">
        <script type="module">
            import * as util from '/src/utils.js'
            import Model from '/models/HelloModel.js'
            import Animator from '/src/Animator.js'
            import TwoDraw from '/src/TwoDraw.js'

            import Keyboard from '/src/Keyboard.js'

            const model = new Model()
            model.setup()

            const view = new TwoDraw(model, {
                div: 'modelDiv',
                patchSize: 20,
                drawOptions: {
                    turtlesSize: 2,
                    linksWidth: 2,
                },
            })

            const anim = new Animator(
                () => {
                    model.step()
                    view.draw()
                },
                -1, // run forever
                30 // 30 fps
            )

            function bumpTurtleSize(n) {
                view.drawOptions.turtlesSize += n
                view.drawOptions.turtlesSize = Math.max(
                    0,
                    view.drawOptions.turtlesSize
                )
            }
            function swapModelLinks() {
                if (model.links.length > 0) {
                    // "model.links.ask(l => l.die())" fails! each die changes links
                    while (model.links.length > 0) model.links[0].die()
                } else {
                    model.turtles.ask(t => {
                        model.links.create(t, model.turtles.otherOneOf(t))
                    })
                }
            }
            const keyCommands = [
                { key: 't', cmd: () => anim.toggle() },

                { key: '1', cmd: () => anim.setFps(10) },
                { key: '2', cmd: () => anim.setFps(30) },
                { key: '3', cmd: () => anim.setFps(100) },

                { key: '<', cmd: () => bumpTurtleSize(-1) },
                { key: '>', cmd: () => bumpTurtleSize(+1) },

                {
                    key: 'd',
                    cmd: () => (view.drawOptions.turtlesShape = 'dart'),
                },
                {
                    key: 'b',
                    cmd: () => (view.drawOptions.turtlesShape = 'bug'),
                },
                {
                    key: 'p',
                    cmd: () => (view.drawOptions.turtlesShape = 'person'),
                },
                {
                    key: 'a',
                    cmd: () => (view.drawOptions.turtlesShape = 'arrow'),
                },

                { key: 'L', cmd: () => swapModelLinks() },

                {
                    key: 'F2',
                    cmd: () => (view.drawOptions.turtlesColor = 'red'),
                },
                {
                    key: 'F3',
                    cmd: () => (view.drawOptions.turtlesColor = 'random'),
                },

                { key: 'å', cmd: () => (view.drawOptions.linksWidth = 2) }, // alt a
                { key: 'Å', cmd: () => (view.drawOptions.linksWidth = 4) }, // alt A

                {
                    key: 'Escape',
                    cmd: () => model.turtles.ask(t => t.rotate(90)),
                },

                {
                    key: 'ArrowDown',
                    cmd: () => model.turtles.ask(t => (t.heading = 180)),
                },
                {
                    key: 'ArrowUp',
                    cmd: () => model.turtles.ask(t => (t.heading = 0)),
                },
                {
                    key: 'ArrowRight',
                    cmd: () => model.turtles.ask(t => (t.heading = 90)),
                },
                {
                    key: 'ArrowLeft',
                    cmd: () => model.turtles.ask(t => (t.heading = 270)),
                },
            ]
            const keyboard = new Keyboard(keyCommands).start()

            util.printToPage('Our keyboard commands are:', 'textDiv')
            const keyCmds = []
            keyCommands.forEach(kc =>
                keyCmds.push('key: ' + kc.key + '; cmd: ' + kc.cmd)
            )
            util.printToPage(keyCmds, 'textDiv')
            util.printToPage(
                `Try each of thm to see the results.

Note that å snd Å are Alt-a and Alt-A (Alt = Option on Mac).
And < and > and L are Shift-.and Shift-, and Shift-l.

To find the character for any modified character such as Alt-a,
simply type it in an editor, terminal, or browser dev tools.

Example: type Shift + Alt + a and you'll get Å above`,
                'textDiv'
            )

            util.toWindow({ anim, model, view, keyboard, keyCommands })
        </script>

        <div style="display: flex; gap: 20px">
            <div id="modelDiv"></div>
            <div id="textDiv"></div>
        </div>
    </body>
</html>