Merge pull request #20 from valihna/feat/valou

modification de TicTacToc pour Morpion car trop chiant à ecrire, mise…

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;

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;
+}

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>
   );

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;

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: "/",