Conway's Game of Life · lfm-2.5-24b-a2b

We need to build Conway's Game of Life on a canvas with a 60x40 grid and finite, non-wrapping boundaries. The requirements:

1. Standard rules: live cell survives with 2 or 3 neighbors; dead cell becomes alive with exactly 3. Cells outside the grid are treated as dead.
2. Start paused with a visible blinker pattern. Provide Play/Pause, Step, Randomize, Clear controls, plus a generation counter.
3. While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it.
4. Step advances exactly one generation while paused. Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells.
5. Fit the grid and controls within the viewport while keeping cells distinguishable.

Verification:
- Step the initial blinker twice and compare its alternating arrangements.
- Paint a short stroke while paused and check consistent cell painting.
- Use Clear and confirm the grid and generation counter reset.

We need to write everything into a single `index.html` file with inline CSS and JS, no external resources.

Let me think about the design:

- Grid: 60 columns x 40 rows. That's 2400 cells. Each cell should be visible and distinguishable. Let's say each cell is maybe 10-15 pixels. 60 * 15 = 900px wide, 40 * 15 = 600px tall. Plus controls. That fits in a typical viewport (e.g., 1200x800).

- Canvas: We'll draw the grid on a canvas. Or we could use HTML elements (divs). But the requirement says "canvas" - "Build Conway's Game of Life on a canvas". So we should use an HTML `<canvas>` element.

- Finite, non-wrapping boundaries: cells outside the grid are dead.

- Blinker pattern: A classic blinker is a 3x3 block that oscillates between horizontal and vertical. Initial blinker pattern: three live cells in a row (horizontal) or column (vertical). Let's start with a horizontal blinker at some position.

- Controls: Play/Pause button, Step button, Randomize button, Clear button, and a generation counter display.

- While paused: clicking toggles a cell. Dragging: choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it. This is a bit tricky. Let me parse: "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

