Initial commit
Have got guesses and colourisation working
This commit is contained in:
commit
974bd3c39f
69
src/index.html
Normal file
69
src/index.html
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="/styles/main.css" rel="stylesheet">
|
||||||
|
<title>Wordle Clone</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Wordle Clone</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div data-controller="playfield" class="playfield">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-controller="keyboard"
|
||||||
|
data-keyboard-playfield-outlet=".playfield"
|
||||||
|
data-action="guessResults@window->keyboard#colorizeKeys">
|
||||||
|
<div>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="q">q</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="w">w</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="e">e</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="r">r</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="t">t</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="y">y</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="u">u</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="i">i</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="o">o</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="p">p</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="a">a</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="s">s</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="d">d</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="f">f</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="g">g</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="h">h</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="j">j</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="k">k</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="l">l</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="z">z</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="x">x</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="c">c</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="v">v</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="b">b</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="n">n</button>
|
||||||
|
<button data-keyboard-target="key" data-action="keyboard#tappedKey" data-key="m">m</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id="row-template">
|
||||||
|
<div class="row" data-playfield-target="row">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="/scripts/main.js" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
192
src/scripts/main.js
Normal file
192
src/scripts/main.js
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
|
||||||
|
|
||||||
|
window.Stimulus = Application.start();
|
||||||
|
|
||||||
|
const MARKER_MISS = 'm';
|
||||||
|
const MARKER_RIGHT_POS = 'g';
|
||||||
|
const MARKER_RIGHT_CHAR = 'y';
|
||||||
|
|
||||||
|
class GameController {
|
||||||
|
constructor() {
|
||||||
|
this._currentWord = "DEERS";
|
||||||
|
this._guesses = 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
wordLength() {
|
||||||
|
return this._currentWord.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
guesses() {
|
||||||
|
return this._guesses;
|
||||||
|
}
|
||||||
|
|
||||||
|
checkGuess(guess) {
|
||||||
|
if (guess.length != this._currentWord.length) {
|
||||||
|
throw Error(`Expected length to be ${this._currentWord.length} but was ${guess.length}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check correct placements
|
||||||
|
let markers = new Array(guess.length);
|
||||||
|
let misses = {};
|
||||||
|
let hits = {};
|
||||||
|
|
||||||
|
for (let i = 0; i < guess.length; i++) {
|
||||||
|
if (guess[i] == this._currentWord[i]) {
|
||||||
|
markers[i] = MARKER_RIGHT_POS;
|
||||||
|
hits[guess[i]] = MARKER_RIGHT_POS;
|
||||||
|
} else {
|
||||||
|
if (this._currentWord[i] in misses) {
|
||||||
|
misses[this._currentWord[i]] += 1;
|
||||||
|
} else {
|
||||||
|
misses[this._currentWord[i]] = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check words that are wrong placement but are in the word
|
||||||
|
// Distribute based on the words position
|
||||||
|
for (let i = 0; i < guess.length; i++) {
|
||||||
|
if (markers[i]) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (misses[guess[i]] && misses[guess[i]] > 0) {
|
||||||
|
misses[guess[i]] -= 1;
|
||||||
|
markers[i] = MARKER_RIGHT_CHAR;
|
||||||
|
|
||||||
|
if (!hits[guess[i]]) {
|
||||||
|
hits[guess[i]] = MARKER_RIGHT_CHAR;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!hits[guess[i]]) {
|
||||||
|
hits[guess[i]] = MARKER_MISS;
|
||||||
|
}
|
||||||
|
markers[i] = MARKER_MISS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
hits: hits,
|
||||||
|
markers: markers
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Stimulus.register("playfield", class extends Controller {
|
||||||
|
static targets = ["row"];
|
||||||
|
|
||||||
|
connect() {
|
||||||
|
this._gameController = new GameController();
|
||||||
|
|
||||||
|
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._colorizeRow(rowElem);
|
||||||
|
|
||||||
|
this._activeRowIndex += 1;
|
||||||
|
this._activeLetter = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_buildPlayfield(rows, wordLength) {
|
||||||
|
let newRows = [];
|
||||||
|
for (let r = 0; r < rows; r++) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
newRows.push(divElem);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element.replaceChildren.apply(this.element, newRows);
|
||||||
|
}
|
||||||
|
|
||||||
|
_colorizeRow(row) {
|
||||||
|
let guessedWord = Array.from(row.querySelectorAll("span")).map((x) => x.innerText).join("");
|
||||||
|
console.log("The guessed word is: " + guessedWord);
|
||||||
|
|
||||||
|
let results = this._gameController.checkGuess(guessedWord);
|
||||||
|
let markers = results.markers;
|
||||||
|
|
||||||
|
for (let i = 0; i < this._gameController.wordLength(); i++) {
|
||||||
|
switch (markers[i]) {
|
||||||
|
case MARKER_RIGHT_POS:
|
||||||
|
row.children[i].classList.add("right-pos");
|
||||||
|
break;
|
||||||
|
case MARKER_RIGHT_CHAR:
|
||||||
|
row.children[i].classList.add("right-char");
|
||||||
|
break;
|
||||||
|
case MARKER_MISS:
|
||||||
|
row.children[i].classList.add("miss");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.dispatchEvent(new CustomEvent("guessResults", {
|
||||||
|
detail: results
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Stimulus.register("keyboard", class extends Controller {
|
||||||
|
static targets = [ "key" ];
|
||||||
|
static outlets = [ "playfield" ];
|
||||||
|
|
||||||
|
tappedKey(ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
|
||||||
|
let key = ev.target.dataset["key"];
|
||||||
|
this.playfieldOutlet.tappedKey(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
colorizeKeys(ev) {
|
||||||
|
let hits = ev.detail.hits;
|
||||||
|
|
||||||
|
for (let k in hits) {
|
||||||
|
let thisKey = k.toLowerCase();
|
||||||
|
let marker = hits[k];
|
||||||
|
|
||||||
|
let keyElement = this.keyTargets.filter((e) => e.dataset.key == thisKey)[0];
|
||||||
|
switch (marker) {
|
||||||
|
case MARKER_RIGHT_POS:
|
||||||
|
keyElement.classList.value = "right-pos";
|
||||||
|
break;
|
||||||
|
case MARKER_RIGHT_CHAR:
|
||||||
|
if (!keyElement.classList.contains("right-pos")) {
|
||||||
|
keyElement.classList.add("right-char");
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case MARKER_MISS:
|
||||||
|
if (keyElement.classList.length == 0) {
|
||||||
|
keyElement.classList.add("miss");
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
32
src/styles/main.css
Normal file
32
src/styles/main.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
button[data-keyboard-target="key"].right-pos {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[data-keyboard-target="key"].right-char {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[data-keyboard-target="key"].miss {
|
||||||
|
background: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
div.playfield div.row span {
|
||||||
|
display: inline-block;
|
||||||
|
border: solid thin gray;
|
||||||
|
|
||||||
|
height: 1.1em;
|
||||||
|
width: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.playfield div.row span.right-pos {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.playfield div.row span.right-char {
|
||||||
|
background: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.playfield div.row span.miss {
|
||||||
|
background: grey;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue