échiquier inversé

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,6 +254,19 @@ function drawPieces() {
             if (piece !== "") {
                 let img = new Image();
                 img.src = "chess_pieces/" + pieceImages[piece];
+                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);
                     };
@@ -260,6 +277,7 @@ function drawPieces() {
             }
         }
     }
+}
 
 // Fonction principale pour dessiner l'échiquier
 function draw() {
@@ -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);

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>

htdocs/style.css

+.board.black-perspective {
+    transform: rotate(180deg);
+}