martijn.diersmann@pm.me
109 lines
4.3 KiB
HTML
109 lines
4.3 KiB
HTML
<!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­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>
|