tetris klaar

2026-09-26 20:38:55 +02:00
commit 4c1f670e9f
16 changed files with 1565 additions and 0 deletions
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  <title>Neo Tetris</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%230b1118'/%3E%3Crect x='3' y='3' width='4' height='4' fill='%2335d23d'/%3E%3Crect x='9' y='3' width='4' height='4' fill='%2335d23d'/%3E%3Crect x='9' y='9' width='4' height='4' fill='%2335d23d'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <main class="layout">
+    <!-- Linkerpaneel: hold + statistieken -->
+    <section class="panel panel-left">
+      <div class="box">
+        <h2 class="box-title">HOLD <kbd>C</kbd></h2>
+        <canvas id="canvas-hold" width="120" height="120"></canvas>
+      </div>
+
+      <div class="box stats">
+        <div class="stat">
+          <span class="label">Score</span>
+          <span id="stat-score" class="value">0</span>
+        </div>
+        <div class="stat">
+          <span class="label">Lijnen</span>
+          <span id="stat-lines" class="value">0</span>
+        </div>
+        <div class="stat">
+          <span class="label">Level</span>
+          <span id="stat-level" class="value">1</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- Centrum: het speelbord -->
+    <section class="play-area">
+      <h1 class="title">NEO <span>TE&shy;TRIS</span></h1>
+      <div class="board-wrap">
+        <canvas id="canvas-board" width="300" height="600"></canvas>
+
+        <div id="overlay" class="overlay hidden">
+          <div class="overlay-card">
+            <h2 id="overlay-title">PAUZE</h2>
+            <p id="overlay-sub"></p>
+            <form id="name-form" class="hidden" autocomplete="off">
+              <label for="name-input">Naam:</label>
+              <input id="name-input" type="text" maxlength="12" placeholder="Speler" />
+              <p id="name-error" class="error hidden">Vul een naam in.</p>
+              <button type="button" id="btn-submit" class="btn btn-accent">Opslaan</button>
+            </form>
+            <div class="overlay-actions">
+              <button type="button" id="btn-primary" class="btn btn-accent">Opnieuw spelen</button>
+              <button type="button" id="btn-secondary" class="btn hidden">Doorgaan</button>
+            </div>
+            <p class="overlay-hint">ENTER of klik op een knop</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Rechterpaneel: next + highscores + besturing -->
+    <section class="panel panel-right">
+      <div class="box">
+        <h2 class="box-title">NEXT</h2>
+        <canvas id="canvas-next" width="120" height="252"></canvas>
+      </div>
+
+      <div class="box">
+        <h2 class="box-title">HIGHSCORES</h2>
+        <ol id="highscore-list" class="highscore-list"></ol>
+      </div>
+
+      <details class="box controls" open>
+        <summary class="box-title">BESTURING</summary>
+        <table class="controls-table">
+          <tr><td>◀ ▶</td><td>verschuiven</td></tr>
+          <tr><td>▼</td><td>zacht laten zakken</td></tr>
+          <tr><td>▲ / X</td><td>rechtsom draaien</td></tr>
+          <tr><td>Z</td><td>linksom draaien</td></tr>
+          <tr><td>Spatie</td><td>hard drop</td></tr>
+          <tr><td>C</td><td>hold</td></tr>
+          <tr><td>P</td><td>pauze</td></tr>
+          <tr><td>R</td><td>opnieuw starten</td></tr>
+        </table>
+      </details>
+    </section>
+  </main>
+
+  <!-- Touch-controls (mobiel) -->
+  <div class="touch-controls">
+    <div class="touch-row">
+      <button type="button" class="t-btn" data-action="rotate" aria-label="Draaien">⟳</button>
+      <button type="button" class="t-btn" data-action="hold" aria-label="Hold">HOLD</button>
+      <button type="button" class="t-btn" data-action="hard" aria-label="Hard drop">⤓</button>
+    </div>
+    <div class="touch-row">
+      <button type="button" class="t-btn" data-action="left" aria-label="Links">◀</button>
+      <button type="button" class="t-btn" data-action="drop" aria-label="Omlaag">▼</button>
+      <button type="button" class="t-btn" data-action="right" aria-label="Rechts">▶</button>
+    </div>
+  </div>
+
+  <script src="js/constants.js"></script>
+  <script src="js/tetris.js"></script>
+  <script src="js/render.js"></script>
+  <script src="js/main.js"></script>
+</body>
+</html>