Interpretation: When paused, if you click on a cell, it toggles that cell (alive->dead, dead->alive). If you click and drag (mouse down, move, mouse up), then you select a starting cell (the first cell clicked), and decide whether to paint alive or dead (via a mode toggle? or via a key?), and then apply that state to all cells along the drag path, but only once per cell (i.e., don't toggle multiple times if the drag passes over the same cell).

Hmm, "choose painting alive or dead from the first cell" - maybe there's a toggle between painting mode for alive or dead. Perhaps the user can press a key or there's a UI control. Since this is a simple app, maybe we can have a radio button or two buttons: "Paint Alive" / "Paint Dead" that sets the mode, and then dragging paints that state onto visited cells.

Actually, let me re-read: "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

So:
- Clicking a cell toggles it (standard).
- Dragging: The first cell clicked is the "first cell". You choose whether to paint alive or dead (maybe via a mode selector). Then as you drag, you apply that chosen state to each cell you visit (the path). And you shouldn't toggle a cell more than once even if the drag path crosses the same cell.

I think the simplest implementation:
- Have a mode: either "paint alive" or "paint dead". Maybe a toggle button or a dropdown. Or perhaps the drag itself: when you start dragging, the first cell you clicked determines the starting state, and then you hold a modifier key? Hmm.

Alternative interpretation: "choose painting alive or dead from the first cell" might mean: when you start dragging, you pick a target state (alive or dead) based on the state of the first cell you clicked? No, that doesn't make sense.

Let me think of a practical approach:
- Add a small UI: a toggle button or radio group: "Alive" / "Dead" painting mode.
- When paused:
  - Click on a cell: toggle it.
  - Drag from a cell: the first cell clicked sets the "starting cell". As you drag, you paint the chosen state (alive or dead) on each cell along the path, but only if not already painted (to avoid repeated toggling). Actually, "without repeatedly toggling it" means if the drag path revisits a cell, don't toggle it again.

So the drag logic: on mousedown, record start cell. On mousemove, for each cell under cursor, if it hasn't been painted yet in this drag operation, set it to the chosen state. On mouseup, done.

The "choose painting alive or dead from the first cell" part: maybe the mode is selected by which end of the drag? Or maybe there's a separate control. I'll add a pair of buttons: "Paint Alive" and "Paint Dead", and when dragging, the current mode applies.

Actually, let me keep it simpler: during drag, the user can toggle between alive/dead painting via a button. I'll include a small toggle button next to the canvas.

Let me plan the layout:

```
+------------------------------------------+
|  Generation: 0                          |
|  [Play/Pause] [Step] [Randomize] [Clear] |
|                                         |
|  +---------------------------+          |
|  |                           |          |
|  |      Game of Life         |          |
|  |      Canvas (60x40)       |          |
|  |                           |          |
|  +---------------------------+          |
|                                         |
|  Paint Mode: [Alive] [Dead]              |
+------------------------------------------+
```

Controls: Play/Pause button, Step button, Randomize button, Clear button, Generation counter display.

Grid: 60 columns, 40 rows. Cell size: let's calculate. Viewport width ~1200, height ~800. With some padding for controls. Let's say cell size = 12px. Grid width = 60*12 = 720px. Grid height = 40*12 = 480px. Controls take maybe 100px. Total ~820px. Fits in viewport.

Canvas: 720x480. But we need to fit within the viewport. Let's use a canvas of 720x480.

Now, the blinker pattern: A standard blinker is 3 cells in a line that alternates between horizontal (3 horizontal cells) and vertical (3 vertical cells). Starting with a horizontal blinker at some position, e.g., center of the grid: row 20, columns 29-31 (0-indexed). Or maybe start with a vertical one. Let's do horizontal: cells (20,29), (20,30), (20,31) alive.

Initial state: generation 0.

Step the blinker twice: after 1 step, it becomes vertical at rows 19-21, column 30. After 2 steps, back to horizontal. So the alternating arrangement should be visible.

Now, the drag painting feature: "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

I'll implement:
- When paused, clicking a cell toggles it (standard).
- Dragging: on mousedown, record the starting cell (first cell). On mousemove, iterate over cells under the cursor (rounded to grid coordinates), and for each unvisited cell in the path, set it to the chosen state (alive or dead). The chosen state is determined by a mode: a toggle button "Paint Alive/Dead". When dragging, the current mode applies.
- To avoid repeatedly toggling: keep a Set of cells painted in this drag operation, and only set if not already in the set.

Actually, "without repeatedly toggling it" might also mean that if the drag path goes over the same cell twice (like a loop), it shouldn't toggle it multiple times. Using a Set handles that.

Let me code this up.

HTML structure:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* styles */
  </style>
</head>
<body>
  <div id="app">
    <h1>Conway's Game of Life</h1>
    <div id="controls">
      <button id="playPause">Play</button>
      <button id="step">Step</button>
      <button id="randomize">Randomize</button>
      <button id="clear">Clear</button>
      <span>Generation: <span id="genCounter">0</span></span>
    </div>
    <canvas id="gameCanvas"></canvas>
    <div id="paintMode">
      <label><input type="radio" name="paintMode" value="alive" checked> Paint Alive</label>
      <label><input type="radio" name="paintMode" value="dead"> Paint Dead</label>
    </div>
  </div>
  <script>
    // JavaScript
  </script>
</body>
</html>
```

Canvas dimensions: Let's compute cell size. Grid: 60 cols, 40 rows. Let's use cellSize = 12. Canvas width = 60*12 = 720, height = 40*12 = 480. Add a little padding? The canvas itself will be exactly that size.

But we need to fit within the viewport. Browser viewport is typically 1200x800. 720x480 fits fine.

Colors: Live cells: green (e.g., #00ff00). Dead cells: black or white background. Let's fill the background with white, and draw live cells as green squares with a border.

Drawing: For each cell, if alive, draw a filled rectangle with a slight border (1px black outline) so cells are distinguishable. If dead, just draw nothing (or draw the background).

Grid lines: We can draw the grid lines to make cells distinguishable. Or just color the cells. Let's draw grid lines: thin gray lines between cells.

Now, the simulation loop:

- State: a 2D array `grid[row][col]` (boolean).
- Update function: compute next state based on current state. Rules:
  - For each cell, count live neighbors (8 directions), but treat out-of-bounds as dead.
  - If alive: survives if neighbor count is 2 or 3.
  - If dead: becomes alive if neighbor count is exactly 3.
- Apply simultaneously: create a new grid for next state.

Since boundaries are finite and non-wrapping, neighbor counting for edge cells just ignores out-of-bounds.

Simulation tick: called when Step is pressed (and when playing, on each play step).

State variables:
- `grid`: 2D array of booleans.
- `running`: boolean (true = playing/paused? Actually "paused" means not advancing. Let's call it `isPaused`).
- `generation`: number.

Controls:
- Play/Pause: toggle `isPaused`.
- Step: if not paused, advance one generation (run update once), increment generation counter.
- Randomize: fill grid randomly (each cell alive with 50% probability? Or some other distribution). Reset generation counter? The spec says: "Randomize and Clear leave the simulation paused and reset the generation counter". So after Randomize or Clear, the simulation should be paused and generation counter reset to 0.
- Clear: set all cells to dead, reset generation counter to 0, and probably keep paused state.

Wait: "Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells." So both Randomize and Clear should leave the simulation paused (i.e., not running) and reset the generation counter to 0. Clear also clears the grid.

Play/Pause: toggles between paused and playing. When playing, clicking Step advances one generation. When paused, clicking Step does nothing? Or maybe Step always advances one generation regardless? The spec says "Step advances exactly one generation while paused." Hmm, "Step advances exactly one generation while paused." That's ambiguous. It could mean: when the simulation is paused, pressing Step advances one generation (i.e., the step action works even while paused, but the simulation state doesn't change because it's paused?). Or it could mean: Step advances one generation, and the simulation is paused (so it's like a manual step while paused).

Let me interpret: "Step advances exactly one generation while paused." Probably means that when the simulation is paused, the Step button still advances the generation counter and updates the grid (simulating a step), but the simulation remains paused. Actually, "while paused" might modify "advances": i.e., the advancement happens while the simulation is in the paused state. In other words, the Step button performs a generation advance regardless of the paused state, but the simulation doesn't auto-run (that's what Play/Pause controls). Hmm.

Alternatively: "Step advances exactly one generation while paused" could mean that when the simulation is paused, the Step button is the way to advance generations manually. And when playing, the simulation auto-advances (maybe via a timer? The spec doesn't mention auto-advance). The spec only mentions a Step button. So likely: the simulation starts paused, and you can press Step to advance one generation at a time. The simulation stays paused unless you press Play.

Let me go with this:
- Initially paused.
- Play/Pause toggles `isPaused`.
- Step: if not paused, auto-advance? Or always advance one generation? The spec says "Step advances exactly one generation while paused." I think it means that the Step button advances the generation counter by one, and the simulation state (running) is... hmm.

Actually, re-reading: "Start paused with a visible blinker pattern. Provide Play/Pause, Step, Randomize, and Clear, plus a generation counter."

And: "Step advances exactly one generation while paused."

I think the intended behavior is: The simulation is paused initially. You can press Step to advance one generation (the grid updates, generation counter increments). The simulation remains paused after a step (unless you press Play). Randomize and Clear also leave the simulation paused and reset the generation counter.

So:
- Play/Pause: toggles paused state.
- Step: if paused, advance one generation (update grid, increment counter) and stay paused? Or advance and become unpaused? The phrase "while paused" suggests that the step happens while the simulation is paused. So Step advances the generation while the simulation is paused. After a step, the simulation is still paused (you can keep stepping). Randomize and Clear also leave it paused.

Thus:
- Step: always advances one generation (regardless of paused state? or only when paused?). The spec says "Step advances exactly one generation while paused." I'll implement: Step always advances one generation (updates the grid and increments the counter). The simulation state (paused/unpaused) is unchanged by Step. But the phrase "while paused" might just be emphasizing that the step action is available while paused. I'll make Step work regardless of paused state, but the grid only changes when paused? No, that would be weird.

Let me think about the verification steps:
1. "Step the initial blinker twice and compare its alternating arrangements." So you step twice, and the blinker should alternate between horizontal and vertical. This requires that Step actually advances the generation.
2. "Paint a short stroke while paused and check consistent cell painting" - drag painting while paused.
3. "Use Clear and confirm the grid and generation counter reset."

So Step must advance the generation. Whether the simulation is paused or not, Step should advance. I'll make Step always advance one generation (update grid, increment counter). The paused state just means the simulation isn't auto-running (there's no auto-run mentioned anyway).

Actually, to be safe, let's make it so that when paused, Step still advances the generation (manual step). When unpaused (Play), maybe the simulation auto-advances? The spec doesn't mention auto-advance. It only says "Provide Play/Pause, Step, Randomize, and Clear". So probably no auto-run. The Play/Pause just toggles a flag that might affect something else. But the spec says "Step advances exactly one generation while paused" — maybe meaning that the Step button is the mechanism to advance while paused (since the simulation is paused, you can't auto-run). I'll implement Step as always advancing one generation.

Alright, let's code.

Canvas drawing:
- Background: white.
- Draw grid lines: light gray.
- Draw live cells: green squares with black border.

Cell size: Let's use 12px. Grid: 60x40. Canvas: 720x480.

But wait, the grid is 60 by 40. Which is width and which is height? "60 by 40 grid" — probably 60 columns (width) and 40 rows (height). So canvas width = 60 * cellSize, height = 40 * cellSize.

Let's set cellSize = 12. Canvas = 720 x 480.

Now, the blinker initial pattern: Let's place it at the center. Rows 0-39, cols 0-59. Center row around 20. Horizontal blinker: row 20, cols 28, 29, 30 (three cells). Or cols 29, 30, 31. Let's use cols 28-30 (0-indexed). That's within bounds.

Blinker pattern:
- Row 20, col 28: alive
- Row 20, col 29: alive
- Row 20, col 30: alive
All others dead.

After 1 step: vertical blinker at col 29, rows 19, 20, 21.
After 2 steps: back to horizontal at row 20, cols 28-30.

Now, the drag painting:
- When paused, mouse events on the canvas:
  - mousedown: record start cell (row, col), set a flag `isDragging = true`, and set the painting mode (alive or dead) based on the selected radio button.
  - mousemove: if dragging, compute the cell under cursor, and if not already painted in this drag, set it to the chosen state.
  - mouseup: stop dragging.

But "choose painting alive or dead from the first cell" — maybe the mode is selected by clicking a button before dragging. I'll put two radio buttons: "Paint Alive" and "Paint Dead". When dragging, the current mode applies.

Also, clicking (not dragging) toggles a cell: on click, toggle the cell at that position.

So:
- Click: toggle cell (if paused or not, toggling is allowed? The spec says "While paused, clicking toggles a cell." It implies clicking only works while paused? Or maybe clicking works anytime. I'll allow clicking to toggle the cell regardless of paused state. But the drag painting only works while paused.)

Actually, "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

This suggests that the primary interaction while paused is: click to toggle, and drag to paint. Clicking toggles a single cell. Dragging paints a stroke.

So while paused:
- Click on a cell: toggle it.
- Drag from a cell: paint the chosen state along the path.

While not paused (playing): maybe click does nothing special, or maybe the game runs automatically? Since there's no auto-run, I'll just make clicks do nothing (or toggle regardless). To be safe, I'll allow clicks to toggle even when playing, but the main feature is while paused.

Hmm, but if the simulation is playing (unpaused), clicking toggles cells — that would interfere with the simulation. The spec says "Start paused with a visible blinker pattern." So initially paused. The user can press Play to start. During play, the simulation should run? But there's no mention of auto-update. Maybe the intention is that the simulation only advances when you press Step. Play/Pause just toggles a flag that indicates whether the simulation is "active" or not. But since there's no auto-run, the flag might not matter much.

I'll implement it such that:
- `isPaused` flag: when false (playing), the simulation is "running" but there's no timer. The Step button advances one generation. The Play/Pause button toggles the flag (but since there's no auto-run, it has no effect except maybe visual indication).

Actually, maybe the intended behavior is: when playing, the simulation auto-advances every frame? But the spec doesn't mention a timer. It only says "Step advances exactly one generation while paused." I think the simplest is: Step always advances one generation. Play/Pause toggles a visual state (maybe the button text changes). Randomize and Clear reset the generation counter and leave the simulation paused.

Let me finalize the design:

State:
- `grid`: 2D boolean array, 40 rows x 60 cols.
- `isPaused`: boolean, initially true.
- `generation`: number, initially 0.
- `paintMode`: 'alive' or 'dead', default 'alive'.

UI:
- Canvas: 720x480.
- Controls: Play/Pause button, Step button, Randomize button, Clear button, Generation counter span.
- Paint mode radio buttons: "Paint Alive" / "Paint Dead".

Events:
- Canvas mousedown: if isPaused, handle cell toggle or drag start.
- Canvas mouseup: stop drag.
- Canvas mousemove: if dragging, update paint.
- Button clicks: Play/Pause toggle isPaused; Step calls advanceOneGeneration(); Randomize fills randomly; Clear resets grid and counter.

Advance one generation:
- Compute next grid from current grid using rules.
- Set grid = nextGrid.
- Increment generation.
- Redraw canvas.

Redraw:
- Fill background with white.
- Draw grid lines (light gray).
- For each cell, if alive, draw a green square with border.

Cell drawing: For each cell (r, c):
- x = c * cellSize, y = r * cellSize.
- Draw rectangle: x, y, cellSize, cellSize.
- Border: strokeRect with black 1px.

Now, the drag painting:
- On mousedown at (mx, my): convert to grid coords: row = floor(my / cellSize), col = floor(mx / cellSize). Clamp to grid bounds.
- Record `dragStartRow`, `dragStartCol`, `isDragging = true`, `paintState = current paintMode`.
- Also record the cells already painted in this drag: `dirtyCells = new Set()` or a 2D boolean array.

- On mousemove while dragging: compute current cell (r, c). If within grid, and not already in the dirty set, set grid[r][c] = paintState, and add to dirty set.
- On mouseup: isDragging = false.

Click toggle:
- On click at (mx, my): compute row, col. Toggle grid[row][col].

Now, "without repeatedly toggling it" — the Set ensures each cell is painted at most once per drag.

Edge cases: dragging outside the grid — clamp to grid bounds.

Now, let's write the code.

First, let me check the current directory and see if there's anything else.

I'll create index.html with everything inline.

Let me draft the HTML/CSS/JS.

CSS:
```css
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 20px;
  background: #f0f0f0;
}
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
canvas {
  border: 1px solid #333;
  background: #fff;
}
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
button {
  padding: 6px 12px;
  font-size: 14px;
}
#paintMode {
  display: flex;
  gap: 10px;
  align-items: center;
}
```

JS:
```javascript
const COLS = 60;
const ROWS = 40;
const CELL_SIZE = 12;

