html tables instead of lists

src/uxn_tutorial_day_2.gmo

@@ -536,26 +536,9 @@ for example, we could design a tile that corresponds to the outline of an 8x8 sq
 
 as each of the rows is a byte, we can encode them as hexadecimal numbers instead of binary.
 
-it's worth noting (or remembering) that groups of four bits correspond to a nibble, and each possible combination in a nibble can be encoded as an hexadecimal digit:
+it's worth noting (or remembering) that groups of four bits correspond to a nibble, and each possible combination in a nibble can be encoded as an <(hexadecimal)> digit.
 
-* 0000 is 0
-* 0001 is 1
-* 0010 is 2
-* 0011 is 3
-* 0100 is 4
-* 0101 is 5
-* 0110 is 6
-* 0111 is 7
-* 1000 is 8
-* 1001 is 9
-* 1010 is a
-* 1011 is b
-* 1100 is c
-* 1101 is d
-* 1110 is e
-* 1111 is f
-
-we could encode our square as follows:
+based on that, we could encode our square as follows:
 
 ``` the outline of a square marked with 1s, and its insides marked with 0s, and its equivalent in hexadecimal
 11111111    ff
@@ -604,37 +587,70 @@ as we saw already, sending a byte to .Screen/color will perform the drawing in t
 
 as in the case of drawing pixels, the high nibble of that byte will determine the layer in which we'll draw.
 
-however, in this case we'll have other possibilities: we can flip the sprite in the horizontal and/or the vertical axis:
+however, in this case we'll have other possibilities: we can flip the sprite in the horizontal (x) and/or the vertical (y) axis.
 
-* 2: draw a 1bpp sprite in the background, original orientation
-* 3: draw a 1bpp sprite in the foreground, original orientation
-* 6: draw a 1bpp sprite in the background, flipped horizontally
-* 7: draw a 1bpp sprite in the foreground, flipped horizontally
-* a: draw a 1bpp sprite in the background, flipped vertically
-* b: draw a 1bpp sprite in the foreground, flipped vertically
-* e: draw a 1bpp sprite in the background, flipped horizontally and vertically
-* f: draw a 1bpp sprite in the foreground, flipped horizontally and vertically
+the possible values of this high nibble, used for drawing a 1bpp sprite, are:
+
++ <table>
++ <tr><th>high nibble</th><th>layer</th><th>flip-x</th><th>flip-y</th></tr>
++ <tr><td>2</td><td>background</td><td>no</td><td>no</td></tr>
++ <tr><td>3</td><td>foreground</td><td>no</td><td>no</td></tr>
++ <tr><td>6</td><td>background</td><td>yes</td><td>no</td></tr>
++ <tr><td>7</td><td>foreground</td><td>yes</td><td>no</td></tr>
++ <tr><td>a</td><td>background</td><td>no</td><td>yes</td></tr>
++ <tr><td>b</td><td>foreground</td><td>no</td><td>yes</td></tr>
++ <tr><td>e</td><td>background</td><td>yes</td><td>yes</td></tr>
++ <tr><td>f</td><td>foreground</td><td>yes</td><td>yes</td></tr>
++ </table>
+
+& * 2: draw a 1bpp sprite in the background, original orientation
+& * 3: draw a 1bpp sprite in the foreground, original orientation
+& * 6: draw a 1bpp sprite in the background, flipped horizontally
+& * 7: draw a 1bpp sprite in the foreground, flipped horizontally
+& * a: draw a 1bpp sprite in the background, flipped vertically
+& * b: draw a 1bpp sprite in the foreground, flipped vertically
+& * e: draw a 1bpp sprite in the background, flipped horizontally and vertically
+& * f: draw a 1bpp sprite in the foreground, flipped horizontally and vertically
 
 ### low nibble
 
 the low nibble of the byte color will determine the colors that are used to draw the "on" and "off" pixels of the tiles.
 
-* 0: "on" with color 0, "off" with color 0 
-* 1: "on" with color 1, "off" with color 0 
-* 2: "on" with color 2, "off" with color 0 
-* 3: "on" with color 3, "off" with color 0 
-* 4: "on" with color 0, "off" with color 1 
-* 5: "on" with color 1, "off" with color 0 
-* 6: "on" with color 2, "off" with color 1 
-* 7: "on" with color 3, "off" with color 1 
-* 8: "on" with color 0, "off" with color 2 
-* 9: "on" with color 1, "off" with color 2 
-* a: "on" with color 2, "off" with color 0 
-* b: "on" with color 3, "off" with color 2 
-* c: "on" with color 0, "off" with color 3 
-* d: "on" with color 1, "off" with color 3 
-* e: "on" with color 2, "off" with color 3 
-* f: "on" with color 3, "off" with color 0 
++ <table>
++ <tr><th>low nibble</th><th>"on" color</th><th>"off" color</th></tr>
++ <tr><td>0</td><td>0</td><td>0</td></tr>
++ <tr><td>1</td><td>1</td><td>0</td></tr>
++ <tr><td>2</td><td>2</td><td>0</td></tr>
++ <tr><td>3</td><td>3</td><td>0</td></tr>
++ <tr><td>4</td><td>0</td><td>1</td></tr>
++ <tr><td>5</td><td>1</td><td>0</td></tr>
++ <tr><td>6</td><td>2</td><td>1</td></tr>
++ <tr><td>7</td><td>3</td><td>1</td></tr>
++ <tr><td>8</td><td>0</td><td>2</td></tr>
++ <tr><td>9</td><td>1</td><td>2</td></tr>
++ <tr><td>a</td><td>2</td><td>0</td></tr>
++ <tr><td>b</td><td>3</td><td>2</td></tr>
++ <tr><td>c</td><td>0</td><td>3</td></tr>
++ <tr><td>d</td><td>1</td><td>3</td></tr>
++ <tr><td>e</td><td>2</td><td>3</td></tr>
++ <tr><td>f</td><td>3</td><td>0</td></tr>
++ </table>
+& * 0: "on" with color 0, "off" with color 0 
+& * 1: "on" with color 1, "off" with color 0 
+& * 2: "on" with color 2, "off" with color 0 
+& * 3: "on" with color 3, "off" with color 0 
+& * 4: "on" with color 0, "off" with color 1 
+& * 5: "on" with color 1, "off" with color 0 
+& * 6: "on" with color 2, "off" with color 1 
+& * 7: "on" with color 3, "off" with color 1 
+& * 8: "on" with color 0, "off" with color 2 
+& * 9: "on" with color 1, "off" with color 2 
+& * a: "on" with color 2, "off" with color 0 
+& * b: "on" with color 3, "off" with color 2 
+& * c: "on" with color 0, "off" with color 3 
+& * d: "on" with color 1, "off" with color 3 
+& * e: "on" with color 2, "off" with color 3 
+& * f: "on" with color 3, "off" with color 0 
 
 
 ## hello sprite(s)
@@ -676,7 +692,7 @@ and the following code will draw it with all 16 combinations of color, with an o
 => ./img/screenshot_uxn-tiles.png screenshot of the output of the program, showing 16 squares colored with different combinations of outline and fill.
 
 ```
