@ywkrlerche/richardwho 1.0.22 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/app.js +270 -82
  2. package/games.json +1 -1
  3. package/index.html +100 -48
  4. package/logos/1-on-1-soccer.webp +0 -0
  5. package/logos/1-on-1-tennis.webp +0 -0
  6. package/logos/10-minutes-till-dawn.webp +0 -0
  7. package/logos/1v1.lol.webp +0 -0
  8. package/logos/2048-cupcakes.webp +0 -0
  9. package/logos/2048.webp +0 -0
  10. package/logos/3D-flight-simulator.webp +0 -0
  11. package/logos/3d-free-kick.webp +0 -0
  12. package/logos/8-ball-classic.webp +0 -0
  13. package/logos/9007199254740992.webp +0 -0
  14. package/logos/Alpha_1.2.6.webp +0 -0
  15. package/logos/Indev.webp +0 -0
  16. package/logos/agar-io-lite.webp +0 -0
  17. package/logos/age-of-war-2.webp +0 -0
  18. package/logos/age-of-war.webp +0 -0
  19. package/logos/ages-of-conflict.webp +0 -0
  20. package/logos/among-us.webp +0 -0
  21. package/logos/angry-birds-space.webp +0 -0
  22. package/logos/angry-birds.webp +0 -0
  23. package/logos/awesome-tanks-2.webp +0 -0
  24. package/logos/awesome-tanks.webp +0 -0
  25. package/logos/bacon-may-die.webp +0 -0
  26. package/logos/bad-ice-cream-2.webp +0 -0
  27. package/logos/bad-ice-cream-3.webp +0 -0
  28. package/logos/bad-ice-cream.webp +0 -0
  29. package/logos/bad-parenting.webp +0 -0
  30. package/logos/bad-piggies.webp +0 -0
  31. package/logos/bank-robbery-2.webp +0 -0
  32. package/logos/bank-robbery-3.webp +0 -0
  33. package/logos/baseball-bros.webp +0 -0
  34. package/logos/basket-bros.webp +0 -0
  35. package/logos/basket-random.webp +0 -0
  36. package/logos/basketball-legends.webp +0 -0
  37. package/logos/basketball-stars.webp +0 -0
  38. package/logos/big-ice-tower-tiny-square.webp +0 -0
  39. package/logos/big-neon-tower-tiny-square.webp +0 -0
  40. package/logos/big-tower-tiny-square-2.webp +0 -0
  41. package/logos/big-tower-tiny-square.webp +0 -0
  42. package/logos/blocky-snakes.webp +0 -0
  43. package/logos/bloons-TD-2.webp +0 -0
  44. package/logos/bloons-TD.webp +0 -0
  45. package/logos/bloxorz.webp +0 -0
  46. package/logos/blumgi-racers.webp +0 -0
  47. package/logos/blumgi-rocket.webp +0 -0
  48. package/logos/bob-the-robber-2.webp +0 -0
  49. package/logos/bob-the-robber.webp +0 -0
  50. package/logos/bouncy-motors.webp +0 -0
  51. package/logos/boxing-random.webp +0 -0
  52. package/logos/breaking-the-bank.webp +0 -0
  53. package/logos/bubble-shooter.webp +0 -0
  54. package/logos/candy-crush.webp +0 -0
  55. package/logos/capybara-clicker.webp +0 -0
  56. package/logos/car-drawing.webp +0 -0
  57. package/logos/chaos-faction-2.webp +0 -0
  58. package/logos/chess.webp +0 -0
  59. package/logos/choppy-orc.webp +0 -0
  60. package/logos/circloO-2.webp +0 -0
  61. package/logos/circloO.webp +0 -0
  62. package/logos/clash-of-vikings.webp +0 -0
  63. package/logos/cleanup-io.webp +0 -0
  64. package/logos/cluster-rush.webp +0 -0
  65. package/logos/cookie-clicker.webp +0 -0
  66. package/logos/coreball.webp +0 -0
  67. package/logos/crazy-cars.webp +0 -0
  68. package/logos/crazy-cattle-3D.webp +0 -0
  69. package/logos/crazy-crash-landing.webp +0 -0
  70. package/logos/crazy-motorcycle.webp +0 -0
  71. package/logos/crossy-road.webp +0 -0
  72. package/logos/cut-the-rope-2.webp +0 -0
  73. package/logos/cut-the-rope-holiday-gift.webp +0 -0
  74. package/logos/cut-the-rope-time-travel.webp +0 -0
  75. package/logos/cut-the-rope.webp +0 -0
  76. package/logos/dadish-2.webp +0 -0
  77. package/logos/dadish-3.webp +0 -0
  78. package/logos/dadish.webp +0 -0
  79. package/logos/death-chase.webp +0 -0
  80. package/logos/death-run-3D.webp +0 -0
  81. package/logos/demolition-derby-crash-racing.webp +0 -0
  82. package/logos/doodle-jump.webp +0 -0
  83. package/logos/draw-climber.webp +0 -0
  84. package/logos/dreadhead-parkour.webp +0 -0
  85. package/logos/drift-boss.webp +0 -0
  86. package/logos/drift-hunters-pro.webp +0 -0
  87. package/logos/drive-mad.webp +0 -0
  88. package/logos/duck-life.webp +0 -0
  89. package/logos/ducklings-io.webp +0 -0
  90. package/logos/eagle-ride.webp +0 -0
  91. package/logos/earn-to-die-2.webp +0 -0
  92. package/logos/earn-to-die.webp +0 -0
  93. package/logos/eggy-car.webp +0 -0
  94. package/logos/elastic-face.webp +0 -0
  95. package/logos/escape-road-2.webp +0 -0
  96. package/logos/escape-road-3.webp +0 -0
  97. package/logos/escape-road.webp +0 -0
  98. package/logos/escaping-the-prison.webp +0 -0
  99. package/logos/eugenes-life.webp +0 -0
  100. package/logos/evil-glitch.webp +0 -0
  101. package/logos/fancy-pants-adventure-2.webp +0 -0
  102. package/logos/fancy-pants-adventure.webp +0 -0
  103. package/logos/fireblob.webp +0 -0
  104. package/logos/fireboy-and-watergirl.webp +0 -0
  105. package/logos/flappy-bird.webp +0 -0
  106. package/logos/fleeing-the-complex.webp +0 -0
  107. package/logos/flood-runner-2.webp +0 -0
  108. package/logos/flood-runner-3.webp +0 -0
  109. package/logos/flood-runner-4.webp +0 -0
  110. package/logos/fnaf-2.webp +0 -0
  111. package/logos/fnaf-3.webp +0 -0
  112. package/logos/fnaf.webp +0 -0
  113. package/logos/football-bros.webp +0 -0
  114. package/logos/football-legends.webp +0 -0
  115. package/logos/friday-night-funkin.webp +0 -0
  116. package/logos/fruit-ninja.webp +0 -0
  117. package/logos/funny-battle.webp +0 -0
  118. package/logos/funny-mad-racing.webp +0 -0
  119. package/logos/funny-shooter-2.webp +0 -0
  120. package/logos/geometry-dash-lite.webp +0 -0
  121. package/logos/geometry-dash.webp +0 -0
  122. package/logos/geometry-vibes.webp +0 -0
  123. package/logos/get-on-top.webp +0 -0
  124. package/logos/getaway-shootout.webp +0 -0
  125. package/logos/gladi-hoppers.webp +0 -0
  126. package/logos/google-baseball.webp +0 -0
  127. package/logos/google-dino.webp +0 -0
  128. package/logos/granny.webp +0 -0
  129. package/logos/guess-their-answer.webp +0 -0
  130. package/logos/happy-wheels.webp +0 -0
  131. package/logos/helix-jump.webp +0 -0
  132. package/logos/highway-traffic.webp +0 -0
  133. package/logos/hill-climb-racing-lite.webp +0 -0
  134. package/logos/hole-io.webp +0 -0
  135. package/logos/house-of-hazards.webp +0 -0
  136. package/logos/hover-racer-drive.webp +0 -0
  137. package/logos/ice-dodo.webp +0 -0
  138. package/logos/idle-breakout.webp +0 -0
  139. package/logos/idle-dice.webp +0 -0
  140. package/logos/infiltrating-the-airship.webp +0 -0
  141. package/logos/iron-snout.webp +0 -0
  142. package/logos/jacksmith.webp +0 -0
  143. package/logos/jetpack-joyride.webp +0 -0
  144. package/logos/johnny-trigger.webp +0 -0
  145. package/logos/jumping-shell.webp +0 -0
  146. package/logos/karate-bros.webp +0 -0
  147. package/logos/kart-bros.webp +0 -0
  148. package/logos/kittytoy.webp +0 -0
  149. package/logos/learn-to-fly-2.webp +0 -0
  150. package/logos/learn-to-fly-3.webp +0 -0
  151. package/logos/learn-to-fly.webp +0 -0
  152. package/logos/level-devil.webp +0 -0
  153. package/logos/little-alchemy-2.webp +0 -0
  154. package/logos/madalin-stunt-cars-2.webp +0 -0
  155. package/logos/madness-project-nexus.webp +0 -0
  156. package/logos/melon-playground.webp +0 -0
  157. package/logos/merge-round-racers.webp +0 -0
  158. package/logos/minesweeper.webp +0 -0
  159. package/logos/monkey-mart.webp +0 -0
  160. package/logos/monster-tracks.webp +0 -0
  161. package/logos/motherload.webp +0 -0
  162. package/logos/moto-x3m-2.webp +0 -0
  163. package/logos/moto-x3m-3.webp +0 -0
  164. package/logos/moto-x3m-pool-party.webp +0 -0
  165. package/logos/moto-x3m-spooky-land.webp +0 -0
  166. package/logos/moto-x3m-winter.webp +0 -0
  167. package/logos/moto-x3m.webp +0 -0
  168. package/logos/murder.webp +0 -0
  169. package/logos/noob-miner.webp +0 -0
  170. package/logos/openTTD.webp +0 -0
  171. package/logos/opposite-day.webp +0 -0
  172. package/logos/ovo.webp +0 -0
  173. package/logos/pac-man.webp +0 -0
  174. package/logos/papas-bakeria.webp +0 -0
  175. package/logos/papas-burgeria.webp +0 -0
  176. package/logos/papas-cheeseria.webp +0 -0
  177. package/logos/papas-cupcakeria.webp +0 -0
  178. package/logos/papas-donuteria.webp +0 -0
  179. package/logos/papas-freezeria.webp +0 -0
  180. package/logos/papas-pancakeria.webp +0 -0
  181. package/logos/papas-pastaria.webp +0 -0
  182. package/logos/papas-pizzeria.webp +0 -0
  183. package/logos/papas-scooperia.webp +0 -0
  184. package/logos/papas-sushiria.webp +0 -0
  185. package/logos/papas-taco-mia.webp +0 -0
  186. package/logos/papas-wingeria.webp +0 -0
  187. package/logos/paper-io-2.webp +0 -0
  188. package/logos/parking-fury-2.webp +0 -0
  189. package/logos/picos-school.webp +0 -0
  190. package/logos/ping-pong-chaos.webp +0 -0
  191. package/logos/pixel-speedrun.webp +0 -0
  192. package/logos/plants-vs-zombies.webp +0 -0
  193. package/logos/plonky.webp +0 -0
  194. package/logos/polytrack.webp +0 -0
  195. package/logos/poor-bunny.webp +0 -0
  196. package/logos/pou.webp +0 -0
  197. package/logos/ragdoll-archers.webp +0 -0
  198. package/logos/ragdoll-hit.webp +0 -0
  199. package/logos/ragdoll-soccer.webp +0 -0
  200. package/logos/red-ball-4-vol-1.webp +0 -0
  201. package/logos/red-ball-4-vol-2.webp +0 -0
  202. package/logos/red-ball-4-vol-3.webp +0 -0
  203. package/logos/retro-bowl-college.webp +0 -0
  204. package/logos/retro-bowl.webp +0 -0
  205. package/logos/retro-highway.webp +0 -0
  206. package/logos/retro-ping-pong.webp +0 -0
  207. package/logos/riddle-school-2.webp +0 -0
  208. package/logos/riddle-school-3.webp +0 -0
  209. package/logos/riddle-school-4.webp +0 -0
  210. package/logos/riddle-school-5.webp +0 -0
  211. package/logos/riddle-school.webp +0 -0
  212. package/logos/riddle-transfer.webp +0 -0
  213. package/logos/rocket-soccer-derby.webp +0 -0
  214. package/logos/rooftop-run.webp +0 -0
  215. package/logos/rooftop-snipers-2.webp +0 -0
  216. package/logos/rooftop-snipers.webp +0 -0
  217. package/logos/run-2.webp +0 -0
  218. package/logos/run-3.webp +0 -0
  219. package/logos/run.webp +0 -0
  220. package/logos/sandbox-city.webp +0 -0
  221. package/logos/short-life.webp +0 -0
  222. package/logos/slope-2-player.webp +0 -0
  223. package/logos/slope-3.webp +0 -0
  224. package/logos/slope.webp +0 -0
  225. package/logos/snail-bob-2.webp +0 -0
  226. package/logos/snail-bob-3.webp +0 -0
  227. package/logos/snail-bob-4.webp +0 -0
  228. package/logos/snail-bob-5.webp +0 -0
  229. package/logos/snail-bob-6.webp +0 -0
  230. package/logos/snail-bob-7.webp +0 -0
  231. package/logos/snail-bob-8.webp +0 -0
  232. package/logos/snail-bob.webp +0 -0
  233. package/logos/snow-rider.webp +0 -0
  234. package/logos/snow-road.webp +0 -0
  235. package/logos/snowball-io.webp +0 -0
  236. package/logos/soccer-bros.webp +0 -0
  237. package/logos/soccer-random.webp +0 -0
  238. package/logos/space-is-key-2.webp +0 -0
  239. package/logos/space-is-key.webp +0 -0
  240. package/logos/space-waves.webp +0 -0
  241. package/logos/spacebar-clicker.webp +0 -0
  242. package/logos/speed-stars.webp +0 -0
  243. package/logos/sprunki.webp +0 -0
  244. package/logos/stack.webp +0 -0
  245. package/logos/stacktris.webp +0 -0
  246. package/logos/state-io.webp +0 -0
  247. package/logos/stealing-the-diamond.webp +0 -0
  248. package/logos/stick-archers-battle.webp +0 -0
  249. package/logos/stick-fighter.webp +0 -0
  250. package/logos/stick-merge.webp +0 -0
  251. package/logos/stickman-hook.webp +0 -0
  252. package/logos/subway-surfers-beijing.webp +0 -0
  253. package/logos/subway-surfers-havana.webp +0 -0
  254. package/logos/subway-surfers-san-francisco.webp +0 -0
  255. package/logos/super-bike-the-champion.webp +0 -0
  256. package/logos/super-liquid-soccer.webp +0 -0
  257. package/logos/super-star-car.webp +0 -0
  258. package/logos/table-tennis-world-tour.webp +0 -0
  259. package/logos/tag.webp +0 -0
  260. package/logos/tanuki-sunset.webp +0 -0
  261. package/logos/tap-road.webp +0 -0
  262. package/logos/temple-of-boom.webp +0 -0
  263. package/logos/temple-run-2.webp +0 -0
  264. package/logos/territorial-io.webp +0 -0
  265. package/logos/tetrominoes.webp +0 -0
  266. package/logos/the-impossible-quiz-2.webp +0 -0
  267. package/logos/the-impossible-quiz.webp +0 -0
  268. package/logos/they-are-coming.webp +0 -0
  269. package/logos/this-is-the-only-level-too.webp +0 -0
  270. package/logos/this-is-the-only-level.webp +0 -0
  271. package/logos/time-shooter-2.webp +0 -0
  272. package/logos/time-shooter-3.webp +0 -0
  273. package/logos/tiny-fishing.webp +0 -0
  274. package/logos/trap-the-cat.webp +0 -0
  275. package/logos/trivia-crack.webp +0 -0
  276. package/logos/tube-jumpers.webp +0 -0
  277. package/logos/tunnel-rush.webp +0 -0
  278. package/logos/unicycle-hero.webp +0 -0
  279. package/logos/vex-4.webp +0 -0
  280. package/logos/vex-5.webp +0 -0
  281. package/logos/vex-x3m-2.webp +0 -0
  282. package/logos/vex-x3m.webp +0 -0
  283. package/logos/volley-random.webp +0 -0
  284. package/logos/war-the-knights.webp +0 -0
  285. package/logos/we-become-what-we-behold.webp +0 -0
  286. package/logos/wheelie-bike.webp +0 -0
  287. package/logos/wheely-2.webp +0 -0
  288. package/logos/wheely-3.webp +0 -0
  289. package/logos/wheely-4.webp +0 -0
  290. package/logos/wheely-5.webp +0 -0
  291. package/logos/wheely-6.webp +0 -0
  292. package/logos/wheely-7.webp +0 -0
  293. package/logos/wheely.webp +0 -0
  294. package/logos/wordle-unlimited.webp +0 -0
  295. package/logos/worlds-hardest-game-2.webp +0 -0
  296. package/logos/worlds-hardest-game.webp +0 -0
  297. package/logos/wrestle-bros.webp +0 -0
  298. package/logos/yohoho-io.webp +0 -0
  299. package/logos/zombie-rush.webp +0 -0
  300. package/package.json +4 -3
  301. package/style.css +194 -160