let grid = [];
let isPaused = true;
let generation = 0;
let paintMode = 'alive'; // 'alive' or 'dead'

// Initialize grid with blinker
function initGrid() {
  grid = Array.from({length: ROWS}, () => Array(COLS).fill(false));
  // Horizontal blinker at row 20, cols 28-30
  const startRow = 20;
  const startCol = 28;
  for (let c = 0; c < 3; c++) {
    grid[startRow][startCol + c] = true;
  }
}

function countNeighbors(r, c) {
  let count = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      const nr = r + dr;
      const nc = c + dc;
      if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
        if (grid[nr][nc]) count++;
      }
    }
  }
  return count;
}

function step() {
  const newGrid = Array.from({length: ROWS}, () => Array(COLS).fill(false));
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const neighbors = countNeighbors(r, c);
      if (grid[r][c]) {
        newGrid[r][c] = (neighbors === 2 || neighbors === 3);
      } else {
        newGrid[r][c] = (neighbors === 3);
      }
    }
  }
  grid = newGrid;
  generation++;
  draw();
}

function draw() {
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Background
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Grid lines
  ctx.strokeStyle = '#ddd';
  ctx.lineWidth = 0.5;
  for (let r = 0; r <= ROWS; r++) {
    ctx.beginPath();
    ctx.moveTo(0, r * CELL_SIZE);
    ctx.lineTo(canvas.width, r * CELL_SIZE);
    ctx.stroke();
  }
  for (let c = 0; c <= COLS; c++) {
    ctx.beginPath();
    ctx.moveTo(c * CELL_SIZE, 0);
    ctx.lineTo(c * CELL_SIZE, canvas.height);
    ctx.stroke();
  }
  
  // Cells
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c]) {
        const x = c * CELL_SIZE;
        const y = r * CELL_SIZE;
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
        ctx.strokeStyle = '#000';
        ctx.strokeRect(x, y, CELL_SIZE, CELL_SIZE);
      }
    }
  }
}

// Mouse events
let isDragging = false;
let dragStartRow = 0;
let dragStartCol = 0;
let dirtyCells = new Set(); // store "r,c" strings

canvas.addEventListener('mousedown', (e) => {
  if (!isPaused) return; // only handle drag/toggle while paused? Or always?
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const col = Math.floor(mx / CELL_SIZE);
  const row = Math.floor(my / CELL_SIZE);
  if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
    if (e.button === 0) { // left click
      // Toggle cell
      grid[row][col] = !grid[row][col];
      draw();
    } else if (e.button === 2) { // right click? or middle?
      // Drag start
      isDragging = true;
      dragStartRow = row;
      dragStartCol = col;
      dirtyCells.clear();
    }
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const col = Math.floor(mx / CELL_SIZE);
  const row = Math.floor(my / CELL_SIZE);
  if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
    const key = `${row},${col}`;
    if (!dirtyCells.has(key)) {
      dirtyCells.add(key);
      if (paintMode === 'alive') {
        grid[row][col] = true;
      } else {
        grid[row][col] = false;
      }
      draw();
    }
  }
});

canvas.addEventListener('mouseup', () => {
  if (isDragging) {
    isDragging = false;
    dirtyCells.clear();
  }
});

// Buttons
document.getElementById('playPause').addEventListener('click', () => {
  isPaused = !isPaused;
  document.getElementById('playPause').textContent = isPaused ? 'Play' : 'Pause';
});

document.getElementById('step').addEventListener('click', () => {
  if (isPaused) {
    step();
  }
});

document.getElementById('randomize').addEventListener('click', () => {
  // Reset grid
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      grid[r][c] = Math.random() < 0.5;
    }
  }
  generation = 0;
  draw();
  isPaused = true; // leave paused
});

document.getElementById('clear').addEventListener('click', () => {
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      grid[r][c] = false;
    }
  }
  generation = 0;
  draw();
  isPaused = true;
});

