From 759b543803e42988e6fca224b4583b2d1ecf47a2 Mon Sep 17 00:00:00 2001
From: Valeriane SUDRE CHEVALIER <valeriane.chevalier@gmail.com>
Date: Thu, 23 Nov 2023 21:08:43 +0100
Subject: [PATCH] =?UTF-8?q?modification=20de=20TicTacToc=20pour=20Morpion?=
 =?UTF-8?q?=20car=20trop=20chiant=20=C3=A0=20ecrire,=20mise=20en=20place?=
 =?UTF-8?q?=20du=20jeu=20et=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/Morpion/Consignes.jsx | 85 +++++++++++++++++++++++
 frontend/components/Morpion/Morpion.css   | 38 ++++++++++
 frontend/components/Nav/Nav.jsx           |  3 +
 frontend/pages/Morpion.jsx                | 11 +++
 frontend/src/main.jsx                     |  6 +-
 5 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/Morpion/Consignes.jsx
 create mode 100644 frontend/components/Morpion/Morpion.css
 create mode 100644 frontend/pages/Morpion.jsx

diff --git a/frontend/components/Morpion/Consignes.jsx b/frontend/components/Morpion/Consignes.jsx
new file mode 100644
index 0000000..fe0bb12
--- /dev/null
+++ b/frontend/components/Morpion/Consignes.jsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import PropTypes from "prop-types";
+import "./Morpion.css";
+
+const calculateWinner = (carres) => {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (carres[a] && carres[a] === carres[b] && carres[a] === carres[c]) {
+      return carres[a];
+    }
+  }
+
+  return null;
+};
+
+const Carre = ({ value, onClick }) => (
+  <button className="carre" onClick={onClick}>
+    {value}
+  </button>
+);
+
+Carre.propTypes = {
+  value: PropTypes.string.isRequired,
+
+  onClick: PropTypes.func.isRequired,
+};
+
+const Consignes = () => {
+  const [carres, setCarres] = useState(Array(9).fill(null));
+  const [xSuivant, setXSuivant] = useState(true);
+
+  const handleClick = (i) => {
+    const newCarres = carres.slice();
+    if (calculateWinner(newCarres) || newCarres[i]) {
+      return;
+    }
+
+    newCarres[i] = xSuivant ? "X" : "O";
+    setCarres(newCarres);
+    setXSuivant(!xSuivant);
+  };
+
+  const leCarre = (i) => (
+    <Carre value={carres[i]} onClick={() => handleClick(i)} />
+  );
+
+  const winner = calculateWinner(carres);
+  const status = winner
+    ? `Winner: ${winner}`
+    : `Next player: ${xSuivant ? "X" : "O"}`;
+
+  return (
+    <div>
+      <div className="status">{status}</div>
+      <div className="ligne-verticale">
+        {leCarre(0)}
+        {leCarre(1)}
+        {leCarre(2)}
+      </div>
+      <div className="ligne-verticale">
+        {leCarre(3)}
+        {leCarre(4)}
+        {leCarre(5)}
+      </div>
+      <div className="ligne-verticale">
+        {leCarre(6)}
+        {leCarre(7)}
+        {leCarre(8)}
+      </div>
+    </div>
+  );
+};
+
+export default Consignes;
diff --git a/frontend/components/Morpion/Morpion.css b/frontend/components/Morpion/Morpion.css
new file mode 100644
index 0000000..b390b01
--- /dev/null
+++ b/frontend/components/Morpion/Morpion.css
@@ -0,0 +1,38 @@
+.game {
+  margin-top: 15rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.game-consignes {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.carre {
+  width: 100px;
+  height: 100px;
+  font-size: 1.5em;
+  margin: 5px;
+  cursor: pointer;
+  background-color: #fff;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+.carre:hover {
+  background-color: #f0f0f0;
+}
+
+.ligne-verticale {
+  display: flex;
+}
+
+.status {
+  font-size: 1.2em;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
diff --git a/frontend/components/Nav/Nav.jsx b/frontend/components/Nav/Nav.jsx
index 1df7e81..cddc054 100644
--- a/frontend/components/Nav/Nav.jsx
+++ b/frontend/components/Nav/Nav.jsx
@@ -11,6 +11,9 @@ function Nav() {
         <Link to="/Contact">
           <li>Messagerie du Père Noël</li>
         </Link>
+        <Link to="/Morpion">
+          <li>Jeu</li>
+        </Link>
       </ul>
     </nav>
   );
diff --git a/frontend/pages/Morpion.jsx b/frontend/pages/Morpion.jsx
new file mode 100644
index 0000000..3f31e39
--- /dev/null
+++ b/frontend/pages/Morpion.jsx
@@ -0,0 +1,11 @@
+import Consignes from "../components/Morpion/Consignes";
+
+const Morpion = () => (
+  <div className="game">
+    <div className="game-consignes">
+      <Consignes />
+    </div>
+  </div>
+);
+
+export default Morpion;
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 41b4925..a3e8ebf 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App.jsx";
-import TicTacToh from "../pages/TicTacToh.jsx";
+import Morpion from "../pages/Morpion.jsx";
 
 import "./index.css";
 import Calendrier from "../components/Calendrier/Calendrier.jsx";
@@ -15,8 +15,8 @@ const router = createBrowserRouter([
     element: <App />,
     children: [
       {
-        path: "/TicTacToh",
-        element: <TicTacToh />,
+        path: "/Morpion",
+        element: <Morpion />,
       },
       {
         path: "/",