summaryrefslogtreecommitdiffstats
path: root/2022/info/asmblox-after.md
blob: 14927f3f5418ae2a7fee51e761fc44e752944c34 (plain) (blame)
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
<!-- Automatically generated by emacsconf-publish-after-page -->


<a name="asmblox-mainVideo-transcript"></a>
# Transcript

[[!template new="1" text="Hi, I'm Zach and today I'll be giving" start="00:00:00.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="a presentation on asm-blox," start="00:00:03.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="a programming game inspired by WebAssembly." start="00:00:05.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So programming games came into prominence" start="00:00:08.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="about a decade ago and are loved for providing" start="00:00:10.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="interesting programming challenges" start="00:00:13.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="without all the messiness of real world programming." start="00:00:14.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="I wanted to make a programming game" start="00:00:17.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and I decided to base it off of TIS-100," start="00:00:19.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="having a pretty basic UI." start="00:00:24.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It seemed pretty doable in Emacs." start="00:00:28.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="TIS 100 is a programming game" start="00:00:30.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="where you write a fictional assembly language" start="00:00:33.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="into a grid of cells which can each" start="00:00:35.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="communicate with one another," start="00:00:37.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="you're tasked with solving" start="00:00:39.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="fairly simple CS 101 like problems." start="00:00:41.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="To mix things up a bit I decided to base" start="00:00:44.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the language of asm-blox off of" start="00:00:48.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="WebAssembly, which is stack based," start="00:00:49.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="as opposed to TIS-100 which is registered based." start="00:00:52.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here you can see the same program" start="00:00:55.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="written in the game TIS-100," start="00:00:59.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="what it looks like in asm-blox," start="00:01:01.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and the original WebAssembly that it's based off of." start="00:01:03.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="With that said, let's get into a demo." start="00:01:08.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This is the game board." start="00:01:10.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's a 4 by 3 grid." start="00:01:12.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Each cell has a stack of size 4." start="00:01:14.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="First off, I'll show some of the stack editing commands." start="00:01:16.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can add a value with the const function." start="00:01:20.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here we're adding two values to this stack" start="00:01:23.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="to get added, and eventually the stack gets overflowed." start="00:01:27.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can fix that as follows with the clear command," start="00:01:33.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="so that clears the stack." start="00:01:37.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can duplicate values on the stack." start="00:01:40.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This duplicates the item at the bottom of the stack." start="00:01:43.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="10 gets put on, 20 gets put on," start="00:01:45.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="then 10 will get duplicated" start="00:01:48.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and put on the top of the stack." start="00:01:50.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can increment. For example, this increments" start="00:01:52.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the second to bottom, the second to bottom" start="00:01:55.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="from the stack." start="00:01:58.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So 10, 20, increment that, clear." start="00:01:59.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="That's basic stack operations." start="00:02:04.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Next up, we have numeric commands." start="00:02:07.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="For example, here, if we add &quot;add&quot;," start="00:02:11.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it pops two values off the stack," start="00:02:12.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="adds them, and pushes the result on." start="00:02:14.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Another way we can write this is as follows." start="00:02:17.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can have the add here" start="00:02:20.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then nest the two constants," start="00:02:22.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then this does the same thing." start="00:02:26.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="First, the inner constant operations run," start="00:02:28.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then the outer add operation runs." start="00:02:31.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can nest as deeply as we want." start="00:02:35.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="There's also subtraction, multiplication, and whatnot." start="00:02:40.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Next up are Boolean operations." start="00:02:44.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Zero counts as true." start="00:02:46.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Anything else--sorry, zero counts as false." start="00:02:49.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Anything else is true." start="00:02:51.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="For example, this would give us false and true," start="00:02:52.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="so that result should be false." start="00:03:01.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Zero gets put on the stack," start="00:03:04.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="one gets put on, and then the &quot;and&quot; operation." start="00:03:06.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So there's also or, not," start="00:03:08.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and various numerical comparison operations" start="00:03:12.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="like greater than and less than." start="00:03:17.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Next up are the port operations." start="00:03:21.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can send values to other cells as follows." start="00:03:22.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here we create a value" start="00:03:27.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then send it right." start="00:03:29.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let's run this." start="00:03:33.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The 10 goes on the stack," start="00:03:35.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then it gets sent to the right." start="00:03:37.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here it's waiting for this cell to pick it up." start="00:03:38.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It can pick it up just as follows." start="00:03:41.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So left... and then why don't we have it" start="00:03:44.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="drop that value after it gets it." start="00:03:47.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So the 10 gets sent to the right." start="00:03:49.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This one picks it up and drops it." start="00:03:53.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Lastly, we have control flow," start="00:04:00.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="which is a bit tricky," start="00:04:03.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but with this visual," start="00:04:04.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it helps explain it." start="00:04:06.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="There are two block constructs, &quot;block&quot; and &quot;loop&quot;," start="00:04:08.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and there's two jumping constructs, &quot;br&quot; and &quot;brif&quot;." start="00:04:12.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So if &quot;loop&quot; is jumped to," start="00:04:16.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the control flow goes to the beginning," start="00:04:23.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the top of the loop." start="00:04:25.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If a block is jumped to," start="00:04:26.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it goes to the end of the block," start="00:04:28.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and these various blocks" start="00:04:31.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="are identified by their level of nestedness." start="00:04:33.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="From the point of view of this jump statement," start="00:04:36.520" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="this &quot;br&quot; statement, this is block level 0," start="00:04:40.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="this is 1, this is 2." start="00:04:45.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So here, &quot;br 1&quot; would be referring to this loop." start="00:04:46.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="What this [br 1] would do is," start="00:04:49.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it would jump to this loop right here." start="00:04:51.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If we were to do this [br 2], what this would do is," start="00:04:54.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="this would jump past this block right here." start="00:04:57.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So as another example, this right here," start="00:05:02.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="this is a loop that generates increasing numbers." start="00:05:09.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Let's see. Next up, we have modules." start="00:05:15.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This is an example of a stack module." start="00:05:22.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="In addition to stack, there's also heaps." start="00:05:26.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="What this does is it allows us to create" start="00:05:28.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="an extra stack that we can push and pop items onto." start="00:05:34.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This one can have as large size as we need." start="00:05:38.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here it has a size of 20." start="00:05:41.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's taking values from up" start="00:05:43.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and exposing those values on the left." start="00:05:46.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This loop right here, it generates numbers," start="00:05:51.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and it's putting them onto the stack." start="00:05:57.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We can see here that those numbers" start="00:05:59.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="are being exposed to this cell right here." start="00:06:00.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's just taking values, and eventually," start="00:06:03.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it's going to overflow and cause an error." start="00:06:07.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="That finishes the basic commands." start="00:06:11.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Why don't we try solving this puzzle." start="00:06:14.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The puzzle description is right here." start="00:06:16.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We want to read a value from I." start="00:06:21.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Send 1 to G if I is greater than 0." start="00:06:23.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Send 1 to E if it's equal to 0." start="00:06:28.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Send 1 to L if it's less than 0." start="00:06:30.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="And then all the other ones, we send 0 to." start="00:06:32.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="First things first, let's send the value we get" start="00:06:35.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="from the input down as follows." start="00:06:40.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let's send that value right." start="00:06:44.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="You get from up." start="00:06:49.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Okay. So next, we're getting a value on the left." start="00:06:51.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Now we want to compare if this number is greater than 0." start="00:06:54.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If it's greater than 0, we send 1 to G." start="00:06:58.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let's perform the greater than operation" start="00:06:59.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="on that item we just got, and we're comparing it to 0." start="00:07:03.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Now that result, we're going to send down," start="00:07:08.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and we're going to send this original value" start="00:07:11.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="we got from here to the right." start="00:07:13.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here, we do a similar step." start="00:07:16.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We get the value from the left," start="00:07:19.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but this time, we have to do an equal operation." start="00:07:20.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Is that number we got equal to 0?" start="00:07:22.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We send that result down," start="00:07:25.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then send this number to the right." start="00:07:28.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Lastly, we get this number from the left." start="00:07:32.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here, we need to compare if it's less than 0." start="00:07:38.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We send that result down," start="00:07:42.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and now lastly, we drop that remaining value." start="00:07:45.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Okay, let's--oh, and then lastly," start="00:07:50.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="we need to send down the value we get up." start="00:07:53.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Send down, up, send down, up." start="00:07:56.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Okay, so let's try running this." start="00:08:02.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let's see. We notice that" start="00:08:04.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the numbers are coming in from I." start="00:08:08.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="They're going through our various conditions" start="00:08:10.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and should be sending all the correct values." start="00:08:14.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It looks like we're not getting any errors so far." start="00:08:18.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let's speed this up." start="00:08:23.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="That completes the puzzle." start="00:08:26.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Now let's get into some of the implementation details." start="00:08:33.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The first thing is the game loop." start="00:08:42.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The game loop is... So this is actually extremely simple." start="00:08:46.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="All the state for the entire game" start="00:08:50.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="is stored in just a few variables." start="00:08:52.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="There's one variable storing" start="00:08:54.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the text of each cell as a vector of strings." start="00:08:56.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="There's a single function" start="00:09:01.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="that renders the entire game, the entire board." start="00:09:06.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="There's a single function that would render" start="00:09:09.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="this entire screen based off of the state," start="00:09:11.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then the game waits for you to press a key." start="00:09:13.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The key usually, depending on what action you perform," start="00:09:19.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="updates the state and causes a re-render." start="00:09:24.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's an extremely simple game loop," start="00:09:27.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but it makes implementing it pretty easy." start="00:09:29.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="To demonstrate how this game loop works," start="00:09:32.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="I have a simple demo prepared." start="00:09:35.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This is a game of tic-tac-toe." start="00:09:38.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Let me show this real fast." start="00:09:41.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's an extremely simple implementation," start="00:09:44.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but it follows the same principles" start="00:09:49.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="that I used in asm-blox." start="00:09:51.466" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="First, we have the state defined in variables." start="00:09:53.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Here we have two pieces of state." start="00:09:57.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We have which player's turn it is" start="00:09:59.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and the state of the game board." start="00:10:01.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The player turn can be nil if it's empty," start="00:10:03.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the string &quot;x&quot; or the string &quot;o&quot;." start="00:10:06.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Then the game board is a list of nine board elements." start="00:10:08.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So that's the state." start="00:10:14.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Then we have a helper function." start="00:10:16.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="You can go into the details," start="00:10:18.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but it just returns true" start="00:10:19.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="if the board has a winning player." start="00:10:21.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Part two is the rendering function." start="00:10:25.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Only based off of the game state," start="00:10:30.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="we have a function that erases the buffer" start="00:10:32.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and draws this from scratch." start="00:10:36.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="That's this part right here." start="00:10:40.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Lastly, we have the action." start="00:10:45.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="We have one action which is bound to RET," start="00:10:46.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and it places a player token." start="00:10:51.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Once it places a player token," start="00:10:55.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it rerenders the board," start="00:10:59.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and all the rerendering is handled by this function." start="00:11:03.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Then we have just creating of the mode" start="00:11:06.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and initialization function." start="00:11:12.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="With these three steps" start="00:11:14.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it clearly separates out all of the state," start="00:11:16.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="the rendering, and the actions," start="00:11:20.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and it makes implementing it very simple." start="00:11:22.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="One trick that's used here and that I use" start="00:11:25.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="in my asm-blox game is that" start="00:11:29.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="when I render the board," start="00:11:32.383" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="I propertize the text to contain extra information." start="00:11:33.317" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="For example, here, each cell has" start="00:11:40.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="a tic-tac-toe index to indicate which number cell it is." start="00:11:45.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="This has index 0, 1, 2, all the way up to 8." start="00:11:49.400" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="That way, for placing, the only thing it has to do" start="00:11:53.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="is just look at its position" start="00:11:58.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="based off of the text property." start="00:12:01.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It makes implementation extremely simple." start="00:12:04.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Next up, we have the implementation of the code cells." start="00:12:07.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If you notice, here it's kind of weird" start="00:12:14.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="how it's like a buffer, but each cell kind of acts" start="00:12:16.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="like its own buffer, and it has its own limits." start="00:12:21.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="All of the Emacs editing--" start="00:12:25.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="well, some of the Emacs editing commands kind of work," start="00:12:27.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="like beginning-of-line, end-of-line, end-of-buffer." start="00:12:30.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="How is that done?" start="00:12:35.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Well, it's all just a trick, actually." start="00:12:38.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Each cell has text properties of which line it's at" start="00:12:41.760" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and its cell coordinates." start="00:12:47.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Whenever a key is pressed for editing, moving lines--" start="00:12:48.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="there's even kind of more complicated things" start="00:12:54.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="like switching cells around--" start="00:12:58.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="so all of that," start="00:13:00.600" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it knows which position it's in," start="00:13:03.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it knows what cell it's in," start="00:13:05.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then it copies the text of the cell," start="00:13:08.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="because remember, the contents of the cell" start="00:13:12.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="are stored in internal state." start="00:13:16.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It copies that cell contents into a temporary buffer." start="00:13:18.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It then moves the point to whichever line it was" start="00:13:23.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="in the game board." start="00:13:27.960" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It performs the action." start="00:13:31.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It makes sure that the resulting text isn't" start="00:13:33.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="longer than the cell width or the cell height." start="00:13:36.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If everything checks out," start="00:13:40.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="it updates the state and calls a re-render." start="00:13:42.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So there's nothing going on in here" start="00:13:45.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="that's, like, actually inserting a letter A." start="00:13:48.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It's all updating the state and causing a re-render." start="00:13:51.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="So this makes things like certain" start="00:14:00.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="internal Emacs editing constructs" start="00:14:03.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="pretty hard to use, like undoing." start="00:14:06.480" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Normally the undoing construct" start="00:14:09.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="works off the contents of the buffer." start="00:14:12.200" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="But if your buffer is actually just" start="00:14:15.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="a reflection of the internal state," start="00:14:17.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="then how does undoing work?" start="00:14:20.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Well, it pretty much is kind of a hack." start="00:14:21.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="I mean, undoing is here," start="00:14:24.880" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="but it's pretty much redone" start="00:14:27.040" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="in a not so configurable, not so modifiable way." start="00:14:32.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Pretty much everything is like that," start="00:14:37.560" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="from these parentheses highlighting..." start="00:14:40.080" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Normally, parentheses highlighting" start="00:14:42.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="would be kind of weird," start="00:14:46.320" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="with cross-line parentheses and everything." start="00:14:47.244" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="All of that had to be redone." start="00:14:49.840" video="mainVideo-asmblox" id="subtitle"]]
[[!template new="1" text="Another point about how this is implemented" start="00:14:52.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="is the assembly text to executable code." start="00:14:58.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="If you're familiar with WebAssembly" start="00:15:02.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="you might have encountered a tool wat-wasm." start="00:15:05.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It basically converts the WebAssembly text format" start="00:15:10.720" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="to byte code." start="00:15:16.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="And what I do here... It goes through a similar process." start="00:15:18.280" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Normally, when you're writing this text format," start="00:15:22.440" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="you can nest things as deeply as you want." start="00:15:28.000" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Basically, what happens is it flattens out everything." start="00:15:30.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It kind of knows the order" start="00:15:33.800" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="that all these things are going to get executed," start="00:15:35.920" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and then it puts it into one single line" start="00:15:38.160" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="that it can just run through and execute." start="00:15:40.680" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="The same thing for the loops and blocks." start="00:15:44.120" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="It internally generates labels and jump statements." start="00:15:48.360" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="So that concludes this presentation." start="00:15:52.240" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="Thank you for listening," start="00:15:58.640" video="mainVideo-asmblox" id="subtitle"]]
[[!template text="and I hope you enjoy the rest of the conference." start="00:15:59.667" video="mainVideo-asmblox" id="subtitle"]]


Questions or comments? Please e-mail [zacromero@posteo.net](mailto:zacromero@posteo.net?subject=Comment%20for%20EmacsConf%202022%20asmblox%3A%20asm-blox%3A%20a%20game%20based%20on%20WebAssembly%20that%20no%20one%20asked%20for)


<!-- End of emacsconf-publish-after-page -->