Build a Conway's Game of Life explorer as a static page in this directory: index.html, …

claude-codeclaude-opus-4-7 · 95 steps · 10m 39s · 6 filessession fdbd35e0-969@patrick-toulme
Build a Conway's Game of Life explorer as a static page in this directory: index.html, style.css, life.js. Canvas grid with play/pause/step/clear, speed slider, drag-to-draw cells, a library of classic patterns (glider, glider gun, pulsar) placeable by click, wrap-around edges toggle, generation counter, dark theme, and tests.html + tests.js exercising the next-generation rules. Run the tests headless with node and fix what fails.
same matchclaude-code · 106 steps claude-code · 93 steps claude-code · 29 steps claude-code · 95 steps
compare in arena
step 74 / 95
tests.jschange 2/2
import {
  createGrid,
  cloneGrid,
  nextGeneration,
  countNeighbors,
  placePattern,
  PATTERNS,
} from './life.js';
 
function eq(a, b) {
  return JSON.stringify(a) === JSON.stringify(b);
}
 
function g(rows) {
  return rows.map((row) =>
    row.split('').map((ch) => (ch === 'O' || ch === 'X' || ch === '1' ? 1 : 0)),
  );
}
 
function totalLive(grid) {
  let n = 0;
  for (const row of grid) for (const v of row) if (v) n++;
  return n;
}
 
function assert(cond, msg) {
  if (!cond) throw new Error(msg || 'assertion failed');
}
 
const tests = [
  {
    name: 'empty grid stays empty',
    fn: () => {
      const empty = createGrid(6, 6);
      assert(eq(nextGeneration(empty), empty), 'empty should not change');
    },
  },
  {
    name: 'lone live cell dies from underpopulation',
    fn: () => {
      const grid = g([
        '.....',
        '.....',
        '..O..',
        '.....',
        '.....',
      ]);
      assert(totalLive(nextGeneration(grid)) === 0, 'lone cell should die');
    },
  },
  {
    name: 'block (2x2) is a still life',
    fn: () => {
      const grid = g([
        '....',
        '.OO.',
        '.OO.',
        '....',
      ]);
      assert(eq(nextGeneration(grid), grid), 'block should not change');
    },
  },
  {
    name: 'blinker rotates horizontal to vertical',
    fn: () => {
      const grid = g([
        '.....',
        '.....',
        '.OOO.',
        '.....',
        '.....',
      ]);
      const expected = g([
        '.....',
        '..O..',
        '..O..',
        '..O..',
        '.....',
      ]);
      assert(eq(nextGeneration(grid), expected), 'blinker did not rotate');
    },
  },
  {
    name: 'blinker has period 2',
    fn: () => {
      const grid = g([
        '.....',
        '.....',
        '.OOO.',
        '.....',
        '.....',
      ]);
      assert(eq(nextGeneration(nextGeneration(grid)), grid), 'not period 2');
    },
  },
  {
    name: 'live cell with 4+ neighbors dies from overpopulation',
    fn: () => {
      const grid = g([
        'OOO',
        'OOO',
        'OOO',
      ]);
      const next = nextGeneration(grid);
      assert(next[1][1] === 0, 'centre with 8 neighbors should die');
    },
  },
  {
    name: 'live cell with 2 or 3 neighbors survives',
    fn: () => {
      const three = g([
        'OOO',
        '...',
        '...',
      ]);
      // centre live cell (0,1) has 2 neighbors -> survives
      assert(nextGeneration(three)[0][1] === 1, 'B3/S23 survive fail');
    },
  },
  {
    name: 'dead cell with exactly 3 neighbors becomes alive',
    fn: () => {
      const grid = g([
        '.O.',
        'O.O',
        '...',
      ]);
      assert(nextGeneration(grid)[1][1] === 1, 'birth rule failed');
    },
  },
  {
    name: 'dead cell with 2 or 4 neighbors stays dead',
    fn: () => {
      const two = g([
        'O.O',
        '...',
        '...',
      ]);
      assert(nextGeneration(two)[0][1] === 0, '2 neighbors should not birth');
      const four = g([
        'O.O',
        '...',
        'O.O',
      ]);
      assert(nextGeneration(four)[1][1] === 0, '4 neighbors should not birth');
    },
  },
  {
    name: 'countNeighbors: interior cell',
    fn: () => {
      const grid = g([
        'OOO',
        'O.O',
        'OOO',
      ]);
      assert(countNeighbors(grid, 1, 1, false) === 8, 'centre should have 8');
    },
  },
  {
    name: 'countNeighbors: bounded edge does not wrap',
    fn: () => {
      const grid = g([
        'O..',
        '...',
        '..O',
      ]);
      // top-left corner counts only in-bounds neighbors -> 0
      assert(countNeighbors(grid, 0, 0, false) === 0, 'no wrap: expect 0');
    },
  },
  {
    name: 'countNeighbors: wrap counts opposite-corner neighbor',
    fn: () => {
      const grid = g([
        'O..',
        '...',
        '..O',
      ]);
      // with wrap, (0,0) sees (2,2) diagonally
      assert(countNeighbors(grid, 0, 0, true) === 1, 'wrap: expect 1');
    },
  },
  {
−    name: 'wrap-around: blinker across the vertical seam',
    name: 'wrap-around: horizontal blinker across the vertical seam rotates',
    fn: () => {
−      // A 3-cell vertical blinker split across top and bottom rows.
      // 3-cell horizontal blinker split across the wrap seam:
      // live cells at (2,4), (2,0), (2,1) are 3-in-a-row when wrapping.
      const grid = g([
−        '.O.',
−        '...',
−        '.O.',
        '.....',
        '.....',
        'OO..O',
        '.....',
        '.....',
      ]);
−      // Row-height is 3, so (0,1), (2,1), and wrap sees them as adjacent.
−      // Together with wrap this is a period-2 oscillator around (1,1).
−      const one = nextGeneration(grid, true);
−      // Expect the middle row lights up as the blinker rotates.
      const expected = g([
−        '...',
−        'OOO',
−        '...',
        '.....',
        'O....',
        'O....',
        'O....',
        '.....',
      ]);
−      assert(eq(one, expected), 'wrap blinker did not rotate as expected');
−      assert(eq(nextGeneration(one, true), grid), 'wrap blinker not period 2');
      const one = nextGeneration(grid, true);
      assert(eq(one, expected), 'wrap seam blinker did not rotate');
      assert(eq(nextGeneration(one, true), grid), 'wrap seam blinker not period 2');
    },
  },
  {
    name: 'glider translates by (1,1) after 4 generations',
    fn: () => {
      const rows = 12;
      const cols = 12;
      let grid = createGrid(rows, cols);
      placePattern(grid, PATTERNS.glider, 1, 1);
      for (let i = 0; i < 4; i++) grid = nextGeneration(grid);
      const expected = createGrid(rows, cols);
      placePattern(expected, PATTERNS.glider, 2, 2);
      assert(eq(grid, expected), 'glider did not shift diagonally');
    },
  },
  {
    name: 'pulsar has period 3',
    fn: () => {
      const rows = 21;
      const cols = 21;
      const start = createGrid(rows, cols);
      placePattern(start, PATTERNS.pulsar, 4, 4);
      let grid = cloneGrid(start);
      for (let i = 0; i < 3; i++) grid = nextGeneration(grid);
      assert(eq(grid, start), 'pulsar did not return in 3 steps');
      // and it should not be a still life
      assert(!eq(nextGeneration(start), start), 'pulsar was static, not oscillating');
    },
  },
  {
    name: 'glider gun produces new gliders (population grows)',
    fn: () => {
      const rows = 40;
      const cols = 60;
      let grid = createGrid(rows, cols);
      placePattern(grid, PATTERNS.gliderGun, 1, 1);
      const initial = totalLive(grid);
      assert(initial === 36, `expected 36 live cells in gun, got ${initial}`);
      for (let i = 0; i < 30; i++) grid = nextGeneration(grid);
      const after30 = totalLive(grid);
      assert(
        after30 === initial + 5,
        `expected 41 live cells after 30 gens (gun + 1 glider), got ${after30}`,
      );
      for (let i = 0; i < 30; i++) grid = nextGeneration(grid);
      const after60 = totalLive(grid);
      assert(
        after60 === initial + 10,
        `expected 46 live cells after 60 gens (gun + 2 gliders), got ${after60}`,
      );
    },
  },
  {
    name: 'nextGeneration does not mutate the input grid',
    fn: () => {
      const grid = g([
        '.....',
        '.....',
        '.OOO.',
        '.....',
        '.....',
      ]);
      const snapshot = JSON.stringify(grid);
      nextGeneration(grid);
      assert(JSON.stringify(grid) === snapshot, 'input grid was mutated');
    },
  },
  {
    name: 'placePattern respects bounds without wrap',
    fn: () => {
      const grid = createGrid(4, 4);
      placePattern(grid, PATTERNS.glider, 3, 3);
      // only the (0,1)=1 cell would land at (3,4), out of bounds. Actually:
      // glider live cells at offsets (0,1),(1,2),(2,0),(2,1),(2,2)
      // from (3,3): (3,4),(4,5),(5,3),(5,4),(5,5) -- all out of bounds
      assert(totalLive(grid) === 0, 'out-of-bounds cells should be skipped');
    },
  },
  {
    name: 'placePattern wraps live cells with wrap=true',
    fn: () => {
      const grid = createGrid(4, 4);
      placePattern(grid, PATTERNS.glider, 3, 3, true);
      // With wrap, each of the 5 live cells lands somewhere in the 4x4 grid.
      assert(totalLive(grid) === 5, 'wrapped placement should keep 5 cells');
    },
  },
];
 
