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

changed buttons for a drawer in the track page

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-27 20:51:06 +01:00
parent e6563f2da5
commit 76ed97e904
9 changed files with 70 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
traque-front/components/admin/teamEdit.jsx
View File

@@ -51,10 +51,11 @@ export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
<div className='w-1/2 flex flex-col space-y-2 mx-2'>
<h2 className='text-2xl text-center'>Team details</h2>
<div>
<p>Secret : {team.id}</p>
<p>Secret : {String(team.id).padStart(6,'0')}</p>
<p>Name : {team.name}</p>
<p>Chasing : {getTeamName(team.chasing)}</p>
<p>Chased by : {getTeamName(team.chased)}</p>
<p>Capture code : {String(team.captureCode).padStart(4,'0')}</p>
</div>
</div>
</div>

41
traque-front/components/team/actionDrawer.jsx Normal file
View File

@@ -0,0 +1,41 @@
import useGame from "@/hook/useGame";
import { useState } from "react"
import Button from "../util/button";
import TextInput from "../util/textInput";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
const { sendCurrentPosition } = useGame();
return (
<div className={"absolute w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-5/6" : "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="h-20 my-2">
<Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
</div>
<div className="my-2">
<div className="h-20">
<TextInput placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
</div>
<div className="h-20">
<Button onClick={sendCurrentPosition}>Capture target</Button>
</div>
</div>
<div className='shadow-lg m-5 p-2 flex flex-col text-center mx-auto w-4/5 rounded'>
<p className='text-xl text-black'>30min</p>
<p className='text-gray-700'> before penalty</p>
<div className='w-1/2 flex flex-row justify-center mx-auto'>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
</div>
</div>
<div className="h-20 mb-0 mt-auto">
<Button onClick={sendCurrentPosition}>Log out</Button>
</div>
</div>
}
</div>
)
}

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

@@ -26,7 +26,7 @@ function MapPan(props) {
export default function LiveMap({enemyPosition, currentPosition, ...props}) {
return (
<MapContainer {...props} className='min-h-full' center={[0,0]} zoom={0} scrollWheelZoom={true}>
<MapContainer {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

2
traque-front/components/util/button.jsx
View File

@@ -1,5 +1,5 @@
export default function Button({ children, ...props }) {
return (<button {...props} className="bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
return (<button {...props} className={props.className + " bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded"}>
{children}
</button>)
}

2
traque-front/components/util/textInput.jsx
View File

@@ -2,6 +2,6 @@ import React from 'react'
export default function TextInput({...props}) {
return (
<input {...props} type="text" className="block w-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
<input {...props} type="text" className="block w-full h-full p-4 rounded text-center ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600" />
)
}