Have got a dictionary of words

site/assets/scripts/controllers/keyboard.js

@@ -0,0 +1,68 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js";
+
+import { MARKERS, GameController } from "../models/gamecontroller.js";
+
+export default class extends Controller {
+  static targets = [ "key" ];
+  static outlets = [ "playfield" ];
+  
+  onKeyPress(ev) {
+    if (ev.metaKey || ev.ctrlKey || ev.altKey) {
+      return;
+    }
+    
+    if ((ev.key >= 'a') && (ev.key >= 'z')) {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedKey(ev.key);
+    } else if ((ev.key >= 'A') && (ev.key >= 'Z')) {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedKey(ev.key.toLowerCase());
+    } else if (ev.key == 'Backspace') {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedBackspace();      
+    } else if (ev.key == 'Enter') {
+      ev.preventDefault();
+      this.playfieldOutlet.enterGuess();
+    }
+  }
+  
+  tappedKey(ev) {
+      ev.preventDefault();
+      
+      let key = ev.target.dataset["key"];
+      this.playfieldOutlet.tappedKey(key);
+  }
+    
+  resetKeyColors(ev) {
+    for (let keyElement of this.keyTargets) {
+      keyElement.classList.value = "";
+    }
+  }
+  
+  colorizeKeys(ev) {
+    let hits = ev.detail.hits;
+    
+    for (let k in hits) {
+      let thisKey = k.toLowerCase();
+      let marker = hits[k];
+      
+      let keyElement = this.keyTargets.filter((e) => e.dataset.key == thisKey)[0];
+      switch (marker) {
+        case MARKERS.RIGHT_POS:
+          keyElement.classList.value = "right-pos";
+          break;
+        case MARKERS.RIGHT_CHAR:
+          if (!keyElement.classList.contains("right-pos")) {
+            keyElement.classList.add("right-char");
+          }
+          break; 
+        case MARKERS.MISS:
+          if (keyElement.classList.length == 0) {
+            keyElement.classList.add("miss");
+          }
+          break;   
+      }
+    }
+    
+  }
+}

site/assets/scripts/controllers/playfield.js

@@ -0,0 +1,142 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
+
+import { GUESS_RESULT, MARKERS, GameController } from "../models/gamecontroller.js";
+import { WordSource } from "../models/words.js";
+
+
+export default class extends Controller {
+  static targets = ["row"];
+  
+  async connect() {
+    this._wordSource = new WordSource();
+    this._gameController = new GameController(this._wordSource);
+
+    await this._gameController.start();
+
+    this._buildPlayfield();
+  }
+  
+  tappedKey(key) {
+    console.log(`Key ${key} was tapped via outliet`);
+      
+    this._addLetter(key);
+  }
+  
+  _addLetter(letter) {
+    if (this._activeRowIndex < 0) {
+      return;
+    } else if (this._activeLetter >= this._gameController.wordLength()) {
+      return;
+    }
+    
+    let rowElem = this.rowTargets[this._activeRowIndex];
+    let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
+    
+    colElem.innerText = letter.toUpperCase();
+    
+    this._activeLetter += 1;
+  }
+  
+  enterGuess() {
+    if (this._activeLetter >= this._gameController.wordLength()) {
+      let rowElem = this.rowTargets[this._activeRowIndex];
+      this._verifyGuess(rowElem);      
+    }
+  }
+  
+  tappedBackspace() {
+    if (this._activeLetter == 0) {
+      return;
+    }
+
+    this._activeLetter -= 1;
+    let rowElem = this.rowTargets[this._activeRowIndex];
+    let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
+
+    colElem.innerText = "";
+  }
+  
+  _verifyGuess(rowElem) {
+    let guessedWord = Array.from(rowElem.querySelectorAll("span")).map((x) => x.innerText).join("");
+    console.log("The guessed word is: " + guessedWord);
+    
+    let results = this._gameController.checkGuess(guessedWord);
+    
+    switch (results.guessResult) {
+    case GUESS_RESULT.FOUL:
+      console.log("not a word!");
+      rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
+      this._activeLetter = 0;
+      break;
+    case GUESS_RESULT.MISS:    
+      console.log("try again!");
+      
+      this._colorizeRow(rowElem, results);
+      this._activeRowIndex += 1;
+      this._activeLetter = 0;
+      break;
+    case GUESS_RESULT.WIN:
+      console.log("CORRECT!");
+      
+      if (this._gameController.nextWord()) {
+        this._buildPlayfield();
+      } else {
+        console.log("No more words");
+        this._activeRowIndex = -1;
+        this._colorizeRow(rowElem, results);
+      }
+      break;
+    }
+  }
+  
+  _buildPlayfield() {
+    let rows = this._gameController.guesses();
+    let wordLength = this._gameController.wordLength();
+    
+    this._activeRowIndex = 0;
+    this._activeLetter = 0;
+    
+    let newRows = [];
+    for (let r = 0; r < rows; r++) {      
+      newRows.push(this._buildPlayfieldRow(wordLength));
+    }
+    
+    this.element.replaceChildren.apply(this.element, newRows);
+    
+    window.dispatchEvent(new CustomEvent("resetKeyColors"));
+  }
+  
+  _buildPlayfieldRow(wordLength) {
+    let divElem = document.createElement("div");
+    divElem.classList.add("row");
+    divElem.setAttribute("data-playfield-target", "row");
+    
+    for (let c = 0; c < wordLength; c++) {
+      let letterSpan = document.createElement("span");
+      divElem.appendChild(letterSpan);
+    }
+    return divElem;    
+  }
+  
+  _colorizeRow(row, results) {
+    let markers = results.markers;
+    
+    for (let i = 0; i < this._gameController.wordLength(); i++) {
+      switch (markers[i]) {
+      case MARKERS.RIGHT_POS:
+        row.children[i].classList.add("right-pos");
+        break;
+      case MARKERS.RIGHT_CHAR:
+        row.children[i].classList.add("right-char");
+        break;              
+      case MARKERS.MISS:
+        row.children[i].classList.add("miss");
+        break;              
+      }
+    }
+    
+    window.dispatchEvent(new CustomEvent("guessResults", {
+      detail: results
+    }));
+  }
+}