From 89a6b4d062208c8e9c029a3f01f63e5f9c3e79ba Mon Sep 17 00:00:00 2001
From: Leon Mika <lmika@lmika.org>
Date: Fri, 16 Jan 2026 22:12:30 +1100
Subject: [PATCH] Added a countdown timer

---
 site/mental-arithmatic/index.html           | 27 +++++++++++++---
 site/mental-arithmatic/scripts/countdown.js | 35 +++++++++++++++++++++
 site/mental-arithmatic/scripts/game.js      |  9 +++---
 site/mental-arithmatic/scripts/main.js      |  2 ++
 site/mental-arithmatic/scripts/welcome.js   | 23 +++++++++++++-
 site/mental-arithmatic/style.css            | 35 +++++++++++++++++----
 6 files changed, 115 insertions(+), 16 deletions(-)
 create mode 100644 site/mental-arithmatic/scripts/countdown.js
diff --git a/site/mental-arithmatic/index.html b/site/mental-arithmatic/index.html
index 31e8a6c..16c4321 100644
--- a/site/mental-arithmatic/index.html
+++ b/site/mental-arithmatic/index.html
@@ -2,25 +2,44 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
   <title>Mental Arithmatic - Tools</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
   <link rel="stylesheet" href="./style.css">
   <script src="./scripts/main.js" type="module"></script>
 </head>
 <body>
-  <div id="welcome-card" class="container" data-controller="welcome"
+  <div id="welcome-card" class="container welcome-card" data-controller="welcome"
        data-action="endGame@window->welcome#gameEnded">
     <header>
       <hgroup>
-        <h1>Mental Arithmatic</h1>
+        <h1>Fear of All Sums</h1>
         <p>A simple mental arithmetic game</p>
       </hgroup>
       <main>
-        <button data-action="click->welcome#startGame">Start Game</button>
+
+        <article class="game-variant">
+          <h3>Simple Sums</h3>
+          <p>A two number sum with each term up to two digits.</p>
+          <footer>
+            <button data-action="click->welcome#startGame">Start Game</button>
+            <div class="high-scores" data-welcome-target="simpleHighScores"></div>
+          </footer>
+        </article>
       </main>
     </header>
   </div>
+  <div id="countdown-card" class="container game-card hidden" data-controller="countdown"
+       data-action="startCountdown@window->countdown#start">
+    <header>
+      <span>2:00</span>
+      <span>0</span>
+    </header>
+    <main>
+      <div class="countdown-timer" data-countdown-target="countdown">3</div>
+      <input class="fake" type="number" data-countdown-target="fakeinput" value="0">
+    </main>
+  </div>
   <div id="game-card" class="container game-card hidden" data-controller="game"
      data-action="startGame@window->game#start">
     <header>
diff --git a/site/mental-arithmatic/scripts/countdown.js b/site/mental-arithmatic/scripts/countdown.js
new file mode 100644
index 0000000..dbdb79e
--- /dev/null
+++ b/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"));
+    }
+}
\ No newline at end of file
diff --git a/site/mental-arithmatic/scripts/game.js b/site/mental-arithmatic/scripts/game.js
index e583a19..fe495b9 100644
--- a/site/mental-arithmatic/scripts/game.js
+++ b/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) {
diff --git a/site/mental-arithmatic/scripts/main.js b/site/mental-arithmatic/scripts/main.js
index c15b905..05b427d 100644
--- a/site/mental-arithmatic/scripts/main.js
+++ b/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);
\ No newline at end of file
diff --git a/site/mental-arithmatic/scripts/welcome.js b/site/mental-arithmatic/scripts/welcome.js
index c4ce76f..9fc549e 100644
--- a/site/mental-arithmatic/scripts/welcome.js
+++ b/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('');
+    }
 }
\ No newline at end of file
diff --git a/site/mental-arithmatic/style.css b/site/mental-arithmatic/style.css
index 58d4173..ce22cc0 100644
--- a/site/mental-arithmatic/style.css
+++ b/site/mental-arithmatic/style.css
@@ -3,14 +3,35 @@
 }
 
 body {
-    min-height: 100dvh;
     --pico-form-element-disabled-opacity: 1.0;
 }
 
 .game-card {
     display: flex;
     flex-direction: column;
-    min-height: 80dvh;
+    min-height: 50vh;
+}
+
+.welcome-card .game-variant footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.welcome-card .game-variant .high-scores {
+    display: flex;
+    gap: 10px;
+}
+
+.countdown-timer {
+    font-size: 3em;
+    text-align: center;
+    width: 100%;
+}
+
+input.fake {
+    position: fixed;
+    top: -600px;
 }
 
 .game-card header,
@@ -29,6 +50,8 @@ body {
 
     display: flex;
     align-items: center;
+
+    padding-block-start: 40px;
 }
 
 .game-card .question {
@@ -46,13 +69,13 @@ body {
 }
 
 .game-card .answer.right {
-    border-color: green;
-    color: green;
+    border-color: #4EB31B;
+    color: #4EB31B;
 }
 
 .game-card .answer.wrong {
-    border-color: red;
-    color: red;
+    border-color: #EE402E;
+    color: #EE402E;
 }
 
 .game-card .answer .indicator {
