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

cahnged design drawer

Browse Source 
improved map drawing tool
This commit is contained in:
Quentin Roussel
2024-03-29 16:01:03 +01:00
parent ed2e324a45
commit 198acdc699
5 changed files with 90 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,18 +2,27 @@ import useGame from "@/hook/useGame";
import { useState } from "react"
import BlueButton, { GreenButton, RedButton } from "../util/button";
import TextInput from "../util/textInput";
import { useTeamConnexion } from "@/context/teamConnexionContext";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
const { sendCurrentPosition, name } = useGame();
const { sendCurrentPosition, name, captureCode } = useGame();
const {logout} = useTeamConnexion();
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")}>
<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'>
{visible && <div className="flex justify-between flex-col w-full h-full">
<div className="flex flex-row justify-around">
<img src="/icons/logout.png" onClick={logout} className='p-3 mx-2 w-14 h-14 bg-red-500 rounded-lg cursor-pointer bg-red z-20' />
</div>
<div className='shadow-2xl bg-white p-1 flex flex-col text-center mb-1 mx-auto w-4/5 rounded'>
<div>
<span className='text-xl text-black'>{name}</span>
<span className='text-2xl text-black'>{name}</span>
</div>
<div className='text-gray-700'>
<span> Capture code </span>
<span className='text-lg text-black'>{captureCode}</span>
</div>
<div className='text-gray-700'>
<span className='text-lg text-black'>30min</span>
@@ -25,27 +34,22 @@ export default function ActionDrawer() {
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
</div>
</div>
<div className="h-20 my-1">
<div className="h-20">
<BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
</div>
<div className="h-20 my-1">
<BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton>
</div>
<div className="h-20 my-1">
<GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
</div>
<div className="mt-1 mb-auto">
<div className="p-5 shadow-lg bg-white">
<div className="text-center text-2xl">Target</div>
<div className="h-20 my-1">
<GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
</div>
<div className="h-20 flex flex-row">
<TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
<GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
</div>
</div>
<div className="h-20 my-2">
<div className="h-20">
<RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
</div>
<div className="h-20 mb-0">
<RedButton color={"red"} onClick={sendCurrentPosition}>Log out</RedButton>
</div>
</div>
}
</div>