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 05 / 29
life.jschange 1/1
/*
 * Conway's Game of Life
 * ---------------------
 * This file has two parts:
 *   1. A pure, DOM-free core (grid math + rules) exported for Node/tests.
 *   2. Browser UI wiring, only initialised when a `document` exists.
 *
 * Rules (B3/S23):
 *   - A live cell with 2 or 3 live neighbours survives.
 *   - A dead cell with exactly 3 live neighbours becomes alive.
 *   - Everything else dies or stays dead.
 */
(function (global) {
  'use strict';
 
  // ---------------------------------------------------------------------------
  // Core logic (no DOM)
  // ---------------------------------------------------------------------------
 
  /** Create a `rows` x `cols` grid filled with dead cells (0). */
  function makeGrid(cols, rows) {
    const grid = new Array(rows);
    for (let r = 0; r < rows; r++) {
      grid[r] = new Array(cols).fill(0);
    }
    return grid;
  }
 
  /** Count the live neighbours of cell (row, col). Honours wrap-around edges. */
  function countNeighbors(grid, row, col, wrap) {
    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 r = row + dr;
        let c = col + dc;
        if (wrap) {
          r = (r + rows) % rows;
          c = (c + cols) % cols;
        } else if (r < 0 || r >= rows || c < 0 || c >= cols) {
          continue;
        }
        count += grid[r][c];
      }
    }
    return count;
  }
 
  /** Compute the next generation, returning a brand-new grid. */
  function step(grid, wrap) {
    const rows = grid.length;
    const cols = grid[0].length;
    const next = makeGrid(cols, rows);
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const neighbours = countNeighbors(grid, r, c, wrap);
        const alive = grid[r][c] === 1;
        if (alive && (neighbours === 2 || neighbours === 3)) {
          next[r][c] = 1;
        } else if (!alive && neighbours === 3) {
          next[r][c] = 1;
        }
      }
    }
    return next;
  }
 
  /** Total number of live cells. */
  function population(grid) {
    let total = 0;
    for (let r = 0; r < grid.length; r++) {
      for (let c = 0; c < grid[r].length; c++) {
        total += grid[r][c];
      }
    }
    return total;
  }
 
  /**
   * Stamp a pattern (list of [dr, dc] offsets) onto the grid with its top-left
   * at (atRow, atCol). Mutates and returns the grid. Off-grid cells are wrapped
   * when `wrap` is true, otherwise skipped.
   */
  function placePattern(grid, cells, atRow, atCol, wrap) {
    const rows = grid.length;
    const cols = grid[0].length;
    for (let i = 0; i < cells.length; i++) {
      let r = atRow + cells[i][0];
      let c = atCol + cells[i][1];
      if (wrap) {
        r = (r + rows) % rows;
        c = (c + cols) % cols;
      } else if (r < 0 || r >= rows || c < 0 || c >= cols) {
        continue;
      }
      grid[r][c] = 1;
    }
    return grid;
  }
 
  // Classic patterns as [row, col] offsets from their top-left corner.
  const PATTERNS = {
    glider: {
      name: 'Glider',
      cells: [[0, 1], [1, 2], [2, 0], [2, 1], [2, 2]],
    },
    pulsar: {
      name: 'Pulsar',
      cells: [
        [0, 2], [0, 3], [0, 4], [0, 8], [0, 9], [0, 10],
        [2, 0], [2, 5], [2, 7], [2, 12],
        [3, 0], [3, 5], [3, 7], [3, 12],
        [4, 0], [4, 5], [4, 7], [4, 12],
        [5, 2], [5, 3], [5, 4], [5, 8], [5, 9], [5, 10],
        [7, 2], [7, 3], [7, 4], [7, 8], [7, 9], [7, 10],
        [8, 0], [8, 5], [8, 7], [8, 12],
        [9, 0], [9, 5], [9, 7], [9, 12],
        [10, 0], [10, 5], [10, 7], [10, 12],
        [12, 2], [12, 3], [12, 4], [12, 8], [12, 9], [12, 10],
      ],
    },
    gliderGun: {
      name: 'Gosper Glider Gun',
      cells: [
        [0, 24],
        [1, 22], [1, 24],
        [2, 12], [2, 13], [2, 20], [2, 21], [2, 34], [2, 35],
        [3, 11], [3, 15], [3, 20], [3, 21], [3, 34], [3, 35],
        [4, 0], [4, 1], [4, 10], [4, 16], [4, 20], [4, 21],
        [5, 0], [5, 1], [5, 10], [5, 14], [5, 16], [5, 17], [5, 22], [5, 24],
        [6, 10], [6, 16], [6, 24],
        [7, 11], [7, 15],
        [8, 12], [8, 13],
      ],
    },
  };
 
  const Life = {
    makeGrid: makeGrid,
    countNeighbors: countNeighbors,
    step: step,
    population: population,
    placePattern: placePattern,
    PATTERNS: PATTERNS,
  };
 
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = Life;
  }
  if (typeof global !== 'undefined') {
    global.Life = Life;
  }
 
  // ---------------------------------------------------------------------------
  // Browser UI (skipped entirely under Node)
  // ---------------------------------------------------------------------------
 
  if (typeof document === 'undefined') return;
 
  function initUI() {
    const COLS = 90;
    const ROWS = 55;
    const CELL = 12; // logical pixel size of a cell
 
    const canvas = document.getElementById('grid');
    const ctx = canvas.getContext('2d');
    canvas.width = COLS * CELL;
    canvas.height = ROWS * CELL;
 
    const playPauseBtn = document.getElementById('playPause');
    const stepBtn = document.getElementById('step');
    const clearBtn = document.getElementById('clear');
    const randomBtn = document.getElementById('random');
    const speedInput = document.getElementById('speed');
    const speedValue = document.getElementById('speedValue');
    const wrapInput = document.getElementById('wrap');
    const generationEl = document.getElementById('generation');
    const populationEl = document.getElementById('population');
    const patternButtons = document.getElementById('patternButtons');
    const drawBtn = document.getElementById('drawMode');
 
    // Theme colours (read from CSS so they stay in sync with the stylesheet).
    const css = getComputedStyle(document.documentElement);
    const COLOR_BG = css.getPropertyValue('--grid-bg').trim() || '#0d1117';
    const COLOR_LINE = css.getPropertyValue('--grid-line').trim() || '#1b2430';
    const COLOR_CELL = css.getPropertyValue('--cell').trim() || '#3fb950';
    const COLOR_PREVIEW = css.getPropertyValue('--cell-preview').trim() || 'rgba(88,166,255,0.45)';
 
    let grid = Life.makeGrid(COLS, ROWS);
    let generation = 0;
    let running = false;
    let speed = parseInt(speedInput.value, 10); // generations per second
    let selectedPattern = null; // key into Life.PATTERNS, or null for draw mode
 
    // Drawing state
    let painting = false;
    let paintValue = 1;
 
    // Hover preview cell (for pattern placement)
    let hoverCell = null;
 
    // ---- Rendering ---------------------------------------------------------
    function render() {
      ctx.fillStyle = COLOR_BG;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
      // Grid lines
      ctx.strokeStyle = COLOR_LINE;
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let c = 0; c <= COLS; c++) {
        const x = c * CELL + 0.5;
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
      }
      for (let r = 0; r <= ROWS; r++) {
        const y = r * CELL + 0.5;
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
      }
      ctx.stroke();
 
      // Live cells
      ctx.fillStyle = COLOR_CELL;
      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 - 1, CELL - 1);
          }
        }
      }
 
      // Pattern placement preview
      if (selectedPattern && hoverCell) {
        const cells = Life.PATTERNS[selectedPattern].cells;
        ctx.fillStyle = COLOR_PREVIEW;
        for (let i = 0; i < cells.length; i++) {
          const r = hoverCell.row + cells[i][0];
          const c = hoverCell.col + cells[i][1];
          if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {
            ctx.fillRect(c * CELL + 1, r * CELL + 1, CELL - 1, CELL - 1);
          }
        }
      }
    }
 
    function updateStats() {
      generationEl.textContent = String(generation);
      populationEl.textContent = String(Life.population(grid));
    }
 
    function draw() {
      render();
      updateStats();
    }
 
    // ---- Simulation loop ---------------------------------------------------
    let lastStepTime = 0;
    let rafId = null;
 
    function advance() {
      grid = Life.step(grid, wrapInput.checked);
      generation++;
    }
 
    function loop(timestamp) {
      if (!running) return;
      const interval = 1000 / speed;
      if (timestamp - lastStepTime >= interval) {
        lastStepTime = timestamp;
        advance();
        draw();
      }
      rafId = requestAnimationFrame(loop);
    }
 
    function setRunning(next) {
      running = next;
      playPauseBtn.textContent = running ? 'Pause' : 'Play';
      playPauseBtn.classList.toggle('active', running);
      if (running) {
        lastStepTime = 0;
        rafId = requestAnimationFrame(loop);
      } else if (rafId !== null) {
        cancelAnimationFrame(rafId);
        rafId = null;
      }
    }
 
    // ---- Mouse mapping -----------------------------------------------------
    function cellFromEvent(evt) {
      const rect = canvas.getBoundingClientRect();
      const scaleX = canvas.width / rect.width;
      const scaleY = canvas.height / rect.height;
      const x = (evt.clientX - rect.left) * scaleX;
      const y = (evt.clientY - rect.top) * scaleY;
      const col = Math.floor(x / CELL);
      const row = Math.floor(y / CELL);
      if (row < 0 || row >= ROWS || col < 0 || col >= COLS) return null;
      return { row: row, col: col };
    }
 
    // ---- Interaction -------------------------------------------------------
    canvas.addEventListener('mousedown', function (evt) {
      const cell = cellFromEvent(evt);
      if (!cell) return;
      if (selectedPattern) {
        // Place the pattern centred roughly on the click point.
        const cells = Life.PATTERNS[selectedPattern].cells;
        Life.placePattern(grid, cells, cell.row, cell.col, wrapInput.checked);
        draw();
        return;
      }
      // Draw mode: erase if starting on a live cell, otherwise paint.
      painting = true;
      paintValue = grid[cell.row][cell.col] ? 0 : 1;
      grid[cell.row][cell.col] = paintValue;
      draw();
    });
 
    canvas.addEventListener('mousemove', function (evt) {
      const cell = cellFromEvent(evt);
      if (selectedPattern) {
        hoverCell = cell;
        draw();
        return;
      }
      if (!painting || !cell) return;
      grid[cell.row][cell.col] = paintValue;
      draw();
    });
 
    canvas.addEventListener('mouseleave', function () {
      hoverCell = null;
      if (selectedPattern) draw();
    });
 
    window.addEventListener('mouseup', function () {
      painting = false;
    });
 
    // Prevent the context menu so right-drag doesn't interrupt drawing.
    canvas.addEventListener('contextmenu', function (e) { e.preventDefault(); });
 
    // ---- Controls ----------------------------------------------------------
    playPauseBtn.addEventListener('click', function () {
      setRunning(!running);
    });
 
    stepBtn.addEventListener('click', function () {
      setRunning(false);
      advance();
      draw();
    });
 
    clearBtn.addEventListener('click', function () {
      setRunning(false);
      grid = Life.makeGrid(COLS, ROWS);
      generation = 0;
      draw();
    });
 
    randomBtn.addEventListener('click', function () {
      setRunning(false);
      grid = Life.makeGrid(COLS, ROWS);
      for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
          grid[r][c] = Math.random() < 0.28 ? 1 : 0;
        }
      }
      generation = 0;
      draw();
    });
 
    speedInput.addEventListener('input', function () {
      speed = parseInt(speedInput.value, 10);
      speedValue.textContent = speed + ' gen/s';
    });
 
    // ---- Pattern selection -------------------------------------------------
    function setSelectedPattern(key) {
      selectedPattern = key;
      hoverCell = null;
      // Toggle active states on all pattern-related buttons.
      const buttons = patternButtons.querySelectorAll('button');
      buttons.forEach(function (b) {
        b.classList.toggle('active', b.dataset.pattern === key);
      });
      drawBtn.classList.toggle('active', key === null);
      canvas.classList.toggle('placing', key !== null);
      draw();
    }
 
    Object.keys(Life.PATTERNS).forEach(function (key) {
      const btn = document.createElement('button');
      btn.textContent = Life.PATTERNS[key].name;
      btn.dataset.pattern = key;
      btn.addEventListener('click', function () {
        // Clicking the active pattern again returns to draw mode.
        setSelectedPattern(selectedPattern === key ? null : key);
      });
      patternButtons.appendChild(btn);
    });
 
    drawBtn.addEventListener('click', function () {
      setSelectedPattern(null);
    });
 
    // ---- Boot --------------------------------------------------------------
    speedValue.textContent = speed + ' gen/s';
    setSelectedPattern(null);
 
    // Seed with a glider gun so there's something moving on first load.
    Life.placePattern(grid, Life.PATTERNS.gliderGun.cells, 2, 4, false);
    draw();
  }
 
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initUI);
  } else {
    initUI();
  }
})(typeof globalThis !== 'undefined' ? globalThis : this);
 
426 linesjs
Now the HTML:
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