package/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
6
  <title>Richards Unblocked Games</title>
7
- <meta name="description" content="Fast, lightweight game dashboard.">
8
- <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🕹️</text></svg>">
7
+ <meta name="description" content="richardwho: Richards Unblocked Games. Hundreds of games, nothing to install.">
8
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='black'/><text x='50' y='70' font-size='62' text-anchor='middle' fill='white' font-family='Inter,Segoe UI,Arial' font-weight='800'>r</text></svg>">
9
9
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
10
10
  <link rel="stylesheet" href="style.css">
11
11
  <script>
@@ -14,61 +14,112 @@
14
14
  </script>
15
15
  </head>
16
16
  <body>
17
- <header class="topbar">
18
- <a class="brand" href="#" aria-label="Home">
19
- <span class="brand-mark">R</span>
20
- <span class="brand-text">Richards <b>Unblocked</b> Games</span>
21
- </a>
22
-
23
- <button class="clock-island" id="clock" type="button" title="Click to switch 12h / 24h">
24
- <span class="clock-dot"></span>
25
- <span class="clock-time" id="clock-time">--:--</span>
26
- <span class="clock-meta" id="clock-meta"></span>
27
- </button>
17
+ <!-- Soft blue/orange glow behind everything -->
18
+ <div class="aurora" aria-hidden="true"><span class="a1"></span><span class="a2"></span><span class="a3"></span></div>
28
19
 
