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

Some QOL improvements:
All checks were successful
/ publish (push) Successful in 1m16s
Details

Browse source 
- Added subtle highliting of attempted letters
- Using correct backspace character
- Reduced header size a little
- Added a "define" button to show word definition
This commit is contained in:
Leon Mika 2025-01-26 10:19:06 +11:00
parent f9b1457dea
commit 5b79c43551
5 changed files with 95 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -63,14 +63,22 @@ export default class extends Controller {
break;
case MARKERS.RIGHT_CHAR:
if (!keyElement.classList.contains("right-pos")) {
keyElement.classList.remove("attempted");
keyElement.classList.add("right-char");
}
break;
case MARKERS.MISS:
if (keyElement.classList.length == 0) {
keyElement.classList.remove("attempted");
if (!keyElement.classList.contains("right-pos") && !keyElement.classList.contains("right-char")) {
keyElement.classList.remove("attempted");
keyElement.classList.add("miss");
}
break;
break;
case MARKERS.ATTEMPTED:
if (keyElement.classList.length == 0) {
keyElement.classList.add("attempted");
}
break;
}
}

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

@ -5,7 +5,7 @@ import { WordSource } from "../models/words.js";
export default class extends Controller {
static targets = ["row", "playfield", "topMessage", "nextPuzzleButton"];
static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons"];
static outlets = ["overlay"];
async connect() {
@ -44,6 +44,13 @@ export default class extends Controller {
this._verifyGuess(rowElem);
}
}
loadDef(ev) {
ev.preventDefault()
let word = this._gameController.currentWord();
window.open(`https://www.ecosia.org/search?q=define+${word}`, "_blank");
}
tappedBackspace() {
if (this._activeLetter == 0) {
@ -65,10 +72,14 @@ export default class extends Controller {
switch (results.guessResult) {
case GUESS_RESULT.FOUL:
this.overlayOutlet.showMessage("Not a valid word.");
this.overlayOutlet.showMessage("Not a valid word");
rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
this._activeLetter = 0;
window.dispatchEvent(new CustomEvent("guessResults", {
detail: results
}));
break;
case GUESS_RESULT.MISS:
this._colorizeRow(rowElem, results);
@ -76,7 +87,7 @@ export default class extends Controller {
this._activeRowIndex += 1;
if (this._activeRowIndex >= this._gameController.guesses()) {
this.topMessageTarget.innerText = this._gameController.currentWord().toUpperCase();
this.nextPuzzleButtonTarget.classList.remove("hide");
this.nextPuzzleButtonsTarget.classList.remove("hide");
} else {
this._activeLetter = 0;
}
@ -86,17 +97,7 @@ export default class extends Controller {
this._colorizeRow(rowElem, results);
this.topMessageTarget.innerText = "Hooray! You did it.";
this.nextPuzzleButtonTarget.classList.remove("hide");
/*
if (this._gameController.nextWord()) {
this._buildPlayfield();
} else {
console.log("No more words");
this._activeRowIndex = -1;
this._colorizeRow(rowElem, results);
}
*/
this.nextPuzzleButtonsTarget.classList.remove("hide");
break;
}
}
@ -125,7 +126,7 @@ export default class extends Controller {
this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows);
this.topMessageTarget.innerHTML = " "
this.nextPuzzleButtonTarget.classList.add("hide");
this.nextPuzzleButtonsTarget.classList.add("hide");
window.dispatchEvent(new CustomEvent("resetKeyColors"));
}