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 @@
-
+
Mental Arithmatic - Tools
-
+
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 = [
+ `đ ${scores.last}`,
+ `đĨ ${scores.streak}`,
+ `âŠī¸ ${scores.high}`
+ ];
+ 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 {