diff --git a/htdocs/index.js b/htdocs/index.js
index 2dece84ba92e23ed91275fbabcae4634e7ce939b..ed85c5bc81025e287cfaba6e1782c5619486644a 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 19963ca654a6988ec98834d021c601bbb2250e1d..74fff059349b59013898324483f0ade5eaa9d94f 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d0219ce2a959e3a5135131ea5aeade716c4e6ee4 100644
--- a/htdocs/style.css
+++ b/htdocs/style.css
@@ -0,0 +1,3 @@
+.board.black-perspective {
+    transform: rotate(180deg);
+}