diff --git a/htdocs/chess.js b/htdocs/chess.js
index 7d4ddaf8a8ca457226c3773616050321a7020184..e9c201af967838f67cf84067d01ed103cba3674f 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 777cd7b1fbe2c1d028435052cb89279bc2fc43e3..41ef9e2a0f0d26a3dc66c5afcc5b1b758a5683c7 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 0000000000000000000000000000000000000000..278b1158e5d7c5d332bc5ea8ef1213ed66128235
--- /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 */
+}