async function runTests() {
  const results = [];
  for (const t of tests) {
    try {
      t.fn();
      results.push({ name: t.name, passed: true });
    } catch (e) {
      results.push({ name: t.name, passed: false, error: e.message || String(e) });
    }
  }
  return results;
}
 
function isBrowser() {
  return typeof document !== 'undefined';
}
 
if (isBrowser()) {
  runTests().then((results) => {
    const summary = document.getElementById('summary');
    const container = document.getElementById('results');
    const passed = results.filter((r) => r.passed).length;
    const total = results.length;
    summary.textContent = `${passed} / ${total} passing`;
    summary.className = 'test-summary ' + (passed === total ? 'ok' : 'fail');
    for (const r of results) {
      const div = document.createElement('div');
      div.className = 'test ' + (r.passed ? 'ok' : 'fail');
      const mark = r.passed ? '[PASS]' : '[FAIL]';
      div.textContent = `${mark} ${r.name}${r.error ? ' — ' + r.error : ''}`;
      container.appendChild(div);
    }
  });
} else {
  runTests().then((results) => {
    let failed = 0;
    for (const r of results) {
      const mark = r.passed ? '[PASS]' : '[FAIL]';
      const line = `${mark} ${r.name}${r.error ? ' — ' + r.error : ''}`;
      console.log(line);
      if (!r.passed) failed++;
    }
    const total = results.length;
    console.log(`\n${total - failed}/${total} passing`);
    process.exit(failed > 0 ? 1 : 0);
  });
}
 
341 linesjs
Edits …/tests.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#claude #claude-code #claude-opus-4-7 #css #game #graphics #html #javascript #medium #skills #subagents #testing
m4-opus47
← all sessions