// This approach will create a Game of Life simulation using React for the frontend and // a simple backend to serve the HTML. We'll use a canvas element for efficient rendering // of the game grid and implement the Game of Life rules on the client side. An explanation // dialog is added to provide information about the game and common patterns. /** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const CELL_SIZE = 10; const GRID_COLOR = "#CCCCCC"; const ALIVE_COLOR = "#000000"; const DEAD_COLOR = "#FFFFFF"; // Existing patterns const PATTERNS = { glider: [ [0, 1, 0], [0, 0, 1], [1, 1, 1], ], blinker: [ [0, 1, 0], [0, 1, 0], [0, 1, 0], ], toad: [ [0, 1, 1, 1], [1, 1, 1, 0], ], beacon: [ [1, 1, 0, 0], [1, 1, 0, 0], [0, 0, 1, 1], [0, 0, 1, 1], ], // New patterns gosperGliderGun: [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ], pulsar: [ [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0], ], }; const fillRandomGrid = (rows, cols) => { return Array(rows).fill().map(() => Array(cols).fill().map(() => Math.random() > 0.7 ? 1 : 0)); }; const centerPattern = (grid, pattern) => { const startRow = Math.floor((grid.length - pattern.length) / 2); const startCol = Math.floor((grid[0].length - pattern[0].length) / 2); return addPattern(grid, pattern, startRow, startCol); }; const fillWithPattern = (grid, pattern) => { const newGrid = grid.map(row => [...row].fill(0)); for (let i = 0; i < grid.length; i += pattern.length) { for (let j = 0; j < grid[0].length; j += pattern[0].length) { addPattern(newGrid, pattern, i, j); } } return newGrid; }; const createEmptyGrid = (rows, cols) => { return Array(rows).fill().map(() => Array(cols).fill(0)); }; // Calculate grid dimensions based on window size const getGridDimensions = () => { const cols = Math.floor(window.innerWidth / CELL_SIZE); const rows = Math.floor((window.innerHeight - 150) / CELL_SIZE); // Adjusted for buttons return [rows, cols]; }; const resizeGrid = (grid, rows, cols) => { // Create a new grid with the desired dimensions and copy over existing cells const newGrid = createEmptyGrid(rows, cols); grid.forEach((row, i) => row.forEach((cell, j) => { if (i < rows && j < cols) newGrid[i][j] = cell; }) ); return newGrid; }; const addPattern = (grid, pattern, startRow, startCol) => { // Add a pattern to the grid at the specified position, wrapping around edges const newGrid = grid.map(row => [...row]); for (let i = 0; i < pattern.length; i++) { for (let j = 0; j < pattern[i].length; j++) { const row = (startRow + i + grid.length) % grid.length; const col = (startCol + j + grid[0].length) % grid[0].length; newGrid[row][col] = pattern[i][j]; } } return newGrid; }; function GameOfLife() { const [grid, setGrid] = useState([]); const [running, setRunning] = useState(false); const runningRef = useRef(running); runningRef.current = running; const canvasRef = useRef(null); useEffect(() => { const [rows, cols] = getGridDimensions(); setGrid(createEmptyGrid(rows, cols)); }, []); useEffect(() => { if (canvasRef.current) { drawGrid(); } }, [grid, window.innerWidth, window.innerHeight]); // Initialize an empty grid const initializeGrid = () => { const cols = Math.floor(window.innerWidth / CELL_SIZE); const rows = Math.floor(window.innerHeight / CELL_SIZE); const newGrid = Array(rows).fill().map(() => Array(cols).fill(0)); setGrid(newGrid); }; // Handle window resize events useEffect(() => { const handleResize = () => { const [rows, cols] = getGridDimensions(); setGrid(grid => resizeGrid(grid, rows, cols)); }; window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); // Draw the current state of the grid on the canvas const drawGrid = () => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); for (let row = 0; row < grid.length; row++) { for (let col = 0; col < grid[row].length; col++) { const cellColor = grid[row][col] ? ALIVE_COLOR : DEAD_COLOR; ctx.fillStyle = cellColor; ctx.fillRect(col * CELL_SIZE, row * CELL_SIZE, CELL_SIZE - 1, CELL_SIZE - 1); } } ctx.strokeStyle = GRID_COLOR; for (let i = 0; i <= canvas.width; i += CELL_SIZE) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); ctx.stroke(); } for (let j = 0; j <= canvas.height; j += CELL_SIZE) { ctx.beginPath(); ctx.moveTo(0, j); ctx.lineTo(canvas.width, j); ctx.stroke(); } }; // Main simulation loop const runSimulation = () => { if (!runningRef.current) { return; } setGrid((g) => { const newGrid = g.map((row, i) => row.map((cell, j) => { const neighbors = countNeighbors(g, i, j); if (cell === 1) { if (neighbors < 2 || neighbors > 3) return 0; return 1; } else { if (neighbors === 3) return 1; return 0; } }) ); return newGrid; }); setTimeout(runSimulation, 100); }; // Count live neighbors for a given cell const countNeighbors = (grid, row, col) => { let count = 0; for (let i = -1; i < 2; i++) { for (let j = -1; j < 2; j++) { if (i === 0 && j === 0) continue; const r = (row + i + grid.length) % grid.length; const c = (col + j + grid[0].length) % grid[0].length; count += grid[r][c]; } } return count; }; // Handle click events on the canvas to toggle cell state const handleClick = (event) => { const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (event.clientX - rect.left) * scaleX; const y = (event.clientY - rect.top) * scaleY; const col = Math.floor(x / CELL_SIZE); const row = Math.floor(y / CELL_SIZE); setGrid((g) => { const newGrid = [...g]; newGrid[row][col] = newGrid[row][col] ? 0 : 1; return newGrid; }); }; // Add a random pattern to the grid const addRandomPattern = (patternName) => { const pattern = PATTERNS[patternName]; const startRow = Math.floor(Math.random() * (grid.length - pattern.length)); const startCol = Math.floor(Math.random() * (grid[0].length - pattern[0].length)); setGrid((g) => { return addPattern(g, pattern, startRow, startCol); }); }; // Fill the grid with random live and dead cells const handleRandomFill = () => { const [rows, cols] = getGridDimensions(); setGrid(fillRandomGrid(rows, cols)); }; // Center a specific pattern on the grid const handleCenterPattern = (patternName) => { const [rows, cols] = getGridDimensions(); const emptyGrid = createEmptyGrid(rows, cols); setGrid(centerPattern(emptyGrid, PATTERNS[patternName])); }; // Fill the entire grid with a repeating pattern const handleFillWithPattern = (patternName) => { const [rows, cols] = getGridDimensions(); const emptyGrid = createEmptyGrid(rows, cols); setGrid(fillWithPattern(emptyGrid, PATTERNS[patternName])); }; const valTownUrl = import.meta.url.replace("esm.town", "val.town"); const [showExplanation, setShowExplanation] = useState(false); const ExplanationDialog = useCallback(() => { if (!showExplanation) return null; return (