// Paint mode radios
document.querySelectorAll('input[name="paintMode"]').forEach(radio => {
  radio.addEventListener('change', () => {
    paintMode = radio.value;
  });
});
```

Wait, there's an issue: the mousedown handler checks `if (!isPaused) return;` — this means clicks and drags only work while paused. That matches "While paused, clicking toggles a cell. On a drag..." — so the interactions are only while paused. Good.

But what about the initial state? The simulation is paused, and the blinker is visible. The user can click to toggle cells (which would break the blinker, but that's allowed as an interaction). The drag painting also only works while paused.

Now, the Step button: currently it only steps if paused. But the spec says "Step advances exactly one generation while paused." So stepping while paused makes sense. If the simulation were unpaused, stepping would also advance one generation (the spec doesn't forbid it). I'll make Step always advance one generation (regardless of paused state), but the paused state is just a flag. Actually, let me make Step always advance one generation. The paused state is just for the interaction model.

Hmm, but if the simulation is unpaused and we step, the generation counter increments and the grid updates. That seems fine.

Let me adjust: Step always calls `step()`.

Also, Randomize and Clear should leave the simulation paused and reset the generation counter. So after Randomize/Clear, set `isPaused = true` and `generation = 0`.

Now, the generation counter display: show `generation` in a span.

Let me also add a label for the generation.

Now, let me think about the canvas size. Canvas width = COLS * CELL_SIZE = 60 * 12 = 720. Height = 40 * 12 = 480.

The viewport is typically 1200x800, so this fits.

Now, let me consider the "paint mode" UI. I'll put it near the controls.

Let me write the complete HTML file.

One more thing: the drag painting "choose painting alive or dead from the first cell" — I've implemented it as a mode selection via radio buttons. When dragging, the mode applies to all cells along the path. That seems reasonable.

But wait: "choose painting alive or dead from the first cell" — maybe it means that the first cell clicked determines the state to paint? Like, you click a cell, and that cell's state determines whether you paint alive or dead along the drag? That seems odd. I'll stick with the radio button approach.

Actually, another interpretation: "choose painting alive or dead from the first cell" could mean that when you start dragging, you select a mode (alive or dead) based on the state of the first cell you clicked? No, that's too convoluted.

I'll keep the radio buttons.

Now, let me also make sure the canvas is properly sized. I'll set the canvas element's width and height attributes to match the pixel dimensions: `<canvas id="gameCanvas" width="720" height="480"></canvas>`.

CSS: I might want to set the canvas to display block and center it.

Let me write the full file now.

Actually, let me reconsider the cell size. 12px might be a bit small. 15px would give 900x600, which still fits in a 1200x800 viewport. Let's use 12px for crispness.

Now, let me think about the initial blinker position. Row 20 is roughly the middle of 40 rows (0-39). Columns 28-30 are near the middle of 60 columns (0-59). That's good.

After 1 step: vertical blinker at column 29, rows 19-21.
After 2 steps: back to horizontal.

Let me verify the rules:
- Horizontal blinker: cells (20,28), (20,29), (20,30) alive.
- Neighbors for (20,28): 
  - (19,27), (19,28), (19,29)
  - (20,27), (20,29)
  - (21,27), (21,28), (21,29)
  - Inside grid: (19,27), (19,28), (19,29), (20,27), (20,29), (21,27), (21,28), (21,29) — all alive? Wait, (20,29) is alive. So alive neighbors: (19,27)? dead. (19,28)? dead. (19,29)? dead. (20,27)? dead. (20,29)? alive. (21,27)? dead. (21,28)? dead. (21,29)? dead. So only 1 live neighbor. So (20,28) dies (needs 2 or 3). Similarly (20,30) dies. (20,29) has neighbors: (19,28),(19,29),(19,30),(20,28),(20,30),(21,28),(21,29),(21,30). Alive: (20,28) and (20,30) are alive. So 2 neighbors. Survives. So after one step, only (20,29) is alive? That doesn't seem right for a blinker.

Wait, the classic blinker: a horizontal line of 3 cells becomes a vertical line of 3 cells. Let me recalculate.

Horizontal blinker at row r, columns c, c+1, c+2.

For cell (r, c+1) (the center):
- Neighbors: (r-1, c), (r-1, c+1), (r-1, c+2), (r, c), (r, c+2), (r+1, c), (r+1, c+1), (r+1, c+2).
- Alive: (r, c) and (r, c+

We need to build Conway's Game of Life on a canvas with a 60x40 grid and finite, non-wrapping boundaries. Requirements:

- Standard rules: live cell survives with 2 or 3 neighbors; dead cell becomes alive with exactly 3.
- Start paused with a visible blinker pattern.
- Controls: Play/Pause, Step, Randomize, Clear, plus a generation counter.
- While paused, clicking toggles a cell. On drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it.
- Step advances exactly one generation while paused. Randomize and Clear leave simulation paused and reset generation counter; Clear removes all live cells.
- Fit grid and controls within viewport, cells distinguishable.

Verification:
- Step the initial blinker twice and compare alternating arrangements.
- Paint a short stroke while paused, check consistent cell painting.
- Use Clear and confirm grid and generation counter reset.

Let me create index.html with inline CSS and JS. Grid is 60 columns by 40 rows? Wait: "60 by 40 grid" - probably 60 columns (width) and 40 rows (height). But cells should be distinguishable. Let's think about sizing: viewport is 1200x800. If we have 60 columns and 40 rows, each cell could be about 12px wide and 20px tall... 60*12=720, 40*20=800. That fits in 1200x800. Or maybe 60x40 cells means 60 columns, 40 rows.

Actually, let me reconsider: "60 by 40 grid" - could be 60 cells wide, 40 cells tall. With finite boundaries (no wrapping).

Let me design:
- Canvas size: maybe 720x800 (60 cols * 12px = 720, 40 rows * 20px = 800).
- Or use a fixed pixel size per cell: 10px width, 15px height: 600x600.

Let me go with something reasonable. I'll use a canvas of 720x800 (60*12=720, 40*20=800). Cells are 12x20 pixels.

Grid: 60 columns (x), 40 rows (y). Finite boundaries: cells outside grid are dead.

Initial blinker pattern: A classic blinker is a 3x3 block that oscillates between horizontal and vertical. The standard blinker is:
```
. O .
O O O
. O .
```
That's 3x3. Place it somewhere in the grid, e.g., centered.

Controls: buttons: Play/Pause, Step, Randomize, Clear, and a generation counter display.

Behavior:
- Start paused with a visible blinker pattern.
- Clicking toggles a cell when paused.
- Drag: "choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it." Hmm, this is a bit confusing. Let me parse: "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

I think it means: When dragging across the grid while paused, the first cell you click determines the state (alive or dead), and then that same state is applied to all cells visited during the drag (i.e., the dragged path gets painted with that state). So if you start on an empty cell and drag, you paint dead? Or maybe the drag direction matters. Let me interpret: The user clicks/drags on the grid. The first cell touched sets the desired state (alive or dead). Then as you drag, each cell under the cursor gets set to that state (painting it). This avoids repeatedly toggling because you're setting the same value.

So implementation: On mousedown, record start position and the target state (from the cell at start position? Or just toggle? Actually "choose painting alive or dead from the first cell" - the first cell's current state determines what to paint? Or the user chooses alive/dead?). Let me think: "On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

Interpretation: When you start dragging, the first cell you click determines the painting mode: if the first cell is alive, paint alive; if dead, paint dead. Then as you drag, each cell you pass over gets painted with that state. This way, you don't toggle back and forth.

Alternatively, maybe the first cell's state is read, and you paint that state. I'll implement: On mousedown, get the cell under cursor. If it's alive, the paint state is alive; otherwise dead. Then on mousemove, fill all cells along the drag path with that state. On mouseup, done.

Actually, "without repeatedly toggling it" suggests that normally clicking toggles (so if you click the same cell twice it toggles back). Dragging paints the entire path with a single state, so no repeated toggling.

Let me implement:
- Mouse down: record start pos, determine paintState = grid[startY][startX] ? alive : dead. Also mark that the drag is active.
- Mouse move: while dragging, fill cells along the line from start to current position with paintState.
- Mouse up: end drag.

For click toggling: normal click (not drag) toggles the cell at the clicked position.

Controls:
- Play/Pause: toggle pause state. When paused, step advances one generation. When unpaused, step stops and the simulation continues? "Step advances exactly one generation while paused." Hmm, "while paused" - so step only works while paused? Or does step advance one generation regardless, but the simulation is paused meaning it doesn't auto-step? Let me re-read:

"Start paused with a visible blinker pattern. Provide Play/Pause, Step, Randomize, and Clear, plus a generation counter."

"While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

"Step advances exactly one generation while paused. Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells."

So:
- The simulation runs in generations. Normally, when not paused, it would auto-step? But the requirement says "Step advances exactly one generation while paused." This suggests that Step button advances one generation, and this action happens while the simulation is paused. Randomize and Clear leave the simulation paused (i.e., they don't unpause) and reset the generation counter.

Hmm, "Randomize and Clear leave the simulation paused and reset the generation counter" - so after Randomize or Clear, the simulation stays paused and the generation counter resets to 0.

And "Step advances exactly one generation while paused" - so when you press Step, it advances one generation, and presumably the simulation remains paused (or maybe it unpauses? The wording is ambiguous). I think the intent is: the simulation is paused initially. You can press Step to advance one generation (the blinker oscillates). Randomize and Clear keep it paused and reset the counter.

Actually, maybe the flow is: The simulation is paused. You can press Step to advance one generation (the blinker pattern changes). Randomize randomizes the grid and resets counter to 0. Clear clears all cells and resets counter to 0. Play/Pause toggles the paused state. When playing (unpaused), the simulation might auto-step? But the requirement says "Step advances exactly one generation while paused" - so Step is the mechanism for advancing while paused. Perhaps when playing, the simulation auto-steps? The requirement doesn't explicitly say auto-stepping. Let me keep it simple:

- Simulation state: paused or running.
- When running (playing): the simulation auto-steps every X ms? Not specified. Maybe no auto-stepping; the user advances via Step.
- Actually, "Step advances exactly one generation while paused" strongly implies that Step is the only way to advance, and it does so while paused. So maybe the simulation is always paused, and Step advances one generation. Randomize/Clear keep it paused and reset counter.

But then what does Play/Pause do? Toggle between paused and running. If running, maybe the simulation auto-steps? The requirement says "Step advances exactly one generation while paused" - this could mean that when you press Step, it advances one generation (and the simulation stays paused). And Play/Pause toggles the paused state. If running, perhaps the blinker auto-oscillates? But that's not specified.

I think the safest interpretation:
- The game starts paused.
- Clicking Play toggles to running (unpaused).
- When running, the simulation auto-advances one generation every, say, 500ms? Not specified. Hmm.

Let me re-read: "Step advances exactly one generation while paused." This is a specific requirement about the Step button behavior: it advances exactly one generation, and this happens while the simulation is paused. So Step is meant to be used while paused.

"Randomize and Clear leave the simulation paused and reset the generation counter" - these actions keep the simulation paused.

So the simulation is paused by default. The user can:
1. Click Play to start (unpause). Then what? Maybe the simulation runs and auto-steps? Or maybe the user uses Step manually while paused.

Given the verification steps: "Step the initial blinker twice and compare its alternating arrangements." So you step twice and see the blinker alternate. This works whether paused or not.

"Paint a short stroke while paused and check consistent cell painting" - paint while paused.

"Use Clear and confirm the grid and generation counter reset" - Clear while paused resets counter.

I'll implement:
- Default: paused.
- Play/Pause button toggles paused state.
- Step button: if paused, advance one generation (compute next state). If running... hmm, if running, maybe also advance? The requirement says "Step advances exactly one generation while paused." I'll make Step work regardless of pause state: it advances one generation. But if running, maybe it also auto-steps? To be safe, I'll make Step always advance one generation (the core mechanic). The "while paused" part might just be describing the typical usage.

Actually, let me think about what makes sense for the verification:
1. Start with paused blinker. Step once -> blinker should be in the other orientation (horizontal/vertical flip). Step again -> back to original.
2. Paint a stroke while paused: click-drag to paint cells.
3. Clear: removes all live cells, resets counter to 0.

So the key is: Step advances one generation. The simulation being paused or running affects whether auto-stepping occurs. Since auto-stepping isn't specified, I'll keep the simulation paused all the time, and Step is the only way to advance. Play/Pause toggles the visual state (maybe just a label). Actually, maybe Play/Pause should control whether the simulation auto-steps. Let me add a timer: when playing, the simulation auto-steps every 500ms. But the requirement says "Step advances exactly one generation while paused" - if it auto-steps while playing, then Step would be redundant. Hmm.

Alternative: The simulation is paused. The user presses Step to advance one generation (the blinker moves). Play/Pause toggles the paused state. When running (unpaused), the simulation might auto-step? The requirement doesn't mention auto-stepping, so I'll skip it. The main thing is that Step advances one generation correctly.

Let me keep it simple:
- State: `paused` boolean.
- `generation` counter.
- `grid[rows][cols]` of booleans.
- On Step: compute next generation, update grid, increment counter.
- On Randomize: fill grid randomly, reset counter to 0.
- On Clear: set grid to all false, reset counter to 0.
- Play/Pause: toggle `paused`.

The blinker pattern: initial state is a blinker (3 horizontal cells in the middle of the grid). Let me place it at rows 18-20, columns 28-30 (centered in 40 rows, 60 cols).

Blinker pattern (vertical):
```
. O .
. O .
. O .
```
Wait, the classic blinker is:
```
O O O
. . .
. . .
```
No, the classic blinker is a vertical line of 3 that becomes horizontal:
Vertical:
```
O
O
O
```
Horizontal:
```
O O O
```

Let me use the horizontal one as initial: row 19 (0-indexed?), columns 28-30. Actually, let me center it. Grid is 40 rows (0-39), 60 cols (0-59). Center around row 20, col 30.

Horizontal blinker at rows 19-19 (one row), cols 28-30:
```
. . . . . O . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

