From 992c4a984a696984765c6eb04eb889a0a94d7d8a Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Mon, 8 Apr 2024 14:40:57 +0200
Subject: Canvas fallback

---
 canvasWorker.js | 54 ++++++++++++++++++++++++++++++++----------------------
 index.html      |  9 ++++++++-
 main.js         |  6 +-----
 3 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/canvasWorker.js b/canvasWorker.js
index 0f17547..04a2e1b 100644
--- a/canvasWorker.js
+++ b/canvasWorker.js
@@ -72,33 +72,43 @@ const initGL = () => {
   };
 };
 
+let useWebGL = true;
+
 let draw;
 self.onmessage = (msg) => {
   if (msg.data == "clear") {
-    gl.clearColor(0, 0, 0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
+    if (useWebGL) {
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    } else {
+      gl.clearRect(0, 0, canvas.width, canvas.height);
+    }
   } else if ("canvas" in msg.data) {
     canvas = msg.data.canvas;
-    gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
-    if (!gl) alert("no webgl");
-    gl.viewport(0, 0, canvas.width, canvas.height);
-    draw = initGL();
+    useWebGL = msg.data.useWebGL;
+    if (useWebGL) {
+      console.log("using WebGL");
+      gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) return self.onmessage({ canvas, useWebGL: false });
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      draw = initGL();
+    } else {
+      console.log("using canvas");
+      gl = canvas.getContext("2d");
+    }
+  } else if (useWebGL) {
+    const [color, x, y, width, height] = msg.data;
+    let colorArr =
+      color == "white"
+        ? [1, 1, 1, 1]
+        : color == "black"
+          ? [0, 0, 0, 1]
+          : [0.1, 0.1, 0.1, 0.3];
+    draw([x, y + height, x + width, y + height, x + width, y, x, y], colorArr);
   } else {
-    [color, x, y, width, height] = msg.data;
-    draw([x, y + height, x + width, y + height, x + width, y, x, y], color);
+    const [color, x, y, width, height] = msg.data;
+    if (width < 4 || height < 4) return;
+    gl.fillStyle = color;
+    gl.fillRect(x, y, width, height);
   }
 };
-
-// self.onmessage = (msg) => {
-//   if (msg.data == "clear") {
-//     gl.clearRect(0, 0, canvas.width, canvas.height);
-//   } else if ("canvas" in msg.data) {
-//     canvas = msg.data.canvas;
-//     gl = canvas.getContext("2d");
-//   } else {
-//     [color, x, y, width, height] = msg.data;
-//     if (width < 2 || height < 2) return;
-//     gl.fillStyle = color;
-//     gl.fillRect(x, y, width, height);
-//   }
-// };
diff --git a/index.html b/index.html
index d127106..6dba53a 100644
--- a/index.html
+++ b/index.html
@@ -138,12 +138,19 @@ qsplit = \(0 \\\\\((((0 ((4 \((((0 \\1) \\1) \\1) \\1)) \((((0 \\0) \\0) \\0) \\
     </main>
     <script src="main.js"></script>
     <script charset="utf-8">
+      let useWebGL = true;
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+      if (isMobile) {
+        useWebGL = false;
+        MAXRES = 10;
+      }
+
       const canvas = window.canvas;
       const root = { x: [0, canvas.width], y: [0, canvas.height] };
 
       const offscreen = canvas.transferControlToOffscreen();
       const worker = new Worker("canvasWorker.js");
-      worker.postMessage({ canvas: offscreen }, [offscreen]);
+      worker.postMessage({ canvas: offscreen, useWebGL }, [offscreen]);
 
       window.examples.addEventListener("change", () => {
         clearScreen(worker);
diff --git a/main.js b/main.js
index b0eed38..4ea2d38 100644
--- a/main.js
+++ b/main.js
@@ -19,11 +19,7 @@ const UNKNOWN = 2;
 
 const drawAt = (worker, x, y, color) => {
   worker.postMessage([
-    color == WHITE
-      ? [1, 1, 1, 1]
-      : color == BLACK
-        ? [0, 0, 0, 1]
-        : [0.1, 0.1, 0.1, 0.3],
+    color == WHITE ? "white" : color == BLACK ? "black" : "grey",
     x[0],
     y[0],
     x[1] - x[0],
-- 
cgit v1.2.3