public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Interface d'attente + logout

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-29 12:38:12 +01:00
parent cee7c1e612
commit 3770dd4f99
8 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
traque-front/components/team/actionDrawer.jsx
View File

@@ -5,13 +5,16 @@ import TextInput from "../util/textInput";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
const { sendCurrentPosition } = useGame();
const { sendCurrentPosition, name } = useGame();
return (
<div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
<img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
{visible && <div className="flex flex-col w-full h-full">
<div className='shadow-lg mt-0 p-1 flex flex-col text-center mb-1 mt-auto mx-auto w-4/5 rounded'>
<div>
<span className='text-xl text-black'>{name}</span>
</div>
<div className='text-gray-700'>
<span className='text-lg text-black'>30min</span>
<span> before penalty</span>

2
traque-front/components/team/map.jsx
View File

@@ -82,7 +82,7 @@ export function PlacementMap({ ...props}) {
</Popup>
</Marker>}
<MapPan center={currentPosition}/>
<Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />
{startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
</MapContainer>
)
}

19
traque-front/components/team/placementOverlay.jsx Normal file
View File

@@ -0,0 +1,19 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
export default function PlacementOverlay() {
const { name, ready } = useGame();
const {logout} = useTeamConnexion();
return (
<>
<img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
<div className='fixed top-0 p-3 w-full bg-gray-300 shadow-xl rounded-b-xl flex flex-col z-10 justify-center items-center'>
<div className='text-2xl my-3'>Placement</div>
<div className='text-md'>{name}</div>
{!ready && <div className='text-lg font-semibold text-red-700'>Positionez vous dans le cercle</div>}
{ready && <div className='text-lg font-semibold text-green-700 text-center'>Restez dans le cercle en attendant que la partie commence</div>}
</div>
</>
)
}

21
traque-front/components/team/waitingScreen.jsx Normal file
View File

@@ -0,0 +1,21 @@
import { useTeamConnexion } from "@/context/teamConnexionContext";
import useGame from "@/hook/useGame"
export function WaitingScreen() {
const { name } = useGame();
const { logout } = useTeamConnexion();
return (
<div className='h-full flex flex-col items-center justify-center'>
<div className='text-4xl text-center'>
Equipe : {name}
</div>
<div className='text-2xl text-center'>
Jeu en préparation, veuillez patienter...
</div>
<div className="bottom-0 absolute text-sm text-center">
Vous avez perdu Le Jeu
</div>
<img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
</div>
)
}