Support per-level game element configs

Convert global config maps (initialMirrorAngles, buttonGroups, doorGroups, captorGroups, rotatorButtons) into per-level arrays and add getCurrentLevelConfig(levelConfigs) helper. Update getButtonGroup, getDoorGroup, getCaptorGroup, getRotatorButtonConfig, isMirrorControlledByButton, syncRotatorButtons and initializeMirrorOrientations to pull configs for the current level. Also tweak a couple of level tiles and add a rotator button config for the third level ("3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 }) while keeping empty objects for levels without overrides. These changes enable per-level customization of mirrors, buttons, doors, captors and rotators.

web/assets/css/game.css

@@ -143,6 +143,40 @@ main {
     background-position: center;
 }
 
+.captor {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Capteur-1.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+}
+
+.captor-turn {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Capteur-2.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/CableV.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(90deg);
+}
+
+.cable-vertical {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/CableV.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .door {
     background-color: #DADEEF;
     background-image: url("../img/tiles/WoodenDoor.svg");
@@ -174,6 +208,14 @@ main {
     background-position: center;
 }
 
+.button-rotator {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/ButtonProfile.svg"), url("../img/tiles/Tuile.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .button-active {
     opacity: 0.7;
 }
@@ -274,6 +316,10 @@ main {
     justify-content: center;
 }
 
+.btn-mirror-locked {
+    cursor: default;
+}
+
 .mirror-img {
     width: 80%;
     height: 80%;

web/assets/js/game.js

@@ -16,6 +16,11 @@ const legend = {
     demiWallCornerDownRight: 12,
     doorOpen: 13,
     button2: 14,
+    captor: 15,
+    cable: 16,
+    captorTurn: 17,
+    cableVertical: 18,
+    rotatorButton: 20,
 };
 
 const laserColors = {
@@ -44,21 +49,94 @@ 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, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
+        [0, 0, 1, 0, 0, 0, 17, 0, 0, 3, 6, 0, 0, 0, 0],
+        [0, 0, 6, 6, 6, 6, 18, 6, 6, 0, 6, 0, 0, 0, 0],
+        [0, 0, 7, 0, 0, 0, 4, 0, 0, 12, 6, 0, 0, 0, 0],
+        [0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 3, 0, 16, 16, 20, 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, 3, 0, 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,
-};
+const initialMirrorAngles = [
+    {
+        "6,4": 315,
+    },
+    {},
+    {
+        "3,4": 315,
+        "7,8": 0,
+    },
+];
 
-const buttonGroups = {
-    "4,6": 1,
-};
+const buttonGroups = [
+    {
+        "4,6": 1,
+    },
+    {},
+    {},
+];
 
-const doorGroups = {
-    "4,7": 1,
-};
+const doorGroups = [
+    {
+        "4,7": 1,
+    },
+    {
+        "4,6": 1,
+    },
+    {},
+];
+
+const captorGroups = [
+    {},
+    {
+        "2,6": 1,
+    },
+    {},
+];
+
+const rotatorButtons = [
+    {},
+    {},
+    {
+        "3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 },
+    },
+];
 
 let laserDirection = { dx: 0, dy: 0 };
 let laserSegments = {};
@@ -67,11 +145,19 @@ let glassPlacements = {};
 let activatedButtons = {};
 let openedDoors = {};
 let isLevelFinished = false;
+let activeRotatorButtons = {};
+let rotatorIntervals = {};
+let toggledDoors = {};
+let poweredCaptors = {};
 
 function getCurrentLevel() {
     return levels[currentLevelIndex];
 }
 
+function getCurrentLevelConfig(configByLevel) {
+    return configByLevel[currentLevelIndex] || {};
+}
+
 function normalizeLaserDirection(dx, dy) {
     const epsilon = 0.0001;
     const normalizedDx = Math.abs(dx) < epsilon ? 0 : Math.sign(dx);
@@ -129,11 +215,15 @@ function getButtonGroup(x, y) {
         return 2;
     }
 
-    return buttonGroups[`${y},${x}`] || 1;
+    return getCurrentLevelConfig(buttonGroups)[`${y},${x}`] || 1;
 }
 
 function getDoorGroup(x, y) {
-    return doorGroups[`${y},${x}`] || 1;
+    return getCurrentLevelConfig(doorGroups)[`${y},${x}`] || 1;
+}
+
+function getCaptorGroup(x, y) {
+    return getCurrentLevelConfig(captorGroups)[`${y},${x}`] || getDoorGroup(x, y);
 }
 
 function openDoorsFromButton(x, y) {
@@ -149,6 +239,90 @@ function openDoorsFromButton(x, y) {
     }
 }
 
+function toggleDoorsFromCaptor(x, y) {
+    const captorGroup = getCaptorGroup(x, y);
+    const level = getCurrentLevel();
+
+    for (let doorY = 0; doorY < level.length; doorY++) {
+        for (let doorX = 0; doorX < level[doorY].length; doorX++) {
+            const coordKey = `${doorY},${doorX}`;
+
+            if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === captorGroup) {
+                toggledDoors[coordKey] = !toggledDoors[coordKey];
+            }
+        }
+    }
+}
+
+function getRotatorButtonConfig(x, y) {
+    return getCurrentLevelConfig(rotatorButtons)[`${y},${x}`];
+}
+
+function isMirrorControlledByButton(x, y) {
+    const rotatorEntries = Object.values(getCurrentLevelConfig(rotatorButtons));
+
+    for (let i = 0; i < rotatorEntries.length; i++) {
+        const rotatorConfig = rotatorEntries[i];
+
+        if (rotatorConfig.mirrorX === x && rotatorConfig.mirrorY === y) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function rotateMirrorStep(x, y, angleStep) {
+    const coordKey = `${y},${x}`;
+
+    if (getCurrentLevel()[y][x] !== legend.mirror) {
+        return;
+    }
+
+    let currentAngle = mirrorOrientations[coordKey] || 0;
+    currentAngle = (currentAngle + angleStep) % 360;
+
+    if (currentAngle < 0) {
+        currentAngle += 360;
+    }
+
+    mirrorOrientations[coordKey] = currentAngle;
+}
+
+function syncRotatorButtons() {
+    const currentLevelRotatorButtons = getCurrentLevelConfig(rotatorButtons);
+    const rotatorKeys = Object.keys(currentLevelRotatorButtons);
+
+    for (let i = 0; i < rotatorKeys.length; i++) {
+        const key = rotatorKeys[i];
+        const config = currentLevelRotatorButtons[key];
+        const isActive = activeRotatorButtons[key] === true;
+
+        if (isActive && !rotatorIntervals[key]) {
+            rotatorIntervals[key] = window.setInterval(() => {
+                rotateMirrorStep(config.mirrorX, config.mirrorY, -22.5);
+                traceLaser();
+            }, 1000);
+        }
+
+        if (!isActive && rotatorIntervals[key]) {
+            window.clearInterval(rotatorIntervals[key]);
+            delete rotatorIntervals[key];
+        }
+    }
+}
+
+function stopAllRotatorButtons() {
+    const intervalKeys = Object.keys(rotatorIntervals);
+
+    for (let i = 0; i < intervalKeys.length; i++) {
+        const key = intervalKeys[i];
+        window.clearInterval(rotatorIntervals[key]);
+    }
+
+    rotatorIntervals = {};
+}
+
 function saveLaserSegment(x, y, direction, color) {
     laserSegments[`${y},${x}`] = {
         direction: { ...direction },
@@ -281,7 +455,7 @@ function initializeMirrorOrientations() {
     for (let y = 0; y < level.length; y++) {
         for (let x = 0; x < level[y].length; x++) {
             if (level[y][x] === legend.mirror) {
-                mirrorOrientations[`${y},${x}`] = initialMirrorAngles[`${y},${x}`] || 0;
+                mirrorOrientations[`${y},${x}`] = getCurrentLevelConfig(initialMirrorAngles)[`${y},${x}`] || 0;
             }
         }
     }
@@ -314,23 +488,31 @@ function loadGrid() {
                 case legend.mirror:
                     cell.classList.add("mirror");
                     const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
-                    const btnMirror = document.createElement("button");
-                    btnMirror.classList.add("btn-mirror");
-                    btnMirror.type = "button";
                     const img = document.createElement("img");
                     img.src = "../../assets/img/tiles/Mirror.svg";
                     img.classList.add("mirror-img");
                     img.style.transform = `rotate(${currentAngle}deg)`;
-                    btnMirror.appendChild(img);
-                    btnMirror.onmousedown = (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        if (!isLevelFinished) {
-                            rotateMirror(x, y, event.button === 2);
-                        }
-                    };
-                    btnMirror.oncontextmenu = (event) => event.preventDefault();
-                    cell.appendChild(btnMirror);
+
+                    if (isMirrorControlledByButton(x, y)) {
+                        const mirrorDisplay = document.createElement("div");
+                        mirrorDisplay.classList.add("btn-mirror", "btn-mirror-locked");
+                        mirrorDisplay.appendChild(img);
+                        cell.appendChild(mirrorDisplay);
+                    } else {
+                        const btnMirror = document.createElement("button");
+                        btnMirror.classList.add("btn-mirror");
+                        btnMirror.type = "button";
+                        btnMirror.appendChild(img);
+                        btnMirror.onmousedown = (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            if (!isLevelFinished) {
+                                rotateMirror(x, y, event.button === 2);
+                            }
+                        };
+                        btnMirror.oncontextmenu = (event) => event.preventDefault();
+                        cell.appendChild(btnMirror);
+                    }
                     break;
                 case legend.door:
                     cell.classList.add("door");
@@ -353,6 +535,12 @@ function loadGrid() {
                         cell.classList.add("button-active");
                     }
                     break;
+                case legend.rotatorButton:
+                    cell.classList.add("button", "button-rotator");
+                    if (activatedButtons[`${y},${x}`]) {
+                        cell.classList.add("button-active");
+                    }
+                    break;
                 case legend.wall:
                     cell.classList.add("wall");
                     break;
@@ -371,6 +559,18 @@ 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;
+                case legend.captorTurn:
+                    cell.classList.add("captor-turn");
+                    break;
+                case legend.cableVertical:
+                    cell.classList.add("cable-vertical");
+                    break;
             }
 
             drawLaserInCell(cell, laserSegments[`${y},${x}`]);
@@ -383,28 +583,17 @@ function loadGrid() {
 }
 
 function rotateMirror(x, y, isRightClick) {
-    const coordKey = `${y},${x}`;
-
-    if (getCurrentLevel()[y][x] !== legend.mirror) {
-        return;
-    }
-
-    let currentAngle = mirrorOrientations[coordKey] || 0;
-    currentAngle = (currentAngle + (isRightClick ? 22.5 : -22.5)) % 360;
-
-    if (currentAngle < 0) {
-        currentAngle += 360;
-    }
-
-    mirrorOrientations[coordKey] = currentAngle;
+    rotateMirrorStep(x, y, isRightClick ? 22.5 : -22.5);
     traceLaser();
 }
 
 function traceLaser() {
     laserSegments = {};
     activatedButtons = {};
-    openedDoors = {};
+    openedDoors = { ...toggledDoors };
+    activeRotatorButtons = {};
     isLevelFinished = false;
+    const nextPoweredCaptors = {};
 
     const level = getCurrentLevel();
     let startLaserX;
@@ -500,7 +689,6 @@ function traceLaser() {
                     laserActive = false;
                 }
                 break;
-
             case legend.button:
             case legend.button2:
                 if (currentLaserColor === laserColors.red) {
@@ -516,20 +704,66 @@ function traceLaser() {
                 }
                 break;
 
+            case legend.captor:
+            case legend.captorTurn:
+                if (currentLaserColor === laserColors.red) {
+                    const captorKey = `${currentY},${currentX}`;
+                    activatedButtons[captorKey] = true;
+                    nextPoweredCaptors[captorKey] = true;
+
+                    if (!poweredCaptors[captorKey]) {
+                        toggleDoorsFromCaptor(currentX, currentY);
+                        openedDoors = { ...toggledDoors };
+                    }
+
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                }else if(currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+
+            case legend.rotatorButton:
+                if (currentLaserColor === laserColors.red) {
+                    const rotatorKey = `${currentY},${currentX}`;
+                    activatedButtons[rotatorKey] = true;
+                    activeRotatorButtons[rotatorKey] = true;
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                    laserActive = false;
+                } else {
+                    laserActive = false;
+                }
+                break;
+
             case legend.demiWallCornerUpLeft:
-                laserDirection = reflectLaser(laserDirection, 135);
+                if(currentLaserColor === laserColors.blue) {
+                    laserDirection = reflectLaser(laserDirection, 135);
+                }
                 break;
 
             case legend.demiWallCornerUpRight:
-                laserDirection = reflectLaser(laserDirection, 45);
+                if(currentLaserColor === laserColors.blue) {
+                    laserDirection = reflectLaser(laserDirection, 45);
+                }
                 break;
 
             case legend.demiWallCornerDownLeft:
-                laserDirection = reflectLaser(laserDirection, 225);
+                if(currentLaserColor === laserColors.blue) {
+                    laserDirection = reflectLaser(laserDirection, 225);
+                }
                 break;
 
             case legend.demiWallCornerDownRight:
-                laserDirection = reflectLaser(laserDirection, 315);
+                if(currentLaserColor === laserColors.blue) {
+                    laserDirection = reflectLaser(laserDirection, 315);
+                }
                 break;
 
             default:
@@ -538,6 +772,8 @@ function traceLaser() {
         }
     }
 
+    poweredCaptors = nextPoweredCaptors;
+    syncRotatorButtons();
     loadGrid();
 
     if (isLevelFinished) {
@@ -552,6 +788,31 @@ function finish() {
     }, 100);
 }
 
+function nextLevel() {
+    currentLevelIndex++;
+
+    isLevelFinished = false;
+    stopAllRotatorButtons();
+
+    if (currentLevelIndex >= levels.length) {
+        currentLevelIndex = 0;
+    }
+
+    initializeMirrorOrientations();
+    loadGrid();
+    laserSegments = {};
+    mirrorOrientations = {};
+    glassPlacements = {};
+    activatedButtons = {};
+    openedDoors = {};
+    toggledDoors = {};
+    poweredCaptors = {};
+    traceLaser();
+
+    const winOverlay = document.querySelector(".win-overlay");
+    winOverlay.style.visibility = "hidden";
+}
+
 createPalette();
 initializeMirrorOrientations();
 blockBrowserDrop();