diff --git a/htdocs/page_jeu.html b/htdocs/page_jeu.html
index 41ef9e2a0f0d26a3dc66c5afcc5b1b758a5683c7..0758d4c852c04ee7c326548e50839ed4d50ead3a 100644
--- a/htdocs/page_jeu.html
+++ b/htdocs/page_jeu.html
@@ -3,13 +3,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Jeu d'échecs</title>
- <style src="style_page_jeu.css">
- </style>
+ <title>Échiquier</title>
+ <link rel="stylesheet" href="style_page_jeu.css">
</head>
<body>
- <h1>Jeu d'échecs</h1>
+
<canvas id="chessboard" width="480" height="480"></canvas>
+
<script src="chess.js"></script>
+
</body>
</html>
diff --git a/htdocs/style_page_jeu.css b/htdocs/style_page_jeu.css
index 278b1158e5d7c5d332bc5ea8ef1213ed66128235..3014b215966b76b13a68910605b039657dbb64e6 100644
--- a/htdocs/style_page_jeu.css
+++ b/htdocs/style_page_jeu.css
@@ -1,32 +1,15 @@
+/* Centrer l'échiquier dans la page avec un fond vert clair */
body {
display: flex;
justify-content: center;
align-items: center;
- height: 100vh;
- background-color: #f0e5d8;
+ height: 100vh; /* Prend toute la hauteur de la page */
+ background-color: #a8d5ba; /* Fond vert clair */
+ margin: 0;
}
+/* Ajouter un contour noir autour du canvas */
#chessboard {
- display: grid;
- grid-template-columns: repeat(8, 60px);
- grid-template-rows: repeat(8, 60px);
- border: 5px solid #3e2f1e;
+ border: 5px solid black; /* Contour noir autour de l'échiquier */
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 */
-}