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

Moved to 11ty

Browse source
This commit is contained in:
Leon Mika 2025-01-22 21:29:50 +11:00
parent 974bd3c39f
commit a9d4227122
11 changed files with 2435 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
node_modules/
_site/

42
assets/scripts/controllers/keyboard.js Normal file
View file

@ -0,0 +1,42 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js";
import { MARKERS, GameController } from "../models/gamecontroller.js";
export default 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 MARKERS.RIGHT_POS:
keyElement.classList.value = "right-pos";
break;
case MARKERS.RIGHT_CHAR:
if (!keyElement.classList.contains("right-pos")) {
keyElement.classList.add("right-char");
}
break;
case MARKERS.MISS:
if (keyElement.classList.length == 0) {
keyElement.classList.add("miss");
}
break;
}
}
}
}

81
assets/scripts/controllers/playfield.js Normal file
View file

@ -0,0 +1,81 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.js"
import { MARKERS, GameController } from "../models/gamecontroller.js";
export default 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 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
}));
}
}

12
assets/scripts/main.js Normal file
View file

@ -0,0 +1,12 @@
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 KeyboardController from "./controllers/keyboard.js";
window.Stimulus = Application.start();
Stimulus.register("playfield", PlayfieldController);
Stimulus.register("keyboard", KeyboardController);

71
assets/scripts/models/gamecontroller.js Normal file
View file

@ -0,0 +1,71 @@
export const MARKERS = {
MISS: 'm',
RIGHT_POS: 'g',
RIGHT_CHAR: 'y'
};
export 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] = MARKERS.RIGHT_POS;
hits[guess[i]] = MARKERS.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] = MARKERS.RIGHT_CHAR;
if (!hits[guess[i]]) {
hits[guess[i]] = MARKERS.RIGHT_CHAR;
}
} else {
if (!hits[guess[i]]) {
hits[guess[i]] = MARKERS.MISS;
}
markers[i] = MARKERS.MISS;
}
}
return {
hits: hits,
markers: markers
};
}
}

0
src/styles/main.css → assets/styles/main.css
View file

4
eleventy.config.js Normal file
View file

@ -0,0 +1,4 @@
export default function(cfg) {
cfg.addPassthroughCopy("assets/styles/main.css");
cfg.addPassthroughCopy("assets/scripts/**/*.js");
};

4
src/index.html → index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/styles/main.css" rel="stylesheet">
<link href="/assets/styles/main.css" rel="stylesheet">
<title>Wordle Clone</title>
</head>
<body>
@ -64,6 +64,6 @@
</template>
</main>
<script src="/scripts/main.js" type="module"></script>
<script src="/assets/scripts/main.js" type="module"></script>
</body>
</html>

2205
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

16
package.json Normal file
View file

@ -0,0 +1,16 @@
{
"name": "wordle-clone",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"type": "module",
"dependencies": {
"@11ty/eleventy": "^3.0.0"
}
}

192
src/scripts/main.js
View file

@ -1,192 +0,0 @@
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;
}
}
}
});