1 files changed, 40 insertions, 6 deletions
diff --git a/test/js/life.html b/test/js/life.html
index caa6a1faa..bb3151b7b 100644
--- a/test/js/life.html
+++ b/test/js/life.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>Conway's Game of Life</title>
-    <link rel="stylesheet" type="text/css" href="resource:internal.css">
+    <link rel="stylesheet" type="text/css" href="resource:internal.css" />
     <style>
       canvas#surface {
         width: 50vmin;
@@ -14,7 +14,12 @@
   <body class="ns-even-bg ns-even-fg ns-border">
     <h1 class="ns-border">Conway's Game of Life</h1>
     <div style="margin: 1em;">
-      <div><input id="running" type="checkbox" /> Run</div>
+      <div>
+        Run: <input id="running" type="checkbox" /><br />
+        Set Size: <input id="width" type="text" size="4" value="50" /> x
+        <input id="height" type="text" size="4" value="50" />
+        <button id="commitsize">Commit</button><br />
+      </div>
       <div>
         <canvas id="surface" width="50" height="50">
           Sorry, you can't play Game of Life if JavaScript is turned off
@@ -28,10 +33,12 @@
   <script>
     (function () {
       const running = document.getElementById("running");
+      const iwidth = document.getElementById("width");
+      const iheight = document.getElementById("height");
       const surface = document.getElementById("surface");
       const context = surface.getContext("2d");
-      const width = surface.width;
-      const height = surface.height;
+      var width = surface.width;
+      var height = surface.height;
       var frame = context.createImageData(width, height);
       var drawto = context.createImageData(width, height);
       function getOffset(x, y) {
@@ -106,7 +113,7 @@
         }
         flip();
       }, 100);
-      document.getElementById("random").addEventListener("click", function () {
+      const randomise = function () {
         var ofs = 3;
         for (var y = 0; y < height; y++) {
           for (var x = 0; x < width; x++) {
@@ -119,7 +126,34 @@
           }
         }
         flip();
-      });
+      };
+      document.getElementById("random").addEventListener("click", randomise);
+      document
+        .getElementById("commitsize")
+        .addEventListener("click", function () {
+          const iwval = parseInt(iwidth.value, 10);
+          const ihval = parseInt(iheight.value, 10);
+          console.log(width, height, "->", iwval, ihval);
+          if (
+            (iwval != width || ihval != height) &&
+            iwval >= 10 &&
+            iwval <= 200 &&
+            ihval >= 10 &&
+            ihval <= 200
+          ) {
+            console.log("yes");
+            surface.height = ihval;
+            context.height = ihval;
+            height = ihval;
+            surface.width = iwval;
+            context.width = iwval;
+            width = iwval;
+            frame = context.createImageData(width, height);
+            drawto = context.createImageData(width, height);
+            randomise();
+          }
+        });
+      randomise();
     })();
   </script>
 </html>