Added some quality of life features

- Now preload the letters on successive rows
- Hid the keyboard during intermissions
- Added a give-up easter egg when tapping the enter six times
- Reshuffled the letters

site/assets/scripts/controllers/keyboard.js

@@ -49,6 +49,16 @@ export default class extends Controller {
     }
   }
 
+  onShow() {
+    let keyboard = this.element;
+    keyboard.style.display = "block";
+  }
+
+  onHide() {
+    let keyboard = this.element;
+    keyboard.style.display = "none";
+  }
+
   colorizeKeys(ev) {
     let hits = ev.detail.hits;
     

site/assets/scripts/controllers/playfield.js

@@ -1,8 +1,9 @@
-import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
+import {Controller} from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
 
-import { GUESS_RESULT, MARKERS, GameController } from "../models/gamecontroller.js";
+import {GameController, GUESS_RESULT, MARKERS} from "../models/gamecontroller.js";
-import { WordSource } from "../models/words.js";
+import {WordSource} from "../models/words.js";
 
+const CONSECUTIVE_ENTERS_TO_GIVE_UP = 6;
 
 export default class extends Controller {
     static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons", "loader"];
@@ -11,6 +12,7 @@ export default class extends Controller {
     async connect() {
         this._wordSource = new WordSource();
         this._gameController = new GameController(this._wordSource);
+        this._consectiveEnters = 0;
 
         await this._gameController.start();
 
@@ -20,6 +22,7 @@ export default class extends Controller {
     }
 
     tappedKey(key) {
+        this._consectiveEnters = 0;
         this._addLetter(key);
     }
 
@@ -31,6 +34,10 @@ export default class extends Controller {
         }
 
         let rowElem = this.rowTargets[this._activeRowIndex];
+        this._addLetterAtRow(rowElem, letter);
+    }
+
+    _addLetterAtRow(rowElem, letter) {
         let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
 
         colElem.innerText = letter.toUpperCase();
@@ -43,6 +50,13 @@ export default class extends Controller {
         if (this._activeLetter >= this._gameController.wordLength()) {
             let rowElem = this.rowTargets[this._activeRowIndex];
             this._verifyGuess(rowElem);
+            this._consectiveEnters = 0;
+        } else {
+            this._consectiveEnters += 1;
+            if (this._consectiveEnters >= CONSECUTIVE_ENTERS_TO_GIVE_UP) {
+                this._giveUp();
+                this._consectiveEnters = 0;
+            }
         }
     }
 
@@ -53,7 +67,16 @@ export default class extends Controller {
         window.open(`https://www.ecosia.org/search?q=define+${word}`, "_blank");
     }
 
+    _giveUp() {
+        if (confirm("Are you sure you want to reveal the answer?")) {
+            this._gameController.giveUp();
+            this._revealAnswer();
+        }
+    }
+
     tappedBackspace() {
+        this._consectiveEnters = 0;
+
         if (this._activeLetter == 0) {
             return;
         }
@@ -84,6 +107,10 @@ export default class extends Controller {
                 rowElem.replaceWith(newRow);
                 this._activeLetter = 0;
 
+                if (this._activeRowIndex > 0) {
+                    this._prefillFirstFewLetters(newRow);
+                }
+
                 window.dispatchEvent(new CustomEvent("guessResults", {
                     detail: results
                 }));
@@ -98,6 +125,7 @@ export default class extends Controller {
                 } else {
                     this._activeLetter = 0;
                     this._showHints(this.rowTargets[this._activeRowIndex], results.markers);
+                    this._prefillFirstFewLetters(this.rowTargets[this._activeRowIndex]);
                 }
 
                 break;
@@ -126,17 +154,19 @@ export default class extends Controller {
     _showWin() {
         this.topMessageTarget.innerText = "Hooray! You did it.";
         this.nextPuzzleButtonsTarget.classList.remove("hide");
+        this._setKeyboardVisibility(false);
     }
 
     _revealAnswer() {
         this.topMessageTarget.innerText = this._gameController.currentWord().toUpperCase();
         this.nextPuzzleButtonsTarget.classList.remove("hide");
+        this._setKeyboardVisibility(false);
     }
 
     _buildPlayfield() {
         let rows = this._gameController.guesses();
         let wordLength = this._gameController.wordLength();
-    let {currentGuesses, wasWin} = this._gameController.currentState();
+        let {currentGuesses, wasWin, wasGiveUp} = this._gameController.currentState();
 
         this._activeRowIndex = currentGuesses.length;
         this._activeLetter = 0;
@@ -166,14 +196,18 @@ export default class extends Controller {
 
         if (wasWin) {
             this._showWin();
-    } else if (currentGuesses.length >= rows) {
+        } else if ((currentGuesses.length >= rows) || wasGiveUp) {
             // User has already used up all their guesses so just show the results;
             this._revealAnswer();
         } else {
             this._showHints(newRows[currentGuesses.length]);
+            if (currentGuesses.length > 0) {
+                this._prefillFirstFewLetters(newRows[currentGuesses.length]);
+            }
 
             this.topMessageTarget.innerHTML = " "
             this.nextPuzzleButtonsTarget.classList.add("hide");
+            this._setKeyboardVisibility(true);
         }
 
         this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows);
@@ -253,4 +287,24 @@ export default class extends Controller {
             }
         }
     }
+
+    _prefillFirstFewLetters(row) {
+        let hint = this._gameController.showHint();
+
+        for (let i = 0; i < this._gameController.wordLength(); i++) {
+            if (hint[i]) {
+                this._addLetterAtRow(row, hint[i]);
+            } else {
+                return;
+            }
+        }
+    }
+
+    _setKeyboardVisibility(visible) {
+        if (visible) {
+            window.dispatchEvent(new CustomEvent("showKeyboard"));
+        } else {
+            window.dispatchEvent(new CustomEvent("hideKeyboard"));
+        }
+    }
 }

site/assets/scripts/models/gamecontroller.js

@@ -71,11 +71,14 @@ export class GameController {
     currentState() {
         let prog = this._progressionState.getProgression();
         if (!prog || !prog.currentGuesses) {
-      return [];
+            return {
+                currentGuesses: []
+            };
         }
         return {
             wasWin: prog.wasWin,
-      currentGuesses: prog.currentGuesses
+            currentGuesses: prog.currentGuesses,
+            wasGiveUp: prog.wasGiveUp,
         };
     }
 
@@ -94,6 +97,7 @@ export class GameController {
 
         prog.currentGuesses = [];
         prog.wasWin = false;
+        prog.wasGiveUp = false;
         this._progressionState.saveProgression(prog);
 
         this._currentWord = await this._wordSource.getCurrentWord(prog);
@@ -134,6 +138,12 @@ export class GameController {
         return results;
     }
 
+    giveUp() {
+        let prog = this._progressionState.getProgression();
+        prog.wasGiveUp = true;
+        this._progressionState.saveProgression(prog);
+    }
+
     checkGuess(guess) {
         this._checkHasStarted();
 

site/assets/styles/main.css

@@ -69,7 +69,8 @@ div.playfield div[data-playfield-target="playfield"] {
 div.playfield div[data-playfield-target="nextPuzzleButtons"] {
     display: flex;
     justify-content: center;
-    gap: 0.8rem;
+    gap: 1rem;
+    margin-block-start: 1.2rem;
     margin-block-end: 0.8rem;
 }
 

site/index.html

@@ -30,10 +30,13 @@
       </div>
       <div class="keyboard" data-controller="keyboard"
            data-keyboard-playfield-outlet=".playfield"
+           style="display: none;"
            data-action="
               keydown@window->keyboard#onKeyPress
               guessResults@window->keyboard#colorizeKeys
               resetKeyColors@window->keyboard#resetKeyColors
+              showKeyboard@window->keyboard#onShow
+              hideKeyboard@window->keyboard#onHide
             ">
           <div>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="q">q</button>