From 23cc581849a63dfd9b5e7e63afea3c0fc250f772 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Sun, 31 Mar 2024 22:31:52 -0500
Subject: [PATCH 1/9] cimbar.js ui: Show error message when WebGL fails to init

---
 web/index.html | 8 ++++++--
 web/main.js    | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/index.html b/web/index.html
index 827f75f..07c4f4c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -56,7 +56,7 @@
 	box-shadow: 0px 0px 12px black, 0px 0px 18px black;
 }
 
-#dragdrop::before {
+.dragdrop::before {
 	content: "⌜ Tap to start! ⌟";
 	font: 1.5em serif;
 	padding-top: 2em;
@@ -66,6 +66,10 @@
 	width: 100%;
 }
 
+.dragdrop.error:before {
+	content: "⌜ Error! WebGL is not enabled :( ⌟";
+}
+
 #invisible_click {
 	position: fixed;
 	opacity: 0;
@@ -303,7 +307,7 @@
 	var Module = {};
 	Module.canvas = canvas;
 	Module.onRuntimeInitialized = () => {
-		Main.init();
+		Main.init(canvas);
 		Main.nextFrame();
 	};
 </script>
diff --git a/web/main.js b/web/main.js
index bf8f1e1..e47fdf0 100644
--- a/web/main.js
+++ b/web/main.js
@@ -43,6 +43,15 @@ return {
   {
     Module._initialize_GL(1040, 1040);
     Main.resize();
+    Main.check_GL_enabled(canvas);
+  },
+
+  check_GL_enabled : function(canvas)
+  {
+    if (canvas.getContext("2d")) {
+       var elem = document.getElementById('dragdrop');
+       elem.classList.add("error");
+    }
   },
 
   resize : function()

From b100015001d6e2549f6bcdf2c3533c5161aa92b7 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Sun, 31 Mar 2024 23:23:04 -0500
Subject: [PATCH 2/9] Add a pause toggle to cimbar.js

It'll be backspace on keyboard, and on touch event (i.e. only while
pressed) on touch devices. Pausing temporarily helps autofocus find the
image.
---
 web/main.js | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/web/main.js b/web/main.js
