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.

.gitignore

@@ -0,0 +1 @@
+Test

README.md

@@ -1,20 +1,23 @@
-règles : 
+Règles : 
-un rayon laser constant
+Un rayon laser constant
-un ou plusieurs spawn
+Un ou plusieurs laser
-laser non movibles, on/off
+Laser non movibles, on/off
-mirroirs orientables
+Mirroirs orientables
-prisme
+Prisme (dédouble le laser ou le renvoi selon l'angle)
-vitre colorée (rjb)
+Vitre colorée fixe ou placable par le joueur (r,j,b)
-bouton allumable par laser spécifique (interaction porte, mirroir, etc)
+Bouton allumable par clique souris (interaction porte, mirroir, etc)
+Bouton allumable par laser spécifique (interaction porte, mirroir, etc)
 
 
-rayon : 
+Rayon : 
-rouge - allumage bouton
+Blanc -> rebondis seulement sur les mirroirs et s'arrête contre les murs
-bleu - base
+Rouge -> Allumage boutons
-jaune - traverse tout
+Bleu -> Rebondis sur toutes les surfaces
+Jaune -> Traverse tout (mirroir compris)
 
 
-systeme de placement d'objet par grille
+Systeme de placement d'objet par grille
 
+Comptes utilisateur
 
-optionnel : timer, tableau de score, 
+Optionnel : timer, tableau de score, 

backend/object.rs

@@ -0,0 +1,14 @@
+struct Laser {
+    color : array,
+}
+
+struct Mirror {
+    color : array,
+    x : int,
+    y : int,
+}
+
+struct Spawn {
+    x : int,
+    y : int,
+}

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>