web/wordle-clone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Have got win and failures working

Browse source
This commit is contained in:
Leon Mika 2025-01-25 11:30:04 +11:00
parent d9fa154a01
commit a8e42da6fd
10 changed files with 255 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/assets/scripts/controllers/keyboard.js
View file

@ -32,6 +32,16 @@ export default class extends Controller {
let key = ev.target.dataset["key"];
this.playfieldOutlet.tappedKey(key);
}
tapEnter(ev) {
ev.preventDefault();
this.playfieldOutlet.enterGuess();
}
tapBackspace(ev) {
ev.preventDefault();
this.playfieldOutlet.tappedBackspace();
}
resetKeyColors(ev) {
for (let keyElement of this.keyTargets) {

18
site/assets/scripts/controllers/overlay.js Normal file
View file

@ -0,0 +1,18 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
export default class extends Controller {
static targets = ["message"];
showMessage(msg) {
this.messageTarget.innerText = msg;
this.element.classList.add("show");
if (this._waitTimer) {
clearTimeout(this._waitTimer);
}
this._waitTimer = setTimeout(() => {
this.element.classList.remove("show");
}, 3000);
}
}

42
site/assets/scripts/controllers/playfield.js
View file

@ -5,7 +5,8 @@ import { WordSource } from "../models/words.js";
export default class extends Controller {
static targets = ["row"];
static targets = ["row", "playfield", "topMessage", "nextPuzzleButton"];
static outlets = ["overlay"];
async connect() {
this._wordSource = new WordSource();
@ -64,20 +65,30 @@ export default class extends Controller {
switch (results.guessResult) {
case GUESS_RESULT.FOUL:
console.log("not a word!");
this.overlayOutlet.showMessage("Not a valid word.");
rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
this._activeLetter = 0;
break;
case GUESS_RESULT.MISS:
console.log("try again!");
case GUESS_RESULT.MISS:
this._colorizeRow(rowElem, results);
this._activeRowIndex += 1;
this._activeLetter = 0;
if (this._activeRowIndex >= this._gameController.guesses()) {
this.topMessageTarget.innerText = this._gameController.currentWord().toUpperCase();
this.nextPuzzleButtonTarget.classList.remove("hide");
} else {
this._activeLetter = 0;
}
break;
case GUESS_RESULT.WIN:
console.log("CORRECT!");
this._colorizeRow(rowElem, results);
this.topMessageTarget.innerText = "Hooray! You did it.";
this.nextPuzzleButtonTarget.classList.remove("hide");
/*
if (this._gameController.nextWord()) {
this._buildPlayfield();
} else {
@ -85,9 +96,19 @@ export default class extends Controller {
this._activeRowIndex = -1;
this._colorizeRow(rowElem, results);
}
*/
break;
}
}
async loadNextPuzzle(ev) {
ev.preventDefault();
if (await this._gameController.nextWord()) {
this._buildPlayfield();
} else {
this.overlayOutlet.showMessage("No more words available.");
}
}
_buildPlayfield() {
let rows = this._gameController.guesses();
@ -101,7 +122,10 @@ export default class extends Controller {
newRows.push(this._buildPlayfieldRow(wordLength));
}
this.element.replaceChildren.apply(this.element, newRows);
this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows);
this.topMessageTarget.innerHTML = " "
this.nextPuzzleButtonTarget.classList.add("hide");
window.dispatchEvent(new CustomEvent("resetKeyColors"));
}