about summary refs log tree commit diff stats
path: root/html/life.html
diff options
context:
space:
mode:
authorelioat <elioat@tilde.institute>2024-06-21 20:48:54 -0400
committerelioat <elioat@tilde.institute>2024-06-21 20:48:54 -0400
commit20b3050a18b0902d8620f3dbd82d9fc4c7a61cbd (patch)
tree7a4c1f931534d1018d11cfffd03191c494bde1bc /html/life.html
parent470a24d06d57a3298fff2d40a179b09435d5b02f (diff)
downloadtour-20b3050a18b0902d8620f3dbd82d9fc4c7a61cbd.tar.gz
*
Diffstat (limited to 'html/life.html')
-rw-r--r--html/life.html129


1 files changed, 72 insertions, 57 deletions
diff --git a/html/life.html b/html/life.html
index 703b1e6..9d2ecf3 100644
--- a/html/life.html
+++ b/html/life.html
@@ -5,8 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Conway's Game of Life</title>
     <style>
+        * {
+            font-size: 1em;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: beige;
+        }
         canvas {
-            border: 1px solid black;
+            border: beige 1px solid;
         }
         #controls {
             margin-top: 10px;
@@ -18,49 +26,65 @@
             border: none;
             padding: 0.25em 1em;
         }
+        button:hover {
+            cursor: pointer;
+        }
         .playButton {
-            background-color: green;
-            color: white;
+            background-color: rgb(116, 255, 239);
+            color: black;
         }
-
         .pauseButton {
-            background-color: red;
-            color: white;
+            background-color: rgb(255, 105, 250);
+            color: black;
+        }
+        #contentContainer {
+            padding: 2em 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: left;
+        }
+        canvas {
+            margin-bottom: 3em;
         }
     </style>
 </head>
 <body>
-    <canvas id="gameCanvas" width="400" height="400"></canvas>
-    <div id="controls">
-        <button id="playButton" class="playButton">Play</button>
-        <button id="pauseButton" class="pauseButton">Pause</button>
-        <button id="clearButton">Clear</button>
-        <label for="speedSlider">Speed:</label>
-        <input type="range" id="speedSlider" min="1" max="1000" value="500">
-        <span id="speedValue">500</span> ms
-        <br>
-        <br>
-        <label for="patternSelect">Pattern:</label>
-        <select id="patternSelect">
-            <option value="random">Random</option>
-            <option value="glider">Glider</option>
-            <option value="lwss">Lightweight Spaceship</option>
-            <option value="blinker">Blinker</option>
-            <option value="toad">Toad</option>
-            <option value="beacon">Beacon</option>
-            <option value="block">Block</option>
-            <option value="beehive">Beehive</option>
-            <option value="loaf">Loaf</option>
-            <option value="boat">Boat</option>
-            <option value="tub">Tub</option>
-            <option value="pulsar">Pulsar</option>
-            <option value="pentadecathlon">Pentadecathlon</option>
-            <option value="gosper_glider_gun">Gosper Glider Gun</option>
-            <option value="diehard">Diehard</option>
-            <option value="acorn">Acorn</option>
-            <option value="r_pentomino">R-pentomino</option>
-            <option value="blinker_pair">Blinker-pair</option>
-        </select>
+    <div id="contentContainer">
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+        <form id="controls">
+            <button id="playButton" class="playButton" type="button">Play</button>
+            <button id="pauseButton" class="pauseButton" type="button">Pause</button>
+            <button id="clearButton" type="button">Clear</button>
+            <label for="speedSlider">Speed:</label>
+            <input type="range" id="speedSlider" min="1" max="1000" value="500">
+            <span id="speedValue">500</span> ms
+            <br>
+            <br>
+            <label for="patternSelect">Pattern:</label>
+            <select id="patternSelect">
+                <option value="random">Random</option>
+                <option value="glider">Glider</option>
+                <option value="lwss">Lightweight Spaceship</option>
+                <option value="blinker">Blinker</option>
+                <option value="toad">Toad</option>
+                <option value="beacon">Beacon</option>
+                <option value="block">Block</option>
+                <option value="beehive">Beehive</option>
+                <option value="loaf">Loaf</option>
+                <option value="boat">Boat</option>
+                <option value="tub">Tub</option>
+                <option value="pulsar">Pulsar</option>
+                <option value="pentadecathlon">Pentadecathlon</option>
+                <option value="gosper_glider_gun">Gosper Glider Gun</option>
+                <option value="diehard">Diehard</option>
+                <option value="acorn">Acorn</option>
+                <option value="r_pentomino">R-pentomino</option>
+                <option value="blinker_pair">Blinker-pair</option>
+            </select>
+        </form>
+        </form>
     </div>
     <script>
         class GameOfLife {
@@ -286,25 +310,16 @@
 
             setGosperGliderGun() {
                 const pattern = [
-                    [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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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, 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,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]
+            ];
                 this.placePattern(pattern, Math.floor(this.rows / 2) - 9, Math.floor(this.cols / 2) - 17);
             }
 
@@ -379,7 +394,7 @@
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             for (let x = 0; x < game.rows; x++) {
                 for (let y = 0; y < game.cols; y++) {
-                    ctx.fillStyle = game.grid[x][y] ? 'black' : 'white';
+                    ctx.fillStyle = game.grid[x][y] ? '#2d2d2d' : 'beige';
                     ctx.fillRect(y * cellSize, x * cellSize, cellSize, cellSize);
                     ctx.strokeStyle = 'lightgrey';
                     ctx.strokeRect(y * cellSize, x * cellSize, cellSize, cellSize);

 

generated by cgit-pink 1.4.1-2-gfad0 (git 2.36.2.497.gbbea4dcf42) at 2025-06-10 18:28:14 +0000