Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
89 lines (88 loc) · 4.46 KB
/
Copy pathindex.html
File metadata and controls
89 lines (88 loc) · 4.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#081d20" />
<meta name="description" content="Connect five. A quiet hexagonal puzzle." />
<title>Atomicon</title>
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
</head>
<body>
<div class="ambient-motes" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<main id="app">
<header class="hud">
<div class="score" aria-label="Score">
<span aria-hidden="true">✦</span> <strong id="score">0</strong>
</div>
<div id="next-preview" aria-label="Upcoming creatures">
<canvas class="next-dot" id="next0" width="72" height="72"></canvas
><canvas class="next-dot" id="next1" width="72" height="72"></canvas
><canvas class="next-dot" id="next2" width="72" height="72"></canvas
><canvas class="next-dot" id="next3" width="72" height="72"></canvas
><canvas class="next-dot" id="next4" width="72" height="72"></canvas>
</div>
<div class="best" aria-label="Personal best">
<span aria-hidden="true">♕</span> <strong id="best">0</strong>
</div>
</header>
<section class="play-space" aria-label="Puzzle board">
<div id="board-wrap">
<canvas
id="game-canvas"
tabindex="0"
role="group"
aria-label="Hexagonal puzzle. Arrow keys navigate, Enter selects a creature or destination, Escape deselects."
aria-describedby="message"
></canvas>
</div>
</section>
<div id="game-end" hidden>
<span>No moves left</span><strong id="final-score"></strong
><button id="play-again-btn" aria-label="Play again">↻</button>
<ol id="top-scores" class="sr-only"></ol>
</div>
<nav class="controls" aria-label="Game controls">
<div id="restart-confirm" hidden>
<span>Restart?</span><button id="cancel-restart-btn" aria-label="Keep playing">✕</button
><button id="confirm-restart-btn" aria-label="Confirm restart">✓</button>
</div>
<button id="new-game-btn" aria-label="Restart">↻</button>
<button id="sound-toggle" aria-label="Mute audio" aria-pressed="false">
<span aria-hidden="true">♫</span><span id="sound-label" class="sr-only">Sound</span>
</button>
<button
id="settings-toggle"
aria-label="Sound and motion settings"
aria-controls="settings-panel"
aria-expanded="false"
>
⚙
</button>
<div id="settings-panel" class="settings-content" hidden>
<label for="music-volume">Music <output id="music-value">10%</output></label
><input id="music-volume" type="range" min="0" max="100" value="10" />
<label for="effects-volume">Effects <output id="effects-value">50%</output></label
><input id="effects-volume" type="range" min="0" max="100" value="50" />
<label><input id="mute-audio" type="checkbox" /> Mute</label
><label><input id="reduce-motion" type="checkbox" /> Reduced motion</label>
</div>
</nav>
<div class="sr-only">
<span id="message" role="status" aria-live="polite"></span><span id="arrival-count"></span
><span id="space-count"></span><span id="turn-count"></span>
<div
id="space-meter"
role="meter"
aria-label="Board occupancy"
aria-valuemin="0"
aria-valuemax="60"
aria-valuenow="6"
>
<i id="space-fill"></i>
</div>
</div>
</main>
<script type="module" src="/src/main.ts"></script>
</body>
</html>