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

claude-codeclaude-sonnet-5 · 93 steps · 12m 25s · 6 filessession b799a226-866@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 06 / 93
life.jschange 1/2
/**
 * Conway's Game of Life
 *
 * This file is split into two parts:
 *  1. A DOM-free core (grid rules + pattern library) exported as `Life`,
 *     usable from both the browser and Node (for tests.js).
 *  2. UI wiring that only runs when a `document` is present.
 */
(function (global) {
  'use strict';
 
  // ---------------------------------------------------------------------
  // Core grid logic
  // ---------------------------------------------------------------------
 
  function createGrid(rows, cols) {
    const grid = new Array(rows);
    for (let r = 0; r < rows; r++) {
      grid[r] = new Array(cols).fill(0);
    }
    return grid;
  }
 
  function cloneGrid(grid) {
    return grid.map(function (row) { return row.slice(); });
  }
 
  function getRows(grid) {
    return grid.length;
  }
 
  function getCols(grid) {
    return grid.length ? grid[0].length : 0;
  }
 
  function getCell(grid, row, col, wrap) {
    const rows = grid.length;
    const cols = rows ? grid[0].length : 0;
    if (!rows || !cols) return 0;
    if (wrap) {
      row = ((row % rows) + rows) % rows;
      col = ((col % cols) + cols) % cols;
    } else if (row < 0 || row >= rows || col < 0 || col >= cols) {
      return 0;
    }
    return grid[row][col];
  }
 
  function setCell(grid, row, col, value) {
    if (row < 0 || row >= grid.length) return;
    if (!grid.length || col < 0 || col >= grid[0].length) return;
    grid[row][col] = value ? 1 : 0;
  }
 
  function countLiveNeighbors(grid, row, col, wrap) {
    let count = 0;
    for (let dr = -1; dr <= 1; dr++) {
      for (let dc = -1; dc <= 1; dc++) {
        if (dr === 0 && dc === 0) continue;
        count += getCell(grid, row + dr, col + dc, wrap);
      }
    }
    return count;
  }
 
  /**
   * Applies the standard Conway rules and returns a brand new grid:
   *  - a live cell with 2 or 3 live neighbors survives
   *  - a dead cell with exactly 3 live neighbors becomes alive
   *  - every other cell dies or stays dead
   */
  function nextGeneration(grid, wrap) {
    const rows = grid.length;
    const cols = rows ? grid[0].length : 0;
    const next = createGrid(rows, cols);
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const alive = grid[r][c] === 1;
        const neighbors = countLiveNeighbors(grid, r, c, wrap);
        if (alive) {
          next[r][c] = (neighbors === 2 || neighbors === 3) ? 1 : 0;
        } else {
          next[r][c] = (neighbors === 3) ? 1 : 0;
        }
      }
    }
    return next;
  }
 
  function countLiveCells(grid) {
    let total = 0;
    for (let r = 0; r < grid.length; r++) {
      const row = grid[r];
      for (let c = 0; c < row.length; c++) total += row[c];
    }
    return total;
  }
 
  /**
   * Stamps a pattern's live cells onto a clone of `grid`, anchored so that
   * pattern-relative (0,0) lands at (originRow, originCol). Existing live
   * cells outside the pattern's footprint are left untouched.
   */
  function placePattern(grid, pattern, originRow, originCol) {
    const next = cloneGrid(grid);
    pattern.cells.forEach(function (offset) {
      setCell(next, originRow + offset[0], originCol + offset[1], 1);
    });
    return next;
  }
 
  // ---------------------------------------------------------------------
  // Pattern library (coordinates are [row, col] offsets from a bounding
  // box's top-left corner)
  // ---------------------------------------------------------------------
 
  const PATTERNS = {
    block: {
      name: 'Block',
      cells: [[0, 0], [0, 1], [1, 0], [1, 1]]
    },
    blinker: {
      name: 'Blinker',
      cells: [[0, 0], [0, 1], [0, 2]]
    },
    toad: {
      name: 'Toad',
      cells: [[0, 1], [0, 2], [0, 3], [1, 0], [1, 1], [1, 2]]
    },
    beacon: {
      name: 'Beacon',
      cells: [[0, 0], [0, 1], [1, 0], [1, 1], [2, 2], [2, 3], [3, 2], [3, 3]]
    },
    glider: {
      name: 'Glider',
      cells: [[0, 1], [1, 2], [2, 0], [2, 1], [2, 2]]
    },
    pulsar: {
      name: 'Pulsar',
      cells: (function () {
        const quad = [
          [0, 2], [0, 3], [0, 4],
          [2, 0], [3, 0], [4, 0],
          [2, 5], [3, 5], [4, 5],
          [5, 2], [5, 3], [5, 4]
        ];
        const cells = [];
        // Mirror the quadrant into all four quadrants of the 13x13 box,
        // where the arms are offset by 6 on both axes.
        [0, 6].forEach(function (rowOffset) {
          [0, 6].forEach(function (colOffset) {
            quad.forEach(function (cell) {
              cells.push([cell[0] + rowOffset, cell[1] + colOffset]);
            });
          });
        });
        return cells;
      })()
    },
    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 = {
    createGrid: createGrid,
    cloneGrid: cloneGrid,
    getRows: getRows,
    getCols: getCols,
    getCell: getCell,
    setCell: setCell,
    countLiveNeighbors: countLiveNeighbors,
    nextGeneration: nextGeneration,
    countLiveCells: countLiveCells,
    placePattern: placePattern,
    PATTERNS: PATTERNS
  };
 
  if (typeof module !== 'undefined' && module.exports) {
    module.exports = Life;
  } else {
    global.Life = Life;
  }
 
  // ---------------------------------------------------------------------
  // UI (browser only)
  // ---------------------------------------------------------------------
 
  if (typeof document !== 'undefined') {
    document.addEventListener('DOMContentLoaded', initUI);
  }
 
  function initUI() {
    const ROWS = 40;
    const COLS = 60;
    const CELL = 14;
 
    const COLORS = {
      background: '#12141c',
      cell: '#5ee6a0',
      gridLine: 'rgba(255, 255, 255, 0.06)'
    };
 
    const canvas = document.getElementById('lifeCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = COLS * CELL;
    canvas.height = ROWS * CELL;
 
    const playPauseBtn = document.getElementById('playPauseBtn');
    const stepBtn = document.getElementById('stepBtn');
    const clearBtn = document.getElementById('clearBtn');
    const randomizeBtn = document.getElementById('randomizeBtn');
    const speedSlider = document.getElementById('speedSlider');
    const speedValue = document.getElementById('speedValue');
    const wrapToggle = document.getElementById('wrapToggle');
    const generationDisplay = document.getElementById('generation');
    const patternList = document.getElementById('patternList');
 
    let grid = Life.createGrid(ROWS, COLS);
    let generation = 0;
    let running = false;
    let wrap = wrapToggle.checked;
    let speed = parseInt(speedSlider.value, 10);
    let timer = null;
    let isDrawing = false;
    let drawValue = 1;
    let activePatternKey = null;
 
    function inBounds(row, col) {
      return row >= 0 && row < ROWS && col >= 0 && col < COLS;
    }
 
    function render() {
      ctx.fillStyle = COLORS.background;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
      ctx.fillStyle = COLORS.cell;
      for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
          if (grid[r][c]) {
            ctx.fillRect(c * CELL, r * CELL, CELL - 1, CELL - 1);
          }
        }
      }
 
      ctx.strokeStyle = COLORS.gridLine;
      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, canvas.height);
      }
      for (let r = 0; r <= ROWS; r++) {
        ctx.moveTo(0, r * CELL + 0.5);
        ctx.lineTo(canvas.width, r * CELL + 0.5);
      }
      ctx.stroke();
    }
 
    function updateGenerationDisplay() {
      generationDisplay.textContent = String(generation);
    }
 
    function updatePlayPauseButton() {
      playPauseBtn.textContent = running ? 'Pause' : 'Play';
      playPauseBtn.classList.toggle('btn-active', running);
    }
 
    function tick() {
      grid = Life.nextGeneration(grid, wrap);
      generation++;
      updateGenerationDisplay();
      render();
    }
 
    function scheduleTick() {
      if (timer) clearInterval(timer);
      timer = setInterval(tick, 1000 / speed);
    }
 
    function play() {
      if (running) return;
      running = true;
      updatePlayPauseButton();
      scheduleTick();
    }
 
    function pause() {
      running = false;
      updatePlayPauseButton();
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }
 
    function step() {
      pause();
      tick();
    }
 
    function clearGrid() {
      pause();
      grid = Life.createGrid(ROWS, COLS);
      generation = 0;
      updateGenerationDisplay();
      render();
    }
 
    function randomize() {
      pause();
      for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
          grid[r][c] = Math.random() < 0.25 ? 1 : 0;
        }
      }
      generation = 0;
      updateGenerationDisplay();
      render();
    }
 
    function getCellFromEvent(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;
      return {
        row: Math.floor(y / CELL),
        col: Math.floor(x / CELL)
      };
    }
 
    function placeActivePattern(row, col) {
      const pattern = Life.PATTERNS[activePatternKey];
      if (!pattern) return;
      const maxDr = Math.max.apply(null, pattern.cells.map(function (c) { return c[0]; }));
      const maxDc = Math.max.apply(null, pattern.cells.map(function (c) { return c[1]; }));
      const originRow = row - Math.floor(maxDr / 2);
      const originCol = col - Math.floor(maxDc / 2);
      grid = Life.placePattern(grid, pattern, originRow, originCol);
      render();
    }
 
    function buildPatternButtons() {
      Object.keys(Life.PATTERNS).forEach(function (key) {
        const pattern = Life.PATTERNS[key];
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'btn pattern-btn';
        btn.textContent = pattern.name;
        btn.dataset.pattern = key;
        btn.addEventListener('click', function () {
          if (activePatternKey === key) {
            activePatternKey = null;
            btn.classList.remove('active');
            return;
          }
          activePatternKey = key;
          Array.prototype.forEach.call(
            patternList.querySelectorAll('.pattern-btn'),
            function (b) { b.classList.remove('active'); }
          );
          btn.classList.add('active');
        });
        patternList.appendChild(btn);
      });
    }
 
    canvas.addEventListener('mousedown', function (e) {
      const cell = getCellFromEvent(e);
      if (!inBounds(cell.row, cell.col)) return;
      if (activePatternKey) {
        placeActivePattern(cell.row, cell.col);
        return;
      }
      isDrawing = true;
      drawValue = grid[cell.row][cell.col] ? 0 : 1;
      Life.setCell(grid, cell.row, cell.col, drawValue);
      render();
    });
 
    canvas.addEventListener('mousemove', function (e) {
      if (!isDrawing) return;
      const cell = getCellFromEvent(e);
      if (!inBounds(cell.row, cell.col)) return;
      Life.setCell(grid, cell.row, cell.col, drawValue);
      render();
    });
 
    window.addEventListener('mouseup', function () {
      isDrawing = false;
    });
 
    playPauseBtn.addEventListener('click', function () {
      if (running) pause(); else play();
    });
 
    stepBtn.addEventListener('click', step);
    clearBtn.addEventListener('click', clearGrid);
    randomizeBtn.addEventListener('click', randomize);
 
    speedSlider.addEventListener('input', function () {
      speed = parseInt(speedSlider.value, 10);
      speedValue.textContent = String(speed);
      if (running) scheduleTick();
    });
 
    wrapToggle.addEventListener('change', function () {
      wrap = wrapToggle.checked;
    });
 
    document.addEventListener('keydown', function (e) {
      if (e.code === 'Space' && e.target === document.body) {
        e.preventDefault();
        if (running) pause(); else play();
      }
    });
 
    buildPatternButtons();
    updateGenerationDisplay();
    updatePlayPauseButton();
    render();
  }
})(typeof window !== 'undefined' ? window : globalThis);
 
437 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-sonnet-5 #css #game #graphics #html #javascript #medium #subagents
m2-sonnet5
← all sessions