We need to build Conway's Game of Life on a canvas with a 60x40 grid and finite, non-wrapping boundaries. Wait - "60 by 40 grid" - that's 60 columns and 40 rows? Or 60 rows and 40 columns? The task says "60 by 40 grid". Let me think about what makes sense: typically a grid is width x height. I'll go with 60 columns (width) and 40 rows (height). But the blinker pattern needs to fit within this grid.

Actually, let me reconsider. A standard blinker is a 3x3 pattern that oscillates between horizontal and vertical. With a 60x40 grid, we can place it somewhere.

Let me plan the implementation:

1. HTML structure:
   - Canvas for the game
   - Controls: Play/Pause button, Step button, Randomize button, Clear button
   - Generation counter display

2. JavaScript:
   - Grid: 60 columns x 40 rows = 2400 cells
   - Finite boundaries (no wrapping)
   - Standard Conway rules:
     - Live cell survives if it has 2 or 3 live neighbors
     - Dead cell becomes alive if exactly 3 live neighbors
     - Cells outside grid are dead
   - Initial state: paused with a visible blinker pattern
   - Controls: Play/Pause toggles simulation, Step advances one generation while paused, Randomize randomizes, Clear resets all cells
   - While paused, clicking toggles a cell
   - On drag: choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it
   - Step advances exactly one generation while paused
   - Randomize and Clear leave the simulation paused and reset the generation counter
   - Clear removes all live cells
   - Fit grid and controls within viewport while keeping cells distinguishable

Let me think about the canvas size. For 60x40 cells, if each cell is about 10-15 pixels, the canvas would be about 600-800 pixels wide and 400-600 tall. That should fit in a typical viewport.

Let me use cell size of 12px: 60*12 = 720px wide, 40*12 = 480px tall. Plus controls below.

Actually, let me make it responsive. I'll set the canvas to a fixed size that fits well.

For the blinker pattern: a classic blinker is 3 live cells in a row (horizontal or vertical), which alternates between horizontal and vertical every generation. Let me place it at some position like column 25-27, row 18 (horizontal orientation).

