Regenerated dictionary and started showing guesses

site/assets/scripts/controllers/playfield.js

@@ -7,7 +7,7 @@ import { WordSource } from "../models/words.js";
 export default class extends Controller {
   static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons"];
   static outlets = ["overlay"];
-  
+
   async connect() {
     this._wordSource = new WordSource();
     this._gameController = new GameController(this._wordSource);
@@ -16,32 +16,33 @@ export default class extends Controller {
 
     this._buildPlayfield();
   }
-  
+
   tappedKey(key) {
     console.log(`Key ${key} was tapped via outliet`);
-      
+
     this._addLetter(key);
   }
-  
+
   _addLetter(letter) {
     if (this._activeRowIndex < 0) {
       return;
     } else if (this._activeLetter >= this._gameController.wordLength()) {
       return;
     }
-    
+
     let rowElem = this.rowTargets[this._activeRowIndex];
     let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
-    
+
     colElem.innerText = letter.toUpperCase();
-    
+    colElem.classList.remove("hint");
+
     this._activeLetter += 1;
   }
-  
+
   enterGuess() {
     if (this._activeLetter >= this._gameController.wordLength()) {
       let rowElem = this.rowTargets[this._activeRowIndex];
-      this._verifyGuess(rowElem);      
+      this._verifyGuess(rowElem);
     }
   }
 
@@ -51,7 +52,7 @@ export default class extends Controller {
     let word = this._gameController.currentWord();
     window.open(`https://www.ecosia.org/search?q=define+${word}`, "_blank");
   }
-  
+
   tappedBackspace() {
     if (this._activeLetter == 0) {
       return;
@@ -61,18 +62,24 @@ export default class extends Controller {
     let rowElem = this.rowTargets[this._activeRowIndex];
     let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
 
-    colElem.innerText = "";
+    let colHint = colElem.dataset["hint"];
+    if (colHint) {
+      colElem.classList.add("hint");
+      colElem.innerText = colHint;
+    } else {
+      colElem.innerText = "";
+    }
   }
-  
+
   _verifyGuess(rowElem) {
     let guessedWord = Array.from(rowElem.querySelectorAll("span")).map((x) => x.innerText).join("");
     console.log("The guessed word is: " + guessedWord);
-    
+
     let results = this._gameController.checkGuess(guessedWord);
-    
+
     switch (results.guessResult) {
     case GUESS_RESULT.FOUL:
-      this.overlayOutlet.showMessage("Not a valid word");
+      this.overlayOutlet.showMessage("Not in dictionary");
 
       rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
       this._activeLetter = 0;
@@ -90,6 +97,7 @@ export default class extends Controller {
         this.nextPuzzleButtonsTarget.classList.remove("hide");
       } else {
         this._activeLetter = 0;
+        this._showHints(this.rowTargets[this._activeRowIndex], results.markers);
       }
 
       break;
@@ -110,42 +118,43 @@ export default class extends Controller {
       this.overlayOutlet.showMessage("No more words available.");
     }
   }
-  
+
   _buildPlayfield() {
     let rows = this._gameController.guesses();
     let wordLength = this._gameController.wordLength();
-    
+
     this._activeRowIndex = 0;
     this._activeLetter = 0;
-    
+
     let newRows = [];
-    for (let r = 0; r < rows; r++) {      
+    for (let r = 0; r < rows; r++) {
       newRows.push(this._buildPlayfieldRow(wordLength));
     }
-    
+
+    this._showHints(newRows[0]);
     this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows);
 
     this.topMessageTarget.innerHTML = "&nbsp;"
     this.nextPuzzleButtonsTarget.classList.add("hide");
-    
+
     window.dispatchEvent(new CustomEvent("resetKeyColors"));
   }
-  
+
   _buildPlayfieldRow(wordLength) {
     let divElem = document.createElement("div");
     divElem.classList.add("row");
     divElem.setAttribute("data-playfield-target", "row");
-    
+
     for (let c = 0; c < wordLength; c++) {
       let letterSpan = document.createElement("span");
       divElem.appendChild(letterSpan);
     }
-    return divElem;    
+    return divElem;
   }
-  
+
   _colorizeRow(row, results) {
     let markers = results.markers;
-    
+
     for (let i = 0; i < this._gameController.wordLength(); i++) {
       switch (markers[i]) {
       case MARKERS.RIGHT_POS:
@@ -153,15 +162,28 @@ export default class extends Controller {
         break;
       case MARKERS.RIGHT_CHAR:
         row.children[i].classList.add("right-char");
-        break;              
+        break;
       case MARKERS.MISS:
         row.children[i].classList.add("miss");
-        break;              
+        break;
       }
     }
-    
+
     window.dispatchEvent(new CustomEvent("guessResults", {
       detail: results
     }));
   }
+
+  _showHints(row) {
+    let hint = this._gameController.showHint();
+
+    for (let i = 0; i < this._gameController.wordLength(); i++) {
+      if (hint[i]) {
+        let colElem = row.children[i];
+        colElem.classList.add("hint");
+        colElem.innerText = hint[i].toUpperCase();
+        colElem.dataset["hint"] = hint[i].toUpperCase();
+      }
+    }
+  }
 }