laser: highlight tiles, too

diff --git a/public/trivabble.css b/public/trivabble.css
index ed0b970599ccb92692b6fb6a2c4312c606af458d..280b50a2af629fd26b6ec81f49b7d9a9db253174 100644 (file)
--- 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 79d320cce07eaccd4ac93a3a41ccd5f886dedd71..273bab823cd9df3d954238c1124ff3a5cd8a9c52 100644 (file)
--- 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();