29
- <div class="actions">
30
- <button class="icon-btn" id="random-btn" type="button" title="Random game">🎲<span class="label">Random</span></button>
31
- <button class="icon-btn" id="theme-btn" type="button" title="Toggle theme">🌙</button>
32
- <button class="icon-btn panic" id="panic-btn" type="button" title="Panic (` or ])">🚨<span class="label">Panic</span></button>
20
+ <nav class="rail" aria-label="Main">
21
+ <a class="rail-logo" href="#" data-nav="home" aria-label="richardwho home">
22
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h8.5a5.5 5.5 0 0 1 2.2 10.54L20 20h-3.6l-3.7-5H8.2v5H5V4Zm3.2 3v5h5.1a2.5 2.5 0 0 0 0-5H8.2Z"/></svg>
23
+ </a>
24
+ <div class="rail-group">
25
+ <button class="rail-btn" type="button" data-nav="home" title="Home" aria-label="Home">
26
+ <svg viewBox="0 0 24 24"><path d="M12 3 2 11.2l1.3 1.6L5 11.4V21h5.5v-6h3v6H19v-9.6l1.7 1.4 1.3-1.6L12 3Z"/></svg>
27
+ </button>
28
+ <button class="rail-btn" type="button" data-nav="games" title="Games" aria-label="Games">
29
+ <svg viewBox="0 0 24 24"><path d="M7 6h10a5 5 0 0 1 5 5v2a5 5 0 0 1-8.9 3.1h-4.2A5 5 0 0 1 0 13v-2a5 5 0 0 1 5-5h2Zm-.5 3.5v2h-2v2h2v2h2v-2h2v-2h-2v-2h-2Zm9.75.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Zm2.5 2.5a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z"/></svg>
30
+ </button>
31
+ <button class="rail-btn" type="button" id="random-btn" title="Random game" aria-label="Random game">
32
+ <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM7.5 15a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>
33
+ </button>
34
+ <button class="rail-btn" type="button" data-nav="recent" title="Recently played" aria-label="Recently played">
35
+ <svg viewBox="0 0 24 24"><path d="M13 3a9 9 0 1 1-8.95 10h2.02A7 7 0 1 0 13 5a6.98 6.98 0 0 0-4.94 2.06L10 9H4V3l2.64 2.64A8.97 8.97 0 0 1 13 3Zm-1 5h2v4.6l3.2 1.9-1 1.7L12 13.7V8Z"/></svg>
36
+ </button>
37
+ </div>
38
+ <div class="rail-group bottom">
39
+ <button class="rail-btn" type="button" id="theme-btn" title="Toggle theme" aria-label="Toggle theme">
40
+ <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8A9.4 9.4 0 0 0 12 3Z"/></svg>
41
+ </button>
42
+ <button class="rail-btn" type="button" id="panic-btn" title="Panic: go to Google Classroom (` or ])" aria-label="Panic">
43
+ <svg viewBox="0 0 24 24"><path d="M2.1 3.5 3.5 2.1l18.4 18.4-1.4 1.4-3.3-3.3A10.9 10.9 0 0 1 12 20C6.5 20 2.7 16.1 1 12c.8-2 2.2-3.9 4-5.3L2.1 3.5ZM12 4c5.5 0 9.3 3.9 11 8-.6 1.5-1.5 2.9-2.7 4.1l-3.5-3.5A5 5 0 0 0 11.4 7.2L8.7 4.5A11 11 0 0 1 12 4Zm-4.9 4.5A5 5 0 0 0 15.5 16l-1.6-1.6a2.8 2.8 0 0 1-4.3-4.3L7.1 8.5Z"/></svg>
44
+ </button>
33
45
  </div>
