Added keyboard support for enter and backspace

assets/scripts/controllers/keyboard.js

@@ -7,13 +7,23 @@ export default class extends Controller {
   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) {
@@ -22,7 +32,7 @@ export default class extends Controller {
       let key = ev.target.dataset["key"];
       this.playfieldOutlet.tappedKey(key);
   }
-  
+    
   resetKeyColors(ev) {
     for (let keyElement of this.keyTargets) {
       keyElement.classList.value = "";

assets/scripts/controllers/playfield.js

@@ -23,6 +23,8 @@ export default class extends Controller {
   _addLetter(letter) {
     if (this._activeRowIndex < 0) {
       return;
+    } else if (this._activeLetter >= this._gameController.wordLength()) {
+      return;
     }
     
     let rowElem = this.rowTargets[this._activeRowIndex];
@@ -31,11 +33,27 @@ export default class extends Controller {
     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);

index.html

@@ -19,7 +19,7 @@
       <div data-controller="keyboard" 
            data-keyboard-playfield-outlet=".playfield"
            data-action="
-              keypress@window->keyboard#onKeyPress
+              keydown@window->keyboard#onKeyPress
               guessResults@window->keyboard#colorizeKeys
               resetKeyColors@window->keyboard#resetKeyColors
             ">
@@ -54,6 +54,8 @@
               <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">enter</button>
+              <button data-keyboard-target="key" data-action="keyboard#tapBackspace">back</button>
           </div>
       </div>