Game of Life Explanation

Conway's Game of Life is a cellular automaton simulation where cells on a grid evolve over time based on simple rules:

Any live cell with fewer than two live neighbors dies (underpopulation)
Any live cell with two or three live neighbors lives on to the next generation
Any live cell with more than three live neighbors dies (overpopulation)
Any dead cell with exactly three live neighbors becomes a live cell (reproduction)

Common Patterns:

Glider: A small pattern that moves diagonally across the grid
Blinker: A simple oscillator that alternates between vertical and horizontal lines
Toad: Another oscillator that appears to move back and forth
Beacon: An oscillator where two corners flash on and off
Gosper Glider Gun: A pattern that continuously produces gliders
Pulsar: A larger, more complex oscillator with a period of 3

Experiment with different patterns and see how they interact and evolve over time!

); }, [showExplanation]); return (

Game of Life

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { window.addEventListener("DOMContentLoaded", (event) => { client(); }); } async function server(request: Request): Promise { return new Response( ` Game of Life

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f0f0f0; padding: 4px; } h1 { margin-bottom: 10px; padding: 8px; } button { margin: 5px; padding: 5px 10px; font-size: 16px; cursor: pointer; white-space: nowrap; } canvas { border: 1px solid #000; margin-top: 10px; } p { margin-top: 10px; text-align: center; } .heading { padding: 8px; } .control-button { font-weight: bold; padding: 8px 16px; margin: 5px; border-radius: 5px; border: none; cursor: pointer; } .start-stop { background-color: #4CAF50; color: white; } .clear { background-color: #f44336; color: white; } .pattern-button { background-color: #2196F3; color: white; padding: 6px 12px; margin: 3px; border-radius: 4px; border: none; cursor: pointer; } .info-button { background-color: #FFC107; color: black; padding: 6px 12px; margin: 3px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; } .dialog-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .dialog { background-color: white; padding: 20px; border-radius: 5px; max-width: 80%; max-height: 80%; overflow-y: auto; } .dialog h2 { margin-top: 0; } .dialog button { margin-top: 10px; } .dialog ul, .dialog ol { text-align: left; } .dialog li { margin-bottom: 5px; } a { color: #2196F3; } `; export default server;

gameOfLifeSite