feat(js): m09 input, app, runtime, browser, main, index.html and smoke test

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

js/test/m09-app.test.js

@@ -0,0 +1,50 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { states, classicActions, render, main, TICK_MS } from '../src/app.js'
+import { run } from '../src/stream.js'
+import { trace } from '../src/io.js'
+import { view } from '../src/view.js'
+import { newGame } from '../src/spawn.js'
+import { Action } from '../src/model.js'
+import { freeze } from './helpers.js'
+
+const time = (t) => ({ tag: 'Time', t })
+const down = (key) => ({ tag: 'KeyDown', key })
+
+test('m09 the game ticks every 150 ms', () => assert.equal(TICK_MS, 150))
+
+test('m09 classicActions turns Tick into actions on the clock and keys into Turn actions', () =>
+  assert.deepStrictEqual(
+    run(classicActions, freeze([time(150), down('ArrowUp'), down('x'), time(300)])),
+    [Action.Tick, Action.Turn('Up'), Action.Tick]))
+
+test('m09 states starts with the new game, then yields one state per action', () => {
+  const out = run(states(42, classicActions), freeze([time(150), down('ArrowUp'), time(300)]))
+  assert.equal(out.length, 4)
+  assert.deepStrictEqual(out[0], newGame(42))
+  assert.deepStrictEqual(out.map((s) => s.snake[0]), [
+    { x: 10, y: 10 }, { x: 11, y: 10 }, { x: 11, y: 10 }, { x: 11, y: 9 },
+  ])
+  assert.deepStrictEqual(out.map((s) => s.nextDir), ['Right', 'Right', 'Up', 'Up'])
+  assert.deepStrictEqual(out.map((s) => s.dir), ['Right', 'Right', 'Right', 'Up'])
+})
+
+test('m09 render draws the whole view of the state', () =>
+  assert.deepStrictEqual(trace(render(newGame(42)), 0).ops, view(newGame(42)).map((shape) => ({ tag: 'Draw', shape }))))
+
+test('m09 main asks for a random seed, then builds the stream from it', () => {
+  const { ops, result: stream } = trace(main, 42)
+  assert.deepStrictEqual(ops, [{ tag: 'RandomSeed' }])
+  const [outs] = stream.step(time(0))
+  assert.equal(outs.length, 1)
+  assert.deepStrictEqual(trace(outs[0], 0).ops, trace(render(newGame(42)), 0).ops)
+})
+
+test('m09 main with seed 42 draws the new game first, then the ticked game after 150 ms', () => {
+  const { result: stream } = trace(main, 42)
+  const [first, next] = stream.step(time(0))
+  const [second] = next.step(time(150))
+  assert.deepStrictEqual(trace(first[0], 0).ops.map((o) => o.shape), view(newGame(42)))
+  assert.equal(second.length, 1)
+  assert.notDeepEqual(trace(second[0], 0).ops, trace(first[0], 0).ops)
+})

js/test/m09-input.test.js

@@ -0,0 +1,8 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { keyToAction } from '../src/input.js'
+import { loadFixture } from './helpers.js'
+
+const fx = loadFixture('m09-input')
+fx.cases.forEach((c) =>
+  test(`m09 ${fx.function}: ${c.name}`, () => assert.deepStrictEqual(keyToAction(...c.args), c.expected)))

js/test/m09-runtime.test.js

