diff --git a/assets/scripts/controllers/keyboard.js b/assets/scripts/controllers/keyboard.js index a5f05e8..8912158 100644 --- a/assets/scripts/controllers/keyboard.js +++ b/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 = ""; diff --git a/assets/scripts/controllers/playfield.js b/assets/scripts/controllers/playfield.js index edd127c..404d378 100644 --- a/assets/scripts/controllers/playfield.js +++ b/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); diff --git a/index.html b/index.html index 8154d32..0ddbaee 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
@@ -54,6 +54,8 @@ + +