Merge pull request #69 from WildCodeSchool-2023-09/FramerMotion

(MERGE EN 3️⃣) S03-US08 : Animation de composant
WildCodeSchool-2023-09 · Nov 6, 2023 · 61fc37c · 61fc37c
2 parents da09c38 + af62a59
commit 61fc37c
Show file tree

Hide file tree

Showing 10 changed files with 196 additions and 56 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
@@ -298,6 +298,7 @@ footer {
   }
 }
 #bg {
+  min-height: 88vh;
   background-image: url("./assets/potionclassroom.png");
   background-size: cover;
   background-repeat: no-repeat;
@@ -309,7 +310,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;
@@ -322,7 +323,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 Login from "./Modal/Login";
 
 function Footer() {
@@ -16,9 +17,14 @@ function Footer() {
         Login
       </button>
       {openModal && (
-        <div className="blur-background flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="blur-background flex items-center justify-center"
+        >
           <Login closeModal={() => setOpenModal(false)} />
-        </div>
+        </motion.div>
       )}
     </footer>
   );

diff --git a/frontend/src/components/Ingredients.jsx b/frontend/src/components/Ingredients.jsx
@@ -58,7 +58,7 @@ 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,

diff --git a/frontend/src/components/Jeu.jsx b/frontend/src/components/Jeu.jsx
@@ -59,7 +59,7 @@ function Jeu() {
   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
       "

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/pages/Leaderboard.jsx b/frontend/src/pages/Leaderboard.jsx
@@ -1,9 +1,11 @@
+import { motion } from "framer-motion";
 import Trophy from "../components/Trophy";
 import "./leaderboard.scss";
 
 function Leaderboard() {
+  const delayAnimation = 0.1;
   return (
-    <>
+    <div className="onglet-leaderboard">
       <div className="p-4 flex justify-center">
         <div className="grid grid-cols-3 text-center h-52 items-end justify-center flex-grow max-w-2xl">
           <div className="h-full flex flex-col justify-end">
@@ -36,39 +38,90 @@ function Leaderboard() {
           La suite du Top
         </h1>
       </div>
-      <div className="my-4 flex justify-center">
-        <div className="reste-leaderboard max-w-sm md:max-w-2xl flex-1 gap-4">
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-full bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            999999
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-11/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            99999
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-10/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            9999
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-7/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            7777
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-5/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            6666
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-4/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            5555
-          </div>
-          <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl"> </div>
-          <div className="w-2/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat">
-            4444
+      <div>
+        <div className="my-4 flex justify-center">
+          <div className="reste-leaderboard max-w-sm md:max-w-2xl flex-1 gap-4">
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "100%" }}
+              transition={{ delay: 0 }}
+              className="w-full bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              999999
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "91%" }}
+              transition={{ delay: delayAnimation }}
+              className="w-11/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              99999
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "83%" }}
+              transition={{ delay: delayAnimation * 2 }}
+              className="w-10/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              9999
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "58%" }}
+              transition={{ delay: delayAnimation * 3 }}
+              className="w-7/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              7777
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "41%" }}
+              transition={{ delay: delayAnimation * 4 }}
+              className="w-5/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              6666
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "33%" }}
+              transition={{ delay: delayAnimation * 5 }}
+              className="w-4/12 bg-purple-heart-500 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              5555
+            </motion.div>
+            <div className="w-full bg-black h-16 shadow-xl rounded-l-3xl">
+              {" "}
+            </div>
+            <motion.div
+              initial={{ opacity: 0, width: 0 }}
+              animate={{ opacity: 1, width: "16%" }}
+              transition={{ delay: delayAnimation * 6 }}
+              className="w-2/12 bg-purple-heart-400 h-16 rounded-r-3xl shadow-xl flex items-center pl-4 font-bold text-white font-montserrat"
+            >
+              4444
+            </motion.div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }