Files
functional-programming-snake/js/solutions/view.js
T
Lucas WintherandClaude Fable 5.2 edd57f0148 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>
2026-11-11 12:05:29 +01:00

35 lines
1.5 KiB
JavaScript

// m06 view: the picture is plain data (a list of shapes); drawing it is somebody else's job (m07).
/** @import { GameState, Scene, Shape, Align } from './types' */
/** Pixels per board cell. */
export const CELL = 20
/** @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, size: number, align: Align) => Shape} */
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 []
}
}
/** @type {(state: GameState) => Scene} */
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),
]