Animation transition game

webapp/src/components/content/game/cardmission/index.jsx

@@ -1,25 +1,53 @@
+import {useState} from "react";
+import { useNavigate } from "react-router-dom";
 import Pose1 from "../../../../assets/perso/perso-1/pose-1.png";
 import Pose2 from "../../../../assets/perso/perso-2/pose-1.png";
+import Pose3 from "../../../../assets/perso/perso-3/pose-1.png";
+import Pose4 from "../../../../assets/perso/perso-4/pose-1.png";
+// import Pose5 from "../../../../assets/perso/perso-5/pose-1.png";
 
-const img = ["",Pose1,Pose2]
+const img = ["",Pose1,Pose2,Pose3,Pose4];
 
-function Transition({img}) {
-    return(
-        <div>
+function CardMission({theme}) {
 
-        </div>
-    )
-}
+    const id = theme.id;
+
+    const navigate = useNavigate();
+
+    const [validate,setValidate] = useState(false);
+    let transi = validate ? "right-0" : "right-dfull";
+    let group1 = validate ? "left-0" : "left-1/4";
+    let group2 = validate ? "left-1/4" : "left-1/2";
+    let group3 = validate ? "left-1/2" : "left-3/4";
+    let group4 = validate ? "left-3/4" : "left-full";
+
+    function changeTransi(id) {
+        setValidate(!validate);
+        setTimeout(() => {
+            navigate('/game/'+id);
+        }, 1000);
+    }
 
-function CardMission({mission}) {
     return(
         <div className="h-60 w-72 bg-slate-200 flex flex-col justify-start items-center gap-5 rounded-md">
-            <h2 className="text-lg">Test</h2>
+            <h2 className="">{theme.theme}</h2>
             <div>
-                <img src={img[1]} alt="perso" className="h-28 w-28 rounded-full object-cover object-left-top"/>
+                <img src={img[id]} alt="perso" className="h-28 w-28 rounded-full object-cover object-left-top"/>
+            </div>
+            <button className="px-4 py-3 text-white bg-darkBlue" onClick={() => changeTransi(id)}>Play</button>
+            <div id={"transi-"+id} className={"fixed w-full h-1/2 top-1/4 py-4 bg-red-700 transition-all flex justify-center items-center "+transi}>
+                <img src={img[id]} alt="perso" className="h-full"/>
+                {/* <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/3 transition duration-1000 "+group1}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-2/3 transition duration-1000 "+group1}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/4 transition duration-1000 "+group2}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/2 transition duration-1000 "+group2}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-3/4 transition duration-1000 "+group2}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/3 transition duration-1000 "+group3}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-2/3 transition duration-1000 "+group3}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/4 transition duration-1000 "+group4}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/2 transition duration-1000 "+group4}></div>
+                <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-3/4 transition duration-1000 "+group4}></div> */}
             </div>
-            <a href="game/1"><button className="px-4 py-3 text-white bg-darkBlue">Play</button></a>
-            <Transition img={img[1]}/>
         </div>
     )
 }

webapp/src/components/content/game/mainmenu/index.jsx

@@ -1,18 +1,29 @@
 import CardMission from "../cardmission";
+import { useEffect, useState } from "react";
+import { get } from '../../../../modules/fetcher';
 
 function MainMenu() {
+
+    const [themes,setThemes] = useState([]);
+    const token = localStorage.getItem('token');
+
+    useEffect(() => {
+        get('https://saucisson.justw.tf/api/themes',token)
+        .then(res => {
+            console.log(res.JSON.themes);
+            setThemes(res.JSON.themes);
+            console.log(themes[0]);
+        })
+        .catch(err => console.log(err));
+    },[]);
+
     return(
         <main className="min-h-screen w-screens pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
-            <CardMission />
+            {themes.map((theme) => {
+                return(
+                    <CardMission theme={theme} />
+                )
+            })}
         </main>
     );
 }

webapp/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import Home from "./pages/home";
 import Login from "./pages/login";
 import Game from "./pages/game";
+import GameTheme from "./pages/gametheme";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import Register from "./pages/register";
 
@@ -25,6 +26,7 @@ function App() {
                     <Route path="/login" element={<Login setToken={setToken} />}/>
                     <Route path="/register" element={<Register setToken={setToken} />}/>
                     <Route path="/game" element={<Game />}/>
+                    <Route path="/game/:id" element={<GameTheme />}/>
                 </Routes>
             </BrowserRouter>
         </React.StrictMode>

webapp/src/pages/gametheme/index.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { get } from "../../modules/fetcher";
+import NavbarreGame from "../../components/navbarre/game";
+
+function GameTheme() {
+
+    const {id} = useParams();
+    const [theme,setTheme] = useState([]);
+    const token = localStorage.getItem('token');
+
+    useEffect(() => {
+        get('https://saucisson.justw.tf/api/themes/'+id, token)
+        .then(res => {
+            console.log(res.JSON.theme);
+            setTheme(res.JSON.theme);
+            console.log(theme);
+        })
+        .catch(err => console.log(err));
+    },[]);
+
+    return(
+        <div className="h-full w-full">
+            <NavbarreGame />
+        </div>
+    );
+}
+
+export default GameTheme;

webapp/tailwind.config.js

@@ -6,6 +6,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      spacing: {
+        'dfull' : '-100vw',
+      },
       colors: {
         'darkGreen': '#4dab7f',
         'mainBlue': '#047385',