Level 2

web/assets/css/game.css

@@ -12,7 +12,7 @@ body {
 }
 
 body {
-    background: #FFF6E5;
+    background: #f7f7f7;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,22 +26,14 @@ main {
     align-items: center;
     justify-content: center;
     padding: 20px;
-    border-radius: 150px;
+    border-radius: 10px;
     min-width: fit-content;
     flex-shrink: 0;
     gap: 16px;
 }
 
 .game-layout {
-    width: min(96vw, 1200px);
+    width: min(95vw, 1000px);
-}
-
-.game-title {
-    font-size: clamp(2rem, 4vw, 3rem);
-    font-weight: 700;
-    color: #223;
-    letter-spacing: 0.04em;
-    text-align: center;
 }
 
 .toolbox {
@@ -74,7 +66,7 @@ main {
     flex-direction: column;
     padding: 10px;
     background: #dadeef;
-    border-radius: 15px;
+    border-radius: 5px;
 }
 
 .lign {
@@ -82,8 +74,8 @@ main {
 }
 
 .cell {
-    width: clamp(28px, 6.2vmin, 72px);
+    width: clamp(28px, 5.5vmin, 60px);
-    height: clamp(28px, 6.2vmin, 72px);
+    height: clamp(28px, 5.5vmin, 60px);
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -127,12 +119,6 @@ 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 {
@@ -335,42 +321,3 @@ 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;
-}

web/assets/js/game.js

@@ -16,6 +16,8 @@ const legend = {
     demiWallCornerDownRight: 12,
     doorOpen: 13,
     button2: 14,
+    captor: 15,
+    cable: 16,
 };
 
 const laserColors = {
@@ -44,20 +46,49 @@ 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 };
@@ -371,6 +402,12 @@ 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}`]);
@@ -547,9 +584,29 @@ function traceLaser() {
 
 function finish() {
     setTimeout(() => {
-        const winOverlay = document.querySelector(".win-overlay");
+        alert("Reussi !");
-        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();

web/templates/view/game.html

@@ -9,12 +9,6 @@
     <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',
@@ -27,7 +21,6 @@
       <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">
@@ -35,17 +28,7 @@
             <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>