Wait, but the initial state needs to be paused with a visible blinker pattern. So the grid starts with a blinking pattern visible. Since it's paused, the blinker will be in one state (say horizontal) and will start oscillating when Play is pressed.

Let me design the layout:
- Canvas: 720x480 (60*12, 40*12)
- Controls below the canvas

Now, the drag behavior: "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

Hmm, this is a bit confusing. Let me parse it:
- While paused, clicking toggles a cell (normal click behavior)
- On a drag: choose painting alive or dead from the first cell, and apply that same state to each visited cell, without repeatedly toggling it

So maybe the idea is: when you drag across cells while holding the mouse button, it paints cells with either alive or dead state. The "first cell" might refer to the starting cell of the drag. You choose whether to paint alive or dead, and then as you drag, each cell you visit gets set to that state (not toggled). This prevents repeatedly toggling the same cell multiple times during a drag.

Implementation approach:
- On mousedown: record start position, set mode to "paint"
- On mousemove while dragging: for each cell under the cursor, set it to the chosen state (alive or dead)
- On mouseup: end the drag

But "choose painting alive or dead from the first cell" - maybe the user first clicks a cell to select the mode (alive/dead), then drags to paint? Or maybe the first cell clicked determines the mode?

Let me simplify: 
- When paused, clicking a cell toggles it (standard)
- When dragging (mouse down + move), the first cell clicked sets the mode (alive=1 or dead=0), and then each cell dragged over gets set to that mode

Actually, re-reading: "On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."

I think the intended behavior is:
1. Click (or perhaps the first cell of the drag) to choose the painting mode: alive or dead
2. Drag to paint cells with that mode
3. Each cell visited gets set to the chosen state (not toggled)

This way, if you drag over the same cell twice (e.g., going back and forth), it won't toggle multiple times.

Let me implement it as:
- On mousedown: record start position, set dragMode = null (waiting for selection)
- Actually, let me make it simpler: on mousedown, check if it's a click (no drag). If it's a click, toggle the cell. If it's a drag (mouse was moved after mousedown), then:
  - First cell clicked determines the mode (alive if the cell was dead, dead if alive? Or just based on the cell's current state?)
  
Hmm, "choose painting alive or dead from the first cell" - maybe the first cell's state determines the mode? Like, if the first cell is alive, paint alive; if dead, paint dead? That seems weird.

Or maybe: the first cell clicked sets the mode - if you click a cell, the mode is set to that cell's current state (alive or dead), and then you drag to paint cells with that state.

Let me go with this interpretation:
- Normal click: toggle the cell (play/pause, step, randomize, clear also work)
- Drag: first cell clicked determines the paint mode (alive or dead based on the cell's current state), then drag paints each visited cell with that mode

Actually, I think the simplest and most reasonable interpretation is:
- Clicking a cell toggles it (when paused)
- Dragging: the first cell clicked sets the paint mode (alive if the cell is currently alive, dead if dead), and then each cell under the cursor gets painted with that mode

Let me implement it this way. The key requirement is "without repeatedly toggling it" - meaning during a drag, setting a cell to a specific state rather than toggling.

Now, let me write the code.

Canvas setup:
- Width: 60 * CELL_SIZE
- Height: 40 * CELL_SIZE
- CELL_SIZE = 12 (gives 720x480)

Grid representation: a 2D array of booleans (false = dead, true = alive).

Neighbor counting: for each cell, count live neighbors among the 8 surrounding cells, but only count cells within bounds (finite boundaries, so out-of-bounds cells are dead).

Simulation loop:
- Compute next state for all cells based on current state
- Update the grid
- Increment generation counter

Controls:
- Play/Pause: toggle simulation running
- Step: advance one generation (only if paused? The spec says "Step advances exactly one generation while paused" - hmm, "while paused" suggests step only works when paused. But typically step advances regardless. Let me re-read.)

"Start paused with a visible blinker pattern. Provide Play/Pause, Step, Randomize, and Clear, plus a generation counter."
"Step advances exactly one generation while paused. Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells."

So:
- Play/Pause: toggles simulation state
- Step: advances one generation. The phrase "while paused" suggests step only works when paused. But that seems odd. Maybe it means step advances one generation (and the simulation state is whatever it is). Let me interpret it as: Step advances one generation (regardless of paused state), but the spec says "while paused". Hmm.

Actually, I think the intent is: when paused, you can step (which advances one generation). When running, step probably does nothing or also advances. Let me make step work regardless of paused state - it always advances one generation. But the spec says "Step advances exactly one generation while paused" - maybe this is emphasizing that step is meaningful when paused (i.e., the simulation is paused so you can see each step).

I'll implement step to always advance one generation (toggle the simulation state doesn't matter much). Actually, to be safe, let me make step only work when paused? No, that would be weird. Let me make step always advance one generation.

Wait, let me re-read more carefully: "Step advances exactly one generation while paused." I think this is saying that when the simulation is paused, a step advances exactly one generation (as opposed to potentially advancing multiple). And "Randomize and Clear leave the simulation paused and reset the generation counter" - these leave the simulation paused. So step might be allowed when not paused too, but the focus is on paused mode.

I'll implement step to always advance one generation. This is the standard behavior.

- Randomize: randomize the grid (each cell alive with 50% probability)
- Clear: set all cells to dead
- Generation counter: display the current generation number

Initial state: paused, with a visible blinker pattern. The blinker is a 3-cell line that alternates between horizontal and vertical. Let me place it horizontally at row 20, columns 25-27 (0-indexed). So cells (20,25), (20,26), (20,27) are alive.

Since it's paused, the blinker stays in one state. When Play is pressed, it starts stepping through generations.

Now, let me think about the drag behavior more concretely:

When paused:
- Mouse down on a cell: record the start position
- If the mouse moves (dragging): for each cell the cursor passes over, set it to the mode determined by the first cell
- Mouse up: end drag

The "mode" is determined by the first cell clicked: if the cell is alive, paint alive; if dead, paint dead.

Actually, "choose painting alive or dead from the first cell" - maybe the first cell's state is used to choose the paint mode. So if the first cell is alive, paint alive; if dead, paint dead.

Let me implement it that way.

Now, let me write the HTML file.

Layout:
```
<div id="container">
  <canvas id="game"></canvas>
  <div id="controls">
    <button>Play/Pause</button>
    <button>Step</button>
    <button>Randomize</button>
    <button>Clear</button>
    <span>Generation: <span id="gen">0</span></span>
  </div>
</div>
```

Canvas size: 720x480 (60*12, 40*12).

CSS: style the container, canvas, buttons nicely.

JavaScript:
```javascript
const COLS = 60;
const ROWS = 40;
const CELL_SIZE = 12;

let grid = [];
let running = false;
let generation = 0;
let canvas, ctx;

// Initialize grid
function initGrid() {
  grid = [];
  for (let r = 0; r < ROWS; r++) {
    grid[r] = [];
    for (let c = 0; c < COLS; c++) {
      grid[r][c] = false;
    }
  }
}

// Count live neighbors
function countNeighbors(r, c) {
  let count = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      const nr = r + dr;
      const nc = c + dc;
      if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
        if (grid[nr][nc]) count++;
      }
    }
  }
  return count;
}

// Compute next state
function computeNext() {
  const newGrid = [];
  for (let r = 0; r < ROWS; r++) {
    newGrid[r] = [];
    for (let c = 0; c < COLS; c++) {
      const neighbors = countNeighbors(r, c);
      if (grid[r][c]) {
        newGrid[r][c] = (neighbors === 2 || neighbors === 3);
      } else {
        newGrid[r][c] = (neighbors === 3);
      }
    }
  }
  return newGrid;
}

// Update grid
function updateGrid(newGrid) {
  grid = newGrid;
}

// Render
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c]) {
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
}

// Blink pattern: horizontal line at row 20, cols 25-27
function drawBlinkers() {
  // Only draw if paused? The spec says "start paused with a visible blinker pattern"
  // The blinker should be visible in the initial state
  ctx.fillStyle = '#00ff00';
  const startRow = 20;
  const startCol = 25;
  for (let i = 0; i < 3; i++) {
    ctx.fillRect((startCol + i) * CELL_SIZE, startRow * CELL_SIZE, CELL_SIZE, CELL_SIZE);
  }
}
```

Wait, I need to think about the blinker. The blinker pattern is a classic oscillator. In the initial state, it should be visible. Let me place it at a position where it's clearly visible. Row 20, columns 25-27 (horizontal) - this is in the middle of the 40-row grid.

Now, the drag behavior. Let me add event listeners to the canvas:

```javascript
canvas.addEventListener('mousedown', (e) => {
  if (!running) { // only allow drags when paused? Or always?
    // ...
  }
});

canvas.addEventListener('mousemove', (e) => {
  // ...
});
```

Hmm, the spec says "While paused, clicking toggles a cell." So clicks (including drags?) toggle cells. But then it separately describes drag behavior. Let me make it so:
- When paused: clicks toggle cells, and drags paint cells
- When running: clicks trigger step/other actions? Actually, the spec doesn't say much about running state interactions. Let me keep it simple: the simulation runs when not paused, and the step button advances one generation.

Actually, let me reconsider. The spec says:
- "Start paused with a visible blinker pattern"
- "Provide Play/Pause, Step, Randomize, and Clear, plus a generation counter"
- "While paused, clicking toggles a cell. On a drag, choose painting alive or dead from the first cell and apply that same state to each visited cell, without repeatedly toggling it."
- "Step advances exactly one generation while paused."
- "Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells."

So:
- Play/Pause: toggles running state
- Step: advances one generation (the "while paused" part might mean step is most useful when paused, or it might restrict step to paused state)
- Randomize: leaves simulation paused, resets generation counter
- Clear: removes all live cells (leaves simulation paused?)

I think the safest interpretation is:
- Step always advances one generation
- Randomize and Clear keep the simulation paused (they don't start it again)
- Play/Pause toggles the running flag

For the drag: only when paused? "While paused, clicking toggles a cell. On a drag..." - this suggests both click and drag happen while paused. But if the simulation is running, clicking should probably do something else (like step?). Let me keep it simple: drag behavior only applies when paused. When running, clicks could toggle cells too, but let's not overcomplicate.

Actually, let me make it so that:
- When paused: clicks toggle cells, drags paint cells
- When running: clicks toggle cells (same as paused), and step advances one generation

Hmm, but "Step advances exactly one generation while paused" - maybe step only works when paused. Let me make step only work when paused. That way, when paused, you can step through generations one at a time. When running, step is disabled (or does nothing).

No wait, that's weird too. Let me just make step always advance one generation. The "while paused" in the spec is probably just describing the context (the blinker is visible while paused).

OK, let me finalize the design:

Controls:
- Play/Pause: toggles `running` boolean
- Step: if paused, advance one generation (or always?)
- Randomize: set all cells to random, reset generation counter to 0, keep paused
- Clear: set all cells to dead, reset generation counter to 0, keep paused
- Generation counter: displayed, updated after each step

Drag behavior (only when paused):
- mousedown: record start position, determine mode from the first cell (alive→paint alive, dead→paint dead)
- mousemove: for each cell under cursor, set to the mode
- mouseup: end drag

Let me also handle mouseleave to cancel drags.

Now, let me think about the canvas positioning. The canvas should be centered or at least fit within the viewport. With 720x480, plus controls below, total height is about 540-560px. That should fit in a typical browser viewport.

Let me write the complete HTML file now.

Actually, let me reconsider the cell size. 12px per cell gives 720x480. That's fine. But maybe I should make it slightly larger for visibility. 14px: 840x560. That might be too big. Let me stick with 12px.

Now, the blinker position: I'll put it at row 18 (0-indexed), columns 23-25 (horizontal). That's near the top-middle. Or row 20, columns 25-27. Let me use row 18, columns 23-25.

Actually, let me use a horizontal blinker at row 18, columns 23, 24, 25. And maybe also have a vertical one? No, just one blinker pattern is enough.

Let me code it up.

One more thing: the spec says "fit the grid and controls within the viewport while keeping cells distinguishable." So the canvas and controls should be sized appropriately. 720x480 should be fine.

Let me write the code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
    background: #f0f0f0;
  }
  #container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  canvas {
    border: 1px solid #333;
    background: #fff;
  }
  #controls {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  button {
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
  }
  #gen {
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
  }
