Added guess outcomes and the ability mark words as invalid
This commit is contained in:
parent
a9d4227122
commit
7312190c62
|
@ -1,12 +1,15 @@
|
||||||
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
||||||
|
|
||||||
import { MARKERS, GameController } from "../models/gamecontroller.js";
|
import { GUESS_RESULT, MARKERS, GameController } from "../models/gamecontroller.js";
|
||||||
|
import { WordSource } from "../models/words.js";
|
||||||
|
|
||||||
|
|
||||||
export default class extends Controller {
|
export default class extends Controller {
|
||||||
static targets = ["row"];
|
static targets = ["row"];
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
this._gameController = new GameController();
|
this._wordSource = new WordSource();
|
||||||
|
this._gameController = new GameController(this._wordSource);
|
||||||
|
|
||||||
this._activeRowIndex = 0;
|
this._activeRowIndex = 0;
|
||||||
this._activeLetter = 0;
|
this._activeLetter = 0;
|
||||||
|
@ -28,36 +31,60 @@ export default class extends Controller {
|
||||||
|
|
||||||
this._activeLetter += 1;
|
this._activeLetter += 1;
|
||||||
if (this._activeLetter >= this._gameController.wordLength()) {
|
if (this._activeLetter >= this._gameController.wordLength()) {
|
||||||
this._colorizeRow(rowElem);
|
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._activeRowIndex += 1;
|
||||||
this._activeLetter = 0;
|
this._activeLetter = 0;
|
||||||
|
break;
|
||||||
|
case GUESS_RESULT.WIN:
|
||||||
|
console.log("CORREcT!");
|
||||||
|
this._colorizeRow(rowElem, results);
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_buildPlayfield(rows, wordLength) {
|
_buildPlayfield(rows, wordLength) {
|
||||||
let newRows = [];
|
let newRows = [];
|
||||||
for (let r = 0; r < rows; r++) {
|
for (let r = 0; r < rows; r++) {
|
||||||
let divElem = document.createElement("div");
|
newRows.push(this._buildPlayfieldRow(wordLength));
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
newRows.push(divElem);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.element.replaceChildren.apply(this.element, newRows);
|
this.element.replaceChildren.apply(this.element, newRows);
|
||||||
}
|
}
|
||||||
|
|
||||||
_colorizeRow(row) {
|
_buildPlayfieldRow(wordLength) {
|
||||||
let guessedWord = Array.from(row.querySelectorAll("span")).map((x) => x.innerText).join("");
|
let divElem = document.createElement("div");
|
||||||
console.log("The guessed word is: " + guessedWord);
|
divElem.classList.add("row");
|
||||||
|
divElem.setAttribute("data-playfield-target", "row");
|
||||||
|
|
||||||
let results = this._gameController.checkGuess(guessedWord);
|
for (let c = 0; c < wordLength; c++) {
|
||||||
|
let letterSpan = document.createElement("span");
|
||||||
|
divElem.appendChild(letterSpan);
|
||||||
|
}
|
||||||
|
return divElem;
|
||||||
|
}
|
||||||
|
|
||||||
|
_colorizeRow(row, results) {
|
||||||
let markers = results.markers;
|
let markers = results.markers;
|
||||||
|
|
||||||
for (let i = 0; i < this._gameController.wordLength(); i++) {
|
for (let i = 0; i < this._gameController.wordLength(); i++) {
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
||||||
|
|
||||||
import "./models/gamecontroller.js";
|
|
||||||
|
|
||||||
import PlayfieldController from "./controllers/playfield.js";
|
import PlayfieldController from "./controllers/playfield.js";
|
||||||
import KeyboardController from "./controllers/keyboard.js";
|
import KeyboardController from "./controllers/keyboard.js";
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
|
export const GUESS_RESULT = {
|
||||||
|
MISS: 'm',
|
||||||
|
WIN: 'w',
|
||||||
|
FOUL: 'f'
|
||||||
|
};
|
||||||
|
|
||||||
export const MARKERS = {
|
export const MARKERS = {
|
||||||
MISS: 'm',
|
MISS: 'm',
|
||||||
RIGHT_POS: 'g',
|
RIGHT_POS: 'g',
|
||||||
|
@ -5,8 +11,9 @@ export const MARKERS = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export class GameController {
|
export class GameController {
|
||||||
constructor() {
|
constructor(wordSource) {
|
||||||
this._currentWord = "DEERS";
|
this._wordSource = wordSource;
|
||||||
|
this._currentWord = wordSource.getCurrentWord();
|
||||||
this._guesses = 5;
|
this._guesses = 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -24,10 +31,17 @@ export class GameController {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check correct placements
|
// Check correct placements
|
||||||
|
let guessResult;
|
||||||
let markers = new Array(guess.length);
|
let markers = new Array(guess.length);
|
||||||
let misses = {};
|
let misses = {};
|
||||||
let hits = {};
|
let hits = {};
|
||||||
|
|
||||||
|
if (!this._wordSource.isWord(guess)) {
|
||||||
|
return {
|
||||||
|
guessResult: GUESS_RESULT.FOUL,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
for (let i = 0; i < guess.length; i++) {
|
for (let i = 0; i < guess.length; i++) {
|
||||||
if (guess[i] == this._currentWord[i]) {
|
if (guess[i] == this._currentWord[i]) {
|
||||||
markers[i] = MARKERS.RIGHT_POS;
|
markers[i] = MARKERS.RIGHT_POS;
|
||||||
|
@ -63,7 +77,15 @@ export class GameController {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let isRight = markers.filter((x) => x == MARKERS.RIGHT_POS).length == this._currentWord.length;
|
||||||
|
if (isRight) {
|
||||||
|
guessResult = GUESS_RESULT.WIN;
|
||||||
|
} else {
|
||||||
|
guessResult = GUESS_RESULT.MISS;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
guessResult: guessResult,
|
||||||
hits: hits,
|
hits: hits,
|
||||||
markers: markers
|
markers: markers
|
||||||
};
|
};
|
||||||
|
|
23
assets/scripts/models/words.js
Normal file
23
assets/scripts/models/words.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
export class WordSource {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this._words = [
|
||||||
|
"MUNCH",
|
||||||
|
"HOUSE",
|
||||||
|
"MOON"
|
||||||
|
];
|
||||||
|
this._currentWord = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
isWord(word) {
|
||||||
|
return this._words.filter((x) => x == word).length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
getCurrentWord() {
|
||||||
|
return this._words[this._currentWord];
|
||||||
|
}
|
||||||
|
|
||||||
|
nextWord() {
|
||||||
|
this._currentWord += 1;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue