feat(course): audit fixes and twelve extensions (Modules 7b, 12, 13)

Audit pass:
- Frame rule counts frames since the last move, so every step lasts
  exactly movesEvery(score) frames, also right after a speed-up
- clampTime + MAX_GAP_MS: a hidden tab no longer replays the whole gap
- Pong Restart keeps held keys
- Fact corrections (mulberry32 output coverage, Haskell IO, uniform)
- New fixture cases from a mutation analysis

Extensions (all three tracks, shared fixtures, course text):
- Turn queue (Exercise 10.6), persisted high score (10.7),
  replay viewer (10.8), play() end-to-end helper (9.5)
- Optional State (4.7) and optional Module 7b, stack-safe IO
- Module 12, property-based testing with generators, shrinking,
  invariants and a model-based oracle
- Module 13, Conway's Life with a Click event
- JS type checking via jsconfig, JSDoc and types.d.ts
- Maintainer tools: scripts/mutate.mjs, scripts/typecheck-js.sh,
  Playwright end-to-end suite (e2e/, scripts/e2e.sh)

Docs: docs/contract.md is the canonical contract; specs and build log
under docs/superpowers.

Verified: JS 728, Scala 689, F# 691 unit tests; stubs and progression
M01-M13 and M07b; 176 end-to-end tests on Chromium and WebKit.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

js/solutions/life/app.js

@@ -0,0 +1,44 @@
+// m13 life app: the same wiring as Snake and Pong, with a third kind of input, the mouse.
+import { LW, LH, LCELL, initialLife, LifeAction } from './model.js'
+import { lifeUpdate } from './rules.js'
+import { lifeView } from './view.js'
+import { map as mapIO, randomSeed, drawScene } from '../io.js'
+import { keyDowns, clicks, interval, map, filterMap, merge, scan, startWith, clampTime } from '../stream.js'
+import { MAX_GAP_MS } from '../app.js'
+/** @import { LifeState, Stream, Program } from '../types' */
+
+/** Milliseconds between two generations while the world runs. */
+export const GEN_MS = 150
+
+const keys = {
+  ' ': LifeAction.TogglePause,
+  n: LifeAction.Step, N: LifeAction.Step,
+  c: LifeAction.Clear, C: LifeAction.Clear,
+  r: LifeAction.Randomize, R: LifeAction.Randomize,
+}
+
+/** A key to an action, or null.
+ * @type {(key: string) => LifeAction | null} */
+export const lifeKey = (key) => (Object.hasOwn(keys, key) ? keys[key] : null)
+
+/** A click at canvas pixel (x, y) to `Toggle` of the cell under it, or null when it is not on the board.
+ * @type {(x: number, y: number) => LifeAction | null} */
+export const lifeClick = (x, y) => {
+  const cell = { x: Math.floor(x / LCELL), y: Math.floor(y / LCELL) }
+  return x >= 0 && y >= 0 && cell.x < LW && cell.y < LH ? LifeAction.Toggle(cell) : null
+}
+
+/** @type {Stream<LifeAction>} */
+export const lifeActions = merge(
+  merge(
+    map(interval(GEN_MS), () => LifeAction.Frame),
+    filterMap(keyDowns, lifeKey)),
+  filterMap(clicks, (p) => lifeClick(p.x, p.y)))
+
+/** @type {(seed: number, actions: Stream<LifeAction>) => Stream<LifeState>} */
+export const lifeStates = (seed, actions) =>
+  startWith(scan(actions, lifeUpdate, initialLife(seed)), initialLife(seed))
+
+/** @type {Program} */
+export const lifeMain = mapIO(randomSeed, (seed) =>
+  clampTime(map(lifeStates(seed, lifeActions), (state) => drawScene(lifeView(state))), MAX_GAP_MS))

js/solutions/life/main.js

@@ -0,0 +1,5 @@
+import { runApp } from '../runtime.js'
+import { browserPlatform } from '../browser.js'
+import { lifeMain } from './app.js'
+
+runApp(lifeMain, browserPlatform(/** @type {HTMLCanvasElement} */ (document.getElementById('game')), window))

js/solutions/life/model.js

@@ -0,0 +1,28 @@
+// m13 life model: the whole world is one value, like the snake and the match.
+
+/** @typedef {{x: number, y: number}} Point */
+/** @typedef {{cells: Point[], running: boolean, seed: number, generation: number}} LifeState */
+/** @typedef {{tag: 'Frame'} | {tag: 'Toggle', cell: Point} | {tag: 'TogglePause'} | {tag: 'Step'} | {tag: 'Clear'} | {tag: 'Randomize'}} LifeAction */
+
+// The board, in cells: LW columns, LH rows, LCELL pixels per cell. Below it the page shows a status strip.
+export const LW = 40
+export const LH = 30
+/** Pixels per cell. */
+export const LCELL = 16
+/** Height of the status strip under the board, in pixels. */
+export const STRIP = 24
+
+/** A fresh world: no live cells, paused, the given seed, generation 0.
+ * @type {(seed: number) => LifeState} */
+export const initialLife = (seed) => ({ cells: [], running: false, seed, generation: 0 })
+
+/** Everything that can happen to the world, as data. `Toggle` carries the cell that was clicked.
+ * @type {{Frame: LifeAction, Toggle: (cell: Point) => LifeAction, TogglePause: LifeAction, Step: LifeAction, Clear: LifeAction, Randomize: LifeAction}} */
+export const LifeAction = {
+  Frame: { tag: 'Frame' },
+  Toggle: (cell) => ({ tag: 'Toggle', cell }),
+  TogglePause: { tag: 'TogglePause' },
+  Step: { tag: 'Step' },
+  Clear: { tag: 'Clear' },
+  Randomize: { tag: 'Randomize' },
+}

