Integrated front end for penalties

traque-front/components/admin/teamEdit.jsx

@@ -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>
     )

traque-front/components/team/actionDrawer.jsx

@@ -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>
+                        {Array.from({ length: penalties }).map((_, i) => <div key={i} className='min-h-5 m-2 min-w-5 bg-red-400'></div>)}
-                        <div className='min-h-5 m-2 min-w-5 bg-green-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 className='min-h-5 m-2 min-w-5 bg-green-400'></div>
                     </div>
                 </div>
                 <div className="h-20">

traque-front/hook/useGame.jsx

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