From ad5ac4f2e628958af1e4c1e9a48df4e050d06310 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Jakse?= <raphael.trivabble@jakse.fr>
Date: Tue, 1 Sep 2020 23:10:36 +0200
Subject: [PATCH] laser: highlight tiles, too

---
 public/trivabble.css | 16 +++++++++++----
 public/trivabble.js  | 46 ++++++++++++++++++++++++--------------------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/public/trivabble.css b/public/trivabble.css
index ed0b970..280b50a 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -212,10 +212,6 @@ button[disabled=disabled], button:disabled {
     border: 1px solid black;
 }
 
-.highlight {
-    background-color: #E3E;
-}
-
 @keyframes highlight {
     0% {
         background:red;
@@ -227,6 +223,18 @@ button[disabled=disabled], button:disabled {
     }
 }
 
+.laser-highlighting .tile {
+    transition:none;
+}
+
+.laser-highlight {
+    background-color: #E3E;
+}
+
+.laser-highlight .tile:not(.tile-highlight) {
+    background-color: inherit;
+}
+
 .tile-score {
     font-size: 0.5em;
     position: absolute;
diff --git a/public/trivabble.js b/public/trivabble.js
index 79d320c..273bab8 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1757,27 +1757,31 @@
 
     function localHighlightCell(id) {
         const placeholder = boardCells[id].getElementsByClassName("tile-placeholder")[0];
-        placeholder.classList.add("highlight");
-        setTimeout(
-            function (x) {
-                x.classList.remove("highlight");
-            }, Number(localStorage.flashLightDuration) * 1 / 3, placeholder);
-        setTimeout(
-            function (x) {
-                x.classList.add("highlight");
-            }, Number(localStorage.flashLightDuration) * 1 / 2, placeholder);
-        setTimeout(
-            function (x) {
-                x.classList.remove("highlight");
-            }, Number(localStorage.flashLightDuration) * 2 / 3, placeholder);
-        setTimeout(
-            function (x) {
-                x.classList.add("highlight");
-            }, Number(localStorage.flashLightDuration) * 5 / 6, placeholder);
+        placeholder.classList.add("laser-highlighting");
+        placeholder.classList.add("laser-highlight");
+
+        const sixthFlashLightDuration = Number(localStorage.flashLightDuration) / 6;
+
+        function on() {
+            placeholder.classList.add("laser-highlight");
+        }
+
+        function off() {
+            placeholder.classList.remove("laser-highlight");
+        }
+
+        setTimeout(off, sixthFlashLightDuration);
+        setTimeout(on,  sixthFlashLightDuration * 2);
+        setTimeout(off, sixthFlashLightDuration * 3);
+        setTimeout(on,  sixthFlashLightDuration * 4);
+        setTimeout(off, sixthFlashLightDuration * 5);
+
         setTimeout(
-            function (x) {
-                x.classList.remove("highlight");
-            }, Number(localStorage.flashLightDuration) * 1, placeholder);
+            function () {
+                placeholder.classList.remove("laser-highlighting");
+            },
+            sixthFlashLightDuration * 6
+        );
     }
 
     function initChat() {
@@ -1938,7 +1942,7 @@
             flashLightColor.onchange = function () {
                 localStorage.flashLightColor = document.getElementById("flash-light-color").value;
                 const style = document.createElement("style");
-                style.textContent = ".highlight {background-color: " + localStorage.flashLightColor + ";}";
+                style.textContent = ".laser-highlight {background-color: " + localStorage.flashLightColor + ";}";
                 document.body.appendChild(style);
             };
             flashLightColor.onchange();
-- 
2.30.2