1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Conway's Game of Life</title>
7 <link rel="stylesheet" href="style.css" />
8</head>
9<body>
10 <header class="app-header">
11 <h1>Conway's Game of Life</h1>
12 <p class="tagline">Draw cells, drop in classic patterns, and watch them evolve.</p>
13 </header>
14
15 <main class="app">
16 <section class="toolbar" aria-label="Simulation controls">
17 <div class="control-group">
18 <button id="playPause" class="btn primary">Play</button>
19 <button id="step" class="btn">Step</button>
20 <button id="clear" class="btn">Clear</button>
21 <button id="random" class="btn">Random</button>
22 </div>
23
24 <div class="control-group">
25 <label class="slider">
26 Speed
27 <input id="speed" type="range" min="1" max="60" value="10" />
28 <span id="speedValue" class="value">10 gen/s</span>
29 </label>
30 </div>
31
32 <div class="control-group">
33 <label class="toggle">
34 <input id="wrap" type="checkbox" />
35 Wrap-around edges
36 </label>
37 </div>
38
39 <div class="control-group stats">
40 <span class="stat">Generation <strong id="generation">0</strong></span>
41 <span class="stat">Population <strong id="population">0</strong></span>
42 </div>
43 </section>
44
45 <section class="patterns" aria-label="Pattern library">
46 <span class="patterns-label">Tools:</span>
47 <button id="drawMode" class="btn pattern active">Draw</button>
48 <span class="divider" aria-hidden="true"></span>
49 <span class="patterns-label">Patterns:</span>
50 <div id="patternButtons" class="pattern-buttons"></div>
51 <span class="hint">Pick a pattern, then click the grid to place it.</span>
52 </section>
53
54 <section class="canvas-wrap">
55 <canvas id="grid" aria-label="Game of Life grid"></canvas>
56 </section>
57
58 <footer class="app-footer">
59 <p>
60 Drag on the grid to draw or erase cells. Rules: a live cell with 2–3
61 neighbours survives; a dead cell with exactly 3 neighbours is born.
62 <a href="tests.html">Run the tests →</a>
63 </p>
64 </footer>
65 </main>
66
67 <script src="life.js"></script>
68</body>
69</html>
70
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.