-( hello-sprite.tal )
+( hello-sprites.tal )
 
 ( devices )
 |00 @System  [ &vector $2 &pad      $6  &r $2  &g $2  &b $2 ]
@@ -732,34 +748,34 @@ BRK
 note that in this case, the INC-X and INC-Y macros increment each coordinate by 0008: that's the size of the tile.
 
 
+# designing sprites
 
-
-* sprites: chr format, nasu
-* draw sprites
-* stack operations
-* practice: manual repetition of sprite
-
-
-new mode: short mode
+TODO
 
 => https://wiki.xxiivv.com/site/nasu.html nasu
 
+# drawing 2bpp sprites
 
-# new instructions
+TODO
+
+# practice
+
+TODO
+
+# instructions of day 2
+
+today we covered the short mode, that indicates the cpu that it should operate with words that are 2 bytes long.
 
 these are the instructions we covered today:
 
 new instructions: DEI, BRK, MUL, DIV, SWP, OVR, ROT, DUP, POP
 
-
-* ADD: take the top two elements from the stack, add them, and push down the result ( a b -- a+b )
-* SUB: take the top two elements from the stack, subtract them, and push down the result ( a b -- a-b )
-* LIT: push the next byte in memory down onto the stack
-* DEO: output the given byte into the given device address, both taken from the stack ( byte address -- )
+* DEI: read a value into the stack, from the device address given in the stack ( address -- value )
+* BRK: break the flow of the program, in order to close subroutines
 
 # day 3
 
-stay tuned for the next sections! 
+stay tuned for the next sections of the <(uxn tutorial)>! 
 
 # support