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

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

@@ -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'>
@@ -57,6 +64,13 @@ 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>

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,
};