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


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 -->