finission-data

frontend/components/Calendrier/calendrier.css

@@ -5,7 +5,8 @@
 
 /* Keyframes */
 @keyframes wiggle {
-  0%, 7% {
+  0%,
+  7% {
     transform: rotateZ(0);
   }
   15% {
@@ -23,7 +24,8 @@
   35% {
     transform: rotateZ(-4deg);
   }
-  40%, 100% {
+  40%,
+  100% {
     transform: rotateZ(0);
   }
 }
@@ -41,6 +43,8 @@
   color: white;
   border-radius: 10px;
   box-shadow: -5px 5px 5px black;
+  font-size: 3rem;
+  color: rgb(255, 235, 85);
 }
 
 .numbers-calendrier {
@@ -69,4 +73,3 @@
   display: flex;
   justify-content: center;
 }
-

frontend/components/Footer/Footer.css

@@ -0,0 +1,7 @@
+.footer {
+  list-style-type: none;
+  color: white;
+  margin-right: 90px;
+  font-size: 30px;
+  font-weight: bold;
+}

frontend/components/Footer/Footer.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "../../components/Footer/Footer.css";
+function Footer() {
+  return (
+    <div className="footer">
+      <p>© Hackawild</p>
+    </div>
+  );
+}
+
+export default Footer;

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/components/Surprise/Surprise.css

@@ -1,5 +1,10 @@
+<<<<<<< HEAD
 /* * {
   background-image: url(frontend/src/assets/imageSurprise.jpg);
+=======
+.surprise {
+  background-image: url(public/imageSurprise.jpg);
+>>>>>>> 8485bddcb17696aa999f14b25f7e9b36c36e6940
   background-size: 100%;
   background-attachment: fixed;
   margin: 0;
@@ -18,5 +23,5 @@
 }
 
 .imgSurprise {
-  width: 60%;
+  width: 500px;
 }

frontend/components/Surprise/SurpriseCom.jsx

@@ -4,9 +4,9 @@ function SurpriseCom() {
   return (
     <div className="surprise">
       <div className="containerSurprise">
-        <img src="frontend/src/assets/IMAGE404.png" alt="error" />
+        <img src="public/IMAGE404.png" alt="error" />
         <img
-          src="frontend/src/assets/téléchargement.png"
+          src="public/téléchargement.png"
           alt="le pere noel n'existe pas"
           className="imgSurprise"
         />

frontend/components/TicTacToh/Consignes.jsx

@@ -0,0 +1,85 @@
+// import { useState } from "react";
+// import PropTypes from "prop-types";
+// import "/components/TicTacToh/TicTacToh.css";
+import "./TicTacToh.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/TicTacToh/TicTacToh.css

@@ -0,0 +1,44 @@
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-consignes {
+  margin: 20px;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.lignes-verticales:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.carre {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.carre {
+  background: #f5f5f5;
+}
+
+.ligne-verticale:nth-child(odd) .carre:nth-child(even),
+.ligne-verticale:nth-child(even) .carre:nth-child(odd) {
+  background: #e3e3e3;
+}
+@media screen {
+}

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;