1 files changed, 24 insertions, 8 deletions
diff --git a/test/js/life.html b/test/js/life.html
index bb3151b7b..de54d0aae 100644
--- a/test/js/life.html
+++ b/test/js/life.html
@@ -15,7 +15,7 @@
     <h1 class="ns-border">Conway's Game of Life</h1>
     <div style="margin: 1em;">
       <div>
-        Run: <input id="running" type="checkbox" /><br />
+        Run: <input id="running" type="checkbox" checked/><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 />
@@ -37,10 +37,13 @@
       const iheight = document.getElementById("height");
       const surface = document.getElementById("surface");
       const context = surface.getContext("2d");
-      var width = surface.width;
-      var height = surface.height;
+      var width = surface.width - 10;
+      var height = surface.height - 10;
       var frame = context.createImageData(width, height);
       var drawto = context.createImageData(width, height);
+      var greyto = context.createImageData(width, height);
+      const greylevel = 31;
+
       function getOffset(x, y) {
         if (x < 0) {
           x = width + x;
@@ -63,10 +66,12 @@
       function setCell(x, y) {
         const offset = getOffset(x, y);
         drawto.data[offset + 3] = 255;
+        greyto.data[offset + 3] = greylevel;
       }
       function clearCell(x, y) {
         const offset = getOffset(x, y);
         drawto.data[offset + 3] = 0;
+        greyto.data[offset + 3] = 0;
       }
       function countNeighbours(x, y) {
         return (
@@ -82,7 +87,15 @@
       }
       function flip() {
         var temp = frame;
-        context.putImageData(drawto, 0, 0);
+        context.putImageData(drawto, 5, 5);
+        context.putImageData(greyto, 5 - width, 5 - height); /* top left */
+        context.putImageData(greyto, 5 - width, 5); /* left */
+        context.putImageData(greyto, 5, 5 - height); /* top */
+        context.putImageData(greyto, 5 + width, 5 + height); /* bottom right */
+        context.putImageData(greyto, 5 + width, 5); /* right */
+        context.putImageData(greyto, 5, 5 + height); /* bottom */
+        context.putImageData(greyto, 5 + width, 5 - height); /* top right */
+        context.putImageData(greyto, 5 - width, 5 + height); /* bottom left */
         frame = drawto;
         drawto = temp;
       }
@@ -121,6 +134,7 @@
               drawto.data[ofs] = 0;
             } else {
               drawto.data[ofs] = 255;
+              greyto.data[ofs] = greylevel;
             }
             ofs += 4;
           }
@@ -142,14 +156,16 @@
             ihval <= 200
           ) {
             console.log("yes");
-            surface.height = ihval;
-            context.height = ihval;
+            surface.height = ihval + 10;
+            context.height = ihval + 10;
             height = ihval;
-            surface.width = iwval;
-            context.width = iwval;
+            surface.width = iwval + 10;
+            context.width = iwval + 10;
             width = iwval;
             frame = context.createImageData(width, height);
             drawto = context.createImageData(width, height);
+            greyto = context.createImageData(width, height);
+            resetGrey();
             randomise();
           }
         });