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
2025-01-26 10:19:06 +11:00 · 2025-01-26 10:19:06 +11:00 · 5b79c43551
parent f9b1457dea
commit 5b79c43551
5 changed files with 95 additions and 27 deletions
--- a/site/assets/scripts/controllers/keyboard.js
+++ b/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;
      }
    }
    
--- a/site/assets/scripts/controllers/playfield.js
+++ b/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 = "&nbsp;"
-    this.nextPuzzleButtonTarget.classList.add("hide");
+    this.nextPuzzleButtonsTarget.classList.add("hide");
    
    window.dispatchEvent(new CustomEvent("resetKeyColors"));
  }
--- a/site/assets/scripts/models/gamecontroller.js
+++ b/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,
        };
      }
--- a/site/assets/styles/main.css
+++ b/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;
 }
--- a/site/index.html
+++ b/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>