First version of button for mirrors

Add a small utility function in web/assets/js/index.js that increments an element's CSS rotation by 45 degrees. The function reads the element's inline transform (handling an empty value), parses the current rotation angle modulo 360, and sets the new rotate(angle+45) value.

web/assets/css/game.css

@@ -5,8 +5,8 @@
 }
 
 html, body {
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
 }
 
@@ -48,8 +48,10 @@ main {
 
 .cell {
     border: 1px solid #333333;
-    width: 35px;
-    height: 35px;
+    min-width: 60px;
+    width: auto;
+    min-height: 60px;
+    height: auto;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
@@ -85,30 +87,11 @@ main {
     overflow: hidden;
 }
 
-.mirror::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 60%;
-    background: linear-gradient(45deg, transparent 48%, #CCCCCC 48%, #CCCCCC 52%, transparent 52%);
-    top: 50%;
-    transform: translateY(-50%);
-}
-
 .door {
     background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
     border-color: #654321;
 }
 
-.door::after {
-    content: '';
-    position: absolute;
-    width: 60%;
-    height: 60%;
-    border: 2px solid #FFD700;
-    border-radius: 3px;
-}
-
 .button {
     background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
     border-color: #990000;

web/assets/js/game.js

@@ -0,0 +1,104 @@
+// Legend of grid case
+
+const legend = {
+    empty: 0,
+    laser: 1,
+    coloredLaser: 2,
+    mirror: 3,
+    door:4,
+    button: 5,
+    wall: 6,
+    demiWall: 7,
+    target: 8,
+    ligthLaser: 9,
+}
+
+// Grid test
+
+let grid = [
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 3, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0],
+    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+]
+
+// Function to print grid
+let mirrorCoordinates = [];
+
+function loadGrid () {
+    const mapDiv = document.getElementById("map"); // Div with map in DOM
+    mapDiv.innerHTML = "";
+
+    for (let y = 0; y < grid.length; y++) {
+        const lign = document.createElement("div");
+        lign.classList.add("lign");
+
+        for (let x = 0; x < grid[y].length; x++) {
+            const cell = document.createElement("div");
+            cell.classList.add("cell");
+
+            switch (grid[y][x]) {
+                case legend.empty:
+                    cell.classList.add("empty");
+                    break;
+                case legend.laser:
+                    cell.classList.add("laser");
+                    break;
+                case legend.coloredLaser:
+                    cell.classList.add("colored-laser");
+                    break;
+                case legend.mirror:
+                    const btnMirror = document.createElement("button");
+                    btnMirror.classList.add("btn-mirror");
+                    btnMirror.addEventListener("click", () => rotateMirror(btnMirror));
+                    btnMirror.style.transform = "rotate(0deg)";
+                    btnMirror.style.width = "100%";
+                    cell.appendChild(btnMirror);
+                    cell.classList.add("mirror");
+                    break;
+                case legend.door:
+                    cell.classList.add("door");
+                    break;
+                case legend.button:
+                    cell.classList.add("button");
+                    break;
+                case legend.wall:
+                    cell.classList.add("wall");
+                    break;
+                case legend.demiWall:
+                    cell.classList.add("demi-wall");
+                    break;
+                case legend.target:
+                    cell.classList.add("target");
+                    break;
+                case legend.ligthLaser:
+                    cell.classList.add("light-laser");
+                    break;
+            }
+
+            lign.appendChild(cell);          
+        }
+
+        mapDiv.appendChild(lign);         
+    }
+}
+
+loadGrid();
+
+// Function to rotate mirror
+
+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)`;
+}

web/assets/js/index.js

@@ -1,85 +1,9 @@
-// Legend of grid case
-
-const legend = {
-    empty: 0,
-    laser: 1,
-    coloredLaser: 2,
-    mirror: 3,
-    door:4,
-    button: 5,
-    wall: 6,
-    demiWall: 7,
-    target: 8,
-    ligthLaser: 9,
+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)`;
 }
-
-// Grid test
-
-let grid = [
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-]
-
-// Function to print grid
-
-function loadGrid () {
-    const mapDiv = document.getElementById("map"); // Div with map in DOM
-    mapDiv.innerHTML = "";
-
-    for (let y = 0; y < grid.length; y++) {
-        const lign = document.createElement("div");
-        lign.classList.add("lign");
-
-        for (let x = 0; x < grid[y].length; x++) {
-            const cell = document.createElement("div");
-            cell.classList.add("cell");
-
-            switch (grid[y][x]) {
-                case legend.empty:
-                    cell.classList.add("empty");
-                    break;
-                case legend.laser:
-                    cell.classList.add("laser");
-                    break;
-                case legend.coloredLaser:
-                    cell.classList.add("colored-laser");
-                    break;
-                case legend.mirror:
-                    cell.classList.add("mirror");
-                    break;
-                case legend.door:
-                    cell.classList.add("door");
-                    break;
-                case legend.button:
-                    cell.classList.add("button");
-                    break;
-                case legend.wall:
-                    cell.classList.add("wall");
-                    break;
-                case legend.demiWall:
-                    cell.classList.add("demi-wall");
-                    break;
-                case legend.target:
-                    cell.classList.add("target");
-                    break;
-                case legend.ligthLaser:
-                    cell.classList.add("light-laser");
-                    break;
-            }
-
-            lign.appendChild(cell);          
-        }
-
-        mapDiv.appendChild(lign);         
-    }
-}
-
-loadGrid();

web/templates/view/game.html

@@ -3,12 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../../assets/css/index.css">
+    <link rel="stylesheet" href="../../assets/css/game.css">
     <title>Game</title>
 </head>
 <body>
     <div id="map"></div>
 
-    <script src="../../assets/js/index.js" defer></script>
+    <script src="../../assets/js/game.js" defer></script>
 </body>
 </html>