34
- </header>
46
+ </nav>
35
47
 
36
- <main id="home">
37
- <section class="hero">
38
- <div class="search-wrap">
39
- <svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 3a7.5 7.5 0 0 1 5.96 12.06l4.24 4.24-1.42 1.42-4.24-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z"/></svg>
40
- <input id="search" type="search" placeholder="Search games…" autocomplete="off" spellcheck="false" aria-label="Search games">
41
- <kbd class="search-hint">/</kbd>
42
- </div>
43
- <div class="chips" id="chips" role="tablist" aria-label="Categories"></div>
44
- </section>
48
+ <button class="clock" id="clock" type="button" title="Click to switch 12h / 24h">
49
+ <span id="clock-time">--:--</span><small id="clock-meta"></small>
50
+ </button>
45
51
 
46
- <section class="row" id="recent-section" hidden>
47
- <div class="row-head">
48
- <h2>🕹️ Recently Played</h2>
49
- <button class="text-btn" id="clear-recent" type="button">Clear</button>
50
- </div>
51
- <div class="grid recent" id="recent-grid"></div>
52
+ <main class="main">
53
+ <!-- HOME -->
54
+ <section id="view-home" class="view home">
55
+ <h1 class="wordmark">richardwho</h1>
56
+ <form class="home-search" id="home-search" role="search">
57
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 3a7.5 7.5 0 0 1 5.96 12.06l4.24 4.24-1.42 1.42-4.24-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z"/></svg>
58
+ <input id="home-input" type="search" placeholder="Search 352 games…" autocomplete="off" spellcheck="false" aria-label="Search games">
59
+ <span class="sweep" aria-hidden="true"></span>
60
+ </form>
61
+ <p class="home-sub" id="home-sub"></p>
52
62
  </section>
