108 lines
3 KiB
JavaScript
108 lines
3 KiB
JavaScript
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
|
|
|
import { GUESS_RESULT, MARKERS, GameController } from "../models/gamecontroller.js";
|
|
import { WordSource } from "../models/words.js";
|
|
|
|
|
|
export default class extends Controller {
|
|
static targets = ["row"];
|
|
|
|
connect() {
|
|
this._wordSource = new WordSource();
|
|
this._gameController = new GameController(this._wordSource);
|
|
|
|
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._verifyGuess(rowElem);
|
|
|
|
}
|
|
}
|
|
|
|
_verifyGuess(rowElem) {
|
|
let guessedWord = Array.from(rowElem.querySelectorAll("span")).map((x) => x.innerText).join("");
|
|
console.log("The guessed word is: " + guessedWord);
|
|
|
|
let results = this._gameController.checkGuess(guessedWord);
|
|
|
|
switch (results.guessResult) {
|
|
case GUESS_RESULT.FOUL:
|
|
console.log("not a word!");
|
|
rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength()));
|
|
this._activeLetter = 0;
|
|
break;
|
|
case GUESS_RESULT.MISS:
|
|
console.log("try again!");
|
|
|
|
this._colorizeRow(rowElem, results);
|
|
this._activeRowIndex += 1;
|
|
this._activeLetter = 0;
|
|
break;
|
|
case GUESS_RESULT.WIN:
|
|
console.log("CORREcT!");
|
|
this._colorizeRow(rowElem, results);
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
_buildPlayfield(rows, wordLength) {
|
|
let newRows = [];
|
|
for (let r = 0; r < rows; r++) {
|
|
newRows.push(this._buildPlayfieldRow(wordLength));
|
|
}
|
|
|
|
this.element.replaceChildren.apply(this.element, newRows);
|
|
}
|
|
|
|
_buildPlayfieldRow(wordLength) {
|
|
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);
|
|
}
|
|
return divElem;
|
|
}
|
|
|
|
_colorizeRow(row, results) {
|
|
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
|
|
}));
|
|
}
|
|
} |