Have got a dictionary of words

site/assets/scripts/controllers/keyboard.js

@@ -0,0 +1,68 @@
+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" ];
+  
+  onKeyPress(ev) {
+    if (ev.metaKey || ev.ctrlKey || ev.altKey) {
+      return;
+    }
+    
+    if ((ev.key >= 'a') && (ev.key >= 'z')) {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedKey(ev.key);
+    } else if ((ev.key >= 'A') && (ev.key >= 'Z')) {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedKey(ev.key.toLowerCase());
+    } else if (ev.key == 'Backspace') {
+      ev.preventDefault();
+      this.playfieldOutlet.tappedBackspace();      
+    } else if (ev.key == 'Enter') {
+      ev.preventDefault();
+      this.playfieldOutlet.enterGuess();
+    }
+  }
+  
+  tappedKey(ev) {
+      ev.preventDefault();
+      
+      let key = ev.target.dataset["key"];
+      this.playfieldOutlet.tappedKey(key);
+  }
+    
+  resetKeyColors(ev) {
+    for (let keyElement of this.keyTargets) {
+      keyElement.classList.value = "";
+    }
+  }
+  
+  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;   
+      }
+    }
+    
+  }
+}

site/assets/scripts/controllers/playfield.js

@@ -0,0 +1,142 @@
+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"];
+  
+  async connect() {
+    this._wordSource = new WordSource();
+    this._gameController = new GameController(this._wordSource);
+
+    await this._gameController.start();
+
+    this._buildPlayfield();
+  }
+  
+  tappedKey(key) {
+    console.log(`Key ${key} was tapped via outliet`);
+      
+    this._addLetter(key);
+  }
+  
+  _addLetter(letter) {
+    if (this._activeRowIndex < 0) {
+      return;
+    } else if (this._activeLetter >= this._gameController.wordLength()) {
+      return;
+    }
+    
+    let rowElem = this.rowTargets[this._activeRowIndex];
+    let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
+    
+    colElem.innerText = letter.toUpperCase();
+    
+    this._activeLetter += 1;
+  }
+  
+  enterGuess() {
+    if (this._activeLetter >= this._gameController.wordLength()) {
+      let rowElem = this.rowTargets[this._activeRowIndex];
+      this._verifyGuess(rowElem);      
+    }
+  }
+  
+  tappedBackspace() {
+    if (this._activeLetter == 0) {
+      return;
+    }
+
+    this._activeLetter -= 1;
+    let rowElem = this.rowTargets[this._activeRowIndex];
+    let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
+
+    colElem.innerText = "";
+  }
+  
+  _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!");
+      
+      if (this._gameController.nextWord()) {
+        this._buildPlayfield();
+      } else {
+        console.log("No more words");
+        this._activeRowIndex = -1;
+        this._colorizeRow(rowElem, results);
+      }
+      break;
+    }
+  }
+  
+  _buildPlayfield() {
+    let rows = this._gameController.guesses();
+    let wordLength = this._gameController.wordLength();
+    
+    this._activeRowIndex = 0;
+    this._activeLetter = 0;
+    
+    let newRows = [];
+    for (let r = 0; r < rows; r++) {      
+      newRows.push(this._buildPlayfieldRow(wordLength));
+    }
+    
+    this.element.replaceChildren.apply(this.element, newRows);
+    
+    window.dispatchEvent(new CustomEvent("resetKeyColors"));
+  }
+  
+  _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
+    }));
+  }
+}

site/assets/scripts/main.js

@@ -0,0 +1,10 @@
+import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus@v3.2.2/dist/stimulus.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);

site/assets/scripts/models/gamecontroller.js

@@ -0,0 +1,116 @@
+export const GUESS_RESULT = {
+  MISS: 'm',
+  WIN: 'w',
+  FOUL: 'f'  
+};
+
+export const MARKERS = {
+    MISS: 'm',
+    RIGHT_POS: 'g',
+    RIGHT_CHAR: 'y'
+};
+
+export class GameController {
+  constructor(wordSource) {
+    this._wordSource = wordSource;
+  }
+
+  async start() {
+    this._currentWord = await this._wordSource.getCurrentWord();
+    this._guesses = 5;
+
+    console.log("The current word: " + this._currentWord);
+  }
+  
+  wordLength() {
+    this._checkHasStarted();
+    return this._currentWord.length;
+  }
+  
+  guesses() {
+    this._checkHasStarted();
+    return this._guesses;
+  }
+  
+  async nextWord() {
+    this._currentWord = await this._wordSource.getCurrentWord();
+    this._guesses = 5;
+    return true;
+  }
+  
+  checkGuess(guess) {
+    this._checkHasStarted();
+
+    guess = guess.toLowerCase();
+
+    if (guess.length != this._currentWord.length) {
+      throw Error(`Expected length to be ${this._currentWord.length} but was ${guess.length}`);
+    }
+    
+    // Check correct placements
+    let guessResult;
+    let markers = new Array(guess.length);
+    let misses = {};
+    let hits = {};
+    
+    if (!this._wordSource.isWord(guess)) {
+      return {
+        guessResult: GUESS_RESULT.FOUL,
+      };
+    }
+    
+    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;
+      }
+    }
+    
+    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 {
+      guessResult: guessResult,
+      hits: hits,
+      markers: markers
+    };
+  }
+
+  _checkHasStarted() {
+    if (!this._currentWord) {
+      throw new Error("call start() first");
+    }
+  }
+}

site/assets/scripts/models/words.js

@@ -0,0 +1,64 @@
+function binSearch(list, word) {
+    let first = 0;
+    let last = list.length;
+
+    for (;;) {
+        let ptr = (first + (last - first) / 2) | 0;
+        if (list[ptr] === word) {
+            return true;
+        } else if (last - first <= 1) {
+            return false;
+        } else if (list[ptr] > word) {
+            last = ptr;
+        } else if (list[ptr] < word) {
+            first = ptr;
+        }
+    }
+}
+
+
+export class WordSource {
+    constructor() {
+        this._wordData = null;
+        this._currentWord = null;
+    }
+
+    isWord(word) {
+        let list = this._wordData.words[word.length.toString()];
+        if (!list) {
+            return false;
+        }
+
+        return binSearch(list, word);
+    }
+    
+    async getCurrentWord() {
+        if (this._currentWord) {
+            return this._currentWord;
+        }
+
+        let words = await this._fetchAllWordsIfNecessary();
+        this._currentWord = words.words["4"][7];
+
+        return this._currentWord;
+    }
+    
+    async nextWord() {
+        if (this._currentWord >= this._words.length - 1) {
+            return false;
+        }
+        
+        this._currentWord += 1;
+        return true; 
+    }
+
+    async _fetchAllWordsIfNecessary() {
+        if (this._wordData) {
+            return this._wordData;
+        }
+
+        let res = await fetch("/assets/data/words.json");
+        this._wordData = await res.json();
+        return this._wordData;
+    }
+}

site/assets/styles/main.css

@@ -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;
+}

site/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/assets/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="
+              keydown@window->keyboard#onKeyPress
+              guessResults@window->keyboard#colorizeKeys
+              resetKeyColors@window->keyboard#resetKeyColors
+            ">
+          <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>
+              <button data-keyboard-target="key" data-action="keyboard#tapEnter">enter</button>
+              <button data-keyboard-target="key" data-action="keyboard#tapBackspace">back</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="/assets/scripts/main.js" type="module"></script>
+</body>
+</html>