Update

fornwall · Jun 25, 2023 · 365a672 · 365a672
1 parent eb76c09
commit 365a672
Show file tree

Hide file tree

Showing 8 changed files with 371 additions and 36 deletions.
diff --git a/site/index.html b/site/index.html
@@ -5,9 +5,13 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>WGPU Game of Life</title>
+    <meta property="og:url" content="https://wgpu-game-of-life.fornwall.net" />
+    <meta property="og:title" content="Game of Life WebGPU" />
+    <meta property="og:description" content="A simulation of Game of Life using the WebGPU API." />
+    <meta property="og:image" content="https://wgpu-game-of-life.fornwall.net/static/screenshot.png" />
+    <title>Game of Life</title>
     <style>
-        * {
+        body {
             margin: 0;
             padding: 0;
         }
@@ -46,7 +50,7 @@
             color: white;
             flex-direction: column;
             align-items: center;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.9);
             border: 1px solid white;
             padding: 1em;
             border-radius: 0.5em;
@@ -56,10 +60,15 @@
         }
 
         #about h1,
+        #about h2,
         #about p {
             margin-bottom: 0.5em;
         }
 
+        #about h2 {
+            margin-top: 1em;
+        }
+
         #about a {
             color: white;
         }
@@ -74,6 +83,14 @@
             opacity: 0.9;
         }
 
+        #overlay a {
+            color: white;
+        }
+
+        #overlay p {
+            margin-block-end: 0;
+        }
+
         .hidden {
             display: none;
         }
@@ -96,9 +113,13 @@
         <h1>wgpu-game-of-life</h1>
         <p id="webgpu-not-working" style="display: none"><strong>⚠️ NOTE:️</strong> WebGPU is not working in your
             browser - see <a href="https://caniuse.com/webgpu">caniuse.com/webgpu</a>.</p>
-        <p>This is a game of life simulation done using the <a
-                href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU</a>.</p>
+        <p>This is a <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Game of Life</a> simulation done
+            using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU API</a>.</p>
         <p>See <a href="https://github.com/fornwall/wgpu-game-of-life">source code</a>.</p>
+        <h2>About game of life</h2>
+        <p>Game of Life is a simulation of a grid.
+        <p>Each cell in the grid is either <strong>alive</strong> or <strong>dead</strong>.
+        </p>
         <form>
             <button id="close-dialog" formmethod="dialog">Ok</button>
         </form>
@@ -107,9 +128,9 @@ <h1>wgpu-game-of-life</h1>
     <div id="overlay" style="display: none" open="true">
         <span style="float:right">
             <button id="pauseButton" style="width: 4em">Pause</button>
-            <button id="hideControlsButton">Hide</button>
             <button id="resetButton">Reset</button>
             <button id="fullscreenButton">Fullscreen</button>
+            <button id="hideControlsButton">Hide</button>
         </span>
         <span id="hideableControls">
             <br />
@@ -118,19 +139,28 @@ <h1>wgpu-game-of-life</h1>
             <select id="rule" class="max-width"></select>
             <br />
             <br />
-            Size: <span id="size"></span>
+            <p><label for="size">Grid size:&nbsp;</label></p>
+            <select id="size" class="max-width">
+                <option value="64">64x64</option>
+                <option value="128">128x128</option>
+                <option value="256">256x256</option>
+                <option value="512">512x512</option>
+                <option value="1024">1024x1024</option>
+                <option value="2048">2048x2048</option>
+            </select>
             <br />
             <br />
-            <p><label for="density">Density:&nbsp;<span id="density-display"></span></label></p>
+            <p><label for="density">Initial density:&nbsp;<span id="density-display"></span></label></p>
             <input type="range" class="max-width" id="density" min="1" max="99"></input>
             <br />
             <br />
-            <p><label for="generations-per-second">GPS:&nbsp;<span id="generations-per-second-display"></span></label>
+            <p><label for="generations-per-second">Generations per second:&nbsp;<span
+                        id="generations-per-second-display"></span></label>
             </p>
-            <input type="range" id="generations-per-second" class="max-width" min="1" max="100"></input>
+            <input type="range" id="generations-per-second" class="max-width" min="1" max="30"></input>
             <br />
-            <div style="text-align: center; margin: 1em">
-                <a href="https://github.com/fornwall/wgpu-game-of-life">Source</a>
+            <div style="text-align: center; margin: 1em;">
+                <a id="about-link" href="https://github.com/fornwall/wgpu-game-of-life">About</a>
             </div>
         </span>
     </div>

diff --git a/site/index.js b/site/index.js
@@ -1,8 +1,8 @@
-import init, { run, getRules, setNewRule, setDensity, resetGame, togglePause, setGenerationsPerSecond } from "./generated/wgpu_game_of_life.js";
+import init, { run, getRules, setNewRule, setNewSize, setDensity, resetGame, togglePause, setGenerationsPerSecond } from "./generated/wgpu_game_of_life.js";
 
 const ruleSelect = document.getElementById('rule');
+const sizeSelect = document.getElementById("size");
 const canvas = document.getElementById("webgpu-canvas");
-const sizeElement = document.getElementById("size");
 const overlayElement = document.getElementById("overlay");
 const densityInput = document.getElementById("density");
 const densityDisplay = document.getElementById("density-display");
@@ -15,7 +15,7 @@ canvas.focus();
 
 globalThis.setNewState = function (ruleIdx, size, seed, density, paused, generationsPerSecond, frame) {
   document.title = ruleSelect.options[ruleIdx].textContent;
-  sizeElement.textContent = size + 'x' + size;
+  sizeSelect.value = size;
   ruleSelect.value = ruleIdx;
   const queryString = `?rule=${ruleIdx}&size=${size}&seed=${seed}&density=${density}&gps=${generationsPerSecond}&paused=${paused}` + (paused ? `&frame=${frame}` : '');
   window.history.replaceState({}, '', queryString);
@@ -51,9 +51,14 @@ try {
     ruleSelect.appendChild(new Option(rule.name(), ruleIdx));
   }
   ruleSelect.addEventListener('change', () => { setNewRule(ruleSelect.value); });
+  sizeSelect.addEventListener('change', () => { setNewSize(sizeSelect.value); });
   document.getElementById('resetButton').addEventListener('click', resetGame);
   document.getElementById('fullscreenButton').addEventListener('click', toggleFullscreen);
   document.getElementById('hideControlsButton').addEventListener('click', toggleControls);
+  document.getElementById('about-link').addEventListener('click', (event) => {
+    event.preventDefault();
+    aboutDialog.showModal();
+  });
   pauseButton.addEventListener('click', togglePause);
   densityInput.addEventListener('change', () => {
     setDensity(densityInput.value);
@@ -64,20 +69,18 @@ try {
 
   const urlParams = new URLSearchParams(window.location.search);
   const rule = parseInt(urlParams.get('rule'));
+  const size = parseInt(urlParams.get('size'));
   const seed = parseInt(urlParams.get('seed'));
   const density = parseInt(urlParams.get('density'));
   const paused = "true" === urlParams.get('paused');
   const generationsPerSecond = parseInt(urlParams.get("gps"));
 
-  await run(rule, seed, density, paused, generationsPerSecond);
-
-  aboutDialog.showModal();
-  aboutDialog.focus();
+  await run(rule, size, seed, density, paused, generationsPerSecond);
 } catch (e) {
   console.error('error', e);
   canvas.remove();
   overlayElement.remove();
   document.getElementById('webgpu-not-working').style.display = 'block';
   document.getElementById('close-dialog').remove();
-  document.getElementById('about').show();
+  aboutDialog.show();
 }