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

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

js/solutions/game.js

@@ -0,0 +1,21 @@
+// m05 game: one `update` function turns every action into a new state; replay is a fold over actions.
+import { turn } from './rules.js'
+import { tick } from './spawn.js'
+
+/** Tick and Turn are handled here; other actions leave the state alone (m10 adds more). */
+export const update = (state, action) => {
+  switch (action.tag) {
+    case 'Tick': return tick(state)
+    case 'Turn': return turn(state, action.dir)
+    default: return state
+  }
+}
+
+/** Fold the actions over the state, left to right. */
+export const replay = (state, actions) => actions.reduce(update, state)
+
+/** Like replay, but keeps each intermediate state. Recursion instead of mutation: no array is ever pushed to. */
+export const history = (state, actions) =>
+  actions.length === 0
+    ? [state]
+    : [state, ...history(update(state, actions[0]), actions.slice(1))]

js/solutions/view.js

@@ -0,0 +1,30 @@
+// m06 view: the picture is plain data (a list of shapes); drawing it is somebody else's job (m07).
+
+/** Pixels per board cell. */
+export const CELL = 20
+
+const rect = (x, y, w, h, color) => ({ tag: 'Rect', x, y, w, h, color })
+const text = (x, y, str, size, align) => ({ tag: 'Text', x, y, text: str, color: '#ffffff', size, align })
+
+// One cell, inset by 1px so neighbouring segments show a gap.
+const cell = (p, color) => rect(p.x * CELL + 1, p.y * CELL + 1, CELL - 2, CELL - 2, color)
+
+const overlay = (state) => {
+  const cx = (state.width * CELL) / 2
+  const cy = (state.height * CELL) / 2
+  const banner = (title, hint) => [text(cx, cy, title, 32, 'center'), text(cx, cy + 30, hint, 16, 'center')]
+  switch (state.status) {
+    case 'Paused': return banner('Paused', 'Press Space to resume')
+    case 'GameOver': return banner('Game Over', 'Press R to restart')
+    case 'Won': return banner('You Win!', 'Press R to restart')
+    default: return []
+  }
+}
+
+export const view = (state) => [
+  rect(0, 0, state.width * CELL, state.height * CELL, '#111111'),
+  ...(state.apple === null ? [] : [cell(state.apple, '#e53935')]),
+  ...state.snake.map((p, i) => cell(p, i === 0 ? '#7cb342' : '#43a047')),
+  text(6, 18, `Score: ${state.score}`, 16, 'left'),
+  ...overlay(state),
+]

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

js/test/m04-spawn.test.js

@@ -13,6 +13,7 @@ const fixtureTests = (name, f) => {
 fixtureTests('m04-free-cells', freeCells)
 fixtureTests('m04-spawn', spawnApple)
 fixtureTests('m04-new-game', newGame)
+fixtureTests('m04-tick', tick)
 
 // 3x2 board, one-cell snake, about to eat the apple at (1,0)
 const eating = freeze({

js/test/m05-game.test.js

@@ -0,0 +1,26 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { update, replay, history } from '../src/game.js'
+import { loadFixture, freeze } from './helpers.js'
+
+const fixtureTests = (name, f) => {
+  const fx = loadFixture(name)
+  fx.cases.forEach((c) =>
+    test(`m05 ${fx.function}: ${c.name}`, () => assert.deepStrictEqual(f(...freeze(c.args)), c.expected)))
+}
+
+fixtureTests('m05-update', update)
+fixtureTests('m05-replay', replay)
+fixtureTests('m05-history', history)
+
+test('m05 history has one more state than there are actions', () => {
+  const [state, actions] = loadFixture('m05-replay').cases[0].args
+  assert.equal(history(freeze(state), freeze(actions)).length, actions.length + 1)
+})
+
+test('m05 history starts at the start state and ends where replay ends', () => {
+  const [state, actions] = freeze(loadFixture('m05-replay').cases[0].args)
+  const states = history(state, actions)
+  assert.deepStrictEqual(states[0], state)
+  assert.deepStrictEqual(states[states.length - 1], replay(state, actions))
+})

js/test/m06-view.test.js

@@ -0,0 +1,10 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { CELL, view } from '../src/view.js'
+import { loadFixture, freeze } from './helpers.js'
+
+test('m06 CELL is 20 pixels', () => assert.equal(CELL, 20))
+
+const fx = loadFixture('m06-view')
+fx.cases.forEach((c) =>
+  test(`m06 ${fx.function}: ${c.name}`, () => assert.deepStrictEqual(view(...freeze(c.args)), c.expected)))