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/css/index.css

@@ -1,244 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
-
-* {
-    --clr-light-a0: #ffffff;
-    --clr-light-a10: #f4f4f4;
-    --clr-light-a20: #e0e0e0;
-    --clr-light-a30: #c2c2c2;
-    --clr-light-a40: #a3a3a3;
-    --clr-light-a50: #858585;
-    --clr-dark: #000000;
-
-    --clr-surface-a0: #FFF6E5;
-    --clr-surface-a10: #f7f7f7;
-    --clr-surface-a20: #DADEEF;
-    --clr-surface-a30: #e0e0e0;
-    --clr-surface-a40: #d1d1d1;
-    --clr-surface-a50: #c2c2c2;
-    box-sizing: border-box;
-}
-
-html {
-    font-size: 100%;
-}
-
-body {
-    background-color: var(--clr-surface-a0);
-    font-family: 'Inter', sans-serif;
-    margin: 0;
-    padding: 0;
-}
-
-.hero {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    gap: 3rem;
-    padding: 2rem clamp(1rem, 4vw, 3rem);
-    box-sizing: border-box;
-    background: var(--clr-surface-a10);
-}
-
-.adsbanner {
-    position: absolute;
-    top: 50%;
-    left: clamp(0.75rem, 3vw, 2.5rem);
-    transform: translateY(-50%);
-    z-index: 5;
-    width: clamp(160px, 22vw, 300px);
-    aspect-ratio: 9 / 16;
-    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
-}
-
-.adsbanner.is-hidden {
-    display: none;
-}
-
-.leftadsbanner {
-    position: absolute;
-    top: 50%;
-    right: clamp(0.75rem, 3vw, 2.5rem);
-    transform: translateY(-50%);
-    z-index: 5;
-    width: clamp(160px, 22vw, 300px);
-    aspect-ratio: 9 / 16;
-}
-
-.hero-content {
-    max-width: 90vw;
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--clr-surface-a20);
-    border-radius: 1.5rem;
-    padding: 2rem clamp(2rem, 8vw, 10rem);
-    box-shadow: 0px 0px 27px 14px rgba(0,0,0,0.2);
-}
-
-.hero-content-text {
-    width: 100%;
-}
-
-.hero h1 {
-    color: var(--clr-dark);
-    font-size: clamp(2.5rem, 7vw, 4rem);
-    margin: 0 0 1rem 0;
-    line-height: 1.1;
-    word-break: break-word;
-    text-shadow: none;
-}
-
-.hero-content button {
-    margin-top: 2rem;
-    align-self: center;
-}
-
-.hero img {
-    max-width: 400px;
-    width: 35vw;
-    min-width: 180px;
-    height: auto;
-    border-radius: 1.5rem;
-    box-shadow: 0 6px 32px rgba(0,0,0,.10);
-    flex-shrink: 1;
-    background: var(--clr-surface-a0);
-}
-
-/* --- RESPONSIVE HERO-PLAY-BUTTON FIXES --- */
-
-@media (max-width: 900px) {
-    .hero {
-        flex-direction: column;
-        text-align: center;
-        gap: 2rem;
-        padding: 1.5rem;
-    }
-    .hero-content {
-        max-width: 100vw;
-        text-align: center;
-        padding: 2rem;
-    }
-    .hero-content {
-        align-items: center;
-    }
-    .adsbanner {
-        left: 1rem;
-        width: clamp(130px, 24vw, 220px);
-    }
-    .leftadsbanner {
-        right: 1rem;
-        width: clamp(130px, 24vw, 220px);
-    }
-    .hero img {
-        max-width: 70vw;
-        min-width: 0;
-    }
-    .hero-play-button {
-        padding: 1rem 4vw;
-        font-size: 1.1rem;
-        min-width: min(220px, 70vw);
-        max-width: 90vw;
-    }
-    .hero-play-button svg {
-        width: 2em;
-        height: 1em;
-        min-width: 1.25em;
-        min-height: 1em;
-        margin-right: 0.5em;
-        flex-shrink: 0;
-    }
-}
-
-@media (max-width: 600px) {
-    .hero {
-        min-height: 70vh;
-        padding: 0.5rem;
-    }
-    .hero-content {
-        padding: 1.5rem;
-    }
-    .hero h1 {
-        font-size: clamp(2rem, 9vw, 2.5rem);
-    }
-    .hero p {
-        font-size: clamp(1rem, 5vw, 1.15rem);
-    }
-    .adsbanner {
-        top: 1rem;
-        left: 0.75rem;
-        transform: none;
-        width: clamp(110px, 30vw, 170px);
-        border-radius: 1rem;
-    }
-    .leftadsbanner {
-        right: 0.75rem;
-        width: clamp(110px, 30vw, 170px);
-        border-radius: 1rem;
-    }
-    .hero img {
-        max-width: 100%;
-        border-radius: 1rem;
-        box-shadow: 0 2px 12px rgba(0,0,0,.07);
-    }
-    .hero-play-button {
-        padding: 0.85rem 3vw;
-        min-width: min(120px, 92vw);
-        max-width: 96vw;
-        font-size: 1rem;
-    }
-    .hero-play-button svg {
-        width: 1.3em;
-        height: 1em;
-        min-width: 1em;
-        min-height: 1em;
-        margin-right: 0.45em;
-        flex-shrink: 0;
-    }
-}
-
-.hero-play-button {
-  font-family: inherit;
-  font-size: 20px;
-  background: #8ea3fd;
-  color: white;
-  padding: 1rem 10rem;
-  display: flex;
-  align-items: center;
-  justify-content: center; /* Ensure SVG/button content is horizontally centered */
-  border: none;
-  border-radius: 50px;
-  overflow: hidden;
-  transition: all 0.2s;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(30, 80, 255, 0.10);
-  /* Button grows/shrinks with container at low widths */
-  width: 100%;
-  max-width: 500px;
-  min-width: 180px;
-  box-sizing: border-box;
-}
-.hero-play-button:hover {
-  background: #7286e0;
-  transform: translateY(-2px);
-}
-
-.hero-play-button:active {
-  transform: scale(0.95);
-}
-
-.hero-play-button svg {
-  width: 2em;
-  height: 1em;
-  min-width: 1.2em;
-  min-height: 1em;
-  margin-right: 0.6em;
-  color: var(--clr-surface-a0);
-  flex-shrink: 0;
-  flex-grow: 0;
-  display: inline-block;
-  vertical-align: middle;
-}

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>