highlight in green or red checked words

diff --git a/public/trivabble.css b/public/trivabble.css
index 9362160ef7987f39c2a3bd679186c401b0bbd200..a303c47bfa2892f2fcf6b745a1da02ab570d850c 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -197,6 +197,14 @@ button[disabled=disabled], button:disabled {
     cursor:pointer
 }
 
+.tile.tile-spelling-ok {
+    background-color: #3E3;
+}
+
+.tile.tile-spelling-nok {
+    background-color: #E33;
+}
+
 .tile.tile-highlight {
     background-color: #FFF;
     font-weight: bold;

diff --git a/public/trivabble.js b/public/trivabble.js
index 0e3e123a560c9ffdc98d6c4bde4e5f7acb292255..a4bf6ba9bc227d102104c00413fb29461b9effcd 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1519,14 +1519,14 @@
         }
 
         /* Look for last letter in line */
-        let word = "";
+        let word = {letters: "", row: row, col: col, incRow: incRow, incCol: incCol};
         let letter;
         while ((letter = getLetterFromBoard(row, col)) !== "") {
-            word += letter;
+            word.letters += letter;
             row += incRow;
             col += incCol;
         }
-        return (word === initLetter) ? "" : word;
+        return (word.letters === initLetter) ? null : word;
     }
     
     function searchNewWords() {
@@ -1540,38 +1540,56 @@
 
             /* Look for word in column */
             const newWordInCol = searchWordInLine(row, col, 1, 0);
-            if ((newWordInCol !== "") &&  (!words.includes(newWordInCol))) {
+            if ((newWordInCol !== null) &&  (!words.find(element => element.letters === newWordInCol.letters))) {
                 words.push(newWordInCol);
             }
 
             /* Look for word in row */
             const newWordInRow = searchWordInLine(row, col, 0, 1);
-            if ((newWordInRow !== "") &&  (!words.includes(newWordInRow))) {
+            if ((newWordInRow !== null) &&  (!words.find(element => element.letters === newWordInCol.letters))) {
                 words.push(newWordInRow);
             }
 
             /* Should we look for word in diag? */
 
             /* If nothing found, it's a one letter word */
-            if ((newWordInCol === "") && (newWordInRow === "")) {
-                words.push(getLetterFromBoard(row, col));
+            if ((newWordInCol === null) && (newWordInRow === null)) {
+                words.push({letters: getLetterFromBoard(row, col), row: row, col: col, incRow: 0, incCol: 0});
             }
         }
 
         return words;
     }
 
+    function highlightWord(word, value, onOff) {
+        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];
+            const tile = tilePlaceholder.getElementsByClassName("tile")[0];
+            if (onOff) {
+                tile.classList.add(value);
+            } else {
+                tile.classList.remove(value);
+            }
+        }
+    }
+
     function checkSpelling() {
 
-        let words = searchNewWords();
+        let newWords = searchNewWords();
 
         /* Check if words are in dictionary */
+        let words = [];
         let badWords = [];
-        for (const k of Object.keys(words)) {
-            const pattern = "^" + words[k].replace(/ /g, ".") + "$";
-            words[k] = words[k].replace(/ /g, "?");
+        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);
+            const pattern = "^" + newWords[k].letters.replace(/ /g, ".") + "$";
             if (!dictionary.find(element => element.match(pattern))) {
-                badWords.push(words[k]);
+                badWords.push(newWords[k]);
+                highlightWord(newWords[k], "tile-spelling-nok", true);
+                setTimeout(function () {highlightWord(newWords[k], "tile-spelling-nok", false);}, 5000);
             }
         }
         words = words.join(", ")