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

claude-codeclaude-opus-4-8 · 29 steps · 5m 29s · 5 filessession d7727762-24d@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 12 / 29
tests.jschange 1/1
/*
 * Tests for the Game of Life next-generation rules.
 * Runs headless under Node (`node tests.js`) and in the browser (tests.html).
 */
(function () {
  'use strict';
 
  const isNode = typeof module !== 'undefined' && typeof require !== 'undefined';
  const Life = isNode ? require('./life.js') : window.Life;
 
  const results = [];
  function record(pass, msg, detail) {
    results.push({ pass: pass, msg: msg, detail: detail || '' });
  }
 
  function assert(cond, msg) {
    record(!!cond, msg);
  }
 
  function assertGrid(actual, expected, msg) {
    const a = JSON.stringify(actual);
    const e = JSON.stringify(expected);
    record(a === e, msg, a === e ? '' : 'expected ' + e + ' got ' + a);
  }
 
  // Build a grid from ASCII art. 'O', '#', '1', or '*' mean a live cell.
  function fromAscii(rows) {
    return rows.map(function (line) {
      return line.split('').map(function (ch) {
        return ch === 'O' || ch === '#' || ch === '1' || ch === '*' ? 1 : 0;
      });
    });
  }
 
  // ==========================================================================
  // 1. Still life: a 2x2 block never changes.
  // ==========================================================================
  (function () {
    const block = fromAscii([
      '....',
      '.OO.',
      '.OO.',
      '....',
    ]);
    assertGrid(Life.step(block, false), block, 'Block is a stable still life');
  })();
 
  // ==========================================================================
  // 2. Oscillator: a blinker flips between horizontal and vertical (period 2).
  // ==========================================================================
  (function () {
    const horizontal = fromAscii([
      '.....',
      '.....',
      '.OOO.',
      '.....',
      '.....',
    ]);
    const vertical = fromAscii([
      '.....',
      '..O..',
      '..O..',
      '..O..',
      '.....',
    ]);
    const g1 = Life.step(horizontal, false);
    assertGrid(g1, vertical, 'Blinker: horizontal -> vertical');
    const g2 = Life.step(g1, false);
    assertGrid(g2, horizontal, 'Blinker: vertical -> horizontal (period 2)');
  })();
 
  // ==========================================================================
  // 3. Underpopulation: a lone live cell dies.
  // ==========================================================================
  (function () {
    const g = fromAscii([
      '...',
      '.O.',
      '...',
    ]);
    const next = Life.step(g, false);
    assert(next[1][1] === 0, 'Lone cell dies from underpopulation');
  })();
 
  // ==========================================================================
  // 4. A live cell with exactly two neighbours survives.
  // ==========================================================================
  (function () {
    // Center cell has two live neighbours (the ends of a blinker), so it lives.
    const g = fromAscii([
      '.....',
      '.....',
      '.OOO.',
      '.....',
      '.....',
    ]);
    const next = Life.step(g, false);
    assert(next[2][2] === 1, 'Live cell with 2 neighbours survives');
  })();
 
  // ==========================================================================
  // 5. Overpopulation: a live cell with 4+ neighbours dies.
  // ==========================================================================
  (function () {
    // Center is live and surrounded by all 8 (well, 4 orthogonal + itself
    // arrangement) — use a plus-with-center to give the center 4 neighbours.
    const g = fromAscii([
      '.....',
      '..O..',
      '.OOO.',
      '..O..',
      '.....',
    ]);
    const next = Life.step(g, false);
    assert(next[2][2] === 0, 'Live cell with 4 neighbours dies (overpopulation)');
  })();
 
  // ==========================================================================
  // 6. Birth: a dead cell with exactly three neighbours becomes alive.
  // ==========================================================================
  (function () {
    const g = fromAscii([
      '.....',
      '.OO..',
      '.O...',
      '.....',
      '.....',
    ]);
    // Dead cell (1,2)... check (2,2): neighbours are (1,1),(1,2? dead)...
    // Cell (2,2) has neighbours (1,1),(1,2)->wait build explicitly below.
    const next = Life.step(g, false);
    // Cell (2,2): neighbours (1,1)=1,(1,2)=1,(2,1)=1 => exactly 3 => born.
    assert(next[2][2] === 1, 'Dead cell with exactly 3 neighbours is born');
  })();
 
  // ==========================================================================
  // 7. countNeighbors correctness (interior, edge no-wrap, edge with wrap).
  // ==========================================================================
  (function () {
    const g = fromAscii([
      'O.O',
      '...',
      'O.O',
    ]);
    // Center (1,1) has all four corners live => 4 neighbours.
    assert(Life.countNeighbors(g, 1, 1, false) === 4, 'countNeighbors interior = 4');
 
    // Corner (0,0) without wrap: only in-bounds neighbours are (0,1),(1,0),(1,1)
    // which are all dead => 0.
    assert(Life.countNeighbors(g, 0, 0, false) === 0, 'countNeighbors corner no-wrap = 0');
 
    // Corner (0,0) WITH wrap sees the three other corners plus edges. The live
    // cells adjacent by wrap are (0,2),(2,0),(2,2) => 3.
    assert(Life.countNeighbors(g, 0, 0, true) === 3, 'countNeighbors corner wrap = 3');
  })();
 
  // ==========================================================================
  // 8. Wrap-around behaviour vs. bounded edges.
  // ==========================================================================
  (function () {
    // A vertical blinker straddling the top/bottom edge.
    // Column 1 live at rows 0, 2 (and we want row 1 to check births via wrap).
    const g = fromAscii([
      '.O.',
      '...',
      '.O.',
    ]);
    // With wrap, cell (1,1) neighbours include (0,1)=1,(2,1)=1 and via wrap the
    // wrapped row copies -> gives it 3 neighbours (0,1),(2,1) plus wrap of the
    // opposite edge column which is the same two cells counted once each... it
    // stays 2 here, so let's assert something concrete instead:
    // Cell (1,1) neighbours with wrap: (0,0),(0,1)=1,(0,2),(1,0),(1,2),(2,0),
    // (2,1)=1,(2,2) => 2 neighbours. Without wrap it's the same interior => 2.
    assert(Life.countNeighbors(g, 1, 1, true) === 2, 'wrap neighbour count sanity');
 
    // Now a real wrap effect: a single live cell in the top-left corner should,
    // with wrap on, contribute to counts at the opposite corner.
    const g2 = Life.makeGrid(4, 4);
    g2[0][0] = 1;
    assert(Life.countNeighbors(g2, 3, 3, true) === 1, 'top-left cell wraps to bottom-right neighbourhood');
    assert(Life.countNeighbors(g2, 3, 3, false) === 0, 'no wrap: opposite corner sees nothing');
  })();
 
  // ==========================================================================
  // 9. Glider translates by (+1, +1) every 4 generations.
  // ==========================================================================
  (function () {
    const size = 12;
    let g = Life.makeGrid(size, size);
    Life.placePattern(g, Life.PATTERNS.glider.cells, 1, 1, false);
    const startPop = Life.population(g);
 
    let moved = g;
    for (let i = 0; i < 4; i++) {
      moved = Life.step(moved, false);
    }
 
    // Expected: the same glider shifted by (1,1).
    const expected = Life.makeGrid(size, size);
    Life.placePattern(expected, Life.PATTERNS.glider.cells, 2, 2, false);
 
    assertGrid(moved, expected, 'Glider translates by (1,1) after 4 generations');
    assert(Life.population(moved) === startPop, 'Glider preserves its 5-cell population');
  })();
 
  // ==========================================================================
  // 10. Pulsar is a period-3 oscillator (returns to its start after 3 steps).
  // ==========================================================================
  (function () {
    const size = 17;
    let g = Life.makeGrid(size, size);
    Life.placePattern(g, Life.PATTERNS.pulsar.cells, 2, 2, false);
    let cur = g;
    for (let i = 0; i < 3; i++) {
      cur = Life.step(cur, false);
    }
    assertGrid(cur, g, 'Pulsar returns to start after 3 generations (period 3)');
    // And it should NOT already be identical after 1 step.
    assert(JSON.stringify(Life.step(g, false)) !== JSON.stringify(g),
      'Pulsar actually changes after 1 generation');
  })();
 
  // ==========================================================================
  // 11. step() returns a new grid and does not mutate the input.
  // ==========================================================================
  (function () {
    const g = fromAscii([
      '.....',
      '.OOO.',
      '.....',
    ]);
    const snapshot = JSON.stringify(g);
    Life.step(g, false);
    assert(JSON.stringify(g) === snapshot, 'step() does not mutate its input grid');
  })();
 
  // ==========================================================================
  // Reporting
  // ==========================================================================
  const passed = results.filter(function (r) { return r.pass; }).length;
  const failed = results.length - passed;
 
  if (isNode) {
    results.forEach(function (r) {
      const tag = r.pass ? '\x1b[32mPASS\x1b[0m' : '\x1b[31mFAIL\x1b[0m';
      console.log(tag + '  ' + r.msg + (r.detail ? '\n      ' + r.detail : ''));
    });
    console.log('\n' + passed + ' passed, ' + failed + ' failed, ' + results.length + ' total');
    process.exit(failed > 0 ? 1 : 0);
  } else {
    const root = document.getElementById('results');
    const summary = document.getElementById('summary');
    summary.textContent = passed + ' passed, ' + failed + ' failed, ' + results.length + ' total';
    summary.className = failed > 0 ? 'summary fail' : 'summary pass';
    results.forEach(function (r) {
      const li = document.createElement('li');
      li.className = r.pass ? 'pass' : 'fail';
      li.innerHTML = '<span class="tag">' + (r.pass ? 'PASS' : 'FAIL') + '</span>' +
        '<span class="msg">' + r.msg + '</span>' +
        (r.detail ? '<span class="detail">' + r.detail + '</span>' : '');
      root.appendChild(li);
    });
  }
})();
 
265 linesjs
Writes …/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-8 #css #game #graphics #html #javascript #quick
m3-opus48
← all sessions