Hatmos/echoes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: fin de la premiere refactorisation du projet

Browse Source
This commit is contained in:
Thomas LETELLIER
2026-08-02 22:27:00 +02:00
parent c709064062
commit 45ad31d0ae
14 changed files with 299 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
client/index.html
View File

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

47
client/js/canvas.js
View File

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

48
client/js/main.js
View File

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

35
client/js/movement.js
View File

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

6
client/js/player.js
View File

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

6
client/js/role.js
View File

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

4
client/js/socket.js
View File

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

17
client/js/ui.js
View File

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

16
client/maze.js Normal file
View File

@@ -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]
];