From 45ad31d0aee5fbf1f8727fd7b8677b3e1cadd7ca Mon Sep 17 00:00:00 2001
From: Hatmos <thomas.letellier2812@gmail.com>
Date: Sun, 2 Aug 2026 22:27:00 +0200
Subject: [PATCH] refactor: fin de la premiere refactorisation du projet

---
 client/index.html     | 153 +++---------------------------------------
 client/js/canvas.js   |  47 +++++++++++++
 client/js/main.js     |  48 +++++++++++++
 client/js/movement.js |  35 ++++++++++
 client/js/player.js   |   6 ++
 client/js/role.js     |   6 ++
 client/js/socket.js   |   4 ++
 client/js/ui.js       |  17 +++++
 client/maze.js        |  16 +++++
 server/config.js      |  10 +++
 server/doorLogic.js   |  48 +++++++++++++
 server/gameState.js   |  11 +++
 server/maze.js        |  11 +++
 server/timer.js       |  29 ++++++++
 14 files changed, 299 insertions(+), 142 deletions(-)
 create mode 100644 client/maze.js
diff --git a/client/index.html b/client/index.html
index 343f0de..c954468 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,156 +2,25 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <title>Ma page</title>
+  <title>Echoes</title>
+  <style>
+    body { font-family: sans-serif; max-width: 520px; margin: 40px auto; padding: 0 20px; }
+  </style>
 </head>
 <body>
-  <h1>Bonjour !</h1>
-  <p>Ceci est une page statique servie par Express.</p>
-  <p id="timerDisplay">Temps restant : --</p>
+  <h1>Echoes</h1>
   <canvas id="maze" width="490" height="490" style="border: 1px solid #333;"></canvas>
-  <input type="text" id="input" placeholder="message">
-  <button id="sendBtn">Envoyer</button>
-  <script src="/socket.io/socket.io.js"></script>
-  <script>
-    const socket = io();
-    let myRole = null;
-    console.log("Connecte au serveur, id :", socket.id);
 
-    socket.on("timer", (timeLeft) => {
-      document.getElementById("timerDisplay").textContent = `Temps restant : ${timeLeft}s`;
-    });
-
-    socket.on("new_round", (startPos) => {
-      player.x = startPos.x;
-      player.y = startPos.y;
-    });
-    
-    socket.on("role", (role) => {
-      console.log("Mon role :", role);
-      myRole = role;
-      
-      if (role === "explorateur"){
-        canvas.style.display = "block";
-        render();
-      } else {
-        drawBlind();
-      }
-    });
-
-    socket.on("status", (msg) => console.log("Status :", msg));
-    document.getElementById("sendBtn").addEventListener("click", () => {
-      const text = document.getElementById("input").value;
-      socket.emit("message", text);
-    });
-    socket.on("message", (data) => {
-      console.log("message recu du partenaire :", data);
-    });
-  
-    const maze = [
-      [1,1,1,1,1,1,1],
-      [1,0,0,0,1,0,1],
-      [1,0,1,0,1,0,1],
-      [1,0,1,0,1,0,1],
-      [1,0,1,1,1,0,1],
-      [1,0,0,0,0,0,1],
-      [1,1,2,1,1,2,1],
-    ];
-    
-    const canvas = document.getElementById("maze");
-    const ctx = canvas.getContext("2d");
-    const cellSize = 70;
-    const player = { x : 1, y : 1};
-
-    function drawBlind(){
-      ctx.fillStyle = "black";
-      ctx.fillRect(0,0, canvas.width, canvas.height);
-    }
-    
-    function drawMaze(){
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      for (let y = 0; y < maze.length; y++){
-        for (let x = 0; x < maze[y].length; x++){
-          if (maze[y][x] === 1)ctx.fillStyle = "#333";
-          else if (maze[y][x] === 2) ctx.fillStyle = "gold";
-          else ctx.fillStyle = "#eee";
-          
-          ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
-        }
-      }
-    }
-
-    function drawPlayer(){
-      ctx.fillStyle = "red";
-      ctx.beginPath();
-      ctx.arc(
-        player.x * cellSize + cellSize / 2,
-        player.y * cellSize + cellSize / 2,
-        cellSize / 3,
-        0, Math.PI * 2
-      );
-      ctx.fill();
-    }
-
-    function render(){
-      drawMaze();
-      drawPlayer();
-    }
-
-    function showGameOver(message){
-      document.getElementById("gameOverMessage").textContent = message;
-      document.getElementById("gameOverScreen").style.display = "block";
-      myRole = null;
-    }
-    
-    document.addEventListener("keydown", (e) => {
-      if (myRole !== "explorateur") return;
-    
-      let newX = player.x;
-      let newY = player.y;
-
-      if (e.key === "ArrowUp") newY--;
-      else if (e.key === "ArrowDown") newY++;
-      else if (e.key === "ArrowLeft") newX--;
-      else if (e.key === "ArrowRight") newX++;
-      else return;
-
-      if (maze[newY][newX] === 0 || maze[newY][newX] === 2){
-        player.x = newX;
-        player.y = newY;
-        render();
-
-        if (maze[newY][newX] === 2){
-          socket.emit("door_reached", { x: newX, y: newY});
-        }
-      }
-    });
-
-    socket.on("door_result", (result) => {
-      if (result.correct){
-        console.log("Bonne porte ! Victoire (pour cette manche).");
-      } else {
-        showGameOver("Mauvaise porte. Vous avez perdu.");
-      }
-    })
-
-    socket.on("timeout", () => {
-      showGameOver("Temps ecoule. Vous avez perdu.");
-    })
-
-
-    socket.on("victory", ()=> {
-      document.getElementById("victoryScreen").style.display = "block";
-      myRole = null;
-    });
-  </script>
-  <div id="gameOverScreen" style="display: none;">
+  <div id="gameOverScreen" style="display: none">
     <h2>Partie terminee</h2>
     <p id="gameOverMessage"></p>
   </div>
