Added a countdown timer
This commit is contained in:
parent
70a782d0e4
commit
89a6b4d062
|
|
@ -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>
|
||||
|
|
|
|||
35
site/mental-arithmatic/scripts/countdown.js
Normal file
35
site/mental-arithmatic/scripts/countdown.js
Normal 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"));
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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('');
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue