From 92d2a9091f0852e90cedbb545d11c45dc11dce57 Mon Sep 17 00:00:00 2001
From: Baris G <barisg@pm.me>
Date: Sun, 5 Nov 2023 22:11:37 +0100
Subject: [PATCH 1/4] CSS Fix

---
 frontend/src/App.scss                   | 5 +++--
 frontend/src/components/Ingredients.jsx | 2 +-
 frontend/src/components/Jeu.jsx         | 2 +-
 frontend/src/pages/Leaderboard.jsx      | 4 ++--
 frontend/src/pages/leaderboard.scss     | 4 ++++
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 09300c5..25613b3 100644
--- 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/Ingredients.jsx b/frontend/src/components/Ingredients.jsx
index 2ac7d00..84e95d7 100644
--- a/frontend/src/components/Ingredients.jsx
+++ b/frontend/src/components/Ingredients.jsx
@@ -54,6 +54,6 @@ Ingredients.propTypes = {
   setImgIngredient: PropTypes.func.isRequired,
   ingtransp: PropTypes.string.isRequired,
   setBg: PropTypes.func.isRequired,
-  setImgIngredientClass: PropTypes.string.isRequired,
+  setImgIngredientClass: PropTypes.func.isRequired,
 };
 export default Ingredients;
diff --git a/frontend/src/components/Jeu.jsx b/frontend/src/components/Jeu.jsx
index 136daad..25d545a 100644
--- a/frontend/src/components/Jeu.jsx
+++ b/frontend/src/components/Jeu.jsx
@@ -54,7 +54,7 @@ function Jeu() {
   const [bg, setBg] = useState("bgTrue");
 
   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/pages/Leaderboard.jsx b/frontend/src/pages/Leaderboard.jsx
index 04cb393..e38047b 100644
--- a/frontend/src/pages/Leaderboard.jsx
+++ b/frontend/src/pages/Leaderboard.jsx
@@ -3,7 +3,7 @@ import "./leaderboard.scss";
 
 function Leaderboard() {
   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">
@@ -68,7 +68,7 @@ function Leaderboard() {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/frontend/src/pages/leaderboard.scss b/frontend/src/pages/leaderboard.scss
index f664c8a..e6d1a91 100644
--- a/frontend/src/pages/leaderboard.scss
+++ b/frontend/src/pages/leaderboard.scss
@@ -1,3 +1,7 @@
+.onglet-leaderboard {
+  min-height: 88vh;
+}
+
 .reste-leaderboard {
   display: grid;
   grid-template-columns: 1fr 5fr;

From fa15d8e6df2eb53768dae2c5eb6c95d5844c7c97 Mon Sep 17 00:00:00 2001
From: Baris G <barisg@pm.me>
Date: Sun, 5 Nov 2023 22:36:27 +0100
Subject: [PATCH 2/4] animation sur ongletElixir, prochain Leaderboard

---
 frontend/package-lock.json               | 69 ++++++++++++++++++++++--
 frontend/package.json                    |  1 +
 frontend/src/components/Card.jsx         | 10 +++-
 frontend/src/components/OngletElixir.jsx | 29 +++++-----
 4 files changed, 90 insertions(+), 19 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d0546a3..b6f2a79 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.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",
@@ -403,6 +404,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -2679,6 +2695,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.16.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
+      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5063,8 +5102,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -5686,6 +5724,21 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -7255,6 +7308,15 @@
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "10.16.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
+      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8893,8 +8955,7 @@
     "tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "type-check": {
       "version": "0.4.0",
diff --git a/frontend/package.json b/frontend/package.json
index 70bec84..2faeac1 100644
--- 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/components/Card.jsx b/frontend/src/components/Card.jsx
index cc1605f..7fb6d51 100644
--- a/frontend/src/components/Card.jsx
+++ b/frontend/src/components/Card.jsx
@@ -1,8 +1,14 @@
 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
+      animate={{ opacity: 1, scale: 1 }}
+      initial={{ initial: 0, scale: 0 }}
+      exit={{ 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 +31,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/OngletElixir.jsx b/frontend/src/components/OngletElixir.jsx
index 2ce3161..d9bb436 100644
--- 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>
   );

From d11af6555dbf88f17cbcc1619f43fa3fc1ac510d Mon Sep 17 00:00:00 2001
From: Baris G <barisg@pm.me>
Date: Sun, 5 Nov 2023 23:37:30 +0100
Subject: [PATCH 3/4] animation carte, leaderboard

---
 frontend/src/components/Card.jsx   |  11 ++-
 frontend/src/pages/Leaderboard.jsx | 111 +++++++++++++++++++++--------
 2 files changed, 90 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
index 7fb6d51..663598d 100644
--- a/frontend/src/components/Card.jsx
+++ b/frontend/src/components/Card.jsx
@@ -4,9 +4,14 @@ import { motion } from "framer-motion";
 function Card({ name, image, effect, ingredients }) {
   return (
     <motion.div
-      animate={{ opacity: 1, scale: 1 }}
-      initial={{ initial: 0, scale: 0 }}
-      exit={{ opacity: 0, scale: 0 }}
+      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">
diff --git a/frontend/src/pages/Leaderboard.jsx b/frontend/src/pages/Leaderboard.jsx
index e38047b..2d55842 100644
--- a/frontend/src/pages/Leaderboard.jsx
+++ b/frontend/src/pages/Leaderboard.jsx
@@ -1,7 +1,9 @@
+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">
@@ -36,35 +38,86 @@ 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>

From 6000e6748e6812c7c0aa39e1ee1c665134f455e7 Mon Sep 17 00:00:00 2001
From: Baris G <barisg@pm.me>
Date: Sun, 5 Nov 2023 23:41:13 +0100
Subject: [PATCH 4/4] animation modal login

---
 frontend/src/components/Footer.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 5639c25..24c0f97 100644
--- 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>
   );