</style>
</head>
<body>
<div id="container">
  <canvas id="game" width="720" height="480"></canvas>
  <div id="controls">
    <button id="playBtn">Play/Pause</button>
    <button id="stepBtn">Step</button>
    <button id="randomBtn">Randomize</button>
    <button id="clearBtn">Clear</button>
    <span>Generation: <span id="gen">0</span></span>
  </div>
</div>
<script>
// ... JS code ...
</script>
</body>
</html>
```

Now the JavaScript:

```javascript
const COLS = 60;
const ROWS = 40;
const CELL_SIZE = 12;

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let grid = [];
let running = false;
let generation = 0;

function initGrid() {
  grid = [];
  for (let r = 0; r < ROWS; r++) {
    grid[r] = [];
    for (let c = 0; c < COLS; c++) {
      grid[r][c] = false;
    }
  }
}

function countNeighbors(r, c) {
  let count = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      const nr = r + dr;
      const nc = c + dc;
      if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
        if (grid[nr][nc]) count++;
      }
    }
  }
  return count;
}

function computeNext() {
  const newGrid = [];
  for (let r = 0; r < ROWS; r++) {
    newGrid[r] = [];
    for (let c = 0; c < COLS; c++) {
      const neighbors = countNeighbors(r, c);
      if (grid[r][c]) {
        newGrid[r][c] = (neighbors === 2 || neighbors === 3);
      } else {
        newGrid[r][c] = (neighbors === 3);
      }
    }
  }
  return newGrid;
}

function updateGrid(newGrid) {
  grid = newGrid;
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c]) {
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
  // Draw blinker indicator
  drawBlinker();
}

function drawBlinker() {
  // Horizontal blinker at row 18, columns 23-25
  const startRow = 18;
  const startCol = 23;
  ctx.fillStyle = '#00ff00';
  for (let i = 0; i < 3; i++) {
    ctx.fillRect((startCol + i) * CELL_SIZE, startRow * CELL_SIZE, CELL_SIZE, CELL_SIZE);
  }
}

function step() {
  if (!running) return;
  const newGrid = computeNext();
  updateGrid(newGrid);
  generation++;
  document.getElementById('gen').textContent = generation;
  render();
}

function toggleCell(r, c) {
  if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return;
  grid[r][c] = !grid[r][c];
}

function paintDrag(mode) {
  // mode: 'alive' or 'dead'
  canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const col = Math.floor(x / CELL_SIZE);
    const row = Math.floor(y / CELL_SIZE);
    if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
      grid[row][col] = (mode === 'alive');
    }
  });
}

// ... event handlers ...
```

Hmm, the drag handling is getting complicated with nested event listeners. Let me restructure.

Better approach: use mousedown/mouseup/mousemove on the canvas directly.

```javascript
let dragMode = null; // 'alive' or 'dead' or null
let dragStartRow, dragStartCol;

