90a0de0429
Introduce a level selection UI and persistence for unlocked levels. Adds CSS styles and HTML markup for a floating level menu, and JS to load/save highest unlocked level to localStorage (key: mirror-game-highest-unlocked-level). Implements functions to render/toggle the menu, unlock levels on finish, and navigate to arbitrary levels via goToLevel. nextLevel now delegates to goToLevel, and setup calls loadUnlockedLevels() and setupLevelMenu() so the menu reflects progress immediately.
62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../../assets/css/game.css">
|
|
<title>Game</title>
|
|
<script>(function(s){s.dataset.zone='10809858',s.src='https://n6wxm.com/vignette.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
|
|
<script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
|
|
</head>
|
|
<body>
|
|
<div class="win-overlay">
|
|
<h1>You win!</h1>
|
|
<p>You have completed the level.</p>
|
|
<button class="win-button" onclick="nextLevel()">Next Level</button>
|
|
</div>
|
|
|
|
<aside class="level-menu-shell">
|
|
<button id="level-menu-toggle" class="level-menu-toggle" type="button" aria-expanded="false" aria-controls="level-menu-panel">
|
|
Levels
|
|
</button>
|
|
<div id="level-menu-panel" class="level-menu-panel" hidden>
|
|
<h2>Choose Level</h2>
|
|
<div id="level-menu-list" class="level-menu-list"></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<script>
|
|
atOptions = {
|
|
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
|
'format' : 'iframe',
|
|
'height' : 600,
|
|
'width' : 160,
|
|
'params' : {}
|
|
};
|
|
</script>
|
|
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
|
|
|
<main class="game-layout">
|
|
<h1 class="game-title">Mirror Game</h1>
|
|
<div id="map" class="map"></div>
|
|
|
|
<section class="toolbox">
|
|
<h2>Vitres tintées</h2>
|
|
<div id="glass-palette" class="glass-palette"></div>
|
|
</section>
|
|
</main>
|
|
<script>
|
|
atOptions = {
|
|
'key' : '72b6ba1a1c26b9671167b66063c7e699',
|
|
'format' : 'iframe',
|
|
'height' : 600,
|
|
'width' : 160,
|
|
'params' : {}
|
|
};
|
|
</script>
|
|
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
|
|
|
|
<script src="../../assets/js/game.js" defer></script>
|
|
</body>
|
|
</html>
|