Some QOL improvements:

- Added subtle highliting of attempted letters
- Using correct backspace character
- Reduced header size a little
- Added a "define" button to show word definition

site/assets/scripts/controllers/keyboard.js

@@ -63,14 +63,22 @@ export default class extends Controller {
           break;
         case MARKERS.RIGHT_CHAR:
           if (!keyElement.classList.contains("right-pos")) {
+            keyElement.classList.remove("attempted");
             keyElement.classList.add("right-char");
           }
           break; 
         case MARKERS.MISS:
-          if (keyElement.classList.length == 0) {
+          keyElement.classList.remove("attempted");
+          if (!keyElement.classList.contains("right-pos") && !keyElement.classList.contains("right-char")) {
+            keyElement.classList.remove("attempted");
             keyElement.classList.add("miss");
           }
-          break;   
+          break;
+        case MARKERS.ATTEMPTED:
+          if (keyElement.classList.length == 0) {
+            keyElement.classList.add("attempted");
+          }
+          break;
       }
     }
     

site/assets/scripts/controllers/playfield.js

@@ -5,7 +5,7 @@ import { WordSource } from "../models/words.js";
 
 
 export default class extends Controller {
-  static targets = ["row", "playfield", "topMessage", "nextPuzzleButton"];
+  static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons"];
   static outlets = ["overlay"];
   
   async connect() {
@@ -44,6 +44,13 @@ export default class extends Controller {
       this._verifyGuess(rowElem);      
     }
   }
+
+  loadDef(ev) {
+    ev.preventDefault()
+
+    let word = this._gameController.currentWord();
+    window.open(`https://www.ecosia.org/search?q=define+${word}`, "_blank");
+  }
   
   tappedBackspace() {
     if (this._activeLetter == 0) {
@@ -65,10 +72,14 @@ export default class extends Controller {
     
     switch (results.guessResult) {
     case GUESS_RESULT.FOUL:
-      this.overlayOutlet.showMessage("Not a valid word.");
+      this.overlayOutlet.showMessage("Not a valid word");
 
       rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
       this._activeLetter = 0;
+
+      window.dispatchEvent(new CustomEvent("guessResults", {
+        detail: results
+      }));
       break;
     case GUESS_RESULT.MISS:
       this._colorizeRow(rowElem, results);
@@ -76,7 +87,7 @@ export default class extends Controller {
       this._activeRowIndex += 1;
       if (this._activeRowIndex >= this._gameController.guesses()) {
         this.topMessageTarget.innerText = this._gameController.currentWord().toUpperCase();
-        this.nextPuzzleButtonTarget.classList.remove("hide");
+        this.nextPuzzleButtonsTarget.classList.remove("hide");
       } else {
         this._activeLetter = 0;
       }
@@ -86,17 +97,7 @@ export default class extends Controller {
       this._colorizeRow(rowElem, results);
 
       this.topMessageTarget.innerText = "Hooray! You did it.";
-      this.nextPuzzleButtonTarget.classList.remove("hide");
-
-      /*
-      if (this._gameController.nextWord()) {
-        this._buildPlayfield();
-      } else {
-        console.log("No more words");
-        this._activeRowIndex = -1;
-        this._colorizeRow(rowElem, results);
-      }
-       */
+      this.nextPuzzleButtonsTarget.classList.remove("hide");
       break;
     }
   }
@@ -125,7 +126,7 @@ export default class extends Controller {
     this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows);
 
     this.topMessageTarget.innerHTML = " "
-    this.nextPuzzleButtonTarget.classList.add("hide");
+    this.nextPuzzleButtonsTarget.classList.add("hide");
     
     window.dispatchEvent(new CustomEvent("resetKeyColors"));
   }

site/assets/scripts/models/gamecontroller.js

@@ -7,7 +7,8 @@ export const GUESS_RESULT = {
 export const MARKERS = {
     MISS: 'm',
     RIGHT_POS: 'g',
-    RIGHT_CHAR: 'y'
+    RIGHT_CHAR: 'y',
+    ATTEMPTED: 'a',
 };
 
 class ProgressionState {
@@ -87,7 +88,13 @@ export class GameController {
 
     if (this._currentWord.length <= 5) {
       if (!this._wordSource.isWord(guess)) {
+        hits = {};
+        for (let i = 0; i < guess.length; i++) {
+          hits[guess[i]] = MARKERS.ATTEMPTED;
+        }
+
         return {
+          hits: hits,
           guessResult: GUESS_RESULT.FOUL,
         };
       }