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

Added a small mental arithmatic game
All checks were successful
/ publish (push) Successful in 1m30s
Details

Browse source
This commit is contained in:
Leon Mika 2026-01-15 22:51:48 +11:00
parent ca67aadac0
commit 70a782d0e4
6 changed files with 268 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
site/mental-arithmatic/index.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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"
data-action="endGame@window->welcome#gameEnded">
<header>
<hgroup>
<h1>Mental Arithmatic</h1>
<p>A simple mental arithmetic game</p>
</hgroup>
<main>
<button data-action="click->welcome#startGame">Start Game</button>
</main>
</header>
</div>
<div id="game-card" class="container game-card hidden" data-controller="game"
data-action="startGame@window->game#start">
<header>
<span data-game-target="clock">1:00</span>
<span data-game-target="score">0</span>
</header>
<main>
<div class="question">
<div data-game-target="problem"></div>
<div class="answer" data-game-target="indicators">
<span class="indicator right">✔︎</span>
<span class="indicator wrong">❌</span>
<input type="number" data-game-target="answer" value="0" data-action="keydown.enter->game#submitAnswer">
</div>
</div>
</main>
</div>
</body>
</html>