Fix relative paths

X
Update game.js
2026-03-31 14:55:00 +02:00 · 2026-03-31 14:53:26 +02:00 · 2026-03-31 14:35:01 +02:00
4 changed files with 83 additions and 50 deletions
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -173,7 +173,7 @@ main {

 .laser {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Laser.svg");
+    background-image: url("/web/assets/img/tiles/Laser.svg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
@@ -182,7 +182,7 @@ main {

 .colored-laser {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Prisme.svg");
+    background-image: url("/web/assets/img/tiles/Prisme.svg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
@@ -202,7 +202,7 @@ main {

 .wall {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Tuile.svg");
+    background-image: url("/web/assets/img/tiles/Tuile.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -210,7 +210,7 @@ main {

 .wall-semi-angle {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/BottomLeft.svg");
+    background-image: url("/web/assets/img/tiles/BottomLeft.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -218,7 +218,7 @@ main {

 .horizontal-semi {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/HorizontaleSemi.svg");
+    background-image: url("/web/assets/img/tiles/HorizontaleSemi.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
@@ -226,7 +226,7 @@ main {

 .captor {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Capteur-1.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -235,7 +235,7 @@ main {

 .captor-turn {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Capteur-2.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-2.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -243,7 +243,7 @@ main {

 .captor-turn-reverse {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Capteur-2.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-2.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -252,7 +252,7 @@ main {

 .captor-turn-horizontale2 {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Capteur-1.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -260,7 +260,7 @@ main {

 .cable {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/CableH.svg");
+    background-image: url("/web/assets/img/tiles/CableH.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -268,7 +268,7 @@ main {

 .cable-turn {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/CableBottomLeft.svg");
+    background-image: url("/web/assets/img/tiles/CableBottomLeft.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -276,7 +276,7 @@ main {

 .cable-vertical {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/CableV.svg");
+    background-image: url("/web/assets/img/tiles/CableV.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -284,7 +284,7 @@ main {

 .cable-turn-horizontale {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/CableTopLeft.svg");
+    background-image: url("/web/assets/img/tiles/CableTopLeft.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -292,7 +292,7 @@ main {

 .cable-turn-horizontale2 {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/CableTopLeft.svg");
+    background-image: url("/web/assets/img/tiles/CableTopLeft.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -301,14 +301,14 @@ main {

 .door {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/WoodenDoor.svg");
+    background-image: url("/web/assets/img/tiles/WoodenDoor.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: end;
 }

 .door-open {
-    background-image: url("../img/tiles/WoodenDoor_openned.svg");
+    background-image: url("/web/assets/img/tiles/WoodenDoor_openned.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: end;
@@ -316,7 +316,7 @@ main {

 .button {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/ButtonComplete.svg"), url("../img/tiles/Tuile.svg");
+    background-image: url("/web/assets/img/tiles/ButtonComplete.svg"), url("/web/assets/img/tiles/Tuile.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -324,7 +324,7 @@ main {

 .button-2 {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/ButtonQuarter.svg"), url("../img/tiles/Tuile.svg");
+    background-image: url("/web/assets/img/tiles/ButtonQuarter.svg"), url("/web/assets/img/tiles/Tuile.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -332,7 +332,7 @@ main {

 .button-rotator {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/ButtonProfile.svg"), url("../img/tiles/Tuile.svg");
+    background-image: url("/web/assets/img/tiles/ButtonProfile.svg"), url("/web/assets/img/tiles/Tuile.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -344,7 +344,7 @@ main {

 .target {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/Trigger.svg");
+    background-image: url("/web/assets/img/tiles/Trigger.svg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
@@ -352,7 +352,7 @@ main {

 .demi-wall-corner-up-left {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/TopLeft.svg");
+    background-image: url("/web/assets/img/tiles/TopLeft.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -360,7 +360,7 @@ main {

 .demi-wall-corner-up-right {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/TopRight.svg");
+    background-image: url("/web/assets/img/tiles/TopRight.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -368,7 +368,7 @@ main {

 .demi-wall-corner-down-left {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/BottomLeftAngle.svg");
+    background-image: url("/web/assets/img/tiles/BottomLeftAngle.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
@@ -376,7 +376,7 @@ main {

 .demi-wall-corner-down-right {
    background-color: #DADEEF;
-    background-image: url("../img/tiles/BottomRightAngle.svg");
+    background-image: url("/web/assets/img/tiles/BottomRightAngle.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
--- a/web/assets/js/game.js
+++ b/web/assets/js/game.js
@@ -48,6 +48,11 @@ const glassOptions = [
        { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
        { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
    ],
+    [
+        { color: laserColors.red, maxAmount: 2, currentAmount: 2 },
+        { color: laserColors.blue, maxAmount: 2, currentAmount:2},
+        { color: laserColors.yellow, maxAmount: 2, currentAmount: 2 },
+    ],
    [
        { color: laserColors.red, maxAmount: 2, currentAmount: 2 },
        { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
@@ -84,12 +89,12 @@ let levels = [

    [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 6, 6, 6, 6, 6, 7, 10, 6, 6, 11, 0, 0, 0, 0],
-        [0, 1, 0, 0, 0, 4, 0, 0, 0, 3, 21, 0, 0, 0, 0],
+        [0, 6, 6, 6, 6, 6, 0, 10, 6, 6, 11, 0, 0, 0, 0],
+        [7, 1, 0, 0, 0, 4, 0, 0, 0, 3, 21, 0, 0, 0, 0],
        [0, 6, 6, 6, 6, 18, 6, 26, 22, 0, 18, 0, 0, 0, 0],
        [0, 6, 9, 0, 0, 19, 0, 0, 0, 12, 18, 0, 0, 0, 0],
        [0, 6, 0, 6, 6, 6, 6, 6, 6, 24, 23, 0, 0, 0, 0],
-        [0, 6, 11, 0, 0, 0, 0, 0, 25, 23, 9, 0, 0, 0, 0],
+        [0, 6, 11, 0, 0, 0, 0, 0, 20, 23, 9, 0, 0, 0, 0],
        [0, 10, 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],
@@ -131,9 +136,9 @@ const initialMirrorAngles = [
    },
    {},
    {
-        "3,4": 315,
-        "7,8": 0,
+        "2,9": 225,
    },
+    {}
 ];

 const buttonGroups = [
@@ -141,7 +146,9 @@ const buttonGroups = [
        "4,6": 1,
    },
    {},
-    {},
+    {
+        "9,4": 1,
+    },
 ];

 const doorGroups = [
@@ -165,6 +172,9 @@ const captorGroups = [
 const rotatorButtons = [
    {},
    {},
+    {
+        "6,8": { mirrorX: 9, mirrorY: 2, step: 22.5, intervalMs: 1000 },
+    },
    {
        "3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 },
    },
@@ -703,7 +713,7 @@ function loadGrid() {
                    cell.classList.add("mirror");
                    const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
                    const img = document.createElement("img");
-                    img.src = "../../assets/img/tiles/Mirror.svg";
+                    img.src = "/web/assets/img/tiles/Mirror.svg";
                    img.classList.add("mirror-img");
                    img.style.transform = `rotate(${currentAngle}deg)`;

@@ -891,7 +901,7 @@ function traceLaser() {
        switch (cellType) {
            case legend.laser:
            case legend.coloredLaser:
-                laserActive = false;
+                saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                break;

            case legend.empty:
@@ -922,7 +932,27 @@ function traceLaser() {
                    laserActive = false;
                }
                break;
-
+            case legend.wallSemiAngle:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.horizontalSemi:
+                if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 0);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.cableVertical:
+            case legend.cableTurn:
            case legend.door:
            case legend.doorOpen:
                if (openedDoors[`${currentY},${currentX}`] || cellType === legend.doorOpen) {
@@ -951,6 +981,14 @@ function traceLaser() {
                break;

            case legend.captor:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
            case legend.captorTurn:
                if (currentLaserColor === laserColors.red) {
                    const captorKey = `${currentY},${currentX}`;
@@ -1029,6 +1067,7 @@ function traceLaser() {
                if (currentLaserColor === laserColors.yellow) {
                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                    laserDirection = reflectLaser(laserDirection, 135);
                }
                break;
@@ -1037,6 +1076,7 @@ function traceLaser() {
                if (currentLaserColor === laserColors.yellow) {
                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                    laserDirection = reflectLaser(laserDirection, 45);
                }
                break;
@@ -1045,6 +1085,7 @@ function traceLaser() {
                if (currentLaserColor === laserColors.yellow) {
                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                    laserDirection = reflectLaser(laserDirection, 225);
                }
                break;
@@ -1053,6 +1094,7 @@ function traceLaser() {
                if (currentLaserColor === laserColors.yellow) {
                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                    laserDirection = reflectLaser(laserDirection, 315);
                }
                break;
@@ -1086,17 +1128,17 @@ function goToLevel(levelIndex) {
    isLevelFinished = false;
    stopAllRotatorButtons();

+    mirrorOrientations = {};
+    laserSegments = {};
+    activatedButtons = {};
+    openedDoors = {};
+    toggledDoors = {};
+    poweredCaptors = {};
    initializeMirrorOrientations();
    glassPlacements = {};
    resetGlassInventory();
    createPalette();
    loadGrid();
-    laserSegments = {};
-    mirrorOrientations = {};
-    activatedButtons = {};
-    openedDoors = {};
-    toggledDoors = {};
-    poweredCaptors = {};
    traceLaser();

    const winOverlay = document.querySelector(".win-overlay");
--- a/web/assets/js/index.js
+++ b/web/assets/js/index.js
@@ -1,9 +0,0 @@
-function rotateMirror(mirror) {
-    let angle = 0;
-    if (mirror.style.transform == "") {
-        angle = 0;
-    } else {
-        angle = parseInt(mirror.style.transform.split("(")[1].split("deg")[0])%360;
-    }
-    mirror.style.transform = `rotate(${angle+45}deg)`;
-}
--- a/web/templates/view/game.html
+++ b/web/templates/view/game.html
@@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../../assets/css/game.css">
+    <link rel="stylesheet" href="/web/assets/web/assets/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>
@@ -56,6 +56,6 @@
      </script>
      <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
      
-    <script src="../../assets/js/game.js" defer></script>
+    <script src="/web/assets//eb/assets/assets/js/game.js" defer></script>
 </body>
 </html>
Author	SHA1	Message	Date
Sysy's	954af3cded	Fix relative paths	2026-03-31 14:55:00 +02:00
Sysy's	cfeded5079	X	2026-03-31 14:53:26 +02:00
Sysy's	1eb3aec524	Update game.js	2026-03-31 14:35:01 +02:00