canvas.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const col = Math.floor(x / CELL_SIZE);
  const row = Math.floor(y / CELL_SIZE);
  
  if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
    if (dragMode !== null) {
      // Continue drag
      grid[row][col] = (dragMode === 'alive');
    } else {
      // Click: toggle
      toggleCell(row, col);
      // Determine mode from the cell's previous state
      dragMode = grid[row][col] ? 'dead' : 'alive'; // mode is the opposite of current state
      // Start painting from the first cell
      paintDrag(dragMode);
    }
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (dragMode === null) return;
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const col = Math.floor(x / CELL_SIZE);
  const row = Math.floor(y / CELL_SIZE);
  if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {
    grid[row][col] = (dragMode === 'alive');
  }
});

canvas.addEventListener('mouseup', () => {
  dragMode = null;
});
```

Wait, there's an issue: when the user clicks and then drags, the first cell's state determines the mode. But if the user clicks and then drags, the first cell's state at click time determines the mode. Then during drag, cells are set to that mode.

But what if the user clicks, toggles the cell (so its state changes), and then drags? The mode should be based on the state before the click, or after? "Choose painting alive or dead from the first cell" - I think the first cell's current state determines the choice. So if the cell was alive, paint alive; if dead, paint dead.

Actually, let me think about this differently. The user clicks on a cell. That cell's state determines the paint mode. Then the user drags, and each cell they pass over gets painted with that mode. This means the first cell itself gets painted with the mode (overwriting the toggle). That's fine.

But wait: if the first cell was alive and the mode is "alive", then painting it alive keeps it alive. If the mode is "dead", it becomes dead. If the first cell was dead and mode is "dead", it stays dead. If mode is "alive", it becomes alive.

This seems reasonable.

Now, the "without repeatedly toggling it" part: during a drag, we set the cell to the mode directly, not toggle. So even if the cursor passes over the same cell multiple times, it stays at the mode value. Good.

Now, let me also handle the case where the user clicks without dragging (a simple click): toggle the cell. Should the mode be set for future drags? Probably not necessary, but I could set dragMode for convenience. Let me keep it simple: a simple click just toggles.

Now, the event flow:
1. mousedown: if on grid, if dragMode is set (dragging), just update the cell. Otherwise, toggle the cell, set dragMode based on the cell's state, and start painting.
2. mousemove: if dragging, update cells under cursor.
3. mouseup: clear dragMode.

Actually, there's a subtlety: when the user clicks and then drags, the first cell gets toggled (by the click), and then immediately overwritten by the drag paint. That's fine.

But what if the user wants to just toggle a cell without painting? They click once (no drag). The cell toggles. Next time they click elsewhere, it toggles again. That's standard.

Now, let me also consider: should the drag paint include the starting cell? Yes, the starting cell is already painted by the click (toggled) and then by the drag. Actually, in my code above, the click toggles the cell, and then the drag paints it again. So the final state is the paint mode. That's correct.

Hmm, but actually, if the user clicks and then drags in the same direction, the starting cell gets toggled then painted. If the starting cell was dead, it becomes alive (toggle), then paint mode 'alive' → stays alive. If mode is 'dead', it becomes dead. OK.

Now, let me also make sure the blinker is drawn. The blinker is a visual indicator of the initial pattern. I'll draw it as green cells on top of the grid.

Let me also add a subtle border or background to the canvas.

Now, let me write the complete file. I'll also add some styling to make it look nice.

Let me also think about the generation counter. It starts at 0. When the simulation runs (playing), each step increments it. When Randomize or Clear is pressed, it resets to 0.

Wait, "Randomize and Clear leave the simulation paused and reset the generation counter" - so after Randomize or Clear, the simulation remains paused, and the counter goes back to 0.

What about Step? "Step advances exactly one generation while paused" - I'll make step work regardless of paused state, but it only has effect when paused? No, let me make step always advance one generation. The counter increments on each step.

Actually, to strictly follow "Step advances exactly one generation while paused", maybe step should only work when paused. But that would be weird UX. Let me make step work always. The "while paused" is probably just context.

Hmm, let me re-read: "Step advances exactly one generation while paused. Randomize and Clear leave the simulation paused and reset the generation counter; Clear removes all live cells."

I think the intended flow is:
- Paused state: show the blinker
- Click Play → simulation runs
- Step: advance one generation (while paused, meaning you can see each step)
- Randomize: reset grid randomly, pause remains, counter reset
- Clear: remove all live cells, pause remains, counter reset

So step can be done when paused (and probably when running too, but the emphasis is on paused). I'll implement step to always advance one generation.

Now, let me write the complete code.

One more consideration: the canvas size. 720x480. The controls are below. Total height: 480 + about 60 (controls) + padding ≈ 560px. Fits in a standard viewport (typically 800-1000px tall).

Let me also add a title or header. Not required, but nice.

Here's my plan for the complete index.html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conway's Game of Life</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
    background: #f5f5f5;
  }
  h1 {
    color: #333;
    margin: 0 0 10px 0;
  }
  #container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  canvas {
    border: 1px solid #888;
    background: #fff;
    image-rendering: pixelated;
  }
  #controls {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  button {
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #aaa;
    background: #fff;
    border-radius: 4px;
  }
  button:hover {
    background: #eee;
  }
  #gen {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<h1>Conway's Game of Life</h1>
<div id="container">
  <canvas id="game" width="720" height="480"></canvas>
  <div id="controls">
    <button id="playBtn">Play/Pause</button>
    <button id="stepBtn">Step</button>
    <button id="randomBtn">Randomize</button>
    <button id="clearBtn">Clear</button>
    <span>Generation: <span id="gen">0</span></span>
  </div>
</div>
<script>
// ... JS ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const COLS = 60;
const ROWS = 40;
const CELL_SIZE = 12;

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let grid = [];
let running = false;
let generation = 0;

// Initialize grid
function initGrid() {
  grid = [];
  for (let r = 0; r < ROWS; r++) {
    grid[r] = [];
    for (let c = 0; c < COLS; c++) {
      grid[r][c] = false;
    }
  }
}

// Count live neighbors
function countNeighbors(r, c) {
  let count = 0;
  for (let dr = -1; dr <= 1; dr++) {
    for (let dc = -1; dc <= 1; dc++) {
      if (dr === 0 && dc === 0) continue;
      const nr = r + dr;
      const nc = c + dc;
      if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS) {
        if (grid[nr][nc]) count++;
      }
    }
  }
  return count;
}

// Compute next generation
function computeNext() {
  const newGrid = [];
  for (let r = 0; r < ROWS; r++) {
    newGrid[r] = [];
    for (let c = 0; c < COLS; c++) {
      const neighbors = countNeighbors(r, c);
      if (grid[r][c]) {
        newGrid[r][c] = (neighbors === 2 || neighbors === 3);
      } else {
        newGrid[r][c] = (neighbors === 3);
      }
    }
  }
  return newGrid;
}

// Update grid
function updateGrid(newGrid) {
  grid = newGrid;
}

// Render the grid
function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Draw cells
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      if (grid[r][c]) {
        ctx.fillStyle = '#00ff00';
        ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
      }
    }
  }
  // Draw blinker indicator
  drawBlinker();
}

// Draw the blinker pattern (horizontal line)
function drawBlinker() {
  const startRow = 18;
  const startCol = 23;
  ctx.fillStyle = '#00ff00';
  for (let i = 0; i < 3; i++) {
    ctx.fillRect((startCol + i) * CELL_SIZE, startRow * CELL_SIZE, CELL_SIZE, CELL_SIZE);
  }
}

// Advance one generation
function step() {
  const newGrid = computeNext();
  updateGrid(newGrid);
  generation++;
  document.getElementById('gen').textContent = generation;
  render();
}

// Toggle a cell
function toggleCell(r, c) {
  if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return;
  grid[r][c] = !grid[r][c];
}

// Paint mode for drag
let dragMode = null; // 'alive' or 'dead'

function startDrag(r, c) {
  dragMode = grid[r][c] ? 'dead' : 'alive';
  // Paint the first cell
  grid[r][c] = (dragMode === 'alive');
  paintDrag();
}