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
+Test
+backend/user.db

README.md

@@ -1,35 +1,117 @@
-Règles :
+<div align="center">
+  <h1 align="center">MirrorGame</h1>
+  <p align="center">
+    Browser puzzle game where you guide lasers with mirrors, tinted glass, doors, and triggers.
+    <br />
+    <br />
+    <a href="https://git.ninolbt.com/Nono/Projet_48h/issues">⚠️ Report Bug</a>
+    ·
+    <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>
 
-- Un rayon laser constant
+---
 
-- Un ou plusieurs laser
+### 🔍 Overview
 
-- Laser non movibles, peut-être allumé/éteins
+`MirrorGame` is a small laser-reflection puzzle game built during a game jam format.
 
-- Mirroirs orientables
+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.
 
-- Prisme (dédouble le laser ou le renvoi selon l'angle)
+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`.
 
-- Vitre colorée fixe ou placable par le joueur (r,j,b)
+### ✨ Features
 
-- Bouton allumable par clique souris (interaction porte, mirroir, etc)
+- **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.
 
-- Bouton allumable par laser spécifique (interaction porte, mirroir, etc)
+### 🎮 Live Demo
 
+Play here: [MirrorGame](https://gamegamegame.ninolbt.com/)
 
-Rayon : 
+### 🖼️ Screenshot
 
-- Blanc -> Rebondis seulement sur les mirroirs et s'arrête contre les murs
+Main menu:
 
-- Rouge -> Allumage des récepteurs
+![MirrorGame](./web/assets/img/image_game.png)
 
-- Bleu -> Rebondis sur toutes les surfaces (murs compris)
+### 🧰 Requirements
 
-- Jaune -> Traverse tout (mirroir compris)
+- Rust and Cargo
+- A modern desktop browser
 
+---
 
-Systeme de placement d'objet par grille
+### 🚀 Installation and usage
 
-Comptes utilisateur
+#### Option 1 — Play online
 
-Optionnel : timer, tableau de score, 
+- 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,9 +4,12 @@ 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))
@@ -34,6 +37,20 @@ async fn game() -> Html<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

@@ -1,24 +1,17 @@
 use sqlite::Connection;
-// use sodiumoxide::crypto::secretbox;
 
 pub struct User {
     name: String,
     level: u32,
-    // password: [u8],
 }
 
 impl User {
-    pub fn open(name: String, level: u32, password: [u8]) -> User {
-        User {name, level, password}
+    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 fn get_password(&self) -> [u8]{return self.password.clone()}
-
-    // pub fn check_password(&self,nonce:secretbox::Nonce,key:secretbox::Key){
-    //     assert!("" == secretbox::open(self.get_password(), &nonce, &key).unwrap()[..]);
-    // }
 }
 
 

web/assets/css/game.css

@@ -258,6 +258,15 @@ main {
     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");
@@ -274,6 +283,14 @@ main {
     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");

web/assets/js/game.js

@@ -24,10 +24,12 @@ const legend = {
     rotatorButton: 20,
     cableTurn: 21,
     horizontalSemi: 22,
-    cableTurnHorizontale : 23,
-    cableTurnHorizontale2 : 24,
-    captorTurnHorizontal : 25,
+    cableTurnHorizontale: 23,
+    cableTurnHorizontale2: 24,
+    captorTurnHorizontal: 25,
     wallSemiAngle: 26,
+    cableTurnHorizontale3: 27,
+    captorVerticalTop: 28
 };
 
 const laserColors = {
@@ -41,7 +43,7 @@ const glassOptions = [
     [
         { color: laserColors.red, maxAmount: 1, currentAmount: 1 },
         { color: laserColors.blue, maxAmount: 1, currentAmount: 1 },
-        { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
+        { color: laserColors.yellow, maxAmount: 0, currentAmount: 0 },
     ],
     [
         { color: laserColors.red, maxAmount: 1, currentAmount: 1 },
@@ -49,15 +51,20 @@ const glassOptions = [
         { color: laserColors.yellow, maxAmount: 1, currentAmount: 1 },
     ],
     [
-        { color: laserColors.red, maxAmount: 2, currentAmount: 2 },
-        { color: laserColors.blue, maxAmount: 2, currentAmount:2},
-        { color: laserColors.yellow, maxAmount: 2, currentAmount: 2 },
+        { 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 = [
@@ -112,20 +119,21 @@ let levels = [
         [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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-    ], */
+        [0, 0, 12, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0],
+        [0, 12, 6, 9, 0, 10, 6, 9, 0, 0, 0, 3, 0, 17, 0],
+        [12, 6, 9, 0, 0, 0, 6, 0, 7, 0, 0, 0, 0, 18, 0],
+        [6, 9, 0, 0, 0, 0, 6, 11, 0, 0, 12, 0, 0, 18, 0],
+        [1, 0, 0, 0, 0, 12, 6, 6, 11, 0, 0, 3, 0, 18, 0],
+        [10, 6, 11, 0, 0, 6, 0, 0, 10, 6, 6, 6, 6, 18, 0],
+        [0, 10, 6, 28, 6, 9, 0, 0, 0, 10, 6, 6, 24, 23, 0],
+        [0, 0, 10, 27, 16, 3, 4, 0, 0, 0, 10, 24, 23, 0, 0],
+        [0, 0, 0, 0, 10, 6, 18, 6, 11, 0, 12, 18, 0, 0, 0],
+        [0, 0, 0, 0, 0, 10, 27, 16, 16, 16, 16, 23, 0, 0, 0],
+    ],
+];
+
 let currentLevelIndex = 0;
 
 const initialMirrorAngles = [
@@ -136,6 +144,7 @@ const initialMirrorAngles = [
     {
         "2,9": 225,
     },
+    {},
     {}
 ];
 
@@ -147,6 +156,7 @@ const buttonGroups = [
     {
         "9,4": 1,
     },
+    {}
 ];
 
 const doorGroups = [
@@ -157,6 +167,7 @@ const doorGroups = [
         "4,6": 1,
     },
     {},
+    {}
 ];
 
 const captorGroups = [
@@ -165,6 +176,7 @@ const captorGroups = [
         "2,6": 1,
     },
     {},
+    {}
 ];
 
 const rotatorButtons = [
@@ -176,6 +188,7 @@ const rotatorButtons = [
     {
         "3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 },
     },
+    {}
 ];
 
 let laserDirection = { dx: 0, dy: 0 };
@@ -811,9 +824,15 @@ function loadGrid() {
                 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}`]);
@@ -1000,7 +1019,7 @@ function traceLaser() {
 
                     saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                     laserActive = false;
-                }else if(currentLaserColor === laserColors.yellow) {
+                } else if (currentLaserColor === laserColors.yellow) {
                     saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                 } else {
                     laserActive = false;
@@ -1019,7 +1038,7 @@ function traceLaser() {
 
                     saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                     laserActive = false;
-                }else if(currentLaserColor === laserColors.yellow) {
+                } else if (currentLaserColor === laserColors.yellow) {
                     saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                 } else {
                     laserActive = false;
@@ -1038,7 +1057,16 @@ function traceLaser() {
 
                     saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
                     laserActive = false;
-                }else if(currentLaserColor === laserColors.yellow) {
+                } 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;