Remove img of last commit

Rewrite README to provide a project overview, features, live demo link, installation and local run instructions, gameplay guide, and tech stack. Add project header, badges, and screenshot embedding. Add web/assets/img/image_game.png and remove placeholder images (web/assets/img/fakeimg.img and web/assets/img/img_test_main_menu.png) to keep assets consistent with the new documentation.

.gitignore

@@ -1 +1,2 @@
-Test
+Test
+backend/user.db

README.md

@@ -1,23 +1,117 @@
-Règles : 
+<div align="center">
-Un rayon laser constant
+  <h1 align="center">MirrorGame</h1>
-Un ou plusieurs laser
+  <p align="center">
-Laser non movibles, on/off
+    Browser puzzle game where you guide lasers with mirrors, tinted glass, doors, and triggers.
-Mirroirs orientables
+    <br />
-Prisme (dédouble le laser ou le renvoi selon l'angle)
+    <br />
-Vitre colorée fixe ou placable par le joueur (r,j,b)
+    <a href="https://git.ninolbt.com/Nono/Projet_48h/issues">⚠️ Report Bug</a>
-Bouton allumable par clique souris (interaction porte, mirroir, etc)
+    ·
-Bouton allumable par laser spécifique (interaction porte, mirroir, etc)
+    <a href="https://git.ninolbt.com/Nono/Projet_48h/issues">💡 Request Feature</a>
+    ·
+    <a href="https://gamegamegame.ninolbt.com/">🎮 Play Online</a>
+  </p>
+  <p align="center">
+    <img src="https://img.shields.io/badge/language-Rust%20%7C%20HTML%20%7C%20CSS%20%7C%20JavaScript-00ADD8?style=for-the-badge&labelColor=000000" />
+    <img src="https://img.shields.io/badge/platform-Web-6E56CF?style=for-the-badge&labelColor=000000" />
+    <img src="https://img.shields.io/badge/status-Playable-28A745?style=for-the-badge&labelColor=000000" />
+  </p>
+  <p align="center">
+    <img src="./web/assets/img/image_game.png" alt="MirrorGame main menu" />
+  </p>
+</div>
 
+---
 
-Rayon : 
+### 🔍 Overview
-Blanc -> rebondis seulement sur les mirroirs et s'arrête contre les murs
-Rouge -> Allumage boutons
-Bleu -> Rebondis sur toutes les surfaces
-Jaune -> Traverse tout (mirroir compris)
 
+`MirrorGame` is a small laser-reflection puzzle game built during a game jam format.
 
-Systeme de placement d'objet par grille
+The goal is to route a laser beam through each level by rotating mirrors, using tinted glass to change beam color, and interacting with doors, buttons, captors, and other grid-based puzzle elements until the beam reaches the target.
 
-Comptes utilisateur
+The game is playable online and can also be run locally through the Rust server included in this repository.
+> Level progression is stored locally in your browser with `localStorage`.
 
-Optionnel : timer, tableau de score, 
+### ✨ Features
+
+- **Laser puzzle gameplay**: Redirect beams across handcrafted levels to activate targets.
+- **Mirror rotation**: Rotate mirrors directly on the board to change the laser path.
+- **Colored glass placement**: Drag and drop red, blue, and yellow glass tiles onto the grid.
+- **Interactive mechanisms**: Trigger doors, buttons, captors, and rotating mirror systems.
+- **Multiple levels**: Progress through several unlockable puzzle stages.
+- **Browser save data**: Unlocked levels are persisted between sessions with `localStorage`.
+- **Rust-powered local server**: Lightweight backend serves the HTML, CSS, JS, and assets.
+
+### 🎮 Live Demo
+
+Play here: [MirrorGame](https://gamegamegame.ninolbt.com/)
+
+### 🖼️ Screenshot
+
+Main menu:
+
+![MirrorGame](./web/assets/img/image_game.png)
+
+### 🧰 Requirements
+
+- Rust and Cargo
+- A modern desktop browser
+
+---
+
+### 🚀 Installation and usage
+
+#### Option 1 — Play online
+
+- Open [**MirrorGame**](https://gamegamegame.ninolbt.com/) in your browser.
+
+#### Option 2 — Run locally from source
+
+1. Install Rust using [rustup](https://rustup.rs/).
+2. Clone or download this repository.
+3. Open a terminal in the `backend` folder.
+4. Start the local server:
+
+   ```bash
+   cargo run
+   ```
+
+5. Open your browser at:
+
+   ```text
+   http://127.0.0.1:3500
+   ```
+
+---
+
+### 📖 How to play
+
+1. **Launch the game**
+   - Open the online version or run the project locally.
+   - Click **Play** from the main menu.
+
+2. **Understand the goal**
+   - Each level starts with a laser source.
+   - Your objective is to make the beam reach the target tile.
+
+3. **Rotate mirrors**
+   - Click mirrors to rotate them and redirect the beam.
+   - Some mirrors are controlled by puzzle mechanisms instead of direct input.
+
+4. **Use tinted glass**
+   - Drag red, blue, or yellow glass from the toolbox onto empty cells.
+   - Double-click a placed glass tile to remove it and get it back.
+
+5. **Solve interactions**
+   - Red beams can activate buttons and captors.
+   - Doors, rotators, and other level elements react depending on the puzzle setup.
+
+6. **Progress through levels**
+   - Completing a level unlocks the next one.
+   - Use the level menu to revisit unlocked stages.
+
+---
+
+### 🛠️ Tech Stack
+
+- **Backend**: Rust with `axum` and `tower-http`
+- **Frontend**: HTML, CSS, and vanilla JavaScript

backend/Cargo.lock

@@ -90,6 +90,7 @@ dependencies = [
  "axum",
  "axum-server",
  "serde",
+ "sqlite",
  "tokio",
  "tower-http",
  "tracing-subscriber",
@@ -107,6 +108,16 @@ version = "1.11.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
 
+[[package]]
+name = "cc"
+version = "1.2.58"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1e928d4b69e3077709075a938a05ffbedfa53a84c8f766efbf8220bb1ff60e1"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
 [[package]]
 name = "cfg-if"
 version = "1.0.4"
@@ -135,6 +146,12 @@ dependencies = [
  "windows-sys",
 ]
 
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
+
 [[package]]
 name = "fnv"
 version = "1.0.7"
@@ -450,6 +467,12 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
+[[package]]
+name = "pkg-config"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
+
 [[package]]
 name = "proc-macro2"
 version = "1.0.106"
@@ -563,6 +586,12 @@ dependencies = [
  "lazy_static",
 ]
 
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
 [[package]]
 name = "signal-hook-registry"
 version = "1.4.8"
@@ -595,6 +624,34 @@ dependencies = [
  "windows-sys",
 ]
 
+[[package]]
+name = "sqlite"
+version = "0.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f66e9c01a11936154f3910dbba732c01f8b591543bc4d6672bddee79fd9c4783"
+dependencies = [
+ "sqlite3-sys",
+]
+
+[[package]]
+name = "sqlite3-src"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5b6d3c860886b0a33e69e421796a5f4a27f23597a182c2450f6d7ace5103120"
+dependencies = [
+ "cc",
+ "pkg-config",
+]
+
+[[package]]
+name = "sqlite3-sys"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a7781d97adc13a1d5081127a9ee29afad8427f3757bd984daf814d8265267039"
+dependencies = [
+ "sqlite3-src",
+]
+
 [[package]]
 name = "syn"
 version = "2.0.117"

backend/Cargo.toml

@@ -10,3 +10,4 @@ serde = "1.0.228"
 tokio = { version = "1.50.0", features = ["full"] }
 tracing-subscriber = "0.3.23"
 tower-http = { version = "0.6", features = ["fs"] }
+sqlite = "*"

backend/src/main.rs

@@ -4,14 +4,18 @@ use std::path::Path;
 use tokio::fs::File;
 use tokio::io::{self, AsyncReadExt};
 use tower_http::services::ServeDir;
+mod user;
 
 #[tokio::main]
 async fn main() {
+    let db = user::DataBase::open(String::from("user"));
+    db.create_table("users", "name TEXT, level TEXT, password TEXT");
     let app = Router::new()
         .route("/", get(handler))
-        .nest_service("/assets", ServeDir::new("../web/assets"));
+        .route("/game", get(game))
+        .nest_service("/web/assets", ServeDir::new("../web/assets"));
 
-    let addr = SocketAddr::from(([127, 0, 0, 1], 3500));
+    let addr = SocketAddr::from(([0, 0, 0, 0], 3500));
     println!("listening on {}", addr);
     axum_server::bind(addr)
         .serve(app.into_make_service())
@@ -26,6 +30,27 @@ async fn handler() -> Html<String> {
     Html(html_content)
 }
 
+async fn game() -> Html<String> {
+    let html_content = read_html_from_file("../web/templates/view/game.html")
+        .await
+        .unwrap_or_else(|_| "<h1>Error loading HTML file</h1>".to_string());
+    Html(html_content)
+}
+
+async fn register() -> Html<String> {
+    let html_content = read_html_from_file("../web/templates/view/register.html")
+        .await
+        .unwrap_or_else(|_| "<h1>Error loading HTML file</h1>".to_string());
+    Html(html_content)
+}
+
+async fn login() -> Html<String> {
+    let html_content = read_html_from_file("../web/templates/view/login.html")
+        .await
+        .unwrap_or_else(|_| "<h1>Error loading HTML file</h1>".to_string());
+    Html(html_content)
+}
+
 async fn read_html_from_file<P: AsRef<Path>>(path: P) -> io::Result<String> {
     let mut file = File::open(path).await?;
     let mut contents = String::new();

backend/src/user.rs

@@ -0,0 +1,63 @@
+use sqlite::Connection;
+
+pub struct User {
+    name: String,
+    level: u32,
+}
+
+impl User {
+    pub fn open(name: String, level: u32) -> User {
+        User {name, level}
+    }
+
+    pub fn get_name(&self) -> String{return self.name.clone()}
+    pub fn get_level(&self) -> u32{return self.level}
+}
+
+
+pub struct DataBase {
+    connection: Connection,
+}
+
+impl DataBase {
+    pub fn open(name: String) -> DataBase {
+        let connection = sqlite::open(name + ".db").unwrap();
+        DataBase { connection }
+    }
+
+    fn execute(&self, arg: String){
+        match self.connection.execute(arg){
+            _ => (),
+            Err(e) => panic!("Error : {}",e),
+        }
+    }
+
+    pub fn create_table(&self, table: &str, var: &str){
+        self.execute("CREATE TABLE ".to_owned() + &table.to_string() + "(" + &var.to_string() + ");");
+    }
+
+    pub fn add_column(&self, table: &str, arg: &str){
+        self.execute("ALTER TABLE ".to_owned() + &table.to_string() + " ADD " + &arg.to_string() + ";");
+    }
+
+    pub fn insert(&self, table: &str, arg: &str){
+        self.execute("INSERT INTO ".to_owned() + &table.to_string() + " VALUES (" + &arg.to_string() + ")" + ";");
+    }
+
+    pub fn check(&self, table: &str, arg: &str) -> bool {
+    let mut end = false;
+    self.connection.iterate("Select name FROM ".to_owned() + &table.to_string() + " WHERE name = " + &format!("'{}'",&arg.to_string()), |pairs| {
+        for &(name, value) in pairs.iter() {
+            if name == "name" {
+                end = true;
+            }
+        }
+        return end;
+    });   
+    return end;
+    }
+
+    pub fn update(&self, table: &str, arg: &str, where_is: &str, arg2: &str){
+        self.execute("UPDATE ".to_owned() + &table.to_string() + " SET " + &arg.to_string() + " WHERE " + &where_is.to_string() + " = " + &arg2.to_string());
+    }
+}

web/assets/css/game.css

@@ -0,0 +1,579 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+body {
+    background: #FFF6E5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: Arial, sans-serif;
+    user-select: none;
+}
+
+.level-menu-shell {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 1100;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.level-menu-toggle {
+    border: none;
+    border-radius: 999px;
+    background: #223;
+    color: #fff;
+    padding: 12px 18px;
+    font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 0 8px 20px rgba(34, 51, 68, 0.18);
+}
+
+.level-menu-panel {
+    min-width: 180px;
+    background: rgba(255, 255, 255, 0.96);
+    border-radius: 18px;
+    padding: 14px;
+    box-shadow: 0 18px 40px rgba(34, 51, 68, 0.18);
+    border: 1px solid rgba(34, 51, 68, 0.08);
+}
+
+.level-menu-panel h2 {
+    font-size: 0.95rem;
+    color: #223;
+    margin-bottom: 10px;
+}
+
+.level-menu-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.level-menu-item {
+    border: none;
+    border-radius: 10px;
+    padding: 10px 12px;
+    text-align: left;
+    background: #dfe5f8;
+    color: #223;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.level-menu-item.is-current {
+    background: #223;
+    color: #fff;
+}
+
+.level-menu-item:disabled {
+    background: #eceff7;
+    color: #8a92a3;
+    cursor: not-allowed;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    border-radius: 150px;
+    min-width: fit-content;
+    flex-shrink: 0;
+    gap: 16px;
+}
+
+.game-layout {
+    width: min(96vw, 1200px);
+}
+
+.game-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 700;
+    color: #223;
+    letter-spacing: 0.04em;
+    text-align: center;
+}
+
+.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: 15px;
+}
+
+.lign {
+    display: flex;
+}
+
+.cell {
+    width: clamp(28px, 6.2vmin, 72px);
+    height: clamp(28px, 6.2vmin, 72px);
+    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("/web/assets/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("/web/assets/img/tiles/Prisme.svg");
+    background-size: 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.mirror {
+    background-color: #DADEEF;
+    position: relative;
+    overflow: hidden;
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    transform: scaleX(-1);
+    -ms-filter: fliph; /*IE*/
+    filter: fliph; /*IE*/
+}
+
+.wall {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Tuile.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.wall-semi-angle {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/BottomLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.horizontal-semi {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/HorizontaleSemi.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: bottom;
+}
+
+.captor {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+}
+
+.captor-turn {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Capteur-2.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.captor-turn-reverse {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Capteur-2.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+}
+
+.captor-turn-horizontale2 {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.captor-vertical-top {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(90deg);
+}
+
+.cable {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableH.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable-turn {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableBottomLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable-turn-horizontale3 {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableTopRight.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable-vertical {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableV.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable-turn-horizontale {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableTopLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.cable-turn-horizontale2 {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/CableTopLeft.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+}
+
+.door {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/WoodenDoor.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: end;
+}
+
+.door-open {
+    background-image: url("/web/assets/img/tiles/WoodenDoor_openned.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: end;
+}
+
+.button {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/ButtonComplete.svg"), url("/web/assets/img/tiles/Tuile.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.button-2 {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/ButtonQuarter.svg"), url("/web/assets/img/tiles/Tuile.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.button-rotator {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/ButtonProfile.svg"), url("/web/assets/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("/web/assets/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("/web/assets/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("/web/assets/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("/web/assets/img/tiles/BottomLeftAngle.svg");
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.demi-wall-corner-down-right {
+    background-color: #DADEEF;
+    background-image: url("/web/assets/img/tiles/BottomRightAngle.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;
+}
+
+.btn-mirror-locked {
+    cursor: default;
+}
+
+.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:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.glass-item-label {
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
+    z-index: 2;
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #223;
+    background: rgba(255, 255, 255, 0.88);
+    padding: 1px 5px;
+    border-radius: 999px;
+}
+
+.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;
+    }
+}
+
+.win-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    gap: 20px;
+    backdrop-filter: blur(6px);
+
+}
+
+.win-overlay h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #fff;
+    text-align: center;
+}
+
+.win-overlay p {
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #fff;
+    text-align: center;
+}
+
+.win-overlay button {
+    font-size: 1.5rem;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #000;
+    border: none;
+    cursor: pointer;
+}

web/assets/css/index.css

@@ -67,6 +67,10 @@ body {
     aspect-ratio: 9 / 16;
 }
 
+.leftadsbanner.is-hidden {
+    display: none;
+}
+
 .hero-content {
     max-width: 90vw;
     text-align: left;
@@ -198,6 +202,11 @@ body {
         margin-right: 0.45em;
         flex-shrink: 0;
     }
+
+    .adsbanner,
+    .leftadsbanner {
+        display: none;
+    }
 }
 
 .hero-play-button {

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>

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>

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>

web/assets/img/tiles/BottomLeft.svg

@@ -0,0 +1,21 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 99L1 1.61816L99 50.6182V99L1 99Z" fill="url(#paint0_linear_35_19)" stroke="url(#paint1_linear_35_19)" 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="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="94.5" cy="94.5" r="1.5" transform="rotate(-180 94.5 94.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="94.5" r="1" transform="rotate(-180 94.5 94.5)" fill="#898989"/>
+<circle cx="94.5" cy="53.5" r="1.5" transform="rotate(-180 94.5 53.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="53.5" r="1" transform="rotate(-180 94.5 53.5)" fill="#898989"/>
+<defs>
+<linearGradient id="paint0_linear_35_19" 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_35_19" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>

web/assets/img/tiles/BottomLeftAngle.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>

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>

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>

web/assets/img/tiles/BottomRight.svg

@@ -0,0 +1,21 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99 99H1V50.6182L99 1.61816V99Z" fill="url(#paint0_linear_35_30)" stroke="url(#paint1_linear_35_30)" 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="5.5" cy="94.5" r="1.5" transform="rotate(90 5.5 94.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1" transform="rotate(90 5.5 94.5)" fill="#898989"/>
+<circle cx="5.5" cy="53.5" r="1.5" transform="rotate(90 5.5 53.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="53.5" r="1" transform="rotate(90 5.5 53.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_35_30" x1="8.9049e-06" y1="1.50801e-06" x2="40" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#747474"/>
+</linearGradient>
+<linearGradient id="paint1_linear_35_30" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A8A8"/>
+<stop offset="1" stop-color="#848484"/>
+</linearGradient>
+</defs>
+</svg>

web/assets/img/tiles/BottomRightAngle.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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

web/templates/view/game.html

@@ -0,0 +1,61 @@
+<!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="/web/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>
+    <div class="win-overlay">
+      <h1>You win!</h1>
+      <p>You have completed the level.</p>
+      <button class="win-button" onclick="nextLevel()">Next Level</button>
+    </div>
+
+    <aside class="level-menu-shell">
+        <button id="level-menu-toggle" class="level-menu-toggle" type="button" aria-expanded="false" aria-controls="level-menu-panel">
+            Levels
+        </button>
+        <div id="level-menu-panel" class="level-menu-panel" hidden>
+            <h2>Choose Level</h2>
+            <div id="level-menu-list" class="level-menu-list"></div>
+        </div>
+    </aside>
+
+    <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">
+        <h1 class="game-title">Mirror Game</h1>
+        <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>
+        atOptions = {
+          'key' : '72b6ba1a1c26b9671167b66063c7e699',
+          'format' : 'iframe',
+          'height' : 600,
+          'width' : 160,
+          'params' : {}
+        };
+      </script>
+      <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
+      
+    <script src="/web/assets/js/game.js" defer></script>
+</body>
+</html>

web/templates/view/index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>MirorGame</title>
-        <link rel="stylesheet" href="../../assets/css/index.css">
+        <link rel="stylesheet" href="/web/assets/css/index.css">
     </head>
     <body>
         <div class="hero">
@@ -14,11 +14,13 @@
             <div class="hero-content">
                 <h1>MirrorGame</h1>
                 <img src="https://upload.wikimedia.org/wikipedia/commons/f/f3/Meow_cat_-_Mdebona.jpg" alt="MirrorGame">
-                <button class="hero-play-button">
+                <a href="/game">    
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">
+                    <button class="hero-play-button">
-                        <path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="0 0 16 16">
-                    </svg>
+                            <path d="M10.804 8 5 4.633v6.734zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696z"/>
-                </button>
+                        </svg>
+                    </button>
+                </a>
             </div>
         </div>
         <aside class="leftadsbanner">