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 07 / 95

life.jschange 1/1

// Conway's Game of Life — pure core plus browser UI
 
export function createGrid(rows, cols, fill = 0) {
  return Array.from({ length: rows }, () => new Array(cols).fill(fill));
}
 
export function cloneGrid(grid) {
  return grid.map((row) => row.slice());
}
 
export function countNeighbors(grid, r, c, wrap = false) {
  const rows = grid.length;
  const cols = grid[0].length;
  let count = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      let nr = r + dr;
      let nc = c + dc;
      if (wrap) {
        nr = ((nr % rows) + rows) % rows;
        nc = ((nc % cols) + cols) % cols;
      } else if (nr < 0 || nr >= rows || nc < 0 || nc >= cols) {
        continue;
      }
      if (grid[nr][nc]) count++;
    }
  }
  return count;
}
 
export function nextGeneration(grid, wrap = false) {
  const rows = grid.length;
  const cols = grid[0].length;
  const next = createGrid(rows, cols);
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const n = countNeighbors(grid, r, c, wrap);
      const alive = grid[r][c] === 1;
      if (alive && (n === 2 || n === 3)) next[r][c] = 1;
      else if (!alive && n === 3) next[r][c] = 1;
    }
  }
  return next;
}
 
function decode(rows) {
  return rows.map((row) =>
    row.split('').map((ch) => (ch === 'O' || ch === 'X' || ch === '1' ? 1 : 0)),
  );
}
 
export const PATTERNS = {
  glider: decode([
    '.O.',
    '..O',
    'OOO',
  ]),
  pulsar: decode([
    '..OOO...OOO..',
    '.............',
    'O....O.O....O',
    'O....O.O....O',
    'O....O.O....O',
    '..OOO...OOO..',
    '.............',
    '..OOO...OOO..',
    'O....O.O....O',
    'O....O.O....O',
    'O....O.O....O',
    '.............',
    '..OOO...OOO..',
  ]),
  gliderGun: decode([
    '........................O...........',
    '......................O.O...........',
    '............OO......OO............OO',
    '...........O...O....OO............OO',
    'OO........O.....O...OO..............',
    'OO........O...O.OO....O.O...........',
    '..........O.....O.......O...........',
    '...........O...O....................',
    '............OO......................',
  ]),
};
 
export function placePattern(grid, pattern, r0, c0, wrap = false) {
  const rows = grid.length;
  const cols = grid[0].length;
  for (let r = 0; r < pattern.length; r++) {
    for (let c = 0; c < pattern[r].length; c++) {
      if (!pattern[r][c]) continue;
      let nr = r0 + r;
      let nc = c0 + c;
      if (wrap) {
        nr = ((nr % rows) + rows) % rows;
        nc = ((nc % cols) + cols) % cols;
      } else if (nr < 0 || nr >= rows || nc < 0 || nc >= cols) {
        continue;
      }
      grid[nr][nc] = 1;
    }
  }
  return grid;
}
 