js/solutions/life/rules.js

@@ -0,0 +1,74 @@
+// m13 life rules: the next generation is a function of the whole old board, and nothing else.
+import { LW, LH } from './model.js'
+import { intBelow } from '../random.js'
+/** @import { Point, LifeState, LifeAction } from '../types' */
+
+// Every cell of the board, row-major (y, then x). Filtering this list keeps any result in canonical order for free.
+const board = Array.from({ length: LW * LH }, (_, i) => ({ x: i % LW, y: Math.floor(i / LW) }))
+
+/** Is `p` on the board? */
+const onBoard = (p) => p.x >= 0 && p.x < LW && p.y >= 0 && p.y < LH
+
+// A cell's position in row-major order: the order the canonical list is sorted by.
+const index = (p) => p.y * LW + p.x
+
+const offsets = [[-1, -1], [0, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [0, 1], [1, 1]]
+
+/** The up to eight neighbours of `p` that are on the board (the edges are dead: nothing wraps around). */
+const neighbours = (p) => offsets.map(([dx, dy]) => ({ x: p.x + dx, y: p.y + dy })).filter(onBoard)
+
+/**
+ * One generation, B3/S23: a live cell with 2 or 3 live neighbours stays alive, a dead cell with exactly 3 is born,
+ * every other cell is dead afterwards. Every cell is judged on the *old* list only. A Set of the old cells' indices
+ * makes "is this neighbour alive?" one lookup, so a generation is 1200 x 8 lookups however many cells live.
+ * @type {(cells: Point[]) => Point[]}
+ */
+export const lifeStep = (cells) => {
+  const alive = new Set(cells.map(index))
+  const isAlive = (p) => alive.has(index(p))
+  const count = (p) => neighbours(p).filter(isAlive).length
+  return board.filter((p) => {
+    const n = count(p)
+    return n === 3 || (n === 2 && isAlive(p))
+  })
+}
+
+/** Add a dead cell or remove a live one, keeping the list sorted row-major without duplicates. Off the board: unchanged. */
+const toggle = (cells, p) =>
+  !onBoard(p) ? cells
+    : cells.some((c) => index(c) === index(p)) ? cells.filter((c) => index(c) !== index(p))
+    : [...cells.filter((c) => index(c) < index(p)), { x: p.x, y: p.y }, ...cells.filter((c) => index(c) > index(p))]
+
+/**
+ * A random board from `seed`: one `intBelow(4)` per cell in row-major order, the cell alive when the draw is 0
+ * (about one cell in four). Returns `[cells, nextSeed]`.
+ * @type {(seed: number) => [Point[], number]}
+ */
+const randomCells = (seed) => {
+  const [draws, next] = board.reduce(
+    ([ds, s], _) => {
+      const [d, s2] = intBelow(4)(s)
+      return [[...ds, d], s2]
+    },
+    /** @type {[number[], number]} */ ([[], seed]))
+  return [board.filter((_, i) => draws[i] === 0), next]
+}
+
+const nextGeneration = (state) => ({ ...state, cells: lifeStep(state.cells), generation: state.generation + 1 })
+
+/** @type {(state: LifeState, action: LifeAction) => LifeState} */
+export const lifeUpdate = (state, action) => {
+  switch (action.tag) {
+    case 'Frame': return state.running ? nextGeneration(state) : state
+    case 'Step': return state.running ? state : nextGeneration(state)
+    case 'TogglePause': return { ...state, running: !state.running }
+    // Clicking edits the world whether it runs or not: the click is one action between two generations.
+    case 'Toggle': return { ...state, cells: toggle(state.cells, action.cell) }
+    case 'Clear': return { ...state, cells: [], generation: 0 }
+    case 'Randomize': {
+      const [cells, seed] = randomCells(state.seed)
+      return { ...state, cells, seed, generation: 0 }
+    }
+    default: return state
+  }
+}

js/solutions/life/view.js

@@ -0,0 +1,20 @@
+// m13 life view: live cells as squares, and a status strip under the board.
+import { LW, LH, LCELL, STRIP } from './model.js'
+/** @import { LifeState, Scene, Shape, Align } from '../types' */
+
+/** @type {(x: number, y: number, w: number, h: number, color: string) => Shape} */
+const rect = (x, y, w, h, color) => ({ tag: 'Rect', x, y, w, h, color })
+/** @type {(x: number, y: number, str: string, align: Align) => Shape} */
+const text = (x, y, str, align) => ({ tag: 'Text', x, y, text: str, color: '#ffffff', size: 14, align })
+
+const W = LW * LCELL
+const H = LH * LCELL
+
+/** @type {(state: LifeState) => Scene} */
+export const lifeView = (state) => [
+  rect(0, 0, W, H, '#111111'),
+  ...state.cells.map((p) => rect(p.x * LCELL + 1, p.y * LCELL + 1, LCELL - 2, LCELL - 2, '#7cb342')),
+  rect(0, H, W, STRIP, '#222222'),
+  text(6, H + 17, `Generation ${state.generation}`, 'left'),
+  text(W - 6, H + 17, state.running ? 'Running: Space pauses' : 'Paused: Space runs, N steps', 'right'),
+]