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();
+      }
+    }
+  }
 }

site/assets/scripts/models/gamecontroller.js

@@ -18,7 +18,17 @@ class ProgressionState {
       return JSON.parse(prog);
     }
 
-    prog = {wordLength: 4, wordIndex: {"4": 0, "5": 0, "6": 0}};
+    this.clearProgression("");
+    return prog;
+  }
+
+  clearProgression(shuffleId) {
+    let prog = {
+      shuffleId: shuffleId,
+      wordLength: 4,
+      wordIndex: {"4": 0, "5": 0, "6": 0},
+      currentGuesses: []
+    };
     localStorage.setItem('progression', JSON.stringify(prog));
     return prog;
   }
@@ -37,6 +47,11 @@ export class GameController {
   async start() {
     let prog = this._progressionState.getProgression();
 
+    if (await this._wordSource.needToResetProgression(prog)) {
+      console.log("Clearing patten shuffle id")
+      prog = this._progressionState.clearProgression(await this._wordSource.getPattenShuffleID());
+    }
+
     this._currentWord = await this._wordSource.getCurrentWord(prog);
     this._guesses = Math.max(this._currentWord.length, 5) + 1;
 
@@ -53,6 +68,14 @@ export class GameController {
     return this._guesses;
   }
 
+  currentGuesses() {
+    let prog = this._progressionState.getProgression();
+    if (!prog || !prog.currentGuesses) {
+      return [];
+    }
+    return prog.currentGuesses;
+  }
+
   currentWord() {
     this._checkHasStarted();
     return this._currentWord;
@@ -63,6 +86,7 @@ export class GameController {
     let prog = this._progressionState.getProgression();
     prog.wordIndex[prog.wordLength + ""] += 1;
     prog.wordLength = (((Math.random() * 23) | 0) / 10 | 0) + 4;
+    prog.currentGuesses = [];
 
     this._progressionState.saveProgression(prog);
 
@@ -70,6 +94,22 @@ export class GameController {
     this._guesses = Math.max(this._currentWord.length, 5) + 1;
     return true;
   }
+
+  showHint() {
+    let hints = new Array(this._currentWord.length);
+    let priorGuesses = this._progressionState.getProgression().currentGuesses;
+
+    hints[0] = this._currentWord[0];
+    for (let i = 1; i < this._currentWord.length; i++) {
+      for (let guess of priorGuesses) {
+        if (guess[i] === this._currentWord[i]) {
+          hints[i] = this._currentWord[i];
+        }
+      }
+    }
+
+    return hints;
+  }
   
   checkGuess(guess) {
     this._checkHasStarted();
@@ -141,6 +181,11 @@ export class GameController {
     } else {
       guessResult = GUESS_RESULT.MISS;
     }
+
+    // Add this guess to the progression state
+    let prog = this._progressionState.getProgression();
+    prog.currentGuesses.push(guess);
+    this._progressionState.saveProgression(prog);
     
     return {
       guessResult: guessResult,

site/assets/scripts/models/words.js

@@ -33,6 +33,15 @@ export class WordSource {
 
         return binSearch(list, word);
     }
+
+    async needToResetProgression(prog) {
+        await this._fetchAllWordsIfNecessary();
+        return (!prog.shuffleId) || this._pattern.id !== prog.shuffleId;
+    }
+
+    async getPattenShuffleID() {
+        return this._pattern.id;
+    }
     
     async getCurrentWord(prog) {
         let words = await this._fetchAllWordsIfNecessary();
@@ -44,15 +53,6 @@ export class WordSource {
         return words.words[wordLengthKey][idx];
     }
     
-    // async nextWord() {
-    //     if (this._currentWord >= this._words.length - 1) {
-    //         return false;
-    //     }
-    //
-    //     this._currentWord += 1;
-    //     return true;
-    // }
-
     async _fetchAllWordsIfNecessary() {
         if (this._wordData) {
             return this._wordData;

site/assets/styles/main.css

@@ -1,4 +1,6 @@
 :root {
+    --color-hint: #aaa;
+
     --color-no-letter-bg: #666;
     --color-no-letter-fg: #fff;
 
@@ -150,6 +152,10 @@ div.playfield div.row span {
     margin: 5px;
 }
 
+div.playfield div.row span.hint {
+    color: var(--color-hint);
+}
+
 div.playfield div.row span.right-pos {
     background: var(--color-right-letter-bg);
     color: var(--color-right-letter-fg);