From 9bc79dc9bb125c664c31e11e4e79386f7cbe5e78 Mon Sep 17 00:00:00 2001
From: Thomas de Brettes <thomas.de-brettes@etu.ec-lyon.fr>
Date: Tue, 1 Apr 2025 17:36:20 +0200
Subject: [PATCH] =?UTF-8?q?=C3=A9chiquier=20invers=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
htdocs/index.js | 29 ++++++++++++++++++++++++-----
htdocs/page_acceuil2.html | 2 +-
htdocs/style.css | 3 +++
3 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/htdocs/index.js b/htdocs/index.js
index 2dece84..ed85c5b 100644
--- a/htdocs/index.js
+++ b/htdocs/index.js
@@ -108,8 +108,13 @@ socket.on('join room', (roomId) => {
socket.on('start game', (players) => {
console.log(players, "Le jeu commence");
+
startGame(players);
console.log(player.isBlackPlayer)
+ if (player.isBlackPlayer) {
+ document.getElementById('chessboard').classList.add('black-perspective');
+ console.log("échiquier inversé")
+ }
});
@@ -174,7 +179,6 @@ function startGame(players) {
turnMsg.classList.remove('d-none');
const ennemyPlayer = players.find(p => p.socketId != player.socketId);
-
draw();
ennemyUsername = ennemyPlayer.username;
tour = {currentPlayer: player, ennemyPlayer: ennemyPlayer};
@@ -250,12 +254,26 @@ function drawPieces() {
if (piece !== "") {
let img = new Image();
img.src = "chess_pieces/" + pieceImages[piece];
- img.onload = function () {
+ if (player.isBlackPlayer){
+ img.onload = function () {
+ ctx.save();
+ ctx.translate((col) * size, (row) * size);
+ ctx.rotate(Math.PI);
+ ctx.drawImage(img, -size, -size, size, size);
+ ctx.restore();
+ };
+ img.onerror = function (e) {
+ console.log("Erreur de chargement de l'image : ", img.src); // En cas d'erreur de chargement
+ };
+ }
+ else{
+ img.onload = function () {
ctx.drawImage(img, col * size, row * size, size, size);
- };
- img.onerror = function (e) {
+ };
+ img.onerror = function (e) {
console.log("Erreur de chargement de l'image : ", img.src); // En cas d'erreur de chargement
- };
+ };
+ }
}
}
}
@@ -611,6 +629,7 @@ function movePiece(piece, newRow, newCol) {
// Vérifier si le mouvement est valide
const validMoves = highlightMoves(tour,piece, selectedPosition.row, selectedPosition.col);
+ console.log(validMoves)
// Vérifier que validMoves est un tableau et qu'il contient des objets avec { row, col }
const isValidMove = Array.isArray(validMoves) && validMoves.some(m => m.row === newRow && m.col === newCol);
diff --git a/htdocs/page_acceuil2.html b/htdocs/page_acceuil2.html
index 19963ca..74fff05 100644
--- a/htdocs/page_acceuil2.html
+++ b/htdocs/page_acceuil2.html
@@ -88,7 +88,7 @@
</div>
</div>
</div>
- <canvas id="chessboard" width="480" height="480"></canvas>
+ <canvas id="chessboard" class="board" width="480" height="480"></canvas>
<script src="./jquery/jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
diff --git a/htdocs/style.css b/htdocs/style.css
index e69de29..d0219ce 100644
--- a/htdocs/style.css
+++ b/htdocs/style.css
@@ -0,0 +1,3 @@
+.board.black-perspective {
+ transform: rotate(180deg);
+}
--
GitLab