Initial import of project

index.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Times Table Invaders</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main id="app">
+    <div id="scene-wrap">
+      <canvas id="scene"></canvas>
+
+      <div id="welcome-overlay" class="overlay">
+        <div class="overlay-card">
+          <h1 class="game-title">Times Table Invaders</h1>
+          <p class="tagline">The UFOs are coming!</p>
+          <ul class="instructions">
+            <li>Type a multiplication result and hit <strong>Fire</strong> (or Enter)</li>
+            <li>Don't let any UFO land on Earth!</li>
+          </ul>
+          <section class="leaderboard-block">
+            <h2>High Scores</h2>
+            <table id="welcome-leaderboard" class="leaderboard">
+              <thead>
+                <tr>
+                  <th scope="col">Rank</th>
+                  <th scope="col">Name</th>
+                  <th scope="col">Score</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+            <p id="leaderboard-empty" class="empty-note hidden">No scores yet — be the first!</p>
+          </section>
+          <button id="start-btn" class="btn btn-primary" type="button">Start</button>
+        </div>
+      </div>
+
+      <div id="gameover-overlay" class="overlay hidden">
+        <div class="overlay-card">
+          <h1 class="game-title small">A UFO Landed!</h1>
+          <p class="final-score">Score: <span id="final-score-value">0</span></p>
+
+          <div id="top3-block" class="hidden">
+            <p class="congrats">You made the top 3!</p>
+            <label for="player-name">Your name</label>
+            <input id="player-name" type="text" maxlength="16" autocomplete="off" autocapitalize="words" spellcheck="false" />
+            <button id="save-score-btn" class="btn" type="button">Save score</button>
+          </div>
+
+          <section class="leaderboard-block">
+            <h2>High Scores</h2>
+            <table id="gameover-leaderboard" class="leaderboard">
+              <thead>
+                <tr>
+                  <th scope="col">Rank</th>
+                  <th scope="col">Name</th>
+                  <th scope="col">Score</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+            <p id="gameover-leaderboard-empty" class="empty-note hidden">No scores yet — be the first!</p>
+          </section>
+
+          <button id="restart-btn" class="btn btn-primary" type="button">Play again</button>
+        </div>
+      </div>
+    </div>
+
+    <div id="hud">
+      <button id="mute-btn" class="btn btn-mute muted" type="button" aria-pressed="true" title="Toggle sound" aria-label="Toggle sound">
+        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
+          <path d="M3 9v6h4l5 5V4L7 9H3z" fill="currentColor" />
+          <g class="mute-waves" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round">
+            <path d="M16.5 8.5a5 5 0 0 1 0 7" />
+            <path d="M19 6a8.5 8.5 0 0 1 0 12" />
+          </g>
+          <g class="mute-x" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="16" y1="9" x2="21" y2="15" />
+            <line x1="21" y1="9" x2="16" y2="15" />
+          </g>
+        </svg>
+      </button>
+      <div class="hud-center">
+        <input id="answer" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="3" autocomplete="off" autocapitalize="none" spellcheck="false" aria-label="Result of the multiplication" placeholder="?" />
+        <button id="fire-btn" class="btn btn-fire" type="button">Fire</button>
+      </div>
+      <div id="score" aria-live="polite">0</div>
+    </div>
+  </main>
+
+  <script src="game.js"></script>
+</body>
+</html>