feat(js): m05 game and m06 view with fixtures and tests

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

js/src/game.js

@@ -0,0 +1,14 @@
+import { todo } from './todo.js'
+
+/**
+ * The one function that says how the game changes: `(state, action) -> state`.
+ * `Tick` runs a game step (`tick`), `Turn` asks to change direction (`turn`);
+ * every other action returns the state unchanged for now.
+ */
+export const update = (state, action) => todo('m05')
+
+/** Apply all actions in order, starting from `state`, and return the final state. */
+export const replay = (state, actions) => todo('m05')
+
+/** Like `replay`, but keep every state: `[state, afterFirst, afterSecond, ...]`, so its length is `actions.length + 1`. */
+export const history = (state, actions) => todo('m05')

js/src/view.js

@@ -0,0 +1,17 @@
+import { todo } from './todo.js'
+
+/** Pixels per board cell. */
+export const CELL = 20
+
+/**
+ * Describe the picture as data: an array of shapes, drawn in order.
+ * `{tag:'Rect', x, y, w, h, color}` and `{tag:'Text', x, y, text, color, size, align}`.
+ * Order: background Rect(0,0,width*CELL,height*CELL,'#111111'); the apple (if any) as
+ * Rect(ax*CELL+1, ay*CELL+1, CELL-2, CELL-2, '#e53935'); each snake segment in list order, same size,
+ * head '#7cb342' and body '#43a047'; Text(6,18,'Score: <n>','#ffffff',16,'left');
+ * then an overlay centred at (width*CELL/2, height*CELL/2), all '#ffffff':
+ * Paused: 'Paused' (size 32) and, 30px lower, 'Press Space to resume' (size 16);
+ * GameOver: 'Game Over' + 'Press R to restart'; Won: 'You Win!' + 'Press R to restart'; Playing: none.
+ * Text in the overlay uses align 'center'.
+ */
+export const view = (state) => todo('m06')