Moved to an easier dictionary and added invalid word guesses back

Also added a spinner

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", "nextPuzzleButtons"];
+  static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons", "loader"];
   static outlets = ["overlay"];
 
   async connect() {
@@ -15,6 +15,8 @@ export default class extends Controller {
     await this._gameController.start();
 
     this._buildPlayfield();
+
+    this.loaderTarget.classList.add("hide");
   }
 
   tappedKey(key) {
@@ -109,11 +111,16 @@ export default class extends Controller {
 
   async loadNextPuzzle(ev) {
     ev.preventDefault();
+
+    this.loaderTarget.classList.remove("hide");
+
     if (await this._gameController.nextWord()) {
       this._buildPlayfield();
     } else {
       this.overlayOutlet.showMessage("No more words available.");
     }
+
+    this.loaderTarget.classList.add("hide");
   }
 
  _showWin() {

site/assets/scripts/models/gamecontroller.js

@@ -149,6 +149,18 @@ export class GameController {
     let misses = {};
     let hits = {};
 
+    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,
+      };
+    }
+
     for (let i = 0; i < guess.length; i++) {
       if (guess[i] == this._currentWord[i]) {
         markers[i] = MARKERS.RIGHT_POS;

site/assets/scripts/models/words.js

@@ -19,38 +19,38 @@ function binSearch(list, word) {
 
 export class WordSource {
     constructor() {
+        this._dataVersion = null;
         this._wordData = null;
+        this._otherWords = null;
         this._pattern = null;
-        // this._currentWord = null;
-        // this._progressionState=
     }
 
     isWord(word) {
-        let list = this._wordData.words[word.length.toString()];
-        if (!list) {
+        if (!this._wordData || !this._otherWords) {
             return false;
         }
 
-        return binSearch(list, word);
+        return binSearch(this._wordData[word.length.toString()], word) ||
+            binSearch(this._otherWords[word.length.toString()], word);
     }
 
     async needToResetProgression(prog) {
         await this._fetchAllWordsIfNecessary();
-        return !prog || !prog.shuffleId || this._pattern.id !== prog.shuffleId;
+        return !prog || !prog.shuffleId || this._dataVersion !== prog.shuffleId;
     }
 
     async getPattenShuffleID() {
-        return this._pattern.id;
+        return this._dataVersion;
     }
     
     async getCurrentWord(prog) {
-        let words = await this._fetchAllWordsIfNecessary();
+        await this._fetchAllWordsIfNecessary();
 
         let wordLengthKey = prog.wordLength + "";
         let wordIndex = prog.wordIndex[wordLengthKey];
-        let idx = this._pattern.index[wordLengthKey][wordIndex];
+        let idx = this._pattern[wordLengthKey][wordIndex];
 
-        return words.words[wordLengthKey][idx];
+        return this._wordData[wordLengthKey][idx];
     }
     
     async _fetchAllWordsIfNecessary() {
@@ -58,8 +58,11 @@ export class WordSource {
             return this._wordData;
         }
 
-        this._wordData = await (await fetch("/assets/data/words.json")).json();
-        this._pattern = await (await fetch("/assets/data/shuffle_pattern.json")).json();
-        return this._wordData;
+        let data = await (await fetch("/assets/data/data.json")).json();
+
+        this._dataVersion = data["versionId"];
+        this._wordData = data["guessWords"];
+        this._otherWords = data["otherWords"];
+        this._pattern = data["shufflePattern"];
     }
 }

site/assets/styles/main.css

@@ -217,4 +217,26 @@ div.overlay-message {
 
 .hide {
     display: none !important;
+}
+
+.loader {
+    margin-top: 6rem;
+
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: var(--color-no-letter-bg);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }