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;
+        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() {
@@ -45,6 +45,13 @@ export default class extends Controller {
     }
   }
 
+  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) {
       return;
@@ -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,
         };
       }

site/assets/styles/main.css

@@ -10,11 +10,25 @@
 }
 
 body {
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
+button {
+    font-size: 0.9em;
+}
+
+button.secondary {
+    background: var(--bg);
+    color: var(--accent);
+}
+
+button.secondary:hover {
+    background: var(--bg);
+    color: var(--accent-hover);
+}
+
 main {
     flex-grow: 1;
     flex-shrink: 1;
@@ -23,8 +37,13 @@ main {
     flex-direction: column;
 }
 
-body header > h1 {
-    margin-block: 0.2rem;
+body header > h1:only-child {
+    margin-block: 0.5rem;
+    font-size: 2rem;
+}
+
+body header {
+    padding-block-end: 0;
 }
 
 main > div:first-child {
@@ -45,6 +64,12 @@ div.playfield div[data-playfield-target="playfield"] {
     font-size: 2.5rem;
 }
 
+div.playfield div[data-playfield-target="nextPuzzleButtons"] {
+    display: flex;
+    justify-content: center;
+    gap: 0.8rem;
+}
+
 div.keyboard > div {
     display: flex;
     justify-content: space-around;
@@ -61,6 +86,10 @@ div.keyboard button {
     border: solid 1px #444;
 }
 
+div.keyboard button:hover {
+    background: #bbb;
+}
+
 div.keyboard > div:nth-child(2) {
     margin-inline: 2vw;
 }
@@ -75,16 +104,36 @@ button[data-keyboard-target="key"].right-pos {
     color: var(--color-right-letter-fg);
 }
 
+button[data-keyboard-target="key"].right-pos:hover {
+    background: var(--color-right-letter-bg);
+}
+
 button[data-keyboard-target="key"].right-char {
     background: var(--color-has-letter-bg);
     color: var(--color-has-letter-fg);
 }
 
+button[data-keyboard-target="key"].right-char:hover {
+    background: var(--color-has-letter-bg);
+}
+
 button[data-keyboard-target="key"].miss {
     background: var(--color-no-letter-bg);
     color: var(--color-no-letter-fg);
 }
 
+button[data-keyboard-target="key"].miss:hover {
+    background: var(--color-no-letter-bg);
+}
+
+button[data-keyboard-target="key"].attempted {
+    background: #ddd;
+}
+
+button[data-keyboard-target="key"].miss:hover {
+    background: #ddd;
+}
+
 div.playfield div.row {
     display: flex;
     justify-content: center;
@@ -117,7 +166,7 @@ div.playfield div.row span.miss {
 
 div.overlay {
     position: fixed;
-    bottom: 25%;
+    bottom: 30%;
     left: 10%;
     right: 10%;
     z-index: 10;
@@ -131,7 +180,7 @@ div.overlay.show {
 }
 
 div.overlay-message {
-    font-size: 2rem;
+    font-size: 1.8rem;
     line-height: 2.2rem;
 
     text-align: center;
@@ -145,5 +194,5 @@ div.overlay-message {
 }
 
 .hide {
-    display: none;
+    display: none !important;
 }

site/index.html

@@ -21,7 +21,10 @@
           <div data-playfield-target="topMessage">&nbsp;</div>
           <div data-playfield-target="playfield"></div>
 
-          <button data-playfield-target="nextPuzzleButton" class="hide" data-action="playfield#loadNextPuzzle">Next Puzzle</button>
+          <div data-playfield-target="nextPuzzleButtons" class="hide">
+            <button class="secondary" data-action="playfield#loadDef">Define</button>
+            <button data-action="playfield#loadNextPuzzle">Next Puzzle</button>
+          </div>
       </div>
       <div class="keyboard" data-controller="keyboard"
            data-keyboard-playfield-outlet=".playfield"
@@ -54,7 +57,7 @@
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="l">l</button>
           </div>
           <div>
-              <button data-keyboard-target="key" data-action="keyboard#tapBackspace">&larr;</button>
+              <button data-keyboard-target="key" data-action="keyboard#tapBackspace"><strong>&#9003;</strong></button>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="z">z</button>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="x">x</button>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="c">c</button>
@@ -62,7 +65,7 @@
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="b">b</button>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="n">n</button>
               <button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="m">m</button>
-              <button data-keyboard-target="key" data-action="keyboard#tapEnter">&crarr;</button>
+              <button data-keyboard-target="key" data-action="keyboard#tapEnter"><strong>&crarr;</strong></button>
           </div>
       </div>