Add win overlay

Add game title and update layout styles
Adjust UI visuals: change page background to #FFF6E5, increase main container border-radius from 10px to 150px, and soften toolbox corners (5px → 15px). Add a new .game-title CSS rule (responsive font-size, weight, color, letter-spacing, centered) and insert an <h1 class="game-title">Mirror Game</h1> into the game template. These are visual polish changes only; no gameplay logic was modified.
2026-03-31 12:07:37 +02:00 · 2026-03-31 12:00:03 +02:00 · 2026-03-31 11:55:20 +02:00
3 changed files with 79 additions and 66 deletions
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -12,7 +12,7 @@ body {
 }

 body {
-    background: #f7f7f7;
+    background: #FFF6E5;
    display: flex;
    align-items: center;
    justify-content: center;
@@ -26,14 +26,22 @@ main {
    align-items: center;
    justify-content: center;
    padding: 20px;
-    border-radius: 10px;
+    border-radius: 150px;
    min-width: fit-content;
    flex-shrink: 0;
    gap: 16px;
 }

 .game-layout {
-    width: min(95vw, 1000px);
+    width: min(96vw, 1200px);
+}
+
+.game-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 700;
+    color: #223;
+    letter-spacing: 0.04em;
+    text-align: center;
 }

 .toolbox {
@@ -66,7 +74,7 @@ main {
    flex-direction: column;
    padding: 10px;
    background: #dadeef;
-    border-radius: 5px;
+    border-radius: 15px;
 }

 .lign {
@@ -74,8 +82,8 @@ main {
 }

 .cell {
-    width: clamp(28px, 5.5vmin, 60px);
-    height: clamp(28px, 5.5vmin, 60px);
+    width: clamp(28px, 6.2vmin, 72px);
+    height: clamp(28px, 6.2vmin, 72px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
@@ -119,6 +127,12 @@ main {
    background-color: #DADEEF;
    position: relative;
    overflow: hidden;
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    transform: scaleX(-1);
+    -ms-filter: fliph; /*IE*/
+    filter: fliph; /*IE*/
 }

 .wall {
@@ -321,3 +335,42 @@ main {
        padding: 8px;
    }
 }
+
+.win-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    gap: 20px;
+    backdrop-filter: blur(6px);
+
+}
+
+.win-overlay h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    text-align: center;
+}
+
+.win-overlay p {
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #fff;
+    text-align: center;
+}
+
+.win-overlay button {
+    font-size: 1.5rem;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #000;
+    border: none;
+    cursor: pointer;
+}
--- a/web/assets/js/game.js
+++ b/web/assets/js/game.js
@@ -16,8 +16,6 @@ const legend = {
    demiWallCornerDownRight: 12,
    doorOpen: 13,
    button2: 14,
-    captor: 15,
-    cable: 16,
 };

 const laserColors = {
@@ -46,49 +44,20 @@ let levels = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    ],
-
-    [
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
-        [0, 0, 0, 0, 1, 0, 0, 0, 0, 10, 6, 0, 0, 0, 0],
-        [0, 0, 0, 0, 3, 16, 16, 15, 0, 3, 6, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
-        [0, 0, 0, 0, 12, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
-        [0, 0, 0, 0, 6, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 6, 0, 0, 0, 3, 0, 7, 0, 0, 0, 0],
-        [0, 0, 0, 0, 6, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 10, 6, 6, 6, 6, 6, 0, 0, 0, 0, 0],
-    ],
-
-    [
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    ],
 ];

 let currentLevelIndex = 0;

 const initialMirrorAngles = {
    "6,4": 315,
-    "4,3": 315,
 };

 const buttonGroups = {
    "4,6": 1,
-    "4,7": 2,
 };

 const doorGroups = {
    "4,7": 1,
-    "4,8": 2,
 };

 let laserDirection = { dx: 0, dy: 0 };
@@ -402,12 +371,6 @@ function loadGrid() {
                case legend.demiWallCornerDownRight:
                    cell.classList.add("demi-wall-corner-down-right");
                    break;
-                case legend.captor:
-                    cell.classList.add("captor");
-                    break;
-                case legend.cable:
-                    cell.classList.add("cable");
-                    break;
            }

            drawLaserInCell(cell, laserSegments[`${y},${x}`]);
@@ -584,29 +547,9 @@ function traceLaser() {

 function finish() {
    setTimeout(() => {
-        alert("Reussi !");
+        const winOverlay = document.querySelector(".win-overlay");
+        winOverlay.style.visibility = "visible";
    }, 100);
-
-    nextLevel();
-}
-
-function nextLevel () {
-    currentLevelIndex++;
-
-    isLevelFinished = false;
-
-    if (currentLevelIndex >= levels.length) {
-        currentLevelIndex = 0;
-    }
-
-    initializeMirrorOrientations();
-    loadGrid();
-    laserSegments = {};
-    mirrorOrientations = {};
-    glassPlacements = {};
-    activatedButtons = {};
-    openedDoors = {};
-    traceLaser();
 }

 createPalette();
--- a/web/templates/view/game.html
+++ b/web/templates/view/game.html
@@ -9,6 +9,12 @@
    <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>
+
    <script>
        atOptions = {
          'key' : '72b6ba1a1c26b9671167b66063c7e699',
@@ -21,6 +27,7 @@
      <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">
@@ -28,7 +35,17 @@
            <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>