// -------------------- Browser UI --------------------
 
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
  const init = () => {
    const canvas = document.getElementById('grid');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const CELL = 12;
    const COLS = Math.floor(canvas.width / CELL);
    const ROWS = Math.floor(canvas.height / CELL);
 
    let grid = createGrid(ROWS, COLS);
    let wrap = false;
    let running = false;
    let generation = 0;
    let fps = 12;
    let acc = 0;
    let lastFrame = 0;
    let selectedPattern = null;
 
    const $ = (id) => document.getElementById(id);
    const playBtn = $('play');
    const stepBtn = $('step');
    const clearBtn = $('clear');
    const speedInput = $('speed');
    const speedLabel = $('speed-label');
    const wrapInput = $('wrap');
    const genLabel = $('gen');
    const patternButtons = document.querySelectorAll('[data-pattern]');
    const hint = $('hint');
 
    function draw() {
      ctx.fillStyle = '#0d1017';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
      ctx.strokeStyle = '#1c2230';
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let c = 0; c <= COLS; c++) {
        ctx.moveTo(c * CELL + 0.5, 0);
        ctx.lineTo(c * CELL + 0.5, ROWS * CELL);
      }
      for (let r = 0; r <= ROWS; r++) {
        ctx.moveTo(0, r * CELL + 0.5);
        ctx.lineTo(COLS * CELL, r * CELL + 0.5);
      }
      ctx.stroke();
 
      ctx.fillStyle = '#7dd3fc';
      for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
          if (grid[r][c]) {
            ctx.fillRect(c * CELL + 1, r * CELL + 1, CELL - 2, CELL - 2);
          }
        }
      }
    }
 
    function updateGen() {
      genLabel.textContent = String(generation);
    }
 
    function step() {
      grid = nextGeneration(grid, wrap);
      generation++;
      updateGen();
      draw();
    }
 
    function loop(t) {
      if (!running) return;
      if (!lastFrame) lastFrame = t;
      acc += (t - lastFrame) / 1000;
      lastFrame = t;
      const interval = 1 / fps;
      while (acc >= interval) {
        grid = nextGeneration(grid, wrap);
        generation++;
        acc -= interval;
      }
      updateGen();
      draw();
      requestAnimationFrame(loop);
    }
 
    function setRunning(next) {
      running = next;
      playBtn.textContent = running ? 'Pause' : 'Play';
      playBtn.classList.toggle('primary', !running);
      if (running) {
        acc = 0;
        lastFrame = 0;
        requestAnimationFrame(loop);
      }
    }
 
    playBtn.addEventListener('click', () => setRunning(!running));
    stepBtn.addEventListener('click', () => {
      if (running) setRunning(false);
      step();
    });
    clearBtn.addEventListener('click', () => {
      grid = createGrid(ROWS, COLS);
      generation = 0;
      updateGen();
      draw();
    });
    speedInput.addEventListener('input', (e) => {
      fps = parseInt(e.target.value, 10);
      speedLabel.textContent = `${fps} gen/s`;
    });
    wrapInput.addEventListener('change', (e) => {
      wrap = e.target.checked;
    });
 
    function setSelectedPattern(name) {
      selectedPattern = name;
      patternButtons.forEach((b) => {
        b.classList.toggle('active', b.dataset.pattern === selectedPattern);
      });
      canvas.classList.toggle('placing', !!selectedPattern);
      if (hint) {
        hint.textContent = selectedPattern
          ? `Click grid to place ${selectedPattern}. Click the pattern again to deselect.`
          : 'Drag on the grid to draw cells. Pick a pattern to place it by click.';
      }
    }
 
    patternButtons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const name = btn.dataset.pattern;
        setSelectedPattern(name === selectedPattern ? null : name);
      });
    });
 
    let dragging = false;
    let dragMode = 0;
    const touched = new Set();
 
    function cellAt(evt) {
      const rect = canvas.getBoundingClientRect();
      const x = ((evt.clientX - rect.left) / rect.width) * canvas.width;
      const y = ((evt.clientY - rect.top) / rect.height) * canvas.height;
      return { r: Math.floor(y / CELL), c: Math.floor(x / CELL) };
    }
 
    canvas.addEventListener('mousedown', (e) => {
      const { r, c } = cellAt(e);
      if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return;
      if (selectedPattern) {
        const pat = PATTERNS[selectedPattern];
        const r0 = r - Math.floor(pat.length / 2);
        const c0 = c - Math.floor(pat[0].length / 2);
        placePattern(grid, pat, r0, c0, wrap);
        draw();
        return;
      }
      dragging = true;
      dragMode = grid[r][c] ? 0 : 1;
      grid[r][c] = dragMode;
      touched.clear();
      touched.add(`${r},${c}`);
      draw();
    });
 
    canvas.addEventListener('mousemove', (e) => {
      if (!dragging) return;
      const { r, c } = cellAt(e);
      if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return;
      const key = `${r},${c}`;
      if (touched.has(key)) return;
      touched.add(key);
      grid[r][c] = dragMode;
      draw();
    });
 
    window.addEventListener('mouseup', () => {
      dragging = false;
    });
    canvas.addEventListener('mouseleave', () => {
      dragging = false;
    });
 
    document.addEventListener('keydown', (e) => {
      if (e.target && ['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
      if (e.key === ' ') {
        e.preventDefault();
        setRunning(!running);
      } else if (e.key === 'n' || e.key === 'ArrowRight') {
        if (running) setRunning(false);
        step();
      } else if (e.key === 'c') {
        grid = createGrid(ROWS, COLS);
        generation = 0;
        updateGen();
        draw();
      } else if (e.key === 'Escape') {
        setSelectedPattern(null);
      }
    });
 
    // Seed with a small demo so first paint is not blank.
    placePattern(grid, PATTERNS.glider, 2, 2);
    placePattern(grid, PATTERNS.pulsar, 10, 20);
    updateGen();
    draw();
  };
 
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
}
 

321 linesjs

Writes …/life.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