Upgrade of design of light of laser + add posibility to move a cursor and rotate mirror with keyboard

web/assets/css/game.css

@@ -4,7 +4,8 @@
     box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
@@ -29,6 +30,10 @@ main {
     flex-shrink: 0;
 }
 
+/* ================================
+   GRID
+================================ */
+
 .map {
     display: flex;
     flex-direction: column;
@@ -46,12 +51,14 @@ main {
     margin: 0;
 }
 
+/* ================================
+   CELLS
+================================ */
+
 .cell {
     border: 1px solid #333333;
-    min-width: 60px;
-    width: auto;
-    min-height: 60px;
-    height: auto;
+    width: clamp(28px, 5.5vmin, 60px);
+    height: clamp(28px, 5.5vmin, 60px);
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -61,6 +68,10 @@ main {
     background-color: #2a2a2a;
 }
 
+/* ================================
+   CASES TYPE
+================================ */
+
 .empty {
     background-color: #2a2a2a;
     border-color: #333333;
@@ -72,12 +83,6 @@ main {
 
 .laser {
     background-color: #FFD700;
-    border-color: #FFA500;
-}
-
-.colored-laser {
-    background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%);
-    border-color: #FF1493;
 }
 
 .mirror {
@@ -87,34 +92,85 @@ main {
     overflow: hidden;
 }
 
-.door {
-    background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
-    border-color: #654321;
-}
-
-.button {
-    background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
-    border-color: #990000;
-}
-
 .wall {
-    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
-    border-color: #000000;
-}
-
-.demi-wall {
-    background: linear-gradient(90deg, #0f0f0f 0%, #0f0f0f 50%, #2a2a2a 50%, #2a2a2a 100%);
-    border-color: #333333;
+    background-color: #1a1a1a;
 }
 
 .target {
-    background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%);
-    border-color: #00FF00;
+    background: #00FF00;
 }
 
+/* ================================
+   CURSOR PLAYER
+================================ */
+
+.player-cursor {
+    outline: 2px solid #00e5ff;
+    outline-offset: -2px;
+    z-index: 10;
+}
+
+.player-cursor.mirror {
+    outline-color: #FFD700;
+}
+
+/* ================================
+   LIGHT LASER
+================================ */
+
 .light-laser {
+    position: relative;
+    background-color: #2a2a2a;
+}
+
+.laser-horizontal {
+    background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a
+}
+
+.laser-vertical {
+    background: linear-gradient(to right,  transparent 0%,  transparent 45%,  red 45%,  red 55%,  transparent 55%,  transparent 100%), #2a2a2a;
+}
+
+/* ================================
+   MIRROR
+================================ */
+
+.btn-mirror {
+    background: none;
+    border: none;
+    cursor: pointer;
+    height: 100%;
+    position: relative;
+}
+
+.btn-mirror::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    width: 80%;
     height: 2px;
-    width: 35px;
-    background-color: red;
-    background-size: 2px 35px;
+    background-color: #aaaaaa;
+    transform-origin: center;
+}
+
+/* ================================
+   RESPONSIVE
+================================ */
+
+@media (max-width: 600px) {
+    .map {
+        padding: 5px;
+        border-radius: 3px;
+    }
+
+    main {
+        padding: 8px;
+    }
+}
+
+@media (max-height: 500px) {
+    .map {
+        padding: 4px;
+    }
 }

web/assets/js/game.js

@@ -28,6 +28,10 @@ let level1 = [
     [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 ]
 
+// Player position
+let playerX = 0;
+let playerY = 0;
+
 // Function to save initial orientation of mirrors
 let laserDirection = { dx: 0, dy: 0 };
 let mirrorOrientations = {};
@@ -73,7 +77,6 @@ function loadGrid() {
                     const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
                     const btnMirror = document.createElement("button");
                     btnMirror.classList.add("btn-mirror");
-                    btnMirror.addEventListener("click", () => rotateMirror(btnMirror, x, y));
                     btnMirror.style.transform = `rotate(${currentAngle}deg)`;
                     btnMirror.style.width = "100%";
                     cell.appendChild(btnMirror);
@@ -96,9 +99,18 @@ function loadGrid() {
                     break;
                 case legend.ligthLaser:
                     cell.classList.add("light-laser");
+                    if (laserDirection.dx === 0) {
+                        cell.classList.add("laser-vertical");
+                    } else {
+                        cell.classList.add("laser-horizontal");
+                    }
                     break;
             }
 
+            if (x === playerX && y === playerY) {
+                cell.classList.add("player-cursor");
+            }
+
             lign.appendChild(cell);
         }
 
@@ -110,16 +122,21 @@ loadGrid();
 
 // Function to rotate mirror
 
-function rotateMirror(mirrorElement, x, y) {
+function rotateMirror(x, y) {
     const coordKey = `${y},${x}`;
+
+    // See if it's a mirror
+    if (level1[y][x] !== legend.mirror) {
+        return
+    };
+
     let currentAngle = mirrorOrientations[coordKey] || 0;
 
-    // Rotation 45°
+    // Rotation
     currentAngle = (currentAngle + 45) % 360;
-    mirrorOrientations[coordKey] = currentAngle;
 
-    // New rotation
-    mirrorElement.style.transform = `rotate(${currentAngle}deg)`;
+    // Save
+    mirrorOrientations[coordKey] = currentAngle;
 
     // Print laser light
     traceLaser(true);
@@ -198,10 +215,8 @@ function traceLaser() {
                 break;
 
             case legend.mirror:
-                // Change direction based on mirror angle
                 const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0;
 
-                // 0° or 180°: reflect horizontal
                 if (mirrorAngle === 0 || mirrorAngle === 180) {
                     laserDirection.dy = -laserDirection.dy;
                 } else {
@@ -257,5 +272,74 @@ traceLaser();
 
 // If level finishh -> call this function
 function finish() {
-    alert("Réussi !");
+    setTimeout(() => {
+        alert("Réussi !");
+    }, 100);
+}
+
+
+// Get player inputs arrows, qwerty and azerty
+
+document.addEventListener("keydown", (e) => {
+
+    // If level finish -> don't move
+    if (isLevelFinished === true) {
+        return;
+    }
+
+    switch (e.key) {
+        case "ArrowUp":
+            movePlayer(0, -1);
+            break;
+        case "w":
+            movePlayer(0, -1);
+            break;
+        case "z":
+            movePlayer(0, -1);
+            break;
+        case "ArrowDown":
+            movePlayer(0, 1);
+            break;
+        case "s":
+            movePlayer(0, 1);
+            break;
+        case "ArrowLeft":
+            movePlayer(-1, 0);
+            break;
+        case "a":
+            movePlayer(-1, 0);
+            break;
+        case "q":
+            movePlayer(-1, 0);
+            break;
+        case "ArrowRight":
+            movePlayer(1, 0);
+            break;
+        case "d":
+            movePlayer(1, 0);
+            break;
+        case "Enter":
+            rotateMirror(playerX, playerY);
+            break;
+    }
+});
+
+// Player move
+
+function movePlayer(x, y) {
+    const newX = playerX + x;
+    const newY = playerY + y;
+
+    if (newX < 0 || newX >= level1[0].length) {
+        return
+    };
+
+    if (newY < 0 || newY >= level1.length) {
+        return
+    };
+
+    playerX = newX;
+    playerY = newY;
+
+    loadGrid();
 }