Fix textures/button/lasers & add ads

Resolution merge conflicts
Map modified + sprites
2026-03-31 11:52:30 +02:00 · 2026-03-31 11:32:40 +02:00 · 2026-03-31 10:57:19 +02:00 · 2026-03-31 09:46:29 +02:00 · 2026-03-31 09:40:25 +02:00 · 2026-03-31 09:32:59 +02:00
47 changed files with 1784 additions and 272 deletions
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -0,0 +1 @@
+/target
--- a/web/assets/css/game.css
+++ b/web/assets/css/game.css
@@ -0,0 +1,323 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body {
+    background: #f7f7f7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Arial, sans-serif;
+    user-select: none;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 10px;
+    min-width: fit-content;
+    flex-shrink: 0;
+    gap: 16px;
+}
+
+.game-layout {
+    width: min(95vw, 1000px);
+}
+
+.toolbox {
+    width: 100%;
+    background: #dfe5f8;
+    border-radius: 10px;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toolbox h2 {
+    font-size: 1rem;
+}
+
+.toolbox p {
+    font-size: 0.9rem;
+    color: #334;
+}
+
+.glass-palette {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.map {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    background: #dadeef;
+    border-radius: 5px;
+}
+
+.lign {
+    display: flex;
+}
+
+.cell {
+    width: clamp(28px, 5.5vmin, 60px);
+    height: clamp(28px, 5.5vmin, 60px);
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background-color: #2a2a2a;
+    user-select: none;
+    overflow: hidden;
+}
+
+.cell.can-drop {
+    outline: 2px dashed rgba(0, 0, 0, 0.2);
+}
+
+.empty {
+    background-color: #dadeef;
+}
+
+.empty:hover {
+    background-color: #333333;
+}
+
+.laser {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Laser.svg");
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+}
+
+.colored-laser {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Prisme.svg");
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.mirror {
+    background-color: #DADEEF;
+    position: relative;
+    overflow: hidden;
+}
+
+.wall {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Tuile.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.door {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/WoodenDoor.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: end;
+}
+
+.door-open {
+    background-image: url("../img/tiles/WoodenDoor_openned.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: end;
+}
+
+.button {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/ButtonComplete.svg"), url("../img/tiles/Tuile.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.button-2 {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/ButtonQuarter.svg"), url("../img/tiles/Tuile.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.button-active {
+    opacity: 0.7;
+}
+
+.target {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/Trigger.svg");
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.demi-wall-corner-up-left {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/TopLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.demi-wall-corner-up-right {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/TopRight.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.demi-wall-corner-down-left {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/BottomLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.demi-wall-corner-down-right {
+    background-color: #DADEEF;
+    background-image: url("../img/tiles/BottomRight.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.laser-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.laser-horizontal {
+    --laser-color: red;
+    background: linear-gradient(to bottom, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
+}
+
+.laser-vertical {
+    --laser-color: red;
+    background: linear-gradient(to right, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
+}
+
+.laser-diagonal-down {
+    --laser-color: red;
+    background: linear-gradient(45deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
+}
+
+.laser-diagonal-up {
+    --laser-color: red;
+    background: linear-gradient(135deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
+}
+
+.laser-color-white {
+    --laser-color: #f8f8f8;
+}
+
+.laser-color-red {
+    --laser-color: #ff3b30;
+}
+
+.laser-color-blue {
+    --laser-color: #2d7ff9;
+}
+
+.laser-color-yellow {
+    --laser-color: #ffd400;
+}
+
+.btn-mirror {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mirror-img {
+    width: 80%;
+    height: 80%;
+    object-fit: contain;
+    pointer-events: none;
+}
+
+.glass-item {
+    width: 54px;
+    height: 54px;
+    border: none;
+    border-radius: 10px;
+    cursor: grab;
+    position: relative;
+    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+    user-select: none;
+    color: #223;
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+
+.glass-item::after,
+.cell-glass::after {
+    content: "";
+    position: absolute;
+    inset: 10px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.glass-red {
+    background: rgba(255, 59, 48, 0.85);
+}
+
+.glass-blue {
+    background: rgba(45, 127, 249, 0.85);
+}
+
+.glass-yellow {
+    background: rgba(255, 212, 0, 0.9);
+}
+
+.cell-glass {
+    position: absolute;
+    inset: 5px;
+    border-radius: 8px;
+    opacity: 0.9;
+    pointer-events: none;
+    z-index: 4;
+}
+
+@media (max-width: 600px) {
+    .map {
+        padding: 5px;
+    }
+
+    main {
+        padding: 8px;
+    }
+}
--- a/web/assets/css/index.css
+++ b/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;
-}
--- a/web/assets/img/img_test_main_menu.png
+++ b/web/assets/img/img_test_main_menu.png
--- a/web/assets/img/tiles/BlueMirror.svg
+++ b/web/assets/img/tiles/BlueMirror.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_4)"/>
+<defs>
+<linearGradient id="paint0_linear_25_4" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3C62E2" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#00137C" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomLeft-1.svg
+++ b/web/assets/img/tiles/BottomLeft-1.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 49V1.61816L95.7637 49L1 49Z" fill="url(#paint0_linear_19_240)" stroke="url(#paint1_linear_19_240)" stroke-width="2"/>
+<circle cx="5.5" cy="44.5" r="1.5" transform="rotate(-180 5.5 44.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="44.5" r="1" transform="rotate(-180 5.5 44.5)" fill="#898989"/>
+<circle cx="4.5" cy="8.5" r="1.5" transform="rotate(-180 4.5 8.5)" fill="#4A4A4A"/>
+<circle cx="4.5" cy="8.5" r="1" transform="rotate(-180 4.5 8.5)" fill="#898989"/>
+<circle cx="77.5" cy="44.5" r="1.5" transform="rotate(-180 77.5 44.5)" fill="#4A4A4A"/>
+<circle cx="77.5" cy="44.5" r="1" transform="rotate(-180 77.5 44.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_240" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_240" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomLeft-2.svg
+++ b/web/assets/img/tiles/BottomLeft-2.svg
@@ -0,0 +1,19 @@
+<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49 99L1.61816 99L49 4.23633L49 99Z" fill="url(#paint0_linear_19_286)" stroke="url(#paint1_linear_19_286)" stroke-width="2"/>
+<circle cx="44.5" cy="94.5" r="1.5" transform="rotate(90 44.5 94.5)" fill="#4A4A4A"/>
+<circle cx="44.5" cy="94.5" r="1" transform="rotate(90 44.5 94.5)" fill="#898989"/>
+<circle cx="8.5" cy="95.5" r="1.5" transform="rotate(90 8.5 95.5)" fill="#4A4A4A"/>
+<circle cx="8.5" cy="95.5" r="1" transform="rotate(90 8.5 95.5)" fill="#898989"/>
+<circle cx="44.5" cy="22.5" r="1.5" transform="rotate(90 44.5 22.5)" fill="#4A4A4A"/>
+<circle cx="44.5" cy="22.5" r="1" transform="rotate(90 44.5 22.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_286" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_286" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomLeft.svg
+++ b/web/assets/img/tiles/BottomLeft.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 99L1 2.41406L97.5859 99L1 99Z" fill="url(#paint0_linear_17_89)" stroke="url(#paint1_linear_17_89)" stroke-width="2"/>
+<circle cx="5.5" cy="94.5" r="1.5" transform="rotate(-180 5.5 94.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" transform="rotate(-180 5.5 94.5)" fill="#898989"/>
+<circle cx="5.5" cy="13.5" r="1.5" transform="rotate(-180 5.5 13.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="13.5" r="1" transform="rotate(-180 5.5 13.5)" fill="#898989"/>
+<circle cx="86.5" cy="94.5" r="1.5" transform="rotate(-180 86.5 94.5)" fill="#4A4A4A"/>
+<circle cx="86.5" cy="94.5" r="1" transform="rotate(-180 86.5 94.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_17_89" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_17_89" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomRight-1.svg
+++ b/web/assets/img/tiles/BottomRight-1.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99 49L4.23633 49L99 1.61816V49Z" fill="url(#paint0_linear_19_273)" stroke="url(#paint1_linear_19_273)" stroke-width="2"/>
+<circle cx="94.5" cy="44.5" r="1.5" transform="rotate(90 94.5 44.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="44.5" r="1" transform="rotate(90 94.5 44.5)" fill="#898989"/>
+<circle cx="22.5" cy="44.5" r="1.5" transform="rotate(90 22.5 44.5)" fill="#4A4A4A"/>
+<circle cx="22.5" cy="44.5" r="1" transform="rotate(90 22.5 44.5)" fill="#898989"/>
+<circle cx="94.5" cy="9.5" r="1.5" transform="rotate(90 94.5 9.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="9.5" r="1" transform="rotate(90 94.5 9.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_273" x1="8.9407e-06" y1="1.49012e-06" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_273" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomRight-2.svg
+++ b/web/assets/img/tiles/BottomRight-2.svg
@@ -0,0 +1,19 @@
+<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49 1V95.7637L1.61818 1H49Z" fill="url(#paint0_linear_19_319)" stroke="url(#paint1_linear_19_319)" stroke-width="2"/>
+<circle cx="44.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="44.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="44.5" cy="77.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="44.5" cy="77.5" r="1" fill="#898989"/>
+<circle cx="9.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="9.5" cy="5.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_319" x1="1.14441e-05" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_319" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/BottomRight.svg
+++ b/web/assets/img/tiles/BottomRight.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99 99H2.41406L99 2.41406V99Z" fill="url(#paint0_linear_19_190)" stroke="url(#paint1_linear_19_190)" stroke-width="2"/>
+<circle cx="94.5" cy="94.5" r="1.5" transform="rotate(90 94.5 94.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="94.5" r="1" transform="rotate(90 94.5 94.5)" fill="#898989"/>
+<circle cx="13.5" cy="94.5" r="1.5" transform="rotate(90 13.5 94.5)" fill="#4A4A4A"/>
+<circle cx="13.5" cy="94.5" r="1" transform="rotate(90 13.5 94.5)" fill="#898989"/>
+<circle cx="94.5" cy="13.5" r="1.5" transform="rotate(90 94.5 13.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="13.5" r="1" transform="rotate(90 94.5 13.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_190" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_190" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/ButtonComplete.svg
+++ b/web/assets/img/tiles/ButtonComplete.svg
@@ -0,0 +1,27 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 1H99V99H50C22.938 99 1 77.062 1 50C1 22.938 22.938 1 50 1Z" fill="url(#paint0_linear_19_364)" stroke="url(#paint1_linear_19_364)" stroke-width="2"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="50" cy="50" r="30" fill="url(#paint2_linear_19_364)"/>
+<circle cx="50" cy="50" r="25" fill="url(#paint3_linear_19_364)"/>
+<defs>
+<linearGradient id="paint0_linear_19_364" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_364" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+<linearGradient id="paint2_linear_19_364" x1="20" y1="80" x2="80" y2="20" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+<linearGradient id="paint3_linear_19_364" x1="25" y1="25" x2="75" y2="75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/ButtonProfile.svg
+++ b/web/assets/img/tiles/ButtonProfile.svg
@@ -0,0 +1,24 @@
+<svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="20" width="100" height="10" fill="url(#paint0_linear_19_205)"/>
+<path d="M80 10L100 20H0L20 10H80Z" fill="url(#paint1_linear_19_205)"/>
+<path d="M25 5H75V10H25V5Z" fill="url(#paint2_linear_19_205)"/>
+<path d="M70 0L75 5H25L30 0H70Z" fill="url(#paint3_linear_19_205)"/>
+<defs>
+<linearGradient id="paint0_linear_19_205" x1="0" y1="25" x2="100" y2="25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9"/>
+<stop offset="1" stop-color="#737373"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_205" x1="20" y1="10" x2="80" y2="10" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9"/>
+<stop offset="1" stop-color="#737373"/>
+</linearGradient>
+<linearGradient id="paint2_linear_19_205" x1="25" y1="7.5" x2="75" y2="7.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+<linearGradient id="paint3_linear_19_205" x1="30" y1="-5.5879e-10" x2="70" y2="-8.54951e-08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/ButtonQuarter.svg
+++ b/web/assets/img/tiles/ButtonQuarter.svg
@@ -0,0 +1,29 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M79 1V78.9932C36.1632 78.4618 1.53823 43.8368 1.00684 1H79Z" fill="url(#paint0_linear_21_561)" stroke="url(#paint1_linear_21_561)" stroke-width="2"/>
+<circle cx="74.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="74.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="6.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="6.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="74.5" cy="73.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="74.5" cy="73.5" r="1" fill="#898989"/>
+<circle cx="46" cy="34" r="20" fill="url(#paint2_linear_21_561)"/>
+<circle cx="46" cy="34" r="16.6667" fill="url(#paint3_linear_21_561)"/>
+<defs>
+<linearGradient id="paint0_linear_21_561" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_561" x1="80" y1="80" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+<linearGradient id="paint2_linear_21_561" x1="26" y1="54" x2="66" y2="14" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+<linearGradient id="paint3_linear_21_561" x1="29.3333" y1="17.3333" x2="62.6667" y2="50.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F88484"/>
+<stop offset="1" stop-color="#B03232"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableBottomLeft.svg
+++ b/web/assets/img/tiles/CableBottomLeft.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_417)" stroke="url(#paint1_linear_21_417)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path d="M58 100H42V58H0V42H58V100Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_417" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_417" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableBottomRight.svg
+++ b/web/assets/img/tiles/CableBottomRight.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_385)" stroke="url(#paint1_linear_21_385)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path d="M100 42V58H58V100H42V42H100Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_385" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_385" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableH.svg
+++ b/web/assets/img/tiles/CableH.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_545)" stroke="url(#paint1_linear_21_545)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<rect y="42" width="100" height="16" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_545" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_545" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableTopLeft.svg
+++ b/web/assets/img/tiles/CableTopLeft.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_449)" stroke="url(#paint1_linear_21_449)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path d="M0 58V42L42 42L42 0L58 0L58 58L0 58Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_449" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_449" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableTopRight.svg
+++ b/web/assets/img/tiles/CableTopRight.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_433)" stroke="url(#paint1_linear_21_433)" stroke-width="2"/>
+<circle cx="5.5" cy="4.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="4.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="93.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="93.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="4.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="4.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="93.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="93.5" r="1" fill="#898989"/>
+<path d="M42 0H58L58 42H100V58L42 58L42 0Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_433" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_433" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/CableV.svg
+++ b/web/assets/img/tiles/CableV.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_529)" stroke="url(#paint1_linear_21_529)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<rect x="42" width="16" height="100" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_529" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_529" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Capteur-1.svg
+++ b/web/assets/img/tiles/Capteur-1.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_23_646)" stroke="url(#paint1_linear_23_646)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path d="M30 42H100V58H30L0 90V10L30 42Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_23_646" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23_646" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Capteur-2.svg
+++ b/web/assets/img/tiles/Capteur-2.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_23_626)" stroke="url(#paint1_linear_23_626)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path d="M58 100H42V58H30L0 90V10L30 42H58V100Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_23_626" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23_626" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Capteur.svg
+++ b/web/assets/img/tiles/Capteur.svg
@@ -0,0 +1,22 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_599)" stroke="url(#paint1_linear_21_599)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 42H42V0H58V58H30L0 90V10L30 42Z" fill="#FF8282"/>
+<defs>
+<linearGradient id="paint0_linear_21_599" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_21_599" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/HorizontaleSemi.svg
+++ b/web/assets/img/tiles/HorizontaleSemi.svg
@@ -0,0 +1,21 @@
+<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="48" fill="url(#paint0_linear_19_332)" stroke="url(#paint1_linear_19_332)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="44.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="44.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="44.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="44.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_332" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_332" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Laser.svg
+++ b/web/assets/img/tiles/Laser.svg
@@ -0,0 +1,44 @@
+<svg width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="172" y="90" width="80" height="30" transform="rotate(-90 172 90)" fill="url(#paint0_linear_17_26)"/>
+<rect x="202" y="100" width="100" height="98" transform="rotate(-90 202 100)" fill="url(#paint1_linear_17_26)"/>
+<rect x="122" y="100" width="100" height="50" transform="rotate(-90 122 100)" fill="url(#paint2_linear_17_26)"/>
+<rect x="92" y="90" width="80" height="30" transform="rotate(-90 92 90)" fill="url(#paint3_linear_17_26)"/>
+<rect x="42" y="100" width="100" height="50" transform="rotate(-90 42 100)" fill="url(#paint4_linear_17_26)"/>
+<rect x="22" y="90" width="80" height="20" transform="rotate(-90 22 90)" fill="url(#paint5_linear_17_26)"/>
+<path d="M2 30L22 10L22 90L2 70L2 30Z" fill="url(#paint6_linear_17_26)"/>
+<rect y="60" width="20" height="2" transform="rotate(-90 0 60)" fill="url(#paint7_linear_17_26)"/>
+<defs>
+<linearGradient id="paint0_linear_17_26" x1="172" y1="105" x2="252" y2="105" gradientUnits="userSpaceOnUse">
+<stop offset="0.177885" stop-color="#484848"/>
+<stop offset="0.725962" stop-color="#AEAEAE"/>
+</linearGradient>
+<linearGradient id="paint1_linear_17_26" x1="202" y1="149" x2="302" y2="149" gradientUnits="userSpaceOnUse">
+<stop offset="0.125" stop-color="#2D2D2D"/>
+<stop offset="0.745192" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint2_linear_17_26" x1="122" y1="125" x2="222" y2="125" gradientUnits="userSpaceOnUse">
+<stop offset="0.125" stop-color="#2D2D2D"/>
+<stop offset="0.745192" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint3_linear_17_26" x1="92" y1="105" x2="172" y2="105" gradientUnits="userSpaceOnUse">
+<stop offset="0.177885" stop-color="#484848"/>
+<stop offset="0.725962" stop-color="#AEAEAE"/>
+</linearGradient>
+<linearGradient id="paint4_linear_17_26" x1="42" y1="125" x2="142" y2="125" gradientUnits="userSpaceOnUse">
+<stop offset="0.125" stop-color="#2D2D2D"/>
+<stop offset="0.745192" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint5_linear_17_26" x1="22" y1="100" x2="102" y2="100" gradientUnits="userSpaceOnUse">
+<stop offset="0.177885" stop-color="#484848"/>
+<stop offset="0.725962" stop-color="#AEAEAE"/>
+</linearGradient>
+<linearGradient id="paint6_linear_17_26" x1="2" y1="70" x2="2" y2="30" gradientUnits="userSpaceOnUse">
+<stop offset="0.177885" stop-color="#484848"/>
+<stop offset="1" stop-color="#AEAEAE"/>
+</linearGradient>
+<linearGradient id="paint7_linear_17_26" x1="-42.5" y1="61" x2="61" y2="61" gradientUnits="userSpaceOnUse">
+<stop offset="0.225962" stop-color="#484848"/>
+<stop offset="1" stop-color="#AEAEAE"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/MetalDoor.svg
+++ b/web/assets/img/tiles/MetalDoor.svg
@@ -0,0 +1,46 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="88" height="98" fill="url(#paint0_linear_29_15)" stroke="url(#paint1_linear_29_15)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="81.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="81.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="81.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="81.5" cy="94.5" r="1" fill="#898989"/>
+<rect x="90" width="10" height="100" fill="url(#paint2_linear_29_15)"/>
+<rect x="85" y="4" width="8" height="4" fill="url(#paint3_linear_29_15)"/>
+<rect x="85" y="92" width="8" height="4" fill="url(#paint4_linear_29_15)"/>
+<rect x="85" y="64" width="8" height="4" fill="url(#paint5_linear_29_15)"/>
+<rect x="85" y="32" width="8" height="4" fill="url(#paint6_linear_29_15)"/>
+<defs>
+<linearGradient id="paint0_linear_29_15" x1="0" y1="0" x2="99.4475" y2="89.5028" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_29_15" x1="90" y1="100" x2="-9.44751" y2="10.4972" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+<linearGradient id="paint2_linear_29_15" x1="100" y1="50" x2="90" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+<linearGradient id="paint3_linear_29_15" x1="93" y1="6" x2="85" y2="6" gradientUnits="userSpaceOnUse">
+<stop stop-color="#474747"/>
+<stop offset="1" stop-color="#ADADAD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_29_15" x1="93" y1="94" x2="85" y2="94" gradientUnits="userSpaceOnUse">
+<stop stop-color="#474747"/>
+<stop offset="1" stop-color="#ADADAD"/>
+</linearGradient>
+<linearGradient id="paint5_linear_29_15" x1="93" y1="66" x2="85" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#474747"/>
+<stop offset="1" stop-color="#ADADAD"/>
+</linearGradient>
+<linearGradient id="paint6_linear_29_15" x1="93" y1="34" x2="85" y2="34" gradientUnits="userSpaceOnUse">
+<stop stop-color="#474747"/>
+<stop offset="1" stop-color="#ADADAD"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/MetalMirror.svg
+++ b/web/assets/img/tiles/MetalMirror.svg
@@ -0,0 +1,15 @@
+<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_29_61)" stroke="url(#paint1_linear_29_61)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_29_61" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#84A3B3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_29_61" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B9B9B9"/>
+<stop offset="0.336163" stop-color="#6E6E6E"/>
+<stop offset="0.609062" stop-color="#B9B9B9"/>
+<stop offset="1" stop-color="#6E6E6E"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Mirror.svg
+++ b/web/assets/img/tiles/Mirror.svg
@@ -0,0 +1,15 @@
+<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_4_13)" stroke="url(#paint1_linear_4_13)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_4_13" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#84A3B3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4_13" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#603C18"/>
+<stop offset="0.336163" stop-color="#885B2E"/>
+<stop offset="0.609062" stop-color="#603C18"/>
+<stop offset="1" stop-color="#885B2E"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Prisme.svg
+++ b/web/assets/img/tiles/Prisme.svg
@@ -0,0 +1,3 @@
+<svg width="87" height="75" viewBox="0 0 87 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.3013 0L86.6025 75H0L43.3013 0Z" fill="#D9D9D9" fill-opacity="0.4"/>
+</svg>
--- a/web/assets/img/tiles/RedMirror.svg
+++ b/web/assets/img/tiles/RedMirror.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_10)"/>
+<defs>
+<linearGradient id="paint0_linear_25_10" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E23C3C" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#7C0000" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopLeft-1.svg
+++ b/web/assets/img/tiles/TopLeft-1.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L95.7637 1L1 48.3818L1 1Z" fill="url(#paint0_linear_19_251)" stroke="url(#paint1_linear_19_251)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
+<circle cx="76.5" cy="5.5" r="1.5" transform="rotate(-90 76.5 5.5)" fill="#4A4A4A"/>
+<circle cx="76.5" cy="5.5" r="1" transform="rotate(-90 76.5 5.5)" fill="#898989"/>
+<circle cx="5.5" cy="40.5" r="1.5" transform="rotate(-90 5.5 40.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="40.5" r="1" transform="rotate(-90 5.5 40.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_251" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_251" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopLeft-2.svg
+++ b/web/assets/img/tiles/TopLeft-2.svg
@@ -0,0 +1,19 @@
+<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 99L1 4.23633L48.3818 99H1Z" fill="url(#paint0_linear_19_297)" stroke="url(#paint1_linear_19_297)" stroke-width="2"/>
+<circle cx="5.5" cy="94.5" r="1.5" transform="rotate(-180 5.5 94.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" transform="rotate(-180 5.5 94.5)" fill="#898989"/>
+<circle cx="5.5" cy="23.5" r="1.5" transform="rotate(-180 5.5 23.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="23.5" r="1" transform="rotate(-180 5.5 23.5)" fill="#898989"/>
+<circle cx="40.5" cy="94.5" r="1.5" transform="rotate(-180 40.5 94.5)" fill="#4A4A4A"/>
+<circle cx="40.5" cy="94.5" r="1" transform="rotate(-180 40.5 94.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_297" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_297" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopLeft.svg
+++ b/web/assets/img/tiles/TopLeft.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H97.5859L1 97.5859L1 1Z" fill="url(#paint0_linear_19_166)" stroke="url(#paint1_linear_19_166)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
+<circle cx="86.5" cy="5.5" r="1.5" transform="rotate(-90 86.5 5.5)" fill="#4A4A4A"/>
+<circle cx="86.5" cy="5.5" r="1" transform="rotate(-90 86.5 5.5)" fill="#898989"/>
+<circle cx="5.5" cy="86.5" r="1.5" transform="rotate(-90 5.5 86.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="86.5" r="1" transform="rotate(-90 5.5 86.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_166" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_166" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopRight-1.svg
+++ b/web/assets/img/tiles/TopRight-1.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99 1V48.3818L4.23633 1H99Z" fill="url(#paint0_linear_19_262)" stroke="url(#paint1_linear_19_262)" stroke-width="2"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="40.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="40.5" r="1" fill="#898989"/>
+<circle cx="22.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="22.5" cy="5.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_262" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_262" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopRight-2.svg
+++ b/web/assets/img/tiles/TopRight-2.svg
@@ -0,0 +1,19 @@
+<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1H48.3818L1 95.7637L1 1Z" fill="url(#paint0_linear_19_308)" stroke="url(#paint1_linear_19_308)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
+<circle cx="40.5" cy="5.5" r="1.5" transform="rotate(-90 40.5 5.5)" fill="#4A4A4A"/>
+<circle cx="40.5" cy="5.5" r="1" transform="rotate(-90 40.5 5.5)" fill="#898989"/>
+<circle cx="5.5" cy="77.5" r="1.5" transform="rotate(-90 5.5 77.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="77.5" r="1" transform="rotate(-90 5.5 77.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_308" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_308" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/TopRight.svg
+++ b/web/assets/img/tiles/TopRight.svg
@@ -0,0 +1,19 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99 1V97.5859L2.41406 1H99Z" fill="url(#paint0_linear_19_178)" stroke="url(#paint1_linear_19_178)" stroke-width="2"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="86.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="86.5" r="1" fill="#898989"/>
+<circle cx="13.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="13.5" cy="5.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_178" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_178" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Trigger.svg
+++ b/web/assets/img/tiles/Trigger.svg
@@ -0,0 +1,24 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50" cy="50" r="50" fill="url(#paint0_linear_17_52)"/>
+<circle cx="50" cy="50" r="40" fill="url(#paint1_linear_17_52)"/>
+<circle cx="50" cy="50" r="25" fill="url(#paint2_linear_17_52)"/>
+<circle cx="50" cy="50" r="10" fill="url(#paint3_linear_17_52)"/>
+<defs>
+<linearGradient id="paint0_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCC565"/>
+<stop offset="1" stop-color="#857F21"/>
+</linearGradient>
+<linearGradient id="paint1_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#65B5CC"/>
+<stop offset="1" stop-color="#216E85"/>
+</linearGradient>
+<linearGradient id="paint2_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCC565"/>
+<stop offset="1" stop-color="#857F21"/>
+</linearGradient>
+<linearGradient id="paint3_linear_17_52" x1="0" y1="-2.98023e-06" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CC6565"/>
+<stop offset="1" stop-color="#852121"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/Tuile.svg
+++ b/web/assets/img/tiles/Tuile.svg
@@ -0,0 +1,21 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_17_88)" stroke="url(#paint1_linear_17_88)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_17_88" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_17_88" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/VerticaleSemi.svg
+++ b/web/assets/img/tiles/VerticaleSemi.svg
@@ -0,0 +1,21 @@
+<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="48" height="98" fill="url(#paint0_linear_19_348)" stroke="url(#paint1_linear_19_348)" stroke-width="2"/>
+<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
+<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
+<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
+<circle cx="44.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
+<circle cx="44.5" cy="5.5" r="1" fill="#898989"/>
+<circle cx="44.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
+<circle cx="44.5" cy="94.5" r="1" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_19_348" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_19_348" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/WoodenDoor.svg
+++ b/web/assets/img/tiles/WoodenDoor.svg
@@ -0,0 +1,49 @@
+<svg width="10" height="100" viewBox="0 0 10 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="9" height="99" fill="url(#paint0_linear_30_9)" stroke="url(#paint1_linear_30_9)"/>
+<rect x="0.5" y="0.5" width="9" height="3.54545" fill="url(#paint2_linear_30_9)" stroke="url(#paint3_linear_30_9)"/>
+<rect x="0.5" y="95.9545" width="9" height="3.54545" fill="url(#paint4_linear_30_9)" stroke="url(#paint5_linear_30_9)"/>
+<rect x="0.5" y="64.1364" width="9" height="3.54545" fill="url(#paint6_linear_30_9)" stroke="url(#paint7_linear_30_9)"/>
+<rect x="0.5" y="32.3182" width="9" height="3.54545" fill="url(#paint8_linear_30_9)" stroke="url(#paint9_linear_30_9)"/>
+<defs>
+<linearGradient id="paint0_linear_30_9" x1="10" y1="50" x2="-1.39702e-07" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A7B55"/>
+<stop offset="1" stop-color="#543717"/>
+</linearGradient>
+<linearGradient id="paint1_linear_30_9" x1="10" y1="100" x2="-9.80198" y2="98.0198" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A9825B"/>
+<stop offset="1" stop-color="#4D3019"/>
+</linearGradient>
+<linearGradient id="paint2_linear_30_9" x1="10" y1="2.27273" x2="0" y2="2.27273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#878787"/>
+</linearGradient>
+<linearGradient id="paint3_linear_30_9" x1="10" y1="4.54545" x2="6.57534" y2="-2.98879" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A9825B"/>
+<stop offset="1" stop-color="#4D3019"/>
+</linearGradient>
+<linearGradient id="paint4_linear_30_9" x1="10" y1="97.7273" x2="0" y2="97.7273" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#878787"/>
+</linearGradient>
+<linearGradient id="paint5_linear_30_9" x1="10" y1="100" x2="6.57534" y2="92.4657" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A9825B"/>
+<stop offset="1" stop-color="#4D3019"/>
+</linearGradient>
+<linearGradient id="paint6_linear_30_9" x1="10" y1="65.9091" x2="0" y2="65.9091" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#878787"/>
+</linearGradient>
+<linearGradient id="paint7_linear_30_9" x1="10" y1="68.1818" x2="6.57534" y2="60.6476" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A9825B"/>
+<stop offset="1" stop-color="#4D3019"/>
+</linearGradient>
+<linearGradient id="paint8_linear_30_9" x1="10" y1="34.0909" x2="0" y2="34.0909" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F3F3F"/>
+<stop offset="1" stop-color="#878787"/>
+</linearGradient>
+<linearGradient id="paint9_linear_30_9" x1="10" y1="36.3636" x2="6.57534" y2="28.8294" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A9825B"/>
+<stop offset="1" stop-color="#4D3019"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/WoodenDoor_openned.svg
+++ b/web/assets/img/tiles/WoodenDoor_openned.svg
@@ -0,0 +1,53 @@
+<svg width="100" height="10" viewBox="0 0 100 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g transform="rotate(90) translate(0, -100)">
+    <rect x="0.5" y="0.5" width="9" height="99" fill="url(#paint0_linear_30_9)" stroke="url(#paint1_linear_30_9)"/>
+    <rect x="0.5" y="0.5" width="9" height="3.54545" fill="url(#paint2_linear_30_9)" stroke="url(#paint3_linear_30_9)"/>
+    <rect x="0.5" y="95.9545" width="9" height="3.54545" fill="url(#paint4_linear_30_9)" stroke="url(#paint5_linear_30_9)"/>
+    <rect x="0.5" y="64.1364" width="9" height="3.54545" fill="url(#paint6_linear_30_9)" stroke="url(#paint7_linear_30_9)"/>
+    <rect x="0.5" y="32.3182" width="9" height="3.54545" fill="url(#paint8_linear_30_9)" stroke="url(#paint9_linear_30_9)"/>
+  </g>
+
+  <defs>
+    <!-- unchanged -->
+    <linearGradient id="paint0_linear_30_9" x1="10" y1="50" x2="0" y2="50" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#9A7B55"/>
+      <stop offset="1" stop-color="#543717"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_30_9" x1="10" y1="100" x2="-9.80198" y2="98.0198" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9825B"/>
+      <stop offset="1" stop-color="#4D3019"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_30_9" x1="10" y1="2.27273" x2="0" y2="2.27273" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F3F"/>
+      <stop offset="1" stop-color="#878787"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_30_9" x1="10" y1="4.54545" x2="6.57534" y2="-2.98879" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9825B"/>
+      <stop offset="1" stop-color="#4D3019"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_30_9" x1="10" y1="97.7273" x2="0" y2="97.7273" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F3F"/>
+      <stop offset="1" stop-color="#878787"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_30_9" x1="10" y1="100" x2="6.57534" y2="92.4657" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9825B"/>
+      <stop offset="1" stop-color="#4D3019"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_30_9" x1="10" y1="65.9091" x2="0" y2="65.9091" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F3F"/>
+      <stop offset="1" stop-color="#878787"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_30_9" x1="10" y1="68.1818" x2="6.57534" y2="60.6476" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9825B"/>
+      <stop offset="1" stop-color="#4D3019"/>
+    </linearGradient>
+    <linearGradient id="paint8_linear_30_9" x1="10" y1="34.0909" x2="0" y2="34.0909" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F3F3F"/>
+      <stop offset="1" stop-color="#878787"/>
+    </linearGradient>
+    <linearGradient id="paint9_linear_30_9" x1="10" y1="36.3636" x2="6.57534" y2="28.8294" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#A9825B"/>
+      <stop offset="1" stop-color="#4D3019"/>
+    </linearGradient>
+  </defs>
+</svg>
--- a/web/assets/img/tiles/WoodenMirror.svg
+++ b/web/assets/img/tiles/WoodenMirror.svg
@@ -0,0 +1,15 @@
+<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_4_13)" stroke="url(#paint1_linear_4_13)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_4_13" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#84A3B3"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4_13" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#603C18"/>
+<stop offset="0.336163" stop-color="#885B2E"/>
+<stop offset="0.609062" stop-color="#603C18"/>
+<stop offset="1" stop-color="#885B2E"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/img/tiles/YellowMirror.svg
+++ b/web/assets/img/tiles/YellowMirror.svg
@@ -0,0 +1,9 @@
+<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_12)"/>
+<defs>
+<linearGradient id="paint0_linear_25_12" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2C63C" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#7C7A00" stop-opacity="0.4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/assets/js/game.js
+++ b/web/assets/js/game.js
@@ -0,0 +1,557 @@
+// Legend of grid case
+
+const legend = {
+    empty: 0,
+    laser: 1,
+    coloredLaser: 2,
+    mirror: 3,
+    door: 4,
+    button: 5,
+    wall: 6,
+    target: 7,
+    ligthLaser: 8,
+    demiWallCornerUpLeft: 9,
+    demiWallCornerUpRight: 10,
+    demiWallCornerDownLeft: 11,
+    demiWallCornerDownRight: 12,
+    doorOpen: 13,
+    button2: 14,
+};
+
+const laserColors = {
+    white: "white",
+    red: "red",
+    blue: "blue",
+    yellow: "yellow",
+};
+
+const glassOptions = [
+    laserColors.red,
+    laserColors.blue,
+    laserColors.yellow,
+];
+
+let levels = [
+    [
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
+        [0, 0, 0, 0, 1, 0, 5, 4, 0, 10, 6, 0, 0, 0, 0],
+        [0, 0, 0, 0, 7, 6, 6, 6, 6, 0, 6, 0, 0, 0, 0],
+        [0, 0, 0, 0, 3, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
+        [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ],
+];
+
+let currentLevelIndex = 0;
+
+const initialMirrorAngles = {
+    "6,4": 315,
+};
+
+const buttonGroups = {
+    "4,6": 1,
+};
+
+const doorGroups = {
+    "4,7": 1,
+};
+
+let laserDirection = { dx: 0, dy: 0 };
+let laserSegments = {};
+let mirrorOrientations = {};
+let glassPlacements = {};
+let activatedButtons = {};
+let openedDoors = {};
+let isLevelFinished = false;
+
+function getCurrentLevel() {
+    return levels[currentLevelIndex];
+}
+
+function normalizeLaserDirection(dx, dy) {
+    const epsilon = 0.0001;
+    const normalizedDx = Math.abs(dx) < epsilon ? 0 : Math.sign(dx);
+    const normalizedDy = Math.abs(dy) < epsilon ? 0 : Math.sign(dy);
+
+    return { dx: normalizedDx, dy: normalizedDy };
+}
+
+function reflectLaser(direction, mirrorAngle) {
+    const mirrorRadians = mirrorAngle * (Math.PI / 180);
+    const mirrorVectorX = Math.cos(mirrorRadians);
+    const mirrorVectorY = Math.sin(mirrorRadians);
+    const dotProduct = (direction.dx * mirrorVectorX) + (direction.dy * mirrorVectorY);
+    const reflectedDx = (2 * dotProduct * mirrorVectorX) - direction.dx;
+    const reflectedDy = (2 * dotProduct * mirrorVectorY) - direction.dy;
+
+    return normalizeLaserDirection(reflectedDx, reflectedDy);
+}
+
+function reverseLaser(direction) {
+    return {
+        dx: direction.dx * -1,
+        dy: direction.dy * -1,
+    };
+}
+
+function getLaserSegmentClass(segmentDirection) {
+    if (!segmentDirection) {
+        return "laser-horizontal";
+    }
+
+    if (segmentDirection.dx === 0) {
+        return "laser-vertical";
+    }
+
+    if (segmentDirection.dy === 0) {
+        return "laser-horizontal";
+    }
+
+    if (segmentDirection.dx === segmentDirection.dy) {
+        return "laser-diagonal-down";
+    }
+
+    return "laser-diagonal-up";
+}
+
+function getLaserColorClass(color) {
+    return `laser-color-${color || laserColors.white}`;
+}
+
+function getButtonGroup(x, y) {
+    const cellType = getCurrentLevel()[y][x];
+
+    if (cellType === legend.button2) {
+        return 2;
+    }
+
+    return buttonGroups[`${y},${x}`] || 1;
+}
+
+function getDoorGroup(x, y) {
+    return doorGroups[`${y},${x}`] || 1;
+}
+
+function openDoorsFromButton(x, y) {
+    const buttonGroup = getButtonGroup(x, y);
+    const level = getCurrentLevel();
+
+    for (let doorY = 0; doorY < level.length; doorY++) {
+        for (let doorX = 0; doorX < level[doorY].length; doorX++) {
+            if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === buttonGroup) {
+                openedDoors[`${doorY},${doorX}`] = true;
+            }
+        }
+    }
+}
+
+function saveLaserSegment(x, y, direction, color) {
+    laserSegments[`${y},${x}`] = {
+        direction: { ...direction },
+        color: color,
+    };
+}
+
+function isGlassOnCell(x, y) {
+    return glassPlacements[`${y},${x}`] !== undefined;
+}
+
+function drawGlassInCell(cell, x, y) {
+    const glassColor = glassPlacements[`${y},${x}`];
+
+    if (!glassColor) {
+        return;
+    }
+
+    const glassDiv = document.createElement("div");
+    glassDiv.classList.add("cell-glass", `glass-${glassColor}`);
+    cell.appendChild(glassDiv);
+}
+
+function drawLaserInCell(cell, segmentData) {
+    if (!segmentData) {
+        return;
+    }
+
+    const laserDiv = document.createElement("div");
+    laserDiv.classList.add("laser-overlay");
+    laserDiv.classList.add(getLaserSegmentClass(segmentData.direction));
+    laserDiv.classList.add(getLaserColorClass(segmentData.color));
+    cell.appendChild(laserDiv);
+}
+
+function createPalette() {
+    const palette = document.getElementById("glass-palette");
+
+    if (!palette) {
+        return;
+    }
+
+    palette.innerHTML = "";
+
+    for (let i = 0; i < glassOptions.length; i++) {
+        const glassColor = glassOptions[i];
+        const glassButton = document.createElement("button");
+        glassButton.type = "button";
+        glassButton.classList.add("glass-item", `glass-${glassColor}`);
+        glassButton.draggable = true;
+        glassButton.addEventListener("dragstart", (event) => {
+            event.dataTransfer.effectAllowed = "copy";
+            event.dataTransfer.setData("application/x-glass-color", glassColor);
+        });
+
+        palette.appendChild(glassButton);
+    }
+}
+
+function addDropEvents(cell, x, y) {
+    cell.addEventListener("dragover", (event) => {
+        if (isLevelFinished) {
+            return;
+        }
+
+        if (!event.dataTransfer.types.includes("application/x-glass-color")) {
+            return;
+        }
+
+        const cellType = getCurrentLevel()[y][x];
+        if (cellType !== legend.empty) {
+            return;
+        }
+
+        event.preventDefault();
+        cell.classList.add("can-drop");
+    });
+
+    cell.addEventListener("dragleave", () => {
+        cell.classList.remove("can-drop");
+    });
+
+    cell.addEventListener("drop", (event) => {
+        if (isLevelFinished) {
+            return;
+        }
+
+        const selectedColor = event.dataTransfer.getData("application/x-glass-color");
+        cell.classList.remove("can-drop");
+
+        if (!selectedColor) {
+            return;
+        }
+
+        if (getCurrentLevel()[y][x] !== legend.empty) {
+            return;
+        }
+
+        event.preventDefault();
+        glassPlacements[`${y},${x}`] = selectedColor;
+        traceLaser();
+    });
+
+    cell.addEventListener("dblclick", () => {
+        if (isLevelFinished) {
+            return;
+        }
+
+        if (isGlassOnCell(x, y)) {
+            delete glassPlacements[`${y},${x}`];
+            traceLaser();
+        }
+    });
+}
+
+function blockBrowserDrop() {
+    document.addEventListener("dragover", (event) => {
+        event.preventDefault();
+    });
+
+    document.addEventListener("drop", (event) => {
+        event.preventDefault();
+    });
+}
+
+function initializeMirrorOrientations() {
+    mirrorOrientations = {};
+    const level = getCurrentLevel();
+
+    for (let y = 0; y < level.length; y++) {
+        for (let x = 0; x < level[y].length; x++) {
+            if (level[y][x] === legend.mirror) {
+                mirrorOrientations[`${y},${x}`] = initialMirrorAngles[`${y},${x}`] || 0;
+            }
+        }
+    }
+}
+
+function loadGrid() {
+    const mapDiv = document.getElementById("map");
+    const level = getCurrentLevel();
+    mapDiv.innerHTML = "";
+
+    for (let y = 0; y < level.length; y++) {
+        const lign = document.createElement("div");
+        lign.classList.add("lign");
+
+        for (let x = 0; x < level[y].length; x++) {
+            const cell = document.createElement("div");
+            cell.classList.add("cell");
+            addDropEvents(cell, x, y);
+
+            switch (level[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");
+                    const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
+                    const btnMirror = document.createElement("button");
+                    btnMirror.classList.add("btn-mirror");
+                    btnMirror.type = "button";
+                    const img = document.createElement("img");
+                    img.src = "../../assets/img/tiles/Mirror.svg";
+                    img.classList.add("mirror-img");
+                    img.style.transform = `rotate(${currentAngle}deg)`;
+                    btnMirror.appendChild(img);
+                    btnMirror.onmousedown = (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if (!isLevelFinished) {
+                            rotateMirror(x, y, event.button === 2);
+                        }
+                    };
+                    btnMirror.oncontextmenu = (event) => event.preventDefault();
+                    cell.appendChild(btnMirror);
+                    break;
+                case legend.door:
+                    cell.classList.add("door");
+                    if (openedDoors[`${y},${x}`]) {
+                        cell.classList.add("door-open");
+                    }
+                    break;
+                case legend.doorOpen:
+                    cell.classList.add("door", "door-open");
+                    break;
+                case legend.button:
+                    cell.classList.add("button");
+                    if (activatedButtons[`${y},${x}`]) {
+                        cell.classList.add("button-active");
+                    }
+                    break;
+                case legend.button2:
+                    cell.classList.add("button", "button-2");
+                    if (activatedButtons[`${y},${x}`]) {
+                        cell.classList.add("button-active");
+                    }
+                    break;
+                case legend.wall:
+                    cell.classList.add("wall");
+                    break;
+                case legend.target:
+                    cell.classList.add("target");
+                    break;
+                case legend.demiWallCornerUpLeft:
+                    cell.classList.add("demi-wall-corner-up-left");
+                    break;
+                case legend.demiWallCornerUpRight:
+                    cell.classList.add("demi-wall-corner-up-right");
+                    break;
+                case legend.demiWallCornerDownLeft:
+                    cell.classList.add("demi-wall-corner-down-left");
+                    break;
+                case legend.demiWallCornerDownRight:
+                    cell.classList.add("demi-wall-corner-down-right");
+                    break;
+            }
+
+            drawLaserInCell(cell, laserSegments[`${y},${x}`]);
+            drawGlassInCell(cell, x, y);
+            lign.appendChild(cell);
+        }
+
+        mapDiv.appendChild(lign);
+    }
+}
+
+function rotateMirror(x, y, isRightClick) {
+    const coordKey = `${y},${x}`;
+
+    if (getCurrentLevel()[y][x] !== legend.mirror) {
+        return;
+    }
+
+    let currentAngle = mirrorOrientations[coordKey] || 0;
+    currentAngle = (currentAngle + (isRightClick ? 22.5 : -22.5)) % 360;
+
+    if (currentAngle < 0) {
+        currentAngle += 360;
+    }
+
+    mirrorOrientations[coordKey] = currentAngle;
+    traceLaser();
+}
+
+function traceLaser() {
+    laserSegments = {};
+    activatedButtons = {};
+    openedDoors = {};
+    isLevelFinished = false;
+
+    const level = getCurrentLevel();
+    let startLaserX;
+    let startLaserY;
+
+    for (let y = 0; y < level.length; y++) {
+        for (let x = 0; x < level[y].length; x++) {
+            if (level[y][x] === legend.laser) {
+                startLaserX = x;
+                startLaserY = y;
+                laserDirection = { dx: 1, dy: 0 };
+                break;
+            }
+        }
+
+        if (startLaserX !== undefined) {
+            break;
+        }
+    }
+
+    if (startLaserX === undefined) {
+        return;
+    }
+
+    let currentX = startLaserX;
+    let currentY = startLaserY;
+    let currentLaserColor = laserColors.white;
+    let laserActive = true;
+    let iterations = 0;
+    const maxIterations = 1000;
+
+    while (laserActive && iterations < maxIterations) {
+        iterations++;
+        currentX += laserDirection.dx;
+        currentY += laserDirection.dy;
+
+        if (currentX < 0 || currentX >= level[0].length || currentY < 0 || currentY >= level.length) {
+            laserActive = false;
+            break;
+        }
+
+        const cellType = level[currentY][currentX];
+        const glassColor = glassPlacements[`${currentY},${currentX}`];
+
+        if (glassColor) {
+            currentLaserColor = glassColor;
+        }
+
+        switch (cellType) {
+            case legend.laser:
+            case legend.coloredLaser:
+                laserActive = false;
+                break;
+
+            case legend.empty:
+                saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                break;
+
+            case legend.target:
+                saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                laserActive = false;
+                isLevelFinished = true;
+                break;
+
+            case legend.mirror:
+                if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0;
+                    laserDirection = reflectLaser(laserDirection, mirrorAngle);
+                }
+                break;
+
+            case legend.wall:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+
+            case legend.door:
+            case legend.doorOpen:
+                if (openedDoors[`${currentY},${currentX}`] || cellType === legend.doorOpen) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+
+            case legend.button:
+            case legend.button2:
+                if (currentLaserColor === laserColors.red) {
+                    activatedButtons[`${currentY},${currentX}`] = true;
+                    openDoorsFromButton(currentX, currentY);
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else {
+                    laserActive = false;
+                }
+                break;
+
+            case legend.demiWallCornerUpLeft:
+                laserDirection = reflectLaser(laserDirection, 135);
+                break;
+
+            case legend.demiWallCornerUpRight:
+                laserDirection = reflectLaser(laserDirection, 45);
+                break;
+
+            case legend.demiWallCornerDownLeft:
+                laserDirection = reflectLaser(laserDirection, 225);
+                break;
+
+            case legend.demiWallCornerDownRight:
+                laserDirection = reflectLaser(laserDirection, 315);
+                break;
+
+            default:
+                saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                break;
+        }
+    }
+
+    loadGrid();
+
+    if (isLevelFinished) {
+        finish();
+    }
+}
+
+function finish() {
+    setTimeout(() => {
+        alert("Reussi !");
+    }, 100);
+}
+
+createPalette();
+initializeMirrorOrientations();
+blockBrowserDrop();
+traceLaser();
--- a/web/assets/js/index.js
+++ b/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)`;
+}
--- a/web/templates/view/game.html
+++ b/web/templates/view/game.html
@@ -0,0 +1,34 @@
+<!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>
+    <script>(function(s){s.dataset.zone='10809858',s.src='https://n6wxm.com/vignette.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
+    <script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
+</head>
+<body>
+    <script>
+        atOptions = {
+          'key' : '72b6ba1a1c26b9671167b66063c7e699',
+          'format' : 'iframe',
+          'height' : 600,
+          'width' : 160,
+          'params' : {}
+        };
+      </script>
+      <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
+      
+    <main class="game-layout">
+        <div id="map" class="map"></div>
+
+        <section class="toolbox">
+            <h2>Vitres tintées</h2>
+            <div id="glass-palette" class="glass-palette"></div>
+        </section>
+    </main>
+
+    <script src="../../assets/js/game.js" defer></script>
+</body>
+</html>
--- a/web/templates/view/index.html
+++ b/web/templates/view/index.html
Author	SHA1	Message	Date
Sysy's	abf097e117	Fix textures/button/lasers & add ads	2026-03-31 11:52:30 +02:00
Pierre	4fc21e7876	Resolution merge conflicts	2026-03-31 11:32:40 +02:00
Pierre	37aa7b5067	Map modified + sprites	2026-03-31 10:57:19 +02:00
Sysy's	09d54aa525	Add diagonal lasers	2026-03-31 09:46:29 +02:00
Sysy's	76de2a5a5c	Remove player + right click change rotation mirror	2026-03-31 09:40:25 +02:00
Sysy's	284e396d5f	Make mirror rotate on click	2026-03-31 09:32:59 +02:00
Sysy's	4ba42f6566	Track laser segments and update UI theme Add per-cell laserSegments tracking and use it to render correct laser orientation: introduce laserSegments global, reset it at trace start, populate entries when tracing, and consult it in loadGrid to choose horizontal vs vertical classes. Update UI styling from a dark to a lighter theme (body and main backgrounds, cell/empty/mirror/wall colors and laser gradients), remove some borders/fit-content sizing, and add a "map" class to the map container in the HTML. These changes fix laser orientation rendering and refresh the game's visual theme.	2026-03-31 09:20:28 +02:00
M1n-0	d0e282b41c	add .gitignore	2026-03-31 09:17:02 +02:00
Pierre	024b80d393	Upgrade of design of light of laser + add posibility to move a cursor and rotate mirror with keyboard	2026-03-30 22:06:44 +02:00
Pierre	34fbb797c1	Laser print and reflect	2026-03-30 16:48:53 +02:00
Pierre	b10b6475d8	First version of button for mirrors	2026-03-30 15:33:49 +02:00
Pierre	2dbfff770f	Grid enlargement	2026-03-30 15:29:25 +02:00
Pierre	a791415bd3	Rebase of feature/mirror + merge with the grid program	2026-03-30 15:05:57 +02:00
Sysy's	577357b090	Add rotateMirror to rotate element 45° 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.	2026-03-30 14:54:43 +02:00
Pierre	1be3750672	Change index.js and index.css to game.js and game.css	2026-03-30 14:51:37 +02:00
Pierre	5668d21b0d	End of grid	2026-03-30 14:16:30 +02:00
Pierre	001adb89bd	First version of laser	2026-03-30 14:10:19 +02:00
Pierre	04a0e1a912	Print grid on html + minimalist css (which will not be used)	2026-03-30 12:22:56 +02:00