refactor: fin de la premiere refactorisation du projet

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();
+}

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);
+});

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});
+      }
+    }
+  });
+}

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};

client/js/role.js

@@ -1 +1,7 @@
+/*
+  role.js
 
+  un objet pour que la propriete current reste modifiable
+*/
+
+export const roleState = { current : null };

client/js/socket.js

@@ -1 +1,5 @@
+/*
+  socket.js
+*/
 
+export const socket = io();

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`;
+}