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

Integrated front end for penalties

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-19 13:41:33 +02:00
parent e09ab83232
commit 6b0d45ee93
3 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
function handleRename(e) {
e.preventDefault();
updateTeam(team.id, {name:newTeamName});
updateTeam(team.id, { name: newTeamName });
}
function handleRemove() {
@@ -31,6 +31,13 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
setSelectedTeamId(null);
}
function handleAddPenalty(increment) {
let newPenalties = team.penalties + increment;
newPenalties = Math.max(0, newPenalties);
newPenalties = Math.min(3, newPenalties);
updateTeam(team.id, { penalties: newPenalties });
}
return (team &&
<div className='flex flex-col h-full'>
@@ -45,7 +52,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<BlueButton type="submit">Rename</BlueButton>
</div>
</form>
<BlueButton onClick={() => updateTeam(team.id, {captured: !team.captured})}>{team.captured ? "Revive" : "Capture"}</BlueButton>
<BlueButton onClick={() => updateTeam(team.id, { captured: !team.captured })}>{team.captured ? "Revive" : "Capture"}</BlueButton>
<RedButton onClick={handleRemove}>Remove</RedButton>
</div>
<div className='w-1/2 flex flex-col space-y-2 mx-2'>
@@ -57,12 +64,19 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
<p>Chased by : {getTeamName(team.chased)}</p>
<p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
<p>Captured : {team.captured ? "Yes" : "No"}</p>
<p>Has to send location before {new Date(team.locationSendDeadline).toTimeString()}</p>
<div className='flex flex-row'>
<p>Penalties :</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(-1)}>-</button>
<p> {team.penalties}</p>
<button className='w-7 h-7 mx-4 bg-blue-600 hover:bg-blue-500 text-md ease-out duration-200 text-white shadow-sm rounded' onClick={() => handleAddPenalty(1)}>+</button>
</div>
</div>
</div>
</div>
<div className='m-5 h-full flex flex-col'>
<h2 className='text-2xl text-center'>Starting area</h2>
<CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, {startingArea})} />
<CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, { startingArea })} />
</div>
</div>
)

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

@@ -1,5 +1,5 @@
import useGame from "@/hook/useGame";
import { useState } from "react"
import { useEffect, useState } from "react"
import BlueButton, { GreenButton, RedButton } from "../util/button";
import TextInput from "../util/textInput";
import { useTeamConnexion } from "@/context/teamConnexionContext";
@@ -7,8 +7,17 @@ import { useTeamConnexion } from "@/context/teamConnexionContext";
export default function ActionDrawer() {
const [visible, setVisible] = useState(false);
const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
const { sendCurrentPosition, name, captureCode, capture } = useGame();
const { sendCurrentPosition, name, captureCode, capture, locationSendDeadline, penalties } = useGame();
const {logout} = useTeamConnexion();
const [timeLeftBeforePenalty, setTimeLeftBeforePenalty] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
console.log(locationSendDeadline)
const timeLeft = locationSendDeadline - Date.now();
setTimeLeftBeforePenalty(Math.floor(timeLeft / 1000 / 60));
}, 1000);
return () => clearInterval(interval);
}, [locationSendDeadline]);
function handleCapture() {
capture(enemyCaptureCode);
@@ -28,16 +37,15 @@ export default function ActionDrawer() {
</div>
<div className='text-gray-700'>
<span> Capture code </span>
<span className='text-lg text-black'>{captureCode}</span>
<span className='text-lg text-black'>{String(captureCode).padStart(4,"0")}</span>
</div>
<div className='text-gray-700'>
<span className='text-lg text-black'>30min</span>
<span className='text-lg text-black'>{timeLeftBeforePenalty}min</span>
<span> before penalty</span>
</div>
<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>
{Array.from({ length: penalties }).map((_, i) => <div key={i} className='min-h-5 m-2 min-w-5 bg-red-400'></div>)}
{Array.from({ length: 3-penalties }).map((_, i) => <div key={i} className='min-h-5 m-2 min-w-5 bg-green-400'></div>)}
</div>
</div>
<div className="h-20">

2
traque-front/hook/useGame.jsx
View File

@@ -28,6 +28,8 @@ export default function useGame() {
name: teamInfos?.name || null,
ready: teamInfos?.ready || false,
captured: teamInfos?.captured || false,
locationSendDeadline: teamInfos?.locationSendDeadline || null,
penalties: teamInfos?.penalties || 0,
teamId,
gameState,
};