index e47fdf0..df79ab2 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,6 +1,7 @@
 var Main = function() {
 
 var _interval = 66;
+var _pause = false;
 
 var _showStats = false;
 var _renders = 0;
@@ -69,6 +70,16 @@ return {
     toggleFullscreen().then(Main.resize);
   },
 
+  togglePause : function(pause)
+  {
+    if (pause === undefined) {
+       _pause = !_pause;
+    }
+    else {
+       _pause = pause;
+    }
+  },
+
   scaleCanvas : function(canvas, width, height)
   {
     var dim = width;
@@ -123,6 +134,7 @@ return {
     document.getElementById("nav-button").blur();
     document.getElementById("nav-content").blur();
     document.getElementById("nav-find-file-link").blur();
+    Main.togglePause(false);
   },
 
   clickFileInput : function()
@@ -142,7 +154,9 @@ return {
   nextFrame : function()
   {
     var start = performance.now();
-    Module._render();
+    if (!_pause) {
+       Module._render();
+    }
     var frameCount = Module._next_frame();
 
     var elapsed = performance.now() - start;
@@ -203,6 +217,10 @@ window.addEventListener('keydown', function(e) {
       Main.clickNav();
       e.preventDefault();
     }
+    else if (e.key == 'Backspace' || e.keyCode == 8) {
+      Main.togglePause();
+      e.preventDefault();
+    }
   }
   else {
     if (e.key == 'Escape' || e.keyCode == 27 ||
@@ -268,6 +286,21 @@ window.addEventListener('keydown', function(e) {
   }
 }, true);
 
+window.addEventListener("touchstart", function(e) {
+  e = e || event;
+  Main.togglePause(true);
+}, false);
+
+window.addEventListener("touchend", function(e) {
+  e = e || event;
+  Main.togglePause(false);
+}, false);
+
+window.addEventListener("touchcancel", function(e) {
+  e = e || event;
+  Main.togglePause(false);
+}, false);
+
 window.addEventListener("dragover", function(e) {
   e = e || event;
   e.preventDefault();

From 6259281eae1c003f1cf0e9e3592b5ab310984a89 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Mon, 8 Apr 2024 21:32:52 -0500
Subject: [PATCH 3/9] Un-toggle pause on various events

+ add auto-realignment logic for the full-canvas "button"?
---
 web/main.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/main.js b/web/main.js
index df79ab2..2a3f610 100644
--- a/web/main.js
+++ b/web/main.js
@@ -4,7 +4,7 @@ var _interval = 66;
 var _pause = false;
 
 var _showStats = false;
-var _renders = 0;
+var _counter = 0;
 var _renderTime = 0;
 
 function toggleFullscreen()
@@ -68,6 +68,7 @@ return {
   toggleFullscreen : function()
   {
     toggleFullscreen().then(Main.resize);
+    Main.togglePause(false);
   },
 
   togglePause : function(pause)
@@ -96,6 +97,7 @@ return {
 
   alignInvisibleClick : function(canvas)
   {
+     canvas = canvas || document.getElementById('canvas');
      var cpos = canvas.getBoundingClientRect();
      var invisible_click = document.getElementById("invisible_click");
      invisible_click.style.width = canvas.style.width;
@@ -127,6 +129,7 @@ return {
   clickNav : function()
   {
     document.getElementById("nav-button").focus();
+    Main.togglePause(false);
   },
 
   blurNav : function()
@@ -140,6 +143,7 @@ return {
   clickFileInput : function()
   {
     document.getElementById("file_input").click();
+    Main.togglePause(false);
   },
 
   fileInput : function(ev)
@@ -153,11 +157,12 @@ return {
 
   nextFrame : function()
   {
+    _counter += 1;
     var start = performance.now();
     if (!_pause) {
        Module._render();
+       var frameCount = Module._next_frame();
     }
-    var frameCount = Module._next_frame();
 
     var elapsed = performance.now() - start;
     var nextInterval = _interval>elapsed? _interval-elapsed : 0;
@@ -167,6 +172,9 @@ return {
       _renderTime += elapsed;
       Main.setHTML( "status", elapsed + " : " + frameCount + " : " + Math.ceil(_renderTime/frameCount));
     }
+    if (_counter & 16 > 0) {
+       Main.alignInvisibleClick();
+    }
   },
 
   setActive : function(active)
@@ -193,6 +201,7 @@ return {
       nav.classList.remove("mode-b");
       nav.classList.remove("mode-4c");
     }
+    Main.togglePause(false);
   },
 
   setHTML : function(id, msg)

From d7361237a03a699b9a2c525cd481c6f5f6fa0862 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Mon, 8 Apr 2024 22:09:03 -0500
Subject: [PATCH 4/9] Experiment -- make pause a cooldown?

We'll then have a short pause during menu toggles (and ontouch on
mobile), which should unobtrusively(?) help autofocus
---
 web/main.js | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/web/main.js b/web/main.js
index 2a3f610..ec0597c 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,7 +1,7 @@
 var Main = function() {
 
 var _interval = 66;
-var _pause = false;
+var _pause = 0;
 
 var _showStats = false;
 var _counter = 0;
@@ -68,19 +68,25 @@ return {
   toggleFullscreen : function()
   {
     toggleFullscreen().then(Main.resize);
-    Main.togglePause(false);
+    Main.togglePause(true);
   },
 
   togglePause : function(pause)
   {
+    // pause is a cooldown. We pause to help autofocus, but we don't want to do it forever...
     if (pause === undefined) {
-       _pause = !_pause;
+       _pause = Main.isPaused()? 0 : 32;
     }
     else {
-       _pause = pause;
+       _pause = pause? 32 : 0;
     }
   },
 
+  isPaused : function()
+  {
+     return _pause > 0;
+  },
+
   scaleCanvas : function(canvas, width, height)
   {
     var dim = width;
@@ -129,21 +135,22 @@ return {
   clickNav : function()
   {
     document.getElementById("nav-button").focus();
-    Main.togglePause(false);
   },
 
-  blurNav : function()
+  blurNav : function(pause)
   {
+    if (pause === undefined) {
+       pause = true;
+    }
     document.getElementById("nav-button").blur();
     document.getElementById("nav-content").blur();
     document.getElementById("nav-find-file-link").blur();
-    Main.togglePause(false);
+    Main.togglePause(pause);
   },
 
   clickFileInput : function()
   {
     document.getElementById("file_input").click();
-    Main.togglePause(false);
   },
 
   fileInput : function(ev)
@@ -152,14 +159,17 @@ return {
     var file = document.getElementById('file_input').files[0];
     if (file)
        importFile(file);
-    Main.blurNav();
+    Main.blurNav(false);
   },
 
   nextFrame : function()
   {
     _counter += 1;
+    if (_pause > 0) {
+       _pause -= 1;
+    }
     var start = performance.now();
-    if (!_pause) {
+    if (!Main.isPaused()) {
        Module._render();
        var frameCount = Module._next_frame();
     }
@@ -172,8 +182,8 @@ return {
       _renderTime += elapsed;
       Main.setHTML( "status", elapsed + " : " + frameCount + " : " + Math.ceil(_renderTime/frameCount));
     }
-    if (_counter & 16 > 0) {
-       Main.alignInvisibleClick();
+    if ( !(_counter & 31) ) {
+       Main.resize();
     }
   },
 
@@ -201,7 +211,6 @@ return {
       nav.classList.remove("mode-b");
       nav.classList.remove("mode-4c");
     }
-    Main.togglePause(false);
   },
 
   setHTML : function(id, msg)

From 057a026786c07a241e8f6e5047ac07e4051a74bb Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Mon, 8 Apr 2024 22:27:43 -0500
Subject: [PATCH 5/9] New background for cimbar.js

Better? Perhaps. Simpler css, more white (brightness) overall. Grid is
rotated 45 degrees since I think it looks better that way.
---
 web/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 07c4f4c..9bfb0d1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -20,7 +20,9 @@
 
 body {
 	background-color: white;
-	background-image: radial-gradient(circle at top left, rgb(7,0,0),transparent,transparent), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px),repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), linear-gradient(white, white);
+	background-image: linear-gradient(135deg, rgb(0,0,0) 65px, transparent 130px),
+repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 1px,transparent 1px, transparent 30px),
+repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(0,0,0) 1px,transparent 1px, transparent 30px);
 	background-size: cover;
 	color: gray;
 	display: grid;

From 5efef15b2aa5fd0779e034c13252e5db717777b3 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Thu, 11 Apr 2024 23:18:06 -0500
Subject: [PATCH 6/9] Move invisible click div up, so nav bg is in front of it

This lets the blurNav() method fire more consistently, which is what we
now want (since we're temporarily pausing animation now)
---
 web/index.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/web/index.html b/web/index.html
index 9bfb0d1..0c2db9a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -21,8 +21,8 @@
 body {
 	background-color: white;
 	background-image: linear-gradient(135deg, rgb(0,0,0) 65px, transparent 130px),
-repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 1px,transparent 1px, transparent 30px),
-repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(0,0,0) 1px,transparent 1px, transparent 30px);
+repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px),
+repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px);
 	background-size: cover;
 	color: gray;
 	display: grid;
@@ -40,10 +40,6 @@
 	z-index: 1;
 }
 
-#nav-button {
-	z-index: 2;
-}
-
 #canvas {
 	display: block;
 	position: relative;
@@ -277,6 +273,8 @@
 
 <input style="display:none;" type="file" name="file_input" id="file_input" onchange="Main.fileInput(this);" />
 
+<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
+
 <div id="nav-container" class="mode-4c">
     <div class="bg" onclick="Main.blurNav();"></div>
     <button id="nav-button" tabindex="0" onclick="Main.clickNav();">
@@ -298,7 +296,6 @@
       </ul>
     </div>
 </div>
-<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
 
 <script type="text/javascript">
 	if ('serviceWorker' in navigator) {

From 4a9e53684b9d65f378e349e508c5abf204031695 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Fri, 12 Apr 2024 00:18:49 -0500
Subject: [PATCH 7/9] make "x" pause as well?

---
 web/index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 0c2db9a..553196c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -36,10 +36,14 @@
 	top: 0;
 }
 
-#invisible_click, #canvas, #nav-container {
+#nav-container:focus-within {
 	z-index: 1;
 }
 
+#nav-content, #nav-container .bg,  #nav-container:focus-within #nav-button {
+ 	z-index: 1;
+ }
+
 #canvas {
 	display: block;
 	position: relative;

From dcef5b6a06074cd092ec34aa41da24aaf56718aa Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Sat, 13 Apr 2024 21:10:09 -0500
Subject: [PATCH 8/9] Switch pause delay to 1s (15 frames)

+ make manual backspace pause additive, so if you want to mash the
button and stay paused indefinitely you can
---
 web/main.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/main.js b/web/main.js
index ec0597c..1958a8a 100644
--- a/web/main.js
+++ b/web/main.js
@@ -75,11 +75,9 @@ return {
   {
     // pause is a cooldown. We pause to help autofocus, but we don't want to do it forever...
     if (pause === undefined) {
-       _pause = Main.isPaused()? 0 : 32;
-    }
-    else {
-       _pause = pause? 32 : 0;
+       pause = !Main.isPaused();
     }
+    _pause = pause? 15 : 0;
   },
 
   isPaused : function()
@@ -236,7 +234,7 @@ window.addEventListener('keydown', function(e) {
       e.preventDefault();
     }
     else if (e.key == 'Backspace' || e.keyCode == 8) {
-      Main.togglePause();
+      Main.togglePause(true);
       e.preventDefault();
     }
   }

From d9b538805685f8d60f99e4502c1da8bd14559f90 Mon Sep 17 00:00:00 2001
From: sz <sz@recv.cc>
Date: Sun, 23 Jun 2024 02:24:46 -0500
Subject: [PATCH 9/9] Pad auto-calculated height/width + always automatically
 expand canvas size

The padding is overdue -- it *can* work without the padding, but it
really helps to have some quiet (black) padding around all 4 edges of
the image.

Expanding the canvas to fill the window (rather than capping it to its
max size) helps on higher resolution (e.g. 4k) displays.
---
 web/main.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/web/main.js b/web/main.js
index 1958a8a..efdbe24 100644
--- a/web/main.js
+++ b/web/main.js
@@ -59,8 +59,8 @@ return {
   {
     // reset zoom
     var canvas = document.getElementById('canvas');
-    var width = window.innerWidth;
-    var height = window.outerHeight;
+    var width = window.innerWidth - 12;
+    var height = window.outerHeight - 12;
     Main.scaleCanvas(canvas, width, height);
     Main.alignInvisibleClick(canvas);
   },
@@ -91,10 +91,7 @@ return {
     if (height < dim) {
       dim = height;
     }
-    console.log(dim);
-    if (dim > 1040) {
-      dim = 1040;
-    }
+    console.log(dim + "x" + dim);
     canvas.style.width = dim + "px";
     canvas.style.height = dim + "px";
   },