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

@@ -0,0 +1,121 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body {
+    background: #1a1a1a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Arial', sans-serif;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 10px;
+    min-width: fit-content;
+    flex-shrink: 0;
+}
+
+.map {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    padding: 10px;
+    background: #222222;
+    border-radius: 5px;
+    width: fit-content;
+    height: fit-content;
+}
+
+.lign {
+    display: flex;
+    gap: 0px;
+    margin: 0;
+}
+
+.cell {
+    border: 1px solid #333333;
+    min-width: 60px;
+    width: auto;
+    min-height: 60px;
+    height: auto;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    position: relative;
+    background-color: #2a2a2a;
+}
+
+.empty {
+    background-color: #2a2a2a;
+    border-color: #333333;
+}
+
+.empty:hover {
+    background-color: #333333;
+}
+
+.laser {
+    background-color: #FFD700;
+    border-color: #FFA500;
+}
+
+.colored-laser {
+    background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%);
+    border-color: #FF1493;
+}
+
+.mirror {
+    background-color: #1a1a1a;
+    border-color: #444444;
+    position: relative;
+    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;
+}
+
+.target {
+    background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%);
+    border-color: #00FF00;
+}
+
+.light-laser {
+    margin-top: 14px;
+    height: 7px;
+    width: 35px;
+    background-color: red;
+    display: flex;
+}

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

@@ -0,0 +1,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)`;
+}

web/templates/view/game.html

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