Added a small mental arithmatic game

site/mental-arithmatic/scripts/game.js

@@ -0,0 +1,104 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+
+export class GameController extends Controller {
+    static targets = [
+        "clock",
+        "score",
+        "problem",
+        "indicators",
+        "answer",
+    ];
+
+    start() {
+        this.startGame();
+        this.element.classList.remove('hidden');
+    }
+
+    submitAnswer(ev) {
+        ev.preventDefault();
+
+        this._checkAnswer();
+    }
+
+    startGame() {
+        this._clock = 120;
+        this._score = 0;
+
+        this._generateProblem();
+        this._startClock();
+
+        this._updateClock();
+    }
+
+    _startClock() {
+        this._clockInterval = window.setInterval(() => {
+            if (this._clock <= 0) {
+                this._gameOver();
+                return;
+            }
+
+            this._clock -= 1;
+            this._updateClock();
+        }, 1000);
+    }
+
+    _gameOver() {
+        window.clearInterval(this._clockInterval);
+
+        this.element.classList.add('hidden');
+        window.dispatchEvent(new CustomEvent("endGame"));
+    }
+
+    _generateProblem() {
+        const num1 = Math.floor(Math.random() * 99) + 1;
+        const num2 = Math.floor(Math.random() * 99) + 1;
+        
+        this._problem = [num1, num2];
+        this._answer = num1 + num2;
+
+        this.indicatorsTarget.classList.remove('right', 'wrong');
+        this.problemTarget.innerHTML = '';
+
+        for (let i = 0; i < this._problem.length; i++) {
+            const div = document.createElement('div');
+
+            if (i === this._problem.length - 1) {
+                div.textContent = '+ ' + this._problem[i];
+            } else {
+                div.textContent = this._problem[i];
+            }
+            this.problemTarget.appendChild(div);
+        }
+
+        this.answerTarget.disabled = false;
+        this.answerTarget.value = "";
+        this.answerTarget.focus();
+    }
+
+    _checkAnswer() {
+        let isRight = parseInt(this.answerTarget.value) === this._answer;
+
+        this.answerTarget.disabled = true;
+
+        let delay = 500;
+
+        if (isRight) {
+            this._score += 1;
+            this.indicatorsTarget.classList.add('right');
+        } else {
+            this.indicatorsTarget.classList.add('wrong');
+            this.answerTarget.value = this._answer;
+            delay = 800;
+        }
+
+        this.scoreTarget.textContent = this._score;
+
+        window.setTimeout(() => { this._generateProblem(); }, delay);
+    }
+
+    _updateClock() {
+        let m = Math.floor(this._clock / 60);
+        let s = this._clock % 60;
+        this.clockTarget.textContent = `${m}:${s < 10 ? '0' : ''}${s}`;
+    }
+}

site/mental-arithmatic/scripts/main.js

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

site/mental-arithmatic/scripts/welcome.js

@@ -0,0 +1,14 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+
+export class WelcomeController extends Controller {
+    startGame(ev) {
+        ev.preventDefault();
+
+        this.element.classList.add('hidden');
+        window.dispatchEvent(new CustomEvent("startGame"));
+    }
+
+    gameEnded(ev) {
+        this.element.classList.remove('hidden');
+    }
+}