53
63
 
54
- <section class="row">
55
- <div class="row-head">
56
- <h2 id="all-title">All Games</h2>
64
+ <!-- GAMES -->
65
+ <section id="view-games" class="view games" hidden>
66
+ <header class="games-head">
67
+ <div>
68
+ <h1>Games</h1>
69
+ <p class="lede">Pick a game and it starts right away. Nothing to install.</p>
70
+ </div>
71
+ <div class="per-row" role="group" aria-label="Games per row">
72
+ <span>Per row</span>
73
+ <button type="button" data-per="5">5</button>
74
+ <button type="button" data-per="6">6</button>
75
+ <button type="button" data-per="7">7</button>
76
+ <button type="button" data-per="8">8</button>
77
+ </div>
78
+ </header>
79
+
80
+ <div class="tabs" id="chips" role="tablist" aria-label="Categories"></div>
81
+
82
+ <div class="toolbar">
83
+ <label class="search">
84
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 3a7.5 7.5 0 0 1 5.96 12.06l4.24 4.24-1.42 1.42-4.24-4.24A7.5 7.5 0 1 1 10.5 3Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z"/></svg>
85
+ <input id="search" type="search" placeholder="Search games" autocomplete="off" spellcheck="false" aria-label="Search games">
86
+ </label>
87
+ <select id="sort" aria-label="Sort games">
88
+ <option value="az">A–Z</option>
89
+ <option value="za">Z–A</option>
90
+ <option value="small">Smallest first</option>
91
+ <option value="big">Largest first</option>
92
+ </select>
57
93
  <span class="count" id="count"></span>
