From 6dba83d926ed32b24e4cc170f55721d7f8a81a55 Mon Sep 17 00:00:00 2001
From: Thomas de Brettes <thomas.de-brettes@etu.ec-lyon.fr>
Date: Wed, 19 Mar 2025 09:12:13 +0100
Subject: [PATCH] =?UTF-8?q?mise=20en=20place=20=C3=A9chiquier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 htdocs/chess.js           | 66 +++++++++++++++++++++++++++++++++++----
 htdocs/page_jeu.html      |  7 +----
 htdocs/style_page_jeu.css | 32 +++++++++++++++++++
 3 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 htdocs/style_page_jeu.css

diff --git a/htdocs/chess.js b/htdocs/chess.js
index 7d4ddaf..e9c201a 100644
--- a/htdocs/chess.js
+++ b/htdocs/chess.js
@@ -1,12 +1,66 @@
-window.onload = function() {
-    const canvas = document.getElementById("chessboard");
-    const ctx = canvas.getContext("2d");
-    const size = 60;
+const canvas = document.getElementById("chessboard");
+const ctx = canvas.getContext("2d");
+const size = 60; // Taille des cases
 
+// Disposition initiale de l'échiquier
+const board = [
+    ["T", "C", "F", "Q", "K", "F", "C", "T"],
+    ["P", "P", "P", "P", "P", "P", "P", "P"],
+    ["", "", "", "", "", "", "", ""],
+    ["", "", "", "", "", "", "", ""],
+    ["", "", "", "", "", "", "", ""],
+    ["", "", "", "", "", "", "", ""],
+    ["p", "p", "p", "p", "p", "p", "p", "p"],
+    ["t", "c", "f", "q", "k", "f", "c", "t"]
+];
+
+// Charger les images des pièces
+const pieceImages = {
+    "P": "pion_blanc.png",
+    "p": "pion_noir.png",
+    "T": "tour_blanc.png",
+    "t": "tour_noir.png",
+    "C": "cavalier_blanc.png",
+    "c": "cavalier_noir.png",
+    "F": "fou_blanc.png",
+    "f": "fou_noir.png",
+    "Q": "reine_blanc.png",
+    "q": "reine_noir.png",
+    "K": "roi_blanc.png",
+    "k": "roi_noir.png"
+};
+
+// Dessiner l'échiquier avec les couleurs des cases
+function drawBoard() {
     for (let row = 0; row < 8; row++) {
         for (let col = 0; col < 8; col++) {
-            ctx.fillStyle = (row + col) % 2 === 0 ? "white" : "black";
+            ctx.fillStyle = (row + col) % 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];
+            if (piece !== "") {
+                let img = new Image();
+                img.src = "images/" + pieceImages[piece];
+                img.onload = function () {
+                    ctx.drawImage(img, col * size, row * size, size, size);
+                };
+            }
+        }
+    }
+}
+
+// Fonction principale pour dessiner l'échiquier
+function draw() {
+    drawBoard();
+    drawPieces();
+}
+
+// Appeler la fonction pour afficher l'échiquier
+draw();
diff --git a/htdocs/page_jeu.html b/htdocs/page_jeu.html
index 777cd7b..41ef9e2 100644
--- a/htdocs/page_jeu.html
+++ b/htdocs/page_jeu.html
@@ -4,12 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jeu d'échecs</title>
-    <style>
-        canvas {
-            border: 2px solid black;
-            display: block;
-            margin: 20px auto;
-        }
+    <style src="style_page_jeu.css">
     </style>
 </head>
 <body>
diff --git a/htdocs/style_page_jeu.css b/htdocs/style_page_jeu.css
new file mode 100644
index 0000000..278b115
--- /dev/null
+++ b/htdocs/style_page_jeu.css
@@ -0,0 +1,32 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0e5d8;
+}
+
+#chessboard {
+    display: grid;
+    grid-template-columns: repeat(8, 60px);
+    grid-template-rows: repeat(8, 60px);
+    border: 5px solid #3e2f1e;
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.square {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+}
+
+.dark {
+    background-color: #8B4513; /* Marron */
+}
+
+.light {
+    background-color: #F5DEB3; /* Beige */
+}
-- 
GitLab