correct highlighting removing for moved and moving tiles

diff --git a/public/trivabble.js b/public/trivabble.js
index 1b6b645f5dc50da5b227917961cf90895b586f2d..4bc9557f375d763e218a83d14f00fd7217d42b52 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1561,8 +1561,10 @@
         return words;
     }
 
-    function highlightWord(word, value, onOff) {
-        if (onOff) {
+    function modifyTileClass(word, value, action) {
+        /* action: true for add, false for remove */
+        if (action) {
+            /* only for new words */
             for (let l = 0; l < word.letters.length; l++) {
                 const index = ((word.row + l * word.incRow) * 15) + word.col + l * word.incCol;
                 const tilePlaceholder = boardCells[index].getElementsByClassName("tile-placeholder")[0];
@@ -1571,6 +1573,7 @@
                 tile.classList.add(value);
             }
         } else {
+            /* tiles on board */
             for (let index = 0; index < 15 * 15; index++) {
                 const tilePlaceholder = boardCells[index].getElementsByClassName("tile-placeholder")[0];
                 const tile = tilePlaceholder.getElementsByClassName("tile")[0];
@@ -1578,6 +1581,17 @@
                     tile.classList.remove(value);
                 }
             }
+            /* tiles on rack */
+            for (let tilePlaceholder of rack.getElementsByClassName("tile-placeholder")) {
+                const tile = tilePlaceholder.getElementsByClassName("tile")[0];
+                if (typeof tile !== "undefined") {
+                    tile.classList.remove(value);
+                }
+            }
+            /* tile on the move */
+            if (movingTile !== null) {
+                movingTile.classList.remove(value);
+            }
         }
     }
 
@@ -1590,13 +1604,13 @@
         let badWords = [];
         for (const k of Object.keys(newWords)) {
             words.push(newWords[k].letters.replace(/ /g, "?"));
-            highlightWord(newWords[k], "tile-spelling-ok", true);
-            setTimeout(function () {highlightWord(newWords[k], "tile-spelling-ok", false);}, 5000);
+            modifyTileClass(newWords[k], "tile-spelling-ok", true);
+            setTimeout(function () {modifyTileClass(newWords[k], "tile-spelling-ok", false);}, 5000);
             const pattern = "^" + newWords[k].letters.replace(/ /g, ".") + "$";
             if (!dictionary.find(element => element.match(pattern))) {
                 badWords.push(newWords[k].letters.replace(/ /g, "?"));
-                highlightWord(newWords[k], "tile-spelling-nok", true);
-                setTimeout(function () {highlightWord(newWords[k], "tile-spelling-nok", false);}, 5000);
+                modifyTileClass(newWords[k], "tile-spelling-nok", true);
+                setTimeout(function () {modifyTileClass(newWords[k], "tile-spelling-nok", false);}, 5000);
             }
         }
         words = words.join(", ").trim();