path: root/2022/info/asmblox-after.md

<!-- 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"]]



Captioner: sachac
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 -->