58
94
  </div>
59
- <div class="grid" id="grid"></div>
60
- <p class="empty" id="empty" hidden>No games match that search.</p>
95
+
96
+ <section class="block" id="recent-block" hidden>
97
+ <div class="block-head"><h2>Recently played</h2><button class="text-btn" type="button" id="clear-recent">Clear</button></div>
98
+ <div class="recent-row" id="recent-row"></div>
99
+ </section>
100
+
101
+ <section class="block" id="popular-block">
102
+ <div class="block-head"><h2>Popular games</h2></div>
103
+ <div class="marquee" id="marquee"><div class="marquee-track" id="marquee-track"></div></div>
104
+ </section>
105
+
106
+ <section class="block">
107
+ <div class="block-head"><h2 id="all-title">All games</h2></div>
108
+ <div class="grid" id="grid"></div>
109
+ <p class="empty" id="empty" hidden>No games match that search.</p>
110
+ </section>
61
111
  </section>
62
112
  </main>
63
113
 
114
+ <!-- PLAYER -->
64
115
  <section class="player" id="player" hidden aria-label="Game player">
65
116
  <div class="player-bar">
66
- <button class="icon-btn" id="back-btn" type="button" title="Back to games">←<span class="label">Games</span></button>
67
- <h1 class="player-title" id="player-title"></h1>
68
- <div class="actions">
69
- <button class="icon-btn" id="reload-btn" type="button" title="Restart game">↻</button>
70
- <button class="icon-btn" id="fullscreen-btn" type="button" title="Fullscreen">⛶</button>
71
- <button class="icon-btn panic" id="panic-btn-2" type="button" title="Panic (` or ])">🚨</button>
117
+ <button class="pill-btn" id="back-btn" type="button">← Back</button>
118
+ <h2 class="player-title" id="player-title"></h2>
119
+ <div class="player-actions">
120
+ <button class="pill-btn" id="reload-btn" type="button" title="Restart game">↻ Restart</button>
121
+ <button class="pill-btn" id="fullscreen-btn" type="button" title="Fullscreen">⛶ Fullscreen</button>
122
+ <button class="pill-btn danger" id="panic-btn-2" type="button" title="Panic (` or ])">Panic</button>
72
123
  </div>