@@ -0,0 +1,113 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { runIO, runApp } from '../src/runtime.js'
+import { pure, draw, randomSeed, map, sequence } from '../src/io.js'
+import { main } from '../src/app.js'
+import { view } from '../src/view.js'
+import { newGame, tick } from '../src/spawn.js'
+
+// A fake platform: records every call and lets the test fire events by hand.
+const fakePlatform = (seed = 42) => {
+  const calls = []
+  const handlers = {}
+  return {
+    calls,
+    fillRect: (...args) => calls.push(['fillRect', ...args]),
+    fillText: (...args) => calls.push(['fillText', ...args]),
+    randomSeed: () => { calls.push(['randomSeed']); return seed },
+    startClock: (cb) => { handlers.time = cb },
+    onKeyDown: (cb) => { handlers.down = cb },
+    onKeyUp: (cb) => { handlers.up = cb },
+    fireTime: (t) => handlers.time(t),
+    fireKey: (k) => handlers.down(k),
+    fireKeyUp: (k) => handlers.up(k),
+  }
+}
+
+// What the platform should have been asked to draw for a scene.
+const expectedCalls = (scene) =>
+  scene.map((s) =>
+    s.tag === 'Rect'
+      ? ['fillRect', s.x, s.y, s.w, s.h, s.color]
+      : ['fillText', s.x, s.y, s.text, s.color, s.size, s.align])
+
+const rect = { tag: 'Rect', x: 1, y: 2, w: 3, h: 4, color: '#abcdef' }
+const text = { tag: 'Text', x: 5, y: 6, text: 'hi', color: '#fff', size: 16, align: 'center' }
+
+test('m09 runIO of a pure value returns it without touching the platform', () => {
+  const p = fakePlatform()
+  assert.equal(runIO(pure(7), p), 7)
+  assert.deepStrictEqual(p.calls, [])
+})
+
+test('m09 runIO maps Draw Rect to fillRect(x, y, w, h, color)', () => {
+  const p = fakePlatform()
+  runIO(draw(rect), p)
+  assert.deepStrictEqual(p.calls, [['fillRect', 1, 2, 3, 4, '#abcdef']])
+})
+
+test('m09 runIO maps Draw Text to fillText(x, y, text, color, size, align)', () => {
+  const p = fakePlatform()
+  runIO(draw(text), p)
+  assert.deepStrictEqual(p.calls, [['fillText', 5, 6, 'hi', '#fff', 16, 'center']])
+})
+
+test('m09 runIO answers RandomSeed with platform.randomSeed() and continues with it', () => {
+  const p = fakePlatform(99)
+  assert.equal(runIO(map(randomSeed, (s) => s + 1), p), 100)
+  assert.deepStrictEqual(p.calls, [['randomSeed']])
+})
+
+test('m09 runIO performs effects in order', () => {
+  const p = fakePlatform()
+  runIO(sequence([draw(rect), draw(text), draw(rect)]), p)
+  assert.deepStrictEqual(p.calls.map((c) => c[0]), ['fillRect', 'fillText', 'fillRect'])
+})
+
+test('m09 runIO handles 100000 effects without overflowing the stack', () => {
+  const p = fakePlatform()
+  const n = 100_000
+  runIO(sequence(Array.from({ length: n }, () => draw(rect))), p)
+  assert.equal(p.calls.length, n)
+})
+
+test('m09 runApp asks the platform for a seed once, at start, and draws nothing before the first input', () => {
+  const p = fakePlatform()
+  runApp(main, p)
+  assert.deepStrictEqual(p.calls, [['randomSeed']])
+})
+
+test('m09 runApp draws the initial scene on the first clock tick, then the ticked scene after 150 ms', () => {
+  const p = fakePlatform(42)
+  runApp(main, p)
+  p.calls.length = 0
+  p.fireTime(150)
+  assert.deepStrictEqual(p.calls, [
+    ...expectedCalls(view(newGame(42))),
+    ...expectedCalls(view(tick(newGame(42)))),
+  ])
+})
+
+test('m09 runApp feeds key presses to the game', () => {
+  const p = fakePlatform(42)
+  runApp(main, p)
+  p.fireTime(0)
+  p.calls.length = 0
+  p.fireKey('ArrowUp')
+  p.fireTime(150)
+  const turned = { ...newGame(42), nextDir: 'Up' }
+  assert.deepStrictEqual(p.calls, [
+    ...expectedCalls(view(turned)),
+    ...expectedCalls(view(tick(turned))),
+  ])
+})
+
+test('m09 runApp ignores key releases and unmapped keys (no redraw)', () => {
+  const p = fakePlatform(42)
+  runApp(main, p)
+  p.fireTime(0)
+  p.calls.length = 0
+  p.fireKeyUp('ArrowUp')
+  p.fireKey('x')
+  assert.deepStrictEqual(p.calls, [])
+})