From ecaed8e3fe21297de87d217ede2d16a22e30dc13 Mon Sep 17 00:00:00 2001
From: Thomas de Brettes <thomas.de-brettes@etu.ec-lyon.fr>
Date: Sun, 30 Mar 2025 16:25:18 +0200
Subject: [PATCH] =?UTF-8?q?=C3=A9chiquier=20qui=20tourne=20:)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app.js | 2 +-
htdocs/index.js | 34 ++++++++++++++++++++++++----------
2 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/app.js b/app.js
index 4cb8aeb..c32bad5 100644
--- a/app.js
+++ b/app.js
@@ -5,7 +5,7 @@ const express = require('express');
const app = express();
const http = require('http').createServer(app);
const path = require('path');
-const port = 8060;
+const port = 8080;
const io = require('socket.io')(http);
diff --git a/htdocs/index.js b/htdocs/index.js
index 181de86..dde5f78 100644
--- a/htdocs/index.js
+++ b/htdocs/index.js
@@ -6,7 +6,8 @@ const player = {
socketId: "",
symbol: "X",
turn: false,
- win: false
+ win: false,
+ isBlackPlayer: false
};
const socket = io();
@@ -162,11 +163,15 @@ function startGame(players) {
const ennemyPlayer = players.find(p => p.socketId != player.socketId);
ennemyUsername = ennemyPlayer.username;
+
+ player.isBlackPlayer = !player.host;
+
if (player.host && player.turn) {
setTurnMessage('alert-info', 'alert-success', "C'est ton tour de jouer");
} else {
setTurnMessage('alert-success', 'alert-info', `C'est au tour de <b>${ennemyUsername}</b> de jouer`);
}
+ draw();
}
function setTurnMessage(classToRemove, classToAdd, html) {
@@ -230,31 +235,34 @@ const pieces_joueurs = {0: ["p","t","c","f","q","k"],1:["P","T","C","F","Q","K"]
function drawBoard() {
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
- ctx.fillStyle = (row + col) % 2 === 0 ? "#F5DEB3" : "#8B4513";
+ let displayRow = player.isBlackPlayer ? 7 - row : row;
+ let displayCol = player.isBlackPlayer ? 7 - col : col;
+ ctx.fillStyle = (displayRow + displayCol) % 2 === 0 ? "#F5DEB3" : "#8B4513";
ctx.fillRect(col * size, row * size, size, size);
}
}
}
+
// Dessiner les pièces sur l'échiquier
function drawPieces() {
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
- const piece = board[row][col];
+ let piece = board[row][col];
if (piece !== "") {
let img = new Image();
img.src = "chess_pieces/" + pieceImages[piece];
img.onload = function () {
- ctx.drawImage(img, col * size, row * size, size, size);
- };
- img.onerror = function (e) {
- console.log("Erreur de chargement de l'image : ", img.src); // En cas d'erreur de chargement
+ let displayRow = player.isBlackPlayer ? 7 - row : row;
+ let displayCol = player.isBlackPlayer ? 7 - col : col;
+ ctx.drawImage(img, displayCol * size, displayRow * size, size, size);
};
}
}
}
}
+
// Fonction principale pour dessiner l'échiquier
function draw() {
drawBoard();
@@ -262,7 +270,7 @@ function draw() {
}
// Appeler la fonction pour afficher l'échiquier
-draw();
+
//Mouvement des pièces sur l'échiquier
@@ -271,8 +279,13 @@ let selectedPiece = null;
let selectedPosition = null;
canvas.addEventListener("click", function(event) {
- const col = Math.floor(event.offsetX / size);
- const row = Math.floor(event.offsetY / size);
+ let col = Math.floor(event.offsetX / size);
+ let row = Math.floor(event.offsetY / size);
+
+ if (player.isBlackPlayer) {
+ col = 7 - col;
+ row = 7 - row;
+ }
if (selectedPiece) {
movePiece(row, col);
@@ -281,6 +294,7 @@ canvas.addEventListener("click", function(event) {
}
});
+
function selectPiece(row, col) {
const piece = board[row][col];
--
GitLab