Level 5

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
+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

@@ -0,0 +1,865 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "atomic-waker"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"
+
+[[package]]
+name = "autocfg"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+
+[[package]]
+name = "axum"
+version = "0.8.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b52af3cb4058c895d37317bb27508dccc8e5f2d39454016b297bf4a400597b8"
+dependencies = [
+ "axum-core",
+ "bytes",
+ "form_urlencoded",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "itoa",
+ "matchit",
+ "memchr",
+ "mime",
+ "percent-encoding",
+ "pin-project-lite",
+ "serde_core",
+ "serde_json",
+ "serde_path_to_error",
+ "serde_urlencoded",
+ "sync_wrapper",
+ "tokio",
+ "tower",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-core"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08c78f31d7b1291f7ee735c1c6780ccde7785daae9a9206026862dab7d8792d1"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-server"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1df331683d982a0b9492b38127151e6453639cd34926eb9c07d4cd8c6d22bfc"
+dependencies = [
+ "bytes",
+ "either",
+ "fs-err",
+ "http",
+ "http-body",
+ "hyper",
+ "hyper-util",
+ "tokio",
+ "tower-service",
+]
+
+[[package]]
+name = "backend"
+version = "0.1.0"
+dependencies = [
+ "axum",
+ "axum-server",
+ "serde",
+ "sqlite",
+ "tokio",
+ "tower-http",
+ "tracing-subscriber",
+]
+
+[[package]]
+name = "bitflags"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "812e12b5285cc515a9c72a5c1d3b6d46a19dac5acfef5265968c166106e31dd3"
+
+[[package]]
+name = "bytes"
+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"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
+
+[[package]]
+name = "either"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "errno"
+version = "0.3.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
+dependencies = [
+ "libc",
+ "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"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "fs-err"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73fde052dbfc920003cfd2c8e2c6e6d4cc7c1091538c3a24226cec0665ab08c0"
+dependencies = [
+ "autocfg",
+ "tokio",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
+
+[[package]]
+name = "futures-sink"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
+
+[[package]]
+name = "futures-task"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
+
+[[package]]
+name = "futures-util"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "h2"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f44da3a8150a6703ed5d34e164b875fd14c2cdab9af1252a9a1020bde2bdc54"
+dependencies = [
+ "atomic-waker",
+ "bytes",
+ "fnv",
+ "futures-core",
+ "futures-sink",
+ "http",
+ "indexmap",
+ "slab",
+ "tokio",
+ "tokio-util",
+ "tracing",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.16.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
+
+[[package]]
+name = "http"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
+dependencies = [
+ "bytes",
+ "itoa",
+]
+
+[[package]]
+name = "http-body"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1efedce1fb8e6913f23e0c92de8e62cd5b772a67e7b3946df930a62566c93184"
+dependencies = [
+ "bytes",
+ "http",
+]
+
+[[package]]
+name = "http-body-util"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b021d93e26becf5dc7e1b75b1bed1fd93124b374ceb73f43d4d4eafec896a64a"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "http-range-header"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9171a2ea8a68358193d15dd5d70c1c10a2afc3e7e4c5bc92bc9f025cebd7359c"
+
+[[package]]
+name = "httparse"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
+
+[[package]]
+name = "httpdate"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
+
+[[package]]
+name = "hyper"
+version = "1.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2ab2d4f250c3d7b1c9fcdff1cece94ea4e2dfbec68614f7b87cb205f24ca9d11"
+dependencies = [
+ "atomic-waker",
+ "bytes",
+ "futures-channel",
+ "futures-core",
+ "h2",
+ "http",
+ "http-body",
+ "httparse",
+ "httpdate",
+ "itoa",
+ "pin-project-lite",
+ "pin-utils",
+ "smallvec",
+ "tokio",
+]
+
+[[package]]
+name = "hyper-util"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "96547c2556ec9d12fb1578c4eaf448b04993e7fb79cbaad930a656880a6bdfa0"
+dependencies = [
+ "bytes",
+ "http",
+ "http-body",
+ "hyper",
+ "pin-project-lite",
+ "tokio",
+ "tower-service",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7714e70437a7dc3ac8eb7e6f8df75fd8eb422675fc7678aff7364301092b1017"
+dependencies = [
+ "equivalent",
+ "hashbrown",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f42a60cbdf9a97f5d2305f08a87dc4e09308d1276d28c869c684d7777685682"
+
+[[package]]
+name = "lazy_static"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbd2bcb4c963f2ddae06a2efc7e9f3591312473c50c6685e1f298068316e66fe"
+
+[[package]]
+name = "libc"
+version = "0.2.183"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b5b646652bf6661599e1da8901b3b9522896f01e736bad5f723fe7a3a27f899d"
+
+[[package]]
+name = "lock_api"
+version = "0.4.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "224399e74b87b5f3557511d98dff8b14089b3dadafcab6bb93eab67d3aace965"
+dependencies = [
+ "scopeguard",
+]
+
+[[package]]
+name = "log"
+version = "0.4.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
+
+[[package]]
+name = "matchit"
+version = "0.8.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "47e1ffaa40ddd1f3ed91f717a33c8c0ee23fff369e3aa8772b9605cc1d22f4c3"
+
+[[package]]
+name = "memchr"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
+
+[[package]]
+name = "mime"
+version = "0.3.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
+
+[[package]]
+name = "mime_guess"
+version = "2.0.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7c44f8e672c00fe5308fa235f821cb4198414e1c77935c1ab6948d3fd78550e"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
+[[package]]
+name = "mio"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50b7e5b27aa02a74bac8c3f23f448f8d87ff11f92d3aac1a6ed369ee08cc56c1"
+dependencies = [
+ "libc",
+ "wasi",
+ "windows-sys",
+]
+
+[[package]]
+name = "nu-ansi-term"
+version = "0.50.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7957b9740744892f114936ab4a57b3f487491bbeafaf8083688b16841a4240e5"
+dependencies = [
+ "windows-sys",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.21.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
+
+[[package]]
+name = "parking_lot"
+version = "0.12.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "93857453250e3077bd71ff98b6a65ea6621a19bb0f559a85248955ac12c45a1a"
+dependencies = [
+ "lock_api",
+ "parking_lot_core",
+]
+
+[[package]]
+name = "parking_lot_core"
+version = "0.9.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2621685985a2ebf1c516881c026032ac7deafcda1a2c9b7850dc81e3dfcb64c1"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "redox_syscall",
+ "smallvec",
+ "windows-link",
+]
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
+
+[[package]]
+name = "pin-utils"
+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"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "redox_syscall"
+version = "0.5.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
+dependencies = [
+ "bitflags",
+]
+
+[[package]]
+name = "ryu"
+version = "1.0.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9774ba4a74de5f7b1c1451ed6cd5285a32eddb5cccb8cc655a4e50009e06477f"
+
+[[package]]
+name = "scopeguard"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
+
+[[package]]
+name = "serde"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.149"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+dependencies = [
+ "itoa",
+ "memchr",
+ "serde",
+ "serde_core",
+ "zmij",
+]
+
+[[package]]
+name = "serde_path_to_error"
+version = "0.1.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10a9ff822e371bb5403e391ecd83e182e0e77ba7f6fe0160b795797109d1b457"
+dependencies = [
+ "itoa",
+ "serde",
+ "serde_core",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "sharded-slab"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
+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"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c4db69cba1110affc0e9f7bcd48bbf87b3f4fc7c61fc9155afd4c469eb3d6c1b"
+dependencies = [
+ "errno",
+ "libc",
+]
+
+[[package]]
+name = "slab"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
+
+[[package]]
+name = "smallvec"
+version = "1.15.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+
+[[package]]
+name = "socket2"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3a766e1110788c36f4fa1c2b71b387a7815aa65f88ce0229841826633d93723e"
+dependencies = [
+ "libc",
+ "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"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "sync_wrapper"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0bf256ce5efdfa370213c1dabab5935a12e49f2c58d15e9eac2870d3b4f27263"
+
+[[package]]
+name = "thread_local"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f60246a4944f24f6e018aa17cdeffb7818b76356965d03b07d6a9886e8962185"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "tokio"
+version = "1.50.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27ad5e34374e03cfffefc301becb44e9dc3c17584f414349ebe29ed26661822d"
+dependencies = [
+ "bytes",
+ "libc",
+ "mio",
+ "parking_lot",
+ "pin-project-lite",
+ "signal-hook-registry",
+ "socket2",
+ "tokio-macros",
+ "windows-sys",
+]
+
+[[package]]
+name = "tokio-macros"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c55a2eff8b69ce66c84f85e1da1c233edc36ceb85a2058d11b0d6a3c7e7569c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tokio-util"
+version = "0.7.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9ae9cec805b01e8fc3fd2fe289f89149a9b66dd16786abd8b19cfa7b48cb0098"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "tower"
+version = "0.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ebe5ef63511595f1344e2d5cfa636d973292adc0eec1f0ad45fae9f0851ab1d4"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project-lite",
+ "sync_wrapper",
+ "tokio",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.6.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
+dependencies = [
+ "bitflags",
+ "bytes",
+ "futures-core",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
+ "pin-project-lite",
+ "tokio",
+ "tokio-util",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "121c2a6cda46980bb0fcd1647ffaf6cd3fc79a013de288782836f6df9c48780e"
+
+[[package]]
+name = "tower-service"
+version = "0.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8df9b6e13f2d32c91b9bd719c00d1958837bc7dec474d94952798cc8e69eeec3"
+
+[[package]]
+name = "tracing"
+version = "0.1.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
+dependencies = [
+ "log",
+ "pin-project-lite",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
+dependencies = [
+ "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
+dependencies = [
+ "log",
+ "once_cell",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb7f578e5945fb242538965c2d0b04418d38ec25c79d160cd279bf0731c8d319"
+dependencies = [
+ "nu-ansi-term",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing-core",
+ "tracing-log",
+]
+
+[[package]]
+name = "unicase"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dbc4bc3a9f746d862c45cb89d705aa10f187bb96c76001afab07a0d35ce60142"
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
+
+[[package]]
+name = "valuable"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ba73ea9cf16a25df0c8caa16c51acb937d5712a8429db78a3ee29d5dcacd3a65"
+
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
+
+[[package]]
+name = "windows-sys"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "zmij"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"

backend/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "backend"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+axum = "0.8.8"
+axum-server = "0.8.0"
+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/object.rs

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

backend/src/main.rs

@@ -0,0 +1,59 @@
+use axum::{Router, response::Html, routing::get};
+use std::net::SocketAddr;
+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))
+        .route("/game", get(game))
+        .nest_service("/web/assets", ServeDir::new("../web/assets"));
+
+    let addr = SocketAddr::from(([0, 0, 0, 0], 3500));
+    println!("listening on {}", addr);
+    axum_server::bind(addr)
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}
+
+async fn handler() -> Html<String> {
+    let html_content = read_html_from_file("../web/templates/view/index.html")
+        .await
+        .unwrap_or_else(|_| "<h1>Error loading HTML file</h1>".to_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();
+    file.read_to_string(&mut contents).await?;
+    Ok(contents)
+}

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

@@ -20,6 +20,71 @@ body {
     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;
@@ -108,7 +173,7 @@ main {
 
 .laser {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/Laser.svg");
+    background-image: url("/web/assets/img/tiles/Laser.svg");
     background-size: 80%;
     background-repeat: no-repeat;
     background-position: center;
@@ -117,7 +182,7 @@ main {
 
 .colored-laser {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/Prisme.svg");
+    background-image: url("/web/assets/img/tiles/Prisme.svg");
     background-size: 80%;
     background-repeat: no-repeat;
     background-position: center;
@@ -137,15 +202,31 @@ main {
 
 .wall {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/Tuile.svg");
+    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("../img/tiles/Capteur-1.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-1.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -154,39 +235,97 @@ main {
 
 .captor-turn {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/Capteur-2.svg");
+    background-image: url("/web/assets/img/tiles/Capteur-2.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
 }
 
-.cable {
+.captor-turn-reverse {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/CableV.svg");
+    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-vertical {
+.cable {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/CableV.svg");
+    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("../img/tiles/WoodenDoor.svg");
+    background-image: url("/web/assets/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-image: url("/web/assets/img/tiles/WoodenDoor_openned.svg");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: end;
@@ -194,7 +333,7 @@ main {
 
 .button {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/ButtonComplete.svg"), url("../img/tiles/Tuile.svg");
+    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;
@@ -202,7 +341,15 @@ main {
 
 .button-2 {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/ButtonQuarter.svg"), url("../img/tiles/Tuile.svg");
+    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;
@@ -214,7 +361,7 @@ main {
 
 .target {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/Trigger.svg");
+    background-image: url("/web/assets/img/tiles/Trigger.svg");
     background-size: 80%;
     background-repeat: no-repeat;
     background-position: center;
@@ -222,7 +369,7 @@ main {
 
 .demi-wall-corner-up-left {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/TopLeft.svg");
+    background-image: url("/web/assets/img/tiles/TopLeft.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -230,7 +377,7 @@ main {
 
 .demi-wall-corner-up-right {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/TopRight.svg");
+    background-image: url("/web/assets/img/tiles/TopRight.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -238,7 +385,7 @@ main {
 
 .demi-wall-corner-down-left {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/BottomLeft.svg");
+    background-image: url("/web/assets/img/tiles/BottomLeftAngle.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -246,7 +393,7 @@ main {
 
 .demi-wall-corner-down-right {
     background-color: #DADEEF;
-    background-image: url("../img/tiles/BottomRight.svg");
+    background-image: url("/web/assets/img/tiles/BottomRightAngle.svg");
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center;
@@ -308,6 +455,10 @@ main {
     justify-content: center;
 }
 
+.btn-mirror-locked {
+    cursor: default;
+}
+
 .mirror-img {
     width: 80%;
     height: 80%;
@@ -329,6 +480,24 @@ main {
     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: "";

web/assets/css/index.css

@@ -0,0 +1,253 @@
+@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;
+}
+
+.leftadsbanner.is-hidden {
+    display: none;
+}
+
+.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;
+    }
+
+    .adsbanner,
+    .leftadsbanner {
+        display: none;
+    }
+}
+
+.hero-play-button {
+  font-family: inherit;
+  font-size: 20px;
+  background: #8ea3fd;
+  color: white;
+  padding: 1rem 10rem;
+  display: flex;
+  align-items: center;
+  justify-content: center; /* Ensure SVG/button content is horizontally centered */
+  border: none;
+  border-radius: 50px;
+  overflow: hidden;
+  transition: all 0.2s;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(30, 80, 255, 0.10);
+  /* Button grows/shrinks with container at low widths */
+  width: 100%;
+  max-width: 500px;
+  min-width: 180px;
+  box-sizing: border-box;
+}
+.hero-play-button:hover {
+  background: #7286e0;
+  transform: translateY(-2px);
+}
+
+.hero-play-button:active {
+  transform: scale(0.95);
+}
+
+.hero-play-button svg {
+  width: 2em;
+  height: 1em;
+  min-width: 1.2em;
+  min-height: 1em;
+  margin-right: 0.6em;
+  color: var(--clr-surface-a0);
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: inline-block;
+  vertical-align: middle;
+}

web/assets/img/tiles/BottomLeft.svg

@@ -1,17 +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"/>
+<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="5.5" cy="13.5" r="1.5" transform="rotate(-180 5.5 13.5)" fill="#4A4A4A"/>
+<circle cx="4.5" cy="8.5" r="1.5" transform="rotate(-180 4.5 8.5)" fill="#4A4A4A"/>
-<circle cx="5.5" cy="13.5" r="1" transform="rotate(-180 5.5 13.5)" fill="#898989"/>
+<circle cx="4.5" cy="8.5" r="1" transform="rotate(-180 4.5 8.5)" fill="#898989"/>
-<circle cx="86.5" cy="94.5" r="1.5" transform="rotate(-180 86.5 94.5)" fill="#4A4A4A"/>
+<circle cx="94.5" cy="94.5" r="1.5" transform="rotate(-180 94.5 94.5)" fill="#4A4A4A"/>
-<circle cx="86.5" cy="94.5" r="1" transform="rotate(-180 86.5 94.5)" fill="#898989"/>
+<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_17_89" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<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_17_89" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<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>

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.svg

@@ -1,17 +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"/>
+<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="13.5" cy="94.5" r="1.5" transform="rotate(90 13.5 94.5)" fill="#4A4A4A"/>
+<circle cx="5.5" cy="94.5" r="1.5" transform="rotate(90 5.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="5.5" cy="94.5" r="1" transform="rotate(90 5.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="5.5" cy="53.5" r="1.5" transform="rotate(90 5.5 53.5)" fill="#4A4A4A"/>
-<circle cx="94.5" cy="13.5" r="1" transform="rotate(90 94.5 13.5)" fill="#898989"/>
+<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_19_190" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
+<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_19_190" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
+<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>

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/js/game.js

@@ -20,6 +20,16 @@ const legend = {
     cable: 16,
     captorTurn: 17,
     cableVertical: 18,
+    captorTurnReturn: 19,
+    rotatorButton: 20,
+    cableTurn: 21,
+    horizontalSemi: 22,
+    cableTurnHorizontale: 23,
+    cableTurnHorizontale2: 24,
+    captorTurnHorizontal: 25,
+    wallSemiAngle: 26,
+    cableTurnHorizontale3: 27,
+    captorVerticalTop: 28
 };
 
 const laserColors = {
@@ -30,34 +40,69 @@ const laserColors = {
 };
 
 const glassOptions = [
-    laserColors.red,
+    [
-    laserColors.blue,
+        { color: laserColors.red, maxAmount: 1, currentAmount: 1 },
-    laserColors.yellow,
+        { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.yellow, maxAmount: 0, currentAmount: 0 },
+    ],
+    [
+        { color: laserColors.red, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
+    ],
+    [
+        { color: laserColors.red, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.blue, maxAmount: 2, currentAmount: 2 },
+        { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
+    ],
+    [
+        { color: laserColors.red, maxAmount: 2, currentAmount: 2 },
+        { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.yellow, maxAmount: 2, currentAmount: 2 },
+    ],
+    [
+        { color: laserColors.red, maxAmount: 3, currentAmount: 3 },
+        { color: laserColors.blue, maxAmount: 2, currentAmount: 2 },
+        { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
+    ],
 ];
 
 let levels = [
     [
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 1, 0, 5, 4, 0, 10, 6, 0, 0, 0, 0],
+        [6, 6, 6, 6, 1, 0, 5, 4, 0, 10, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 7, 6, 6, 6, 6, 0, 6, 0, 0, 0, 0],
+        [6, 6, 6, 6, 7, 6, 6, 6, 6, 0, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 3, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
+        [6, 6, 6, 6, 3, 0, 0, 0, 0, 12, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+    ],
+
+    [
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 1, 0, 0, 0, 17, 0, 0, 3, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 18, 6, 6, 0, 6, 6, 6, 6, 6],
+        [6, 6, 7, 0, 0, 0, 4, 0, 0, 12, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
+        [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
     ],
 
     [
         [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
+        [0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
-        [0, 0, 1, 0, 0, 0, 17, 0, 0, 3, 6, 0, 0, 0, 0],
+        [7, 1, 0, 0, 0, 4, 0, 0, 0, 3, 21, 0, 0, 0, 0],
-        [0, 0, 6, 6, 6, 6, 18, 6, 6, 0, 6, 0, 0, 0, 0],
+        [0, 6, 6, 6, 6, 18, 6, 6, 6, 0, 18, 0, 0, 0, 0],
-        [0, 0, 7, 0, 0, 0, 4, 0, 0, 12, 6, 0, 0, 0, 0],
+        [0, 6, 9, 0, 0, 19, 0, 0, 0, 12, 18, 0, 0, 0, 0],
-        [0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
+        [0, 6, 0, 6, 6, 6, 6, 6, 6, 24, 23, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 6, 11, 0, 0, 0, 0, 0, 20, 23, 9, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 10, 6, 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, 0],
     ],
@@ -66,46 +111,85 @@ let levels = [
         [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, 0, 0, 0, 10, 6, 0, 0, 0, 0],
-        [0, 0, 0, 0, 3, 16, 16, 15, 0, 3, 6, 0, 0, 0, 0],
+        [0, 0, 0, 3, 0, 16, 16, 20, 0, 3, 6, 0, 0, 0, 0],
         [0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
         [0, 0, 0, 0, 12, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
         [0, 0, 0, 0, 6, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 6, 0, 0, 0, 3, 0, 7, 0, 0, 0, 0],
+        [0, 0, 0, 0, 6, 0, 0, 3, 0, 0, 7, 0, 0, 0, 0],
         [0, 0, 0, 0, 6, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         [0, 0, 0, 0, 10, 6, 6, 6, 6, 6, 0, 0, 0, 0, 0],
     ],
 
-/*
     [
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 12, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 12, 6, 9, 0, 10, 6, 9, 0, 0, 0, 3, 0, 17, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [12, 6, 9, 0, 0, 0, 6, 0, 7, 0, 0, 0, 0, 18, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [6, 9, 0, 0, 0, 0, 6, 11, 0, 0, 12, 0, 0, 18, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [1, 0, 0, 0, 0, 12, 6, 6, 11, 0, 0, 3, 0, 18, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [10, 6, 11, 0, 0, 6, 0, 0, 10, 6, 6, 6, 6, 18, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 10, 6, 28, 6, 9, 0, 0, 0, 10, 6, 6, 24, 23, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 10, 27, 16, 3, 4, 0, 0, 0, 10, 24, 23, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 10, 6, 18, 6, 11, 0, 12, 18, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 10, 27, 16, 16, 16, 16, 23, 0, 0, 0],
-    ], */
+    ],
 ];
 
 let currentLevelIndex = 0;
 
-const initialMirrorAngles = {
+const initialMirrorAngles = [
-    "6,4": 315,
+    {
-    "4,3": 315,
+        "6,4": 315,
-};
+    },
+    {},
+    {
+        "2,9": 225,
+    },
+    {},
+    {}
+];
 
-const buttonGroups = {
+const buttonGroups = [
-    "4,6": 1,
+    {
-    "4,7": 2,
+        "4,6": 1,
-};
+    },
+    {},
+    {
+        "9,4": 1,
+    },
+    {}
+];
 
-const doorGroups = {
+const doorGroups = [
-    "4,7": 1,
+    {
-    "4,8": 2,
+        "4,7": 1,
-};
+    },
+    {
+        "4,6": 1,
+    },
+    {},
+    {}
+];
+
+const captorGroups = [
+    {},
+    {
+        "2,6": 1,
+    },
+    {},
+    {}
+];
+
+const rotatorButtons = [
+    {},
+    {},
+    {
+        "6,8": { mirrorX: 9, mirrorY: 2, step: 22.5, intervalMs: 1000 },
+    },
+    {
+        "3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 },
+    },
+    {}
+];
 
 let laserDirection = { dx: 0, dy: 0 };
 let laserSegments = {};
@@ -114,11 +198,147 @@ let glassPlacements = {};
 let activatedButtons = {};
 let openedDoors = {};
 let isLevelFinished = false;
+let activeRotatorButtons = {};
+let rotatorIntervals = {};
+let toggledDoors = {};
+let poweredCaptors = {};
+let draggedGlassColor = null;
+let highestUnlockedLevelIndex = 0;
+const unlockedLevelsStorageKey = "mirror-game-highest-unlocked-level";
 
 function getCurrentLevel() {
     return levels[currentLevelIndex];
 }
 
+function getCurrentLevelConfig(configByLevel) {
+    return configByLevel[currentLevelIndex] || {};
+}
+
+function loadUnlockedLevels() {
+    const savedValue = window.localStorage.getItem(unlockedLevelsStorageKey);
+    const parsedValue = Number.parseInt(savedValue || "0", 10);
+
+    if (Number.isNaN(parsedValue)) {
+        highestUnlockedLevelIndex = 0;
+        return;
+    }
+
+    highestUnlockedLevelIndex = Math.max(0, Math.min(parsedValue, levels.length - 1));
+}
+
+function saveUnlockedLevels() {
+    window.localStorage.setItem(unlockedLevelsStorageKey, String(highestUnlockedLevelIndex));
+}
+
+function unlockLevel(levelIndex) {
+    if (levelIndex <= highestUnlockedLevelIndex || levelIndex >= levels.length) {
+        return;
+    }
+
+    highestUnlockedLevelIndex = levelIndex;
+    saveUnlockedLevels();
+    renderLevelMenu();
+}
+
+function toggleLevelMenu() {
+    const levelMenuPanel = document.getElementById("level-menu-panel");
+    const levelMenuToggle = document.getElementById("level-menu-toggle");
+
+    if (!levelMenuPanel || !levelMenuToggle) {
+        return;
+    }
+
+    const isOpening = levelMenuPanel.hasAttribute("hidden");
+
+    if (isOpening) {
+        levelMenuPanel.removeAttribute("hidden");
+    } else {
+        levelMenuPanel.setAttribute("hidden", "");
+    }
+
+    levelMenuToggle.setAttribute("aria-expanded", String(isOpening));
+}
+
+function renderLevelMenu() {
+    const levelMenuList = document.getElementById("level-menu-list");
+
+    if (!levelMenuList) {
+        return;
+    }
+
+    levelMenuList.innerHTML = "";
+
+    for (let levelIndex = 0; levelIndex < levels.length; levelIndex++) {
+        const levelButton = document.createElement("button");
+        const isUnlocked = levelIndex <= highestUnlockedLevelIndex;
+        const isCurrentLevel = levelIndex === currentLevelIndex;
+
+        levelButton.type = "button";
+        levelButton.classList.add("level-menu-item");
+        levelButton.textContent = isUnlocked ? `Level ${levelIndex + 1}` : `Level ${levelIndex + 1} - Locked`;
+        levelButton.disabled = !isUnlocked;
+
+        if (isCurrentLevel) {
+            levelButton.classList.add("is-current");
+        }
+
+        levelButton.addEventListener("click", () => {
+            if (!isUnlocked) {
+                return;
+            }
+
+            goToLevel(levelIndex);
+            const levelMenuPanel = document.getElementById("level-menu-panel");
+            const levelMenuToggle = document.getElementById("level-menu-toggle");
+
+            if (levelMenuPanel) {
+                levelMenuPanel.setAttribute("hidden", "");
+            }
+
+            if (levelMenuToggle) {
+                levelMenuToggle.setAttribute("aria-expanded", "false");
+            }
+        });
+
+        levelMenuList.appendChild(levelButton);
+    }
+}
+
+function setupLevelMenu() {
+    const levelMenuToggle = document.getElementById("level-menu-toggle");
+
+    if (!levelMenuToggle) {
+        return;
+    }
+
+    levelMenuToggle.addEventListener("click", toggleLevelMenu);
+    renderLevelMenu();
+}
+
+function getCurrentGlassOptions() {
+    return glassOptions[currentLevelIndex] || [];
+}
+
+function getGlassOptionByColor(color) {
+    const currentGlassOptions = getCurrentGlassOptions();
+
+    for (let i = 0; i < currentGlassOptions.length; i++) {
+        if (currentGlassOptions[i].color === color) {
+            return currentGlassOptions[i];
+        }
+    }
+
+    return null;
+}
+
+function resetGlassInventory() {
+    const currentGlassOptions = getCurrentGlassOptions();
+
+    for (let i = 0; i < currentGlassOptions.length; i++) {
+        currentGlassOptions[i].currentAmount = currentGlassOptions[i].maxAmount;
+    }
+}
+
 function normalizeLaserDirection(dx, dy) {
     const epsilon = 0.0001;
     const normalizedDx = Math.abs(dx) < epsilon ? 0 : Math.sign(dx);
@@ -176,11 +396,15 @@ function getButtonGroup(x, y) {
         return 2;
     }
 
-    return buttonGroups[`${y},${x}`] || 1;
+    return getCurrentLevelConfig(buttonGroups)[`${y},${x}`] || 1;
 }
 
 function getDoorGroup(x, y) {
-    return doorGroups[`${y},${x}`] || 1;
+    return getCurrentLevelConfig(doorGroups)[`${y},${x}`] || 1;
+}
+
+function getCaptorGroup(x, y) {
+    return getCurrentLevelConfig(captorGroups)[`${y},${x}`] || getDoorGroup(x, y);
 }
 
 function openDoorsFromButton(x, y) {
@@ -196,6 +420,90 @@ function openDoorsFromButton(x, y) {
     }
 }
 
+function toggleDoorsFromCaptor(x, y) {
+    const captorGroup = getCaptorGroup(x, y);
+    const level = getCurrentLevel();
+
+    for (let doorY = 0; doorY < level.length; doorY++) {
+        for (let doorX = 0; doorX < level[doorY].length; doorX++) {
+            const coordKey = `${doorY},${doorX}`;
+
+            if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === captorGroup) {
+                toggledDoors[coordKey] = !toggledDoors[coordKey];
+            }
+        }
+    }
+}
+
+function getRotatorButtonConfig(x, y) {
+    return getCurrentLevelConfig(rotatorButtons)[`${y},${x}`];
+}
+
+function isMirrorControlledByButton(x, y) {
+    const rotatorEntries = Object.values(getCurrentLevelConfig(rotatorButtons));
+
+    for (let i = 0; i < rotatorEntries.length; i++) {
+        const rotatorConfig = rotatorEntries[i];
+
+        if (rotatorConfig.mirrorX === x && rotatorConfig.mirrorY === y) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function rotateMirrorStep(x, y, angleStep) {
+    const coordKey = `${y},${x}`;
+
+    if (getCurrentLevel()[y][x] !== legend.mirror) {
+        return;
+    }
+
+    let currentAngle = mirrorOrientations[coordKey] || 0;
+    currentAngle = (currentAngle + angleStep) % 360;
+
+    if (currentAngle < 0) {
+        currentAngle += 360;
+    }
+
+    mirrorOrientations[coordKey] = currentAngle;
+}
+
+function syncRotatorButtons() {
+    const currentLevelRotatorButtons = getCurrentLevelConfig(rotatorButtons);
+    const rotatorKeys = Object.keys(currentLevelRotatorButtons);
+
+    for (let i = 0; i < rotatorKeys.length; i++) {
+        const key = rotatorKeys[i];
+        const config = currentLevelRotatorButtons[key];
+        const isActive = activeRotatorButtons[key] === true;
+
+        if (isActive && !rotatorIntervals[key]) {
+            rotatorIntervals[key] = window.setInterval(() => {
+                rotateMirrorStep(config.mirrorX, config.mirrorY, -22.5);
+                traceLaser();
+            }, 1000);
+        }
+
+        if (!isActive && rotatorIntervals[key]) {
+            window.clearInterval(rotatorIntervals[key]);
+            delete rotatorIntervals[key];
+        }
+    }
+}
+
+function stopAllRotatorButtons() {
+    const intervalKeys = Object.keys(rotatorIntervals);
+
+    for (let i = 0; i < intervalKeys.length; i++) {
+        const key = intervalKeys[i];
+        window.clearInterval(rotatorIntervals[key]);
+    }
+
+    rotatorIntervals = {};
+}
+
 function saveLaserSegment(x, y, direction, color) {
     laserSegments[`${y},${x}`] = {
         direction: { ...direction },
@@ -240,17 +548,40 @@ function createPalette() {
 
     palette.innerHTML = "";
 
-    for (let i = 0; i < glassOptions.length; i++) {
+    const currentGlassOptions = getCurrentGlassOptions();
-        const glassColor = glassOptions[i];
+
+    for (let i = 0; i < currentGlassOptions.length; i++) {
+        const glassOption = currentGlassOptions[i];
+        const glassColor = glassOption.color;
         const glassButton = document.createElement("button");
         glassButton.type = "button";
         glassButton.classList.add("glass-item", `glass-${glassColor}`);
-        glassButton.draggable = true;
+        glassButton.draggable = glassOption.currentAmount > 0;
+
+        if (glassOption.currentAmount <= 0) {
+            glassButton.disabled = true;
+        }
+
+        const glassLabel = document.createElement("span");
+        glassLabel.classList.add("glass-item-label");
+        glassLabel.textContent = `${glassOption.currentAmount}/${glassOption.maxAmount}`;
+        glassButton.appendChild(glassLabel);
+
         glassButton.addEventListener("dragstart", (event) => {
+            if (glassOption.currentAmount <= 0) {
+                event.preventDefault();
+                return;
+            }
+
+            draggedGlassColor = glassColor;
             event.dataTransfer.effectAllowed = "copy";
             event.dataTransfer.setData("application/x-glass-color", glassColor);
         });
 
+        glassButton.addEventListener("dragend", () => {
+            draggedGlassColor = null;
+        });
+
         palette.appendChild(glassButton);
     }
 }
@@ -261,7 +592,8 @@ function addDropEvents(cell, x, y) {
             return;
         }
 
-        if (!event.dataTransfer.types.includes("application/x-glass-color")) {
+        const transferTypes = event.dataTransfer ? Array.from(event.dataTransfer.types || []) : [];
+        if (!draggedGlassColor) {
             return;
         }
 
@@ -270,6 +602,13 @@ function addDropEvents(cell, x, y) {
             return;
         }
 
+        const selectedColor = draggedGlassColor;
+        const glassOption = getGlassOptionByColor(selectedColor);
+
+        if (!glassOption || glassOption.currentAmount <= 0) {
+            return;
+        }
+
         event.preventDefault();
         cell.classList.add("can-drop");
     });
@@ -283,7 +622,8 @@ function addDropEvents(cell, x, y) {
             return;
         }
 
-        const selectedColor = event.dataTransfer.getData("application/x-glass-color");
+        const transferredColor = event.dataTransfer ? event.dataTransfer.getData("application/x-glass-color") : "";
+        const selectedColor = transferredColor || draggedGlassColor;
         cell.classList.remove("can-drop");
 
         if (!selectedColor) {
@@ -294,8 +634,21 @@ function addDropEvents(cell, x, y) {
             return;
         }
 
+        if (isGlassOnCell(x, y)) {
+            return;
+        }
+
+        const glassOption = getGlassOptionByColor(selectedColor);
+
+        if (!glassOption || glassOption.currentAmount <= 0) {
+            return;
+        }
+
         event.preventDefault();
         glassPlacements[`${y},${x}`] = selectedColor;
+        glassOption.currentAmount--;
+        draggedGlassColor = null;
+        createPalette();
         traceLaser();
     });
 
@@ -305,7 +658,16 @@ function addDropEvents(cell, x, y) {
         }
 
         if (isGlassOnCell(x, y)) {
+            const glassColor = glassPlacements[`${y},${x}`];
+            const glassOption = getGlassOptionByColor(glassColor);
+
             delete glassPlacements[`${y},${x}`];
+
+            if (glassOption) {
+                glassOption.currentAmount = Math.min(glassOption.currentAmount + 1, glassOption.maxAmount);
+            }
+
+            createPalette();
             traceLaser();
         }
     });
@@ -328,7 +690,7 @@ function initializeMirrorOrientations() {
     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;
+                mirrorOrientations[`${y},${x}`] = getCurrentLevelConfig(initialMirrorAngles)[`${y},${x}`] || 0;
             }
         }
     }
@@ -361,23 +723,31 @@ function loadGrid() {
                 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.src = "/web/assets/img/tiles/Mirror.svg";
                     img.classList.add("mirror-img");
                     img.style.transform = `rotate(${currentAngle}deg)`;
-                    btnMirror.appendChild(img);
+
-                    btnMirror.onmousedown = (event) => {
+                    if (isMirrorControlledByButton(x, y)) {
-                        event.preventDefault();
+                        const mirrorDisplay = document.createElement("div");
-                        event.stopPropagation();
+                        mirrorDisplay.classList.add("btn-mirror", "btn-mirror-locked");
-                        if (!isLevelFinished) {
+                        mirrorDisplay.appendChild(img);
-                            rotateMirror(x, y, event.button === 2);
+                        cell.appendChild(mirrorDisplay);
-                        }
+                    } else {
-                    };
+                        const btnMirror = document.createElement("button");
-                    btnMirror.oncontextmenu = (event) => event.preventDefault();
+                        btnMirror.classList.add("btn-mirror");
-                    cell.appendChild(btnMirror);
+                        btnMirror.type = "button";
+                        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");
@@ -400,6 +770,12 @@ function loadGrid() {
                         cell.classList.add("button-active");
                     }
                     break;
+                case legend.rotatorButton:
+                    cell.classList.add("button", "button-rotator");
+                    if (activatedButtons[`${y},${x}`]) {
+                        cell.classList.add("button-active");
+                    }
+                    break;
                 case legend.wall:
                     cell.classList.add("wall");
                     break;
@@ -430,6 +806,33 @@ function loadGrid() {
                 case legend.cableVertical:
                     cell.classList.add("cable-vertical");
                     break;
+                case legend.captorTurnReturn:
+                    cell.classList.add("captor-turn-reverse");
+                    break;
+                case legend.cableTurn:
+                    cell.classList.add("cable-turn");
+                    break;
+                case legend.horizontalSemi:
+                    cell.classList.add("horizontal-semi");
+                    break;
+                case legend.cableTurnHorizontale:
+                    cell.classList.add("cable-turn-horizontale");
+                    break;
+                case legend.cableTurnHorizontale2:
+                    cell.classList.add("cable-turn-horizontale2");
+                    break;
+                case legend.captorTurnHorizontal:
+                    cell.classList.add("captor-turn-horizontale2");
+                    break;
+                case legend.cableTurnHorizontale3:
+                    cell.classList.add("cable-turn-horizontale3");
+                    break;
+                case legend.wallSemiAngle:
+                    cell.classList.add("wall-semi-angle");
+                    break;
+                case legend.captorVerticalTop:
+                    cell.classList.add("captor-vertical-top");
+                    break;
             }
 
             drawLaserInCell(cell, laserSegments[`${y},${x}`]);
@@ -442,28 +845,17 @@ function loadGrid() {
 }
 
 function rotateMirror(x, y, isRightClick) {
-    const coordKey = `${y},${x}`;
+    rotateMirrorStep(x, y, isRightClick ? 22.5 : -22.5);
-
-    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 = {};
+    openedDoors = { ...toggledDoors };
+    activeRotatorButtons = {};
     isLevelFinished = false;
+    const nextPoweredCaptors = {};
 
     const level = getCurrentLevel();
     let startLaserX;
@@ -512,10 +904,21 @@ function traceLaser() {
             currentLaserColor = glassColor;
         }
 
+        if (currentLaserColor === laserColors.yellow) {
+            saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+
+            if (cellType === legend.target) {
+                laserActive = false;
+                isLevelFinished = true;
+            }
+
+            continue;
+        }
+
         switch (cellType) {
             case legend.laser:
             case legend.coloredLaser:
-                laserActive = false;
+                saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                 break;
 
             case legend.empty:
@@ -546,7 +949,27 @@ function traceLaser() {
                     laserActive = false;
                 }
                 break;
-
+            case legend.wallSemiAngle:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.horizontalSemi:
+                if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 0);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.cableVertical:
+            case legend.cableTurn:
             case legend.door:
             case legend.doorOpen:
                 if (openedDoors[`${currentY},${currentX}`] || cellType === legend.doorOpen) {
@@ -559,7 +982,6 @@ function traceLaser() {
                     laserActive = false;
                 }
                 break;
-
             case legend.button:
             case legend.button2:
                 if (currentLaserColor === laserColors.red) {
@@ -575,20 +997,132 @@ function traceLaser() {
                 }
                 break;
 
+            case legend.captor:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.captorTurn:
+                if (currentLaserColor === laserColors.red) {
+                    const captorKey = `${currentY},${currentX}`;
+                    activatedButtons[captorKey] = true;
+                    nextPoweredCaptors[captorKey] = true;
+
+                    if (!poweredCaptors[captorKey]) {
+                        toggleDoorsFromCaptor(currentX, currentY);
+                        openedDoors = { ...toggledDoors };
+                    }
+
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.captorTurnReturn:
+                if (currentLaserColor === laserColors.red) {
+                    const captorKey = `${currentY},${currentX}`;
+                    activatedButtons[captorKey] = true;
+                    nextPoweredCaptors[captorKey] = true;
+
+                    if (!poweredCaptors[captorKey]) {
+                        toggleDoorsFromCaptor(currentX, currentY);
+                        openedDoors = { ...toggledDoors };
+                    }
+
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.captorTurnHorizontal:
+                if (currentLaserColor === laserColors.red) {
+                    const captorKey = `${currentY},${currentX}`;
+                    activatedButtons[captorKey] = true;
+                    nextPoweredCaptors[captorKey] = true;
+
+                    if (!poweredCaptors[captorKey]) {
+                        toggleDoorsFromCaptor(currentX, currentY);
+                        openedDoors = { ...toggledDoors };
+                    }
+
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.captorVerticalTop:
+                if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else {
+                    laserActive = false;
+                }
+                break;
+            case legend.rotatorButton:
+                if (currentLaserColor === laserColors.red) {
+                    const rotatorKey = `${currentY},${currentX}`;
+                    activatedButtons[rotatorKey] = true;
+                    activeRotatorButtons[rotatorKey] = true;
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserActive = false;
+                } else if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    laserDirection = reverseLaser(laserDirection);
+                    laserActive = false;
+                } else {
+                    laserActive = false;
+                }
+                break;
+
             case legend.demiWallCornerUpLeft:
-                laserDirection = reflectLaser(laserDirection, 135);
+                if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 135);
+                }
                 break;
 
             case legend.demiWallCornerUpRight:
-                laserDirection = reflectLaser(laserDirection, 45);
+                if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 45);
+                }
                 break;
 
             case legend.demiWallCornerDownLeft:
-                laserDirection = reflectLaser(laserDirection, 225);
+                if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 225);
+                }
                 break;
 
             case legend.demiWallCornerDownRight:
-                laserDirection = reflectLaser(laserDirection, 315);
+                if (currentLaserColor === laserColors.yellow) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                } else if (currentLaserColor === laserColors.blue) {
+                    saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
+                    laserDirection = reflectLaser(laserDirection, 315);
+                }
                 break;
 
             default:
@@ -597,6 +1131,8 @@ function traceLaser() {
         }
     }
 
+    poweredCaptors = nextPoweredCaptors;
+    syncRotatorButtons();
     loadGrid();
 
     if (isLevelFinished) {
@@ -605,35 +1141,46 @@ function traceLaser() {
 }
 
 function finish() {
+    unlockLevel(currentLevelIndex + 1);
+
     setTimeout(() => {
         const winOverlay = document.querySelector(".win-overlay");
         winOverlay.style.visibility = "visible";
     }, 100);
 }
 
-function nextLevel() {
+function goToLevel(levelIndex) {
-    currentLevelIndex++;
+    currentLevelIndex = levelIndex;
-
     isLevelFinished = false;
+    stopAllRotatorButtons();
 
-    if (currentLevelIndex >= levels.length) {
-        currentLevelIndex = 0;
-    }
-
-    initializeMirrorOrientations();
-    loadGrid();
-    laserSegments = {};
     mirrorOrientations = {};
-    glassPlacements = {};
+    laserSegments = {};
     activatedButtons = {};
     openedDoors = {};
+    toggledDoors = {};
+    poweredCaptors = {};
+    initializeMirrorOrientations();
+    glassPlacements = {};
+    resetGlassInventory();
+    createPalette();
+    loadGrid();
     traceLaser();
 
     const winOverlay = document.querySelector(".win-overlay");
     winOverlay.style.visibility = "hidden";
+    renderLevelMenu();
 }
 
+function nextLevel() {
+    const nextLevelIndex = currentLevelIndex + 1 >= levels.length ? 0 : currentLevelIndex + 1;
+    goToLevel(nextLevelIndex);
+}
+
+loadUnlockedLevels();
+resetGlassInventory();
 createPalette();
 initializeMirrorOrientations();
 blockBrowserDrop();
+setupLevelMenu();
 traceLaser();

web/assets/js/index.js

@@ -1,9 +0,0 @@
-function rotateMirror(mirror) {
-    let angle = 0;
-    if (mirror.style.transform == "") {
-        angle = 0;
-    } else {
-        angle = parseInt(mirror.style.transform.split("(")[1].split("deg")[0])%360;
-    }
-    mirror.style.transform = `rotate(${angle+45}deg)`;
-}

web/templates/view/game.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../../assets/css/game.css">
+    <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>
@@ -15,6 +15,16 @@
       <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',
@@ -46,6 +56,6 @@
       </script>
       <script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
       
-    <script src="../../assets/js/game.js" defer></script>
+    <script src="/web/assets/js/game.js" defer></script>
 </body>
 </html>