web/webtools
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added a countdown timer

Browse source
This commit is contained in:
Leon Mika 2026-01-16 22:12:30 +11:00
parent 70a782d0e4
commit 89a6b4d062
6 changed files with 115 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
site/mental-arithmatic/index.html
View file

@ -2,25 +2,44 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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> <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="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script src="./scripts/main.js" type="module"></script> <script src="./scripts/main.js" type="module"></script>
</head> </head>
<body> <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"> data-action="endGame@window->welcome#gameEnded">
<header> <header>
<hgroup> <hgroup>
<h1>Mental Arithmatic</h1> <h1>Fear of All Sums</h1>
<p>A simple mental arithmetic game</p> <p>A simple mental arithmetic game</p>
</hgroup> </hgroup>
<main> <main>
<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> <button data-action="click->welcome#startGame">Start Game</button>
<div class="high-scores" data-welcome-target="simpleHighScores"></div>
</footer>
</article>
</main> </main>
</header> </header>
</div> </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" <div id="game-card" class="container game-card hidden" data-controller="game"
data-action="startGame@window->game#start"> data-action="startGame@window->game#start">
<header> <header>

35
site/mental-arithmatic/scripts/countdown.js Normal file
View file

@ -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"));
}
}

7
site/mental-arithmatic/scripts/game.js
View file

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

2
site/mental-arithmatic/scripts/main.js
View file

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

23
site/mental-arithmatic/scripts/welcome.js
View file

@ -1,14 +1,35 @@
import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"; import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
export class WelcomeController extends Controller { export class WelcomeController extends Controller {
static targets = ["simpleHighScores"];
connect() {
this._buildHighScores();
}
startGame(ev) { startGame(ev) {
ev.preventDefault(); ev.preventDefault();
this.element.classList.add('hidden'); this.element.classList.add('hidden');
window.dispatchEvent(new CustomEvent("startGame")); window.dispatchEvent(new CustomEvent("startCountdown"));
} }
gameEnded(ev) { gameEnded(ev) {
this.element.classList.remove('hidden'); 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('');
}
} }

35
site/mental-arithmatic/style.css
View file

@ -3,14 +3,35 @@
} }
body { body {
min-height: 100dvh;
--pico-form-element-disabled-opacity: 1.0; --pico-form-element-disabled-opacity: 1.0;
} }
.game-card { .game-card {
display: flex; display: flex;
flex-direction: column; 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, .game-card header,
@ -29,6 +50,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
padding-block-start: 40px;
} }
.game-card .question { .game-card .question {
@ -46,13 +69,13 @@ body {
} }
.game-card .answer.right { .game-card .answer.right {
border-color: green; border-color: #4EB31B;
color: green; color: #4EB31B;
} }
.game-card .answer.wrong { .game-card .answer.wrong {
border-color: red; border-color: #EE402E;
color: red; color: #EE402E;
} }
.game-card .answer .indicator { .game-card .answer .indicator {