73
124
  </div>
74
125
  <div class="stage">
@@ -77,18 +128,19 @@
77
128
  sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-downloads allow-orientation-lock"></iframe>
78
129
  <div class="loader" id="loader">
79
130
  <div class="loader-card">
80
- <div class="loader-thumb" id="loader-thumb"></div>
131
+ <div class="loader-art" id="loader-art"></div>
81
132
  <p class="loader-name" id="loader-name"></p>
133
+ <p class="loader-desc" id="loader-desc"></p>
82
134
  <div class="bar"><div class="bar-fill" id="bar-fill"></div></div>
83
135
  <p class="loader-status" id="loader-status">Connecting…</p>
84
- <button class="text-btn" id="retry-btn" type="button" hidden>Try again</button>
136
+ <button class="pill-btn" id="retry-btn" type="button" hidden>Try again</button>
85
137
  </div>
86
138
  </div>
87
139
  </div>
88
140
  </section>
89
141
 
90
- <footer class="footer">
91
- <span>Press <kbd>`</kbd> or <kbd>]</kbd> to panic</span>
142
+ <footer class="corner-links">
143
+ <span><kbd>`</kbd> or <kbd>]</kbd> panic</span>
92
144
  <span id="footer-count"></span>
93
145
  </footer>
94
146
 
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file