Conway's Game of Life · gemma-4-26b-a4b-it

The objective is to create a single-page web application implementing Conway's Game of Life on a 60x40 canvas.

    *   Grid: 60x40.
    *   Boundaries: Finite, non-wrapping (cells outside are dead).
    *   Rules:
        *   Live cell survives if 2 or 3 neighbors are alive.
        *   Dead cell becomes alive if exactly 3 neighbors are alive.
    *   Controls:
        *   Play/Pause.
        *   Step (advances one generation).
        *   Randomize (sets random state, pauses, resets counter).
        *   Clear (removes all live cells, pauses, resets counter).
    *   Initial State:
        *   Paused.
        *   Visible blinker pattern.
    *   Interaction:
        *   Clicking a cell toggles its state while paused.
        *   Dragging (while paused) paints the same state (alive or dead) from the first cell clicked.
    *   UI:
        *   Generation counter.
        *   Grid and controls must fit in the viewport.
        *   Self-contained `index.html` (no external CSS/JS).
    *   Verification:
        *   Step twice (check blinker).
        *   Drag (paint stroke).
        *   Clear (check grid and counter).

    *   HTML structure: `<canvas>` for the grid, `<div class="controls">` for buttons and counter.
    *   CSS: Flexbox/Grid for layout, styling for buttons and canvas.
    *   JS:
        *   State: `grid` (2D array), `generation` (integer), `isPlaying` (boolean), `isDragging` (boolean), `dragState` (boolean), `rows`, `cols`, `cellSize`.
        *   Game Logic: `nextGeneration()` function.
        *   Rendering: `draw()` function to render the canvas.
        *   Input Handlers: `mousedown`, `mousemove`, `mouseup`, `click`.
        *   Control Handlers: `togglePlay`, `step`, `randomize`, `clear`.

    *   60x40 = 2400 cells.
    *   Canvas size should be responsive or fit within the viewport. Given the grid size, let's say 600x400 pixels (10x10 per cell) or something similar that fits.
    *   Blinker pattern: A row/column of 3 cells. For example, at (10, 10), (10, 11), (10, 12).

    *   `mousedown`: If paused, set `isDragging = true`, `dragState = currentCellState ^ 1` (toggle from current cell? No, "choose painting alive or dead from the first cell and apply that same state to each visited cell"). So if I click a live cell, I paint live? Or if I click a live cell, I paint dead?
    *   The prompt says: "choose painting alive or dead from the first cell and apply that same state to each visited cell".
    *   Example: Click a live cell -> dragging will paint all cells in the path as "alive".
    *   Wait, if I click a live cell, I want to paint the *same* state. So if I click an alive cell, I'm painting alive cells. If I click a dead cell, I'm painting dead cells.
    *   Actually, "choose painting alive or dead from the first cell". If I click a live cell, I am choosing to paint "alive". If I click a dead cell, I am choosing to paint "dead".
    *   Let's refine:
        *   `mousedown`:
            *   If paused:
                *   Identify cell.
                *   `dragState = grid[r][c]`
                *   `isDragging = true`
                *   (Optional) Toggle the first cell? The prompt says "While paused, clicking toggles a cell. On a drag, choose...". This implies the first click *might* toggle, or the drag *starts* from the state of the first cell.
                *   Let's 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."
                *   This means:
                    1. Click (no drag) -> Toggle.
                    2. Mousedown (start drag) -> Determine state of the cell.
                    3. Mousemove (while dragging) -> Set cell to that state.
                    4. Mouseup -> End drag.

    *   `grid` (2D array).
    *   `nextGrid` (2D array for calculating next generation).
    *   `requestAnimationFrame` for the loop.

    *   `nextGeneration()`:
        ```javascript
        for (r in rows) {
          for (c in cols) {
            let neighbors = countNeighbors(r, c);
            if (grid[r][c] === 1) {
              newGrid[r][c] = (neighbors === 2 || neighbors === 3)? 1 : 0;
            } else {
              newGrid[r][c] = (neighbors === 3)? 1 : 0;
            }
          }
        }
        ```
    *   `countNeighbors(r, c)`:
        ```javascript
        let count = 0;
        for (dr in -1..1) {
          for (dc in -1..1) {
            if (dr === 0 && dc === 0) continue;
            let nr = r + dr;
            let nc = c + dc;
            if (nr >= 0 && nr < rows && nc >= 0 && nc < cols) {
              count += grid[nr][nc];
            }
          }
        }
        return count;
        ```

    *   Canvas: 600x400.
    *   Cell size: 10x10.
    *   Colors: Dark background, light cells, etc.
    *   Controls: Buttons at the top or bottom.

    *   Initialize `grid` with a blinker.
    *   Blinker pattern: (x, y), (x+1, y), (x+2, y).
    *   Initial state: `isPlaying = false`.

    *   `click` on canvas:
        *   If `isPlaying` is false:
            *   `grid[r][c] = 1 - grid[r][c]`
            *   `draw()`
    *   `mousedown` on canvas:
        *   If `isPlaying` is false:
            *   `isDragging = true`
            *   `targetState = grid[r][c]`
            *   `startR = r`, `startC = c`
    *   `mousemove` on canvas:
        *   If `isDragging` and `isPlaying` is false:
            *   `grid[r][c] = targetState`
            *   `draw()`
    *   `mouseup` on canvas:
        *   `isDragging = false`

    Wait, if I click a cell, it toggles. If I drag, I should not toggle the first cell *and* then have the drag state override it?
    "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 implies:
    - A single click toggles.
    - A drag starts with the state of the first cell, and all subsequent cells in the drag path are set to that state.

    Let's refine the "click" vs "drag" behavior.
    In `mousedown`, we should determine if it's a click or the start of a drag.
    Standard way:
    - `mousedown`: `isDragging = true`, `dragState = grid[r][c]`.
    - `mousemove`: if `isDragging`, `grid[r][c] = dragState`.
    - `mouseup`: `isDragging = false`.
    - `click`: If `!isDragging` (after mouseup), then toggle.

    Actually, the prompt says "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".
    This could mean:
    - Click (no movement): `grid[r][c] = 1 - grid[r][c]`
    - Drag (with movement): `grid[r][c] = grid[startR][startC]`

    Let's go with:
    - `mousedown`: `isDragging = true`, `dragState = grid[r][c]`.
    - `mousemove`: if `isDragging`, `grid[r][c] = dragState`.
    - `mouseup`: if `isDragging`, `isDragging = false`.
    - `click`: If `!isDragging`, toggle.
    Wait, `click` is fired after `mouseup`. If `isDragging` was true, `click` might still fire.
    Let's use a flag `hasMoved`.

    1. `mousedown`: `isDragging = true`, `dragState = grid[r][c]`, `hasMoved = false`.
    2. `mousemove`: if `isDragging`, `hasMoved = true`, `grid[r][c] = dragState`.
    3. `mouseup`: if `isDragging`, `isDragging = false`.
    4. `click`: if `!isDragging` and `!hasMoved` (wait, if `!hasMoved`, it was just a click), toggle.

    Wait, if `isDragging` is true, we are setting the state.
    If we want to "choose painting alive or dead from the first cell", it means if I click an alive cell, the drag paints alive cells. If I click a dead cell, the drag paints dead cells.

    Let's try:
    - `mousedown`: `isDragging = true`, `dragState = grid[r][c]`.
    - `mousemove`: if `isDragging`, `grid[r][c] = dragState`.
    - `mouseup`: `isDragging = false`.
    - `click`: if `!isDragging` (Wait, `click` is `mousedown` + `mouseup` on same element).
    Actually, if we are in a "click" state, we toggle. If we are in a "drag" state, we set.

    Let's implement:
    - `mousedown`:
        - if `!isPlaying`:
            - `isDragging = true`
            - `dragState = grid[r][c]`
    - `mousemove`:
        - if `isDragging` and `!isPlaying`:
            - `grid[r][c] = dragState`
            - `needsRedraw = true`
    - `mouseup`:
        - `isDragging = false`
    - `click`:
        - if `!isPlaying` and `!isDragging` (wait, `click` is after `mouseup`):
            - We need a way to distinguish a single click from a drag.
            - A simple way: `click` event only fires if `mousedown` and `mouseup` were at the same location. But `mousemove` might have fired.
            - Let's use:
                - `mousedown`: `isDragging = true`, `dragState = grid[r][c]`, `hasMoved = false`.
                - `mousemove`: `hasMoved = true`, if `isDragging` then `grid[r][c] = dragState`.
                - `mouseup`: `isDragging = false`.
                - `click`: if `!hasMoved` and `!isPlaying`: toggle.

    Wait, the prompt says "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".
    This is slightly ambiguous. Does "clicking" mean "a single click"?
    If I click a cell, it toggles. If I then drag, I am painting.
    If I click, it's a single event.
    If I click and drag, it's a sequence.

    Let's use this:
    - `mousedown`: `isDragging = true`, `dragState = grid[r][c]`.
    - `mousemove`: if `isDragging`, `grid[r][c] = dragState`.
    - `mouseup`: `isDragging = false`.
    - `click`: if `!isDragging` (which is always true at `click` event), and we didn't move...
    Actually, let's just handle it in `mousedown` and `mousemove`.
    If `isDragging` is true, we are painting.
    When `mouseup` occurs, we check if we actually moved.
    Actually, if we `mousedown` and then immediately `mouseup` at the same spot, that's a click.

    Let's simplify:
    - `mousedown` -> `isDragging = true`, `dragState = grid[r][c]`, `moved = false`.
    - `mousemove` -> `moved = true`, if `isDragging` then `grid[r][c] = dragState`.
    - `mouseup` -> `isDragging = false`.
    - `click` -> if `!moved` and `!isPlaying` then toggle.

    Wait, the "blinker" needs to be visible.
    A blinker is a 3-cell line.
    Example: (10, 10), (11, 10), (12, 10).
    In the next generation, it becomes (10, 11), (11, 11), (12, 11).
    So it toggles orientation.

    Let's write the code.