Added a countdown timer

site/mental-arithmatic/scripts/countdown.js

@@ -0,0 +1,35 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+
+export class CountdownController extends Controller {
+    static targets = ["countdown", "fakeinput"];
+
+    start() {
+        this.element.classList.remove('hidden');
+
+        this._countdown = 3;
+        this.countdownTarget.innerText = this._countdown;
+
+        this._tickInterval = window.setInterval(this._tick.bind(this), 1000);
+        window.setTimeout(() => {
+            this.fakeinputTarget.focus();
+        }, 1);
+    }
+
+    _tick() {
+        this._countdown -= 1;
+
+        if (this._countdown === 0) {
+            this.countdownTarget.innerText = "GO!";
+        } else if (this._countdown < 0) {
+            window.clearInterval(this._tickInterval);
+            this._startActualGame();
+        } else {
+            this.countdownTarget.innerText = this._countdown;
+        }
+    }
+
+    _startActualGame() {
+        this.element.classList.add('hidden');
+        window.dispatchEvent(new CustomEvent("startGame"));
+    }
+}

site/mental-arithmatic/scripts/game.js

@@ -70,16 +70,15 @@ export class GameController extends Controller {
             this.problemTarget.appendChild(div);
         }
 
-        this.answerTarget.disabled = false;
         this.answerTarget.value = "";
-        this.answerTarget.focus();
+
+        window.setTimeout(() => {
+            this.answerTarget.focus();
+        }, 1);
     }
 
     _checkAnswer() {
         let isRight = parseInt(this.answerTarget.value) === this._answer;
-
-        this.answerTarget.disabled = true;
-
         let delay = 500;
 
         if (isRight) {

site/mental-arithmatic/scripts/main.js

@@ -1,8 +1,10 @@
 import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
 import { WelcomeController } from "./welcome.js"
+import { CountdownController } from "./countdown.js"
 import { GameController } from "./game.js"
 
 window.Stimulus = Application.start();
 
 window.Stimulus.register('welcome', WelcomeController);
+window.Stimulus.register('countdown', CountdownController);
 window.Stimulus.register('game', GameController);

site/mental-arithmatic/scripts/welcome.js

@@ -1,14 +1,35 @@
 import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
 
 export class WelcomeController extends Controller {
+    static targets = ["simpleHighScores"];
+
+    connect() {
+        this._buildHighScores();
+    }
+
     startGame(ev) {
         ev.preventDefault();
 
         this.element.classList.add('hidden');
-        window.dispatchEvent(new CustomEvent("startGame"));
+        window.dispatchEvent(new CustomEvent("startCountdown"));
     }
 
     gameEnded(ev) {
         this.element.classList.remove('hidden');
     }
+
+    _buildHighScores() {
+        let scores = {
+            last: 12,
+            high: 10,
+            streak: 3
+        };
+
+        let newEls = [
+            `<span>🏆 ${scores.last}</span>`,
+            `<span>🔥 ${scores.streak}</span>`,
+            `<span>↩️ ${scores.high}</span>`
+        ];
+        this.simpleHighScoresTarget.innerHTML = newEls.join('');
+    }
 }