From 0f341fa4821a7ac74616e622ba4a9710d380f345 Mon Sep 17 00:00:00 2001
From: vilmibm <nathanielksmith@gmail.com>
Date: Fri, 4 Aug 2023 00:59:21 +0000
Subject: [PATCH] fix touch events on mobile

---
 templates/index.tmpl | 47 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 11 deletions(-)
diff --git a/templates/index.tmpl b/templates/index.tmpl
index 1954b2a..9881247 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -3,6 +3,7 @@
 <head>
   <title>blackout engine</title>
   <script src="/html2canvas.min.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.3" />
 </head>
 <body>
   <style>
@@ -37,6 +38,10 @@
       background-color: black;
     }
 
+    .grey {
+      background-color: grey;
+    }
+
     .hidden {
       display: none;
     }
@@ -61,12 +66,14 @@
       cursor: help;
     }
 
-    #paper span:hover {
-      background-color: white;
-    }
+    @media (hover: hover) {
+      #paper span:hover {
+        background-color: white;
+      }
 
-    #paper span.black:hover {
-      background-color: grey;
+      #paper span.black:hover {
+        background-color: grey;
+      }
     }
 
     #aboutToggle {
@@ -130,15 +137,32 @@
     </div>
   </center>
   <script>
-    document.querySelectorAll("#paper span").forEach(span =>
-      span.onclick = () => span.classList.toggle("black"));
+    document.querySelectorAll("#paper span").forEach(span => {
+      span.addEventListener("click", () => span.classList.toggle("black"));
+      span.addEventListener("touchstart", (e) => {
+        e.preventDefault();
+        span.classList.add("grey");
+      });
+      span.addEventListener("touchend", (e) => {
+        e.preventDefault();
+        span.classList.remove("grey");
+        span.classList.toggle("black");
+      });
+      span.addEventListener("touchcancel", (e) => {
+        e.preventDefault();
+        span.classList.remove("grey");
+      });
+    });
+
     document.querySelector("#aboutToggle").onclick = (e) => {
       e.preventDefault();
       document.querySelector("#about").classList.toggle("hidden");
     }
+
+
     const copyImgButton = document.querySelector("#copyImage");
     copyImgButton.addEventListener("animationend", () => copyImgButton.classList.remove("rainbow"), false);
-    copyImgButton.onclick = () => {
+    copyImgButton.addEventListener("click", () => {
       html2canvas(document.querySelector("#paper")).then((canvas) => {
         canvas.toBlob((blob) => {
           let data = [new ClipboardItem({ [blob.type]: blob })];
@@ -147,10 +171,11 @@
           }, console.log);
         });
       });
-    }
+    });
+
     const copyTextButton = document.querySelector("#copyText");
     copyTextButton.addEventListener("animationend", () => copyTextButton.classList.remove("rainbow"), false);
-    copyTextButton.onclick = () => {
+    copyTextButton.addEventListener("click", () => {
       let toCopy = "";
       document.querySelectorAll("#paper span").forEach(span => {
         let guts = span.innerHTML;
@@ -187,7 +212,7 @@
       }, (err) => {
         console.log(err);
       });
-    }
+    });
   </script>
 </body>
 </html>
