refactor: fin de la premiere refactorisation du projet
This commit is contained in:
@@ -2,156 +2,25 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Bonjour !</h1>
|
<h1>Echoes</h1>
|
||||||
<p>Ceci est une page statique servie par Express.</p>
|
|
||||||
<p id="timerDisplay">Temps restant : --</p>
|
|
||||||
<canvas id="maze" width="490" height="490" style="border: 1px solid #333;"></canvas>
|
<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) => {
|
<div id="gameOverScreen" style="display: none">
|
||||||
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;">
|
|
||||||
<h2>Partie terminee</h2>
|
<h2>Partie terminee</h2>
|
||||||
<p id="gameOverMessage"></p>
|
<p id="gameOverMessage"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="victoryScreen" style="display: none;">
|
<div id="victoryScreen" style="display: none;">
|
||||||
<h2>Victoire !</h2>
|
<h2>Victoire !</h2>
|
||||||
<p>Vous avez franchi les portes a temps.</p>
|
<p>Vous avec franchi les portes a temps.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -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();
|
||||||
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
});
|
||||||
|
|||||||
@@ -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});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@@ -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};
|
||||||
|
|||||||
@@ -1 +1,7 @@
|
|||||||
|
/*
|
||||||
|
role.js
|
||||||
|
|
||||||
|
un objet pour que la propriete current reste modifiable
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const roleState = { current : null };
|
||||||
|
|||||||
@@ -1 +1,5 @@
|
|||||||
|
/*
|
||||||
|
socket.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const socket = io();
|
||||||
|
|||||||
@@ -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
16
client/maze.js
Normal 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]
|
||||||
|
];
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
|
|||||||
@@ -4,3 +4,51 @@
|
|||||||
Sert a regrouper toute la logique autour des portes
|
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 };
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
|||||||
Reference in New Issue
Block a user