Merge branch 'dev' into S03-US08

WildCodeSchool-2023-09 · Nov 6, 2023 · fc71044 · fc71044
2 parents 0d2e531 + 61fc37c
commit fc71044
Show file tree

Hide file tree

Showing 11 changed files with 280 additions and 27 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "axios": "^1.6.0",
+    "framer-motion": "^10.16.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -312,6 +312,7 @@ footer {
   }
 }
 #bg {
+  min-height: 88vh;
   background-image: url("./assets/potionclassroom.png");
   background-size: cover;
   background-repeat: no-repeat;
@@ -323,7 +324,7 @@ footer {
 #bgTrue {
   text-align: center;
   width: 100%;
-  height: 130%;
+  height: 25vw;
   background-image: url("./assets/potionclassroom-animation-ok.gif");
   background-size: contain;
   background-position: center;
@@ -336,7 +337,7 @@ footer {
 #bgFalse {
   text-align: center;
   width: 100%;
-  height: 130%;
+  height: 25vw;
   background-image: url("./assets/potionclassroom-animation-false.gif");
   background-size: contain;
   background-position: center;

diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
@@ -1,8 +1,19 @@
 import PropTypes from "prop-types";
+import { motion } from "framer-motion";
 
 function Card({ name, image, effect, ingredients }) {
   return (
-    <div className="container-elixir bg-purple-800 grid text-white w-72 h-96 rounded-2xl p-4">
+    <motion.div
+      initial="hidden"
+      exit="hidden"
+      whileInView="visible"
+      viewport={{ once: true }}
+      variants={{
+        visible: { opacity: 1, scale: 1 },
+        hidden: { opacity: 0, scale: 0 },
+      }}
+      className="container-elixir bg-purple-800 grid text-white w-72 h-96 rounded-2xl p-4"
+    >
       <div className="grid bg-purple-heart-400 rounded-xl h-44">
         <h1 className="text-xl font-irish text-center">{name}</h1>
         <div className="flex justify-center">
@@ -25,7 +36,7 @@ function Card({ name, image, effect, ingredients }) {
       <p className="overflow-auto ingredients">
         {ingredients || "Not known yet"}
       </p>
-    </div>
+    </motion.div>
   );
 }
 

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import Contact from "./Modal/Contact";
 import Modal from "./Modal/Login";
 
@@ -34,9 +35,14 @@ function Footer() {
         </div>
       )}
       {openModal && (
-        <div className="blur-background">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="blur-background flex items-center justify-center"
+        >
           <Modal closeModal={() => setOpenModal(false)} />
-        </div>
+        </motion.div>
       )}
     </footer>
   );

diff --git a/frontend/src/components/Ingredients.jsx b/frontend/src/components/Ingredients.jsx
@@ -8,6 +8,9 @@ function Ingredients({
   ingtransp,
   setBg,
   setImgIngredientClass,
+  setScore,
+  score,
+  gainScore,
 }) {
   const isTrue = () => {
     function returnToTrueAnimation() {
@@ -33,6 +36,7 @@ function Ingredients({
     } else {
       setImgIngredient(ingredientImg);
       setImgIngredientClass("imgIngredient");
+      setScore(score + gainScore);
       endImgIngredient();
     }
   };
@@ -54,6 +58,9 @@ Ingredients.propTypes = {
   setImgIngredient: PropTypes.func.isRequired,
   ingtransp: PropTypes.string.isRequired,
   setBg: PropTypes.func.isRequired,
-  setImgIngredientClass: PropTypes.string.isRequired,
+  setImgIngredientClass: PropTypes.func.isRequired,
+  setScore: PropTypes.number.isRequired,
+  gainScore: PropTypes.number.isRequired,
+  score: PropTypes.number.isRequired,
 };
 export default Ingredients;
diff --git a/frontend/src/components/Jeu.jsx b/frontend/src/components/Jeu.jsx
@@ -49,12 +49,17 @@ function Jeu() {
   console.info(allIngredients);
 
   const [imgIngredient, setImgIngredient] = useState(ingtransp);
+
   const [imgIngredientClass, setImgIngredientClass] = useState("");
 
   const [bg, setBg] = useState("bgTrue");
 
+  const [score, setScore] = useState(0);
+
+  const gainScore = 100 / ingredientsPotion.length;
+
   return (
-    <div id="bg" className="h-screen w-full flex justify:center ">
+    <div id="bg" className="w-full flex justify:center ">
       <div
         className="  h-full w-full flex flex-col items-center p-3 justify-around max-sm:justify-normal
       "
@@ -115,7 +120,7 @@ function Jeu() {
             </div>
             <div className="flex flex-row justify-around max-sm:justify-center">
               <h3 className="font-irish">Score </h3>
-              <h4 className="font-irish">.../100</h4>
+              <h4 className="font-irish">{score}/200</h4>
             </div>
           </div>
         </div>
@@ -134,6 +139,9 @@ function Jeu() {
                 setImgIngredient={setImgIngredient}
                 setBg={setBg}
                 setImgIngredientClass={setImgIngredientClass}
+                score={score}
+                setScore={setScore}
+                gainScore={gainScore}
               />
             </div>
           ))}

diff --git a/frontend/src/components/OngletElixir.jsx b/frontend/src/components/OngletElixir.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import axios from "axios";
+import { AnimatePresence } from "framer-motion";
 import searchIcon from "../assets/search.svg";
 import Card from "./Card";
 import loadingIcon from "../assets/loading.svg";
@@ -86,19 +87,21 @@ function OngletElixir() {
         </button>
       </div>
       <div className="liste-elixir flex flex-wrap gap-10 justify-center">
-        {elixir
-          .filter((element) =>
-            element.attributes.name.toLowerCase().includes(searchValue)
-          )
-          .map((element) => (
-            <Card
-              key={element.id}
-              name={element.attributes.name}
-              image={element.attributes.image}
-              effect={element.attributes.effect}
-              ingredients={element.attributes.ingredients}
-            />
-          ))}
+        <AnimatePresence>
+          {elixir
+            .filter((element) =>
+              element.attributes.name.toLowerCase().includes(searchValue)
+            )
+            .map((element) => (
+              <Card
+                key={element.id}
+                name={element.attributes.name}
+                image={element.attributes.image}
+                effect={element.attributes.effect}
+                ingredients={element.attributes.ingredients}
+              />
+            ))}
+        </AnimatePresence>
       </div>
     </div>
   );

diff --git a/frontend/src/components/Trophy.jsx b/frontend/src/components/Trophy.jsx
@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+
+function Trophy({ color }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill={color}
+      className="w-auto h-16 drop-shadow-lg stroke-black"
+    >
+      <path
+        fillRule="evenodd"
+        d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 00-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 00-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 00.75-.75 2.25 2.25 0 00-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 01-1.112-3.173 6.73 6.73 0 002.743-1.347 6.753 6.753 0 006.139-5.6.75.75 0 00-.585-.858 47.077 47.077 0 00-3.07-.543V2.62a.75.75 0 00-.658-.744 49.22 49.22 0 00-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 00-.657.744zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 013.16 5.337a45.6 45.6 0 012.006-.343v.256zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 01-2.863 3.207 6.72 6.72 0 00.857-3.294z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+Trophy.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+export default Trophy;