Merge remote-tracking branch 'origin/GringoElPepito' into GringoElPepito

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

@@ -0,0 +1,12 @@
+function Ammo({arg}) {
+    return(
+        <div className="relative h-48 w-32 bottom-0 bg-white overflow-hidden transition-all duration-200 hover:bottom-full rounded-md">
+            <p>{arg}</p>
+            <div className="absolute left-d24 bottom-0 h-4 w-full rotate-45 bg-darkGreen">
+
+            </div>
+        </div>
+    );
+}
+
+export default Ammo;

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

@@ -0,0 +1,16 @@
+import Ammo from "../ammo";
+import { get } from "../../../../modules/fetcher";
+import { useEffect, useState } from "react";
+
+function AmmoBox() {
+    return(
+        <div className="fixed bottom-0 left-28 right-0 h-24 bg-blue-500 flex flex-row justify-between items-start">
+            <Ammo arg={"test"}/>
+            <Ammo arg={"test2"}/>
+            <Ammo arg={"test3"}/>
+            <Ammo arg={"test4"}/>
+        </div>
+    );
+}
+
+export default AmmoBox;

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

@@ -1,12 +1,7 @@
 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";
+import img from "../poseimg";
 
-const img = ["",Pose1,Pose2,Pose3,Pose4];
 
 function CardMission({theme}) {
 

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

@@ -0,0 +1,11 @@
+import AmmoBox from "../ammobox";
+
+function GameScene() {
+    return(
+        <main className="min-h-screen w-screen pl-44 bg-red-900 flex flex-row flex-wrap gap-12">
+            <AmmoBox />
+        </main>
+    );
+}
+
+export default GameScene;

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

@@ -18,7 +18,7 @@ function MainMenu() {
     },[]);
 
     return(
-        <main className="min-h-screen w-screens pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
+        <main className="min-h-screen w-screen pl-44 bg-red-900 flex flex-row flex-wrap gap-12 p-8">
             {themes.map((theme) => {
                 return(
                     <CardMission theme={theme} />

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

@@ -0,0 +1,8 @@
+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";
+
+const img = ["",Pose1,Pose2,Pose3,Pose4];
+
+export default img;

webapp/src/pages/gametheme/index.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { get } from "../../modules/fetcher";
 import NavbarreGame from "../../components/navbarre/game";
+import GameScene from "../../components/content/game/gamescene";
 
 function GameTheme() {
 
@@ -12,9 +13,7 @@ function GameTheme() {
     useEffect(() => {
         get('https://saucisson.justw.tf/api/themes/'+id, token)
         .then(res => {
-            console.log(res.JSON.theme);
-            setTheme(res.JSON.theme);
-            console.log(theme);
+            setTheme(res.JSON.themes);
         })
         .catch(err => console.log(err));
     },[]);
@@ -22,6 +21,7 @@ function GameTheme() {
     return(
         <div className="h-full w-full">
             <NavbarreGame />
+            <GameScene theme={theme}/>
         </div>
     );
 }

webapp/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     extend: {
       spacing: {
         'dfull' : '-100vw',
+        'd24': '-24px',
       },
       colors: {
         'darkGreen': '#4dab7f',