+
   <div id="victoryScreen" style="display: none;">
     <h2>Victoire !</h2>
-    <p>Vous avez franchi les portes a temps.</p>
+    <p>Vous avec franchi les portes a temps.</p>
   </div>
-  </body>
+
+  <script type="module" src="js/main.js"></script>
+</body>
 </html>
diff --git a/client/js/canvas.js b/client/js/canvas.js
index 8b13789..ef6ae42 100644
--- a/client/js/canvas.js
+++ b/client/js/canvas.js
@@ -1 +1,48 @@
+/*
+  canvas.js
 
+  toute la logique de rendu visuel
+*/
+
+import { maze } from "./maze.js";
+import { player } from "./player.js";
+
+const canvas = document.getElementById("maze");
+const ctx = canvas.getContext("2d");
+const cellSize = 70;
+
+export function drawMaze() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  for (let y = 0; y < maze.length; y++) {
+    for (let x = 0; y < maze.length; x++) {
+      if (maze[y][x] === 1) ctx.fillStyle = "#333";
+      else if (maze[y][x] === 2) ctx.fillStyle = "gold";
+      else ctx.fillStyle = "#eee";
+
+      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+    }
+  }
+}
+
+export function drawPlayer() {
+  ctx.fillStyle = "red";
+  ctx.beginPath();
+  ctx.arc(
+    player.x * cellSize + cellSize / 2,
+    player.y * cellSize + cellSize / 2,
+    cellSize / 3,
+    0, Math.PI * 2
+  );
+  ctx.fill();
+}
+
+export function drawBlind() {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+export function render() {
+  drawMaze();
+  drawPlayer();
+}
diff --git a/client/js/main.js b/client/js/main.js
index 8b13789..af5c30e 100644
--- a/client/js/main.js
+++ b/client/js/main.js
@@ -1 +1,49 @@
+/*
+  main.js
+  point  d'entree pour les scripts
+*/
 
+import { socket } from "./socket.js";
+import { player } from "./player.js";
+import { roleState } from "./role.js";
+import { render, drawBlind } from "./canvas.js";
+import { setupMovement } from "./movement.js";
+import { showGameOver, showVictory, updateTimerDisplay } from "./ui.js";
+
+setupMovement();
+
+socket.on("status", (msg) => console.log("Status: ", (msg));
+  roleState.current = role;
+
+  if (role === "explorateur") {
+    render();
+  } else {
+    drawBlind();
+  }
+});
+
+socket.on("new_round", (startPos) => {
+  player.x = startPos.x;
+  player.y = startPos.y;
+});
+
+socket.on("door_result", (result) => {
+  if (!result.correct){
+    roleState.current = null;
+    showGameOver("Mauvaise porte. Vous avez perdu.");
+  }
+});
+
+socket.on("timeout", () => {
+  roleState.current = null;
+  showGameOver("Temps ecoule. Vous avez perdu.");
+});
+
+socket.on("victory", () => {
+  roleState.current = null;
+  showVictory();
+});
+
+socket.on("timer", (timeLeft) => {
+  updateTimerDisplay(timeLeft);
+});
diff --git a/client/js/movement.js b/client/js/movement.js
index 8b13789..c8578ec 100644
--- a/client/js/movement.js
+++ b/client/js/movement.js
@@ -1 +1,36 @@
+/*
+  movement.js
 
+  ecoute les inputs clavier et annonce au serveur quand une porte est atteinte
+*/
+
+import { maze } from "./maze.js";
+import { player } from "./player.js";
+import { render } from "./canvas.js";
+import { socket } from "./socket.js";
+import { roleState } from "./role.js";
+
+export function setupMovement() {
+  document.addEventListener("keydown", (e) => {
+    if (roleState.current !== "explorateur") return;
+
+    let newX = player.x;
+    let newY = player.y;
+
+    if (e.key === "ArrowUp") newY--;
+    else if (e.key === "ArrowDown") newY++;
+    else if (e.key === "ArrowLeft") newX--;
+    else if (e.key === "ArrowRight") newX++;
+    else return;
+
+    if (maze[newY][newX] === 0 || maze[newY][newX] === 2) {
+      player.x = newX;
+      player.y = newY;
+      render();
+
+      if (maze[newY][newX] === 2) {
+        socket.emit("door_reached", { x: newX, y: newY});
+      }
+    }
+  });
+}
diff --git a/client/js/player.js b/client/js/player.js
index 8b13789..7aa9896 100644
--- a/client/js/player.js
+++ b/client/js/player.js
@@ -1 +1,7 @@
+/*
+  player.js
 
+  contient la position du joueur exporte pour que canvas puisse dessine le joueur et que les posiions soient updated
+*/
+
+export const player = { x: 1, y: 1};
diff --git a/client/js/role.js b/client/js/role.js
index 8b13789..a2c3dc5 100644
--- a/client/js/role.js
+++ b/client/js/role.js
@@ -1 +1,7 @@
+/*
+  role.js
 
+  un objet pour que la propriete current reste modifiable
+*/
+
+export const roleState = { current : null };
diff --git a/client/js/socket.js b/client/js/socket.js
index 8b13789..8f7fea5 100644
--- a/client/js/socket.js
+++ b/client/js/socket.js
@@ -1 +1,5 @@
+/*
+  socket.js
+*/
 
+export const socket = io();
diff --git a/client/js/ui.js b/client/js/ui.js
index 8b13789..f5f52bf 100644
--- a/client/js/ui.js
+++ b/client/js/ui.js
@@ -1 +1,18 @@
+/*
+  ui.js
 
+  toute les manipulation du DOM (ce qu'il y a en dehors du canvas)
+*/
+
+export function showGameOver(message) {
+  document.getElementById("gameOverMessage").textContent = message;
+  document.getElementById("gameOverScreen").style.display = "block";
+}
+
+export function showVictory() {
+  document.getElementById("victoryScreen").style.display = "block";
+}
+
+export function updateTimerDisplay(timeLeft) {
+  document.getElementById("timerDisplay").textContent = `Temps restant : ${timeLeft}s`;
+}
diff --git a/client/maze.js b/client/maze.js
new file mode 100644
index 0000000..70cae59
--- /dev/null
+++ b/client/maze.js
@@ -0,0 +1,16 @@
+/*
+  maze.js
+  1 = mur
+  0 = chemin
+  2 = porte
+*/
+
+export const maze = [
+  [1,1,1,1,1,1,1],
+  [1,0,0,0,1,0,1],
+  [1,0,1,0,1,0,1],
+  [1,0,1,0,1,0,1],
+  [1,0,1,1,1,0,1],
+  [1,0,0,0,0,0,1],
+  [1,1,1,1,1,1,1]
+];
diff --git a/server/config.js b/server/config.js
index 8b13789..e1a0a01 100644
--- a/server/config.js
+++ b/server/config.js
@@ -1 +1,11 @@
+/*
+  config.js
 
+  centralise les constante de reglage du jeu
+*/
+
+module.export = {
+  PORT: process.env.PORT || 3000,
+  GAME_DURATION: 60,
+  DOORS_TO_WIN: 3,
+};
diff --git a/server/doorLogic.js b/server/doorLogic.js
index 25d4536..665afd6 100644
--- a/server/doorLogic.js
+++ b/server/doorLogic.js
@@ -4,3 +4,51 @@
   Sert a regrouper toute la logique autour des portes
 */
 
+/*
+  c'est ici uniquement que la logique de victoire ou defaite est faite
+*/
+
+const { correctDoor, startPosition } = require("./maze");
+const { DOORS_TO_WIN } = require("./config");
+
+fonction handleDoorReached(wSS, socket, position) {
+  const pairState = socket.data.pairState;
+  if(!pairState || pairState.gameOver) return; // partie deja terminee
+
+  const partnerId = socket.data.partnerId;
+  const partnerSocket = wSS.sockets.sockets.get(partnerId);
+  const isCorrect = position.x === correctDoor.x && position.y === correctDoor.y;
+
+  if (!isCorrect){
+    pairState.gameOver = true;
+    const result = { correct: false };
+    socket.emit("door_result", result);
+    if (partnerSocket) partnerSocket.emit("door_result", result);
+    result;
+  }
+
+  pairState.doorsPassed++;
+
+  if (pairState.doorPassed >= DOORS_TO_WIN) {
+    pairState.gameOver = true;
+    socket.emit("victory");
+    if (partnerSocket) partnerSocket.emit("victory");
+    return;
+  }
+
+  const temp = socket.data.role;
+  socket.data.role = partnerSocket.data.role;
+  partnerSocket.data.role = temp;
+
+  socket.emit("door_result", { correct: true});
+  socket.emit("new_round", startPosition);
+  socket.emit("role", socket.data.role);
+
+  if (partnerSocket) {
+    partnerSocket.emit("door_result", { correct: true });
+    partnerSocket.emit("new_round", startPosition);
+    partnerSocket.emit("role", partnerSocket.data.role);
+  }
+}
+
+module.exports = { handleDoorReached };
diff --git a/server/gameState.js b/server/gameState.js
index 8b13789..31dcb3e 100644
--- a/server/gameState.js
+++ b/server/gameState.js
@@ -1 +1,12 @@
+/*
+  gameState.js
 
+  Etat global du serveur (pas juste la partie entre deux joueurs)
+  On exporte l'objet plutot que la variable
+*/
+
+const gameState = {
+  waitingPlayer: null,
+};
+
+module.exports = gameState;
diff --git a/server/maze.js b/server/maze.js
index 8b13789..7b33235 100644
--- a/server/maze.js
+++ b/server/maze.js
@@ -1 +1,12 @@
+/*
+  maze.js
+  le serveur sais ou sont les bonnes et mauvaises porte et compare la position envoyee par le joueur et la solution
+  possede aussi l'information du point de depart
+*/
 
+const correctDoor = { x: 3, y: 6};
+const startPosition = { x: 1, y: 1 };
+
+module.exports = { correctDoor, startPosition };
+
+module.exports = { correctDoor, startPosition };
diff --git a/server/timer.js b/server/timer.js
index 8b13789..f60560d 100644
--- a/server/timer.js
+++ b/server/timer.js
@@ -1 +1,30 @@
+/*
+  timer.js
 
+  minuteur autoritaire cote serveur
+*/
+
+const GAME_DURATION = {"./config"};
+
+fonction startTimer(socket, partnerSocket, pairState) {
+  const interval = setInterval(() => {
+    if (pairState.gameOver) {
+      clearInterval(interval);
+      return;
+    }
+
+    pairState.timeLeft--;
+
+    socket.emit("timer", pairState.timeLeft);
+    partnerSocket.emit("timer", pairState.timeLeft);
+
+    if (pairState.timeLeft <= 0) {
+      pairState.gameOver = true;
+      socket.emit("timeout");
+      partnerSocket.emit("timeout");
+      clearInterval(interval);
+    }
+  }, 1000);
+}
+
+module.exports = { startTimer };
