Have got progression

assets/scripts/controllers/keyboard.js

@@ -13,6 +13,12 @@ export default class extends Controller {
       this.playfieldOutlet.tappedKey(key);
   }
   
+  resetKeyColors(ev) {
+    for (let keyElement of this.keyTargets) {
+      keyElement.classList.value = "";
+    }
+  }
+  
   colorizeKeys(ev) {
     let hits = ev.detail.hits;
     

assets/scripts/controllers/playfield.js

@@ -11,10 +11,7 @@ export default class extends Controller {
     this._wordSource = new WordSource();
     this._gameController = new GameController(this._wordSource);
     
-    this._activeRowIndex = 0;
-    this._activeLetter = 0;
-    
-    this._buildPlayfield(this._gameController.guesses(), this._gameController.wordLength());
+    this._buildPlayfield();
   }
   
   tappedKey(key) {
@@ -24,6 +21,10 @@ export default class extends Controller {
   }
   
   _addLetter(letter) {
+    if (this._activeRowIndex < 0) {
+      return;
+    }
+    
     let rowElem = this.rowTargets[this._activeRowIndex];
     let colElem = rowElem.querySelectorAll("span")[this._activeLetter];
     
@@ -31,8 +32,7 @@ export default class extends Controller {
     
     this._activeLetter += 1;
     if (this._activeLetter >= this._gameController.wordLength()) {
-      this._verifyGuess(rowElem);
-      
+      this._verifyGuess(rowElem);      
     }
   }
   
@@ -56,20 +56,34 @@ export default class extends Controller {
       this._activeLetter = 0;
       break;
     case GUESS_RESULT.WIN:
-      console.log("CORREcT!");
-      this._colorizeRow(rowElem, results);
+      console.log("CORRECT!");
+      
+      if (this._gameController.nextWord()) {
+        this._buildPlayfield();
+      } else {
+        console.log("No more words");
+        this._activeRowIndex = -1;
+        this._colorizeRow(rowElem, results);
+      }
       break;
     }
-
   }
   
-  _buildPlayfield(rows, wordLength) {
+  _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) {

assets/scripts/models/gamecontroller.js

@@ -25,6 +25,16 @@ export class GameController {
     return this._guesses;
   }
   
+  nextWord() {
+    if (!this._wordSource.nextWord()) {
+      return false;
+    }
+    
+    this._currentWord = this._wordSource.getCurrentWord();
+    this._guesses = 5;
+    return true;
+  }
+  
   checkGuess(guess) {
     if (guess.length != this._currentWord.length) {
       throw Error(`Expected length to be ${this._currentWord.length} but was ${guess.length}`);

assets/scripts/models/words.js

@@ -18,6 +18,11 @@ export class WordSource {
     }
     
     nextWord() {
-        this._currentWord += 1;        
+        if (this._currentWord >= this._words.length - 1) {
+            return false;
+        }
+        
+        this._currentWord += 1;
+        return true; 
     }
 }

index.html

@@ -18,7 +18,7 @@
       
       <div data-controller="keyboard" 
            data-keyboard-playfield-outlet=".playfield"
-           data-action="guessResults@window->keyboard#colorizeKeys">
+           data-action="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>