Moved to 11ty

assets/scripts/controllers/keyboard.js

@@ -0,0 +1,42 @@
+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" ];
+  
+  tappedKey(ev) {
+      ev.preventDefault();
+      
+      let key = ev.target.dataset["key"];
+      this.playfieldOutlet.tappedKey(key);
+  }
+  
+  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;   
+      }
+    }
+    
+  }
+}

assets/scripts/controllers/playfield.js

@@ -0,0 +1,81 @@
+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 = ["row"];
+  
+  connect() { 
+    this._gameController = new GameController();
+    
+    this._activeRowIndex = 0;
+    this._activeLetter = 0;
+    
+    this._buildPlayfield(this._gameController.guesses(), this._gameController.wordLength());
+  }
+  
+  tappedKey(key) {
+    console.log(`Key ${key} was tapped via outliet`);
+      
+    this._addLetter(key);
+  }
+  
+  _addLetter(letter) {
+    let rowElem = this.rowTargets[this._activeRowIndex];
+    let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
+    
+    colElem.innerText = letter.toUpperCase();
+    
+    this._activeLetter += 1;
+    if (this._activeLetter >= this._gameController.wordLength()) {
+      this._colorizeRow(rowElem);
+      
+      this._activeRowIndex += 1;
+      this._activeLetter = 0;
+    }
+  }
+  
+  _buildPlayfield(rows, wordLength) {
+    let newRows = [];
+    for (let r = 0; r < rows; r++) {
+      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);
+      }
+      
+      newRows.push(divElem);
+    }
+    
+    this.element.replaceChildren.apply(this.element, newRows);
+  }
+  
+  _colorizeRow(row) {
+    let guessedWord = Array.from(row.querySelectorAll("span")).map((x) => x.innerText).join("");
+    console.log("The guessed word is: " + guessedWord);
+    
+    let results = this._gameController.checkGuess(guessedWord);
+    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
+    }));
+  }
+}