fixed pbms found during demo

traque-front/components/admin/gameSettings.jsx

@@ -0,0 +1,49 @@
+import useAdmin from "@/hook/useAdmin";
+import { TextArea } from "../util/textInput";
+import { GreenButton } from "../util/button";
+import { useEffect, useState } from "react";
+
+export const GameSettings = () => {
+    const {gameSettings, changeGameSettings} = useAdmin();
+    const [capturedMessage, setCapturedMessage] = useState("");
+    const [winnerEndMessage, setWinnerEndMessage] = useState("");
+    const [loserEndMessage, setLoserEndMessage] = useState("");
+    const [waitingMessage, setWaitingMessage] = useState("");
+
+    useEffect(() => {
+        console.log({gameSettings})
+        if (gameSettings) {
+            setCapturedMessage(gameSettings.capturedMessage);
+            setWinnerEndMessage(gameSettings.winnerEndGameMessage);
+            setLoserEndMessage(gameSettings.loserEndGameMessage);
+            setWaitingMessage(gameSettings.waitingMessage);
+        }
+    }, [gameSettings]);
+
+    function applySettings() {
+        changeGameSettings({capturedMessage: capturedMessage, winnerEndGameMessage: winnerEndMessage, loserEndGameMessage: loserEndMessage, waitingMessage: waitingMessage});
+    }
+
+    return (
+        <div className='w-full h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+            <h2 className="text-2xl">Other settings</h2>
+            <div>
+                <p>Waiting message</p>
+                <TextArea value={waitingMessage} onChange={(e) => setWaitingMessage(e.target.value)} />
+            </div>
+            <div>
+                <p>Captured message</p>
+                <TextArea value={capturedMessage} onChange={(e) => setCapturedMessage(e.target.value)} />
+            </div>
+            <div>
+                <p>Game finished message (winner)</p>
+                <TextArea value={winnerEndMessage} onChange={(e) => setWinnerEndMessage(e.target.value)} />
+            </div>
+            <div>
+                <p>Game finished message (loser)</p>
+                <TextArea value={loserEndMessage} onChange={(e) => setLoserEndMessage(e.target.value)} />
+            </div>
+            <GreenButton onClick={applySettings}>Apply</GreenButton>
+        </div>
+    )
+}

traque-front/components/admin/penaltySettings.jsx

@@ -0,0 +1,42 @@
+import useAdmin from "@/hook/useAdmin";
+import TextInput from "../util/textInput";
+import { GreenButton } from "../util/button";
+import { useEffect, useState } from "react";
+
+export const PenaltySettings = () => {
+    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const [maxPenalties, setMaxPenalties] = useState("");
+    const [allowedTimeOutOfZone, setAllowedTimeOutOfZone] = useState("");
+    const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
+
+    useEffect(() => {
+        if (penaltySettings) {
+            setMaxPenalties(penaltySettings.maxPenalties.toString());
+            setAllowedTimeOutOfZone(penaltySettings.allowedTimeOutOfZone.toString());
+            setAllowedTimeBetweenUpdates(penaltySettings.allowedTimeBetweenPositionUpdate.toString());
+        }
+    }, [penaltySettings]);
+
+    function applySettings() {
+        changePenaltySettings({maxPenalties: Number(maxPenalties), allowedTimeOutOfZone: Number(allowedTimeOutOfZone), allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
+    }
+
+    return (
+        <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+            <h2 className="text-2xl">Penalties</h2>
+            <div>
+                <p>Maximum Penalties</p>
+                <TextInput value={maxPenalties} onChange={(e) => setMaxPenalties(e.target.value)}></TextInput>
+            </div>
+            <div>
+                <p>Time out of the zone before a penalty</p>
+                <TextInput value={allowedTimeOutOfZone} onChange={(e) => setAllowedTimeOutOfZone(e.target.value)}></TextInput>
+            </div>
+            <div>
+                <p>Allowed time between position updates</p>
+                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)}></TextInput>
+            </div>
+            <GreenButton onClick={applySettings}>Apply</GreenButton>
+        </div>
+    )
+}

traque-front/components/team/actionDrawer.jsx

@@ -65,9 +65,9 @@ export default function ActionDrawer() {
                         <GreenButton onClick={handleCapture}>Capture target</GreenButton>
                     </div>
                 </div>
-                <div className="h-20">
+                {/* <div className="h-20">
                     <RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
-                </div>
+                </div> */}
             </div>
             }
         <EnemyTeamModal visible={enemyModalVisible} onClose={() => setEnemyModalVisible(false)} />

traque-front/components/team/notification.jsx

@@ -1,34 +1,36 @@
 import { useSocketListener } from "@/hook/useSocketListener";
 import { useEffect, useState } from "react";
 
-export function Notification({socket }) {
+export function Notification({ socket }) {
     const [visible, setVisible] = useState(false);
     const [timeoutId, setTimeoutId] = useState(null);
-    
+
     const [notification, setNotification] = useState(null);
     useSocketListener(socket, "error", (notification) => {
         console.log("error", notification);
-        setNotification({type: "error", text: notification});
+        setNotification({ type: "error", text: notification });
         setVisible(true);
     });
     useSocketListener(socket, "success", (notification) => {
         console.log("success", notification);
-        setNotification({type: "success", text: notification});
+        setNotification({ type: "success", text: notification });
         setVisible(true);
     });
     useSocketListener(socket, "warning", (notification) => {
         console.log("warning", notification);
-        setNotification({type: "warning", text: notification});
+        setNotification({ type: "warning", text: notification });
         setVisible(true);
     });
     // Hide the notification after 5 seconds
     useEffect(() => {
-        console.log({visible});
+        console.log({ visible });
         if (visible && notification?.text != undefined) {
             clearTimeout(timeoutId);
-            setTimeoutId(setTimeout(() => {
-                setVisible(false);
-            }, 3000));
+            if (notification?.type == "success") {
+                setTimeoutId(setTimeout(() => {
+                    setVisible(false);
+                }, 3000));
+            }
         }
     }, [visible]);
 
@@ -38,11 +40,11 @@ export function Notification({socket }) {
         warning: "bg-yellow-500"
     }
     const classNames = 'fixed w-11/12 p-5 z-30 mx-auto inset-x-0 flex justify-center rounded-xl transition-all shadow-xl ' + (visible ? "top-5 " : "-translate-y-full ");
-    return ( 
+    return (
         Object.keys(bgColorMap).map((key) =>
-            notification?.type == key && 
+            notification?.type == key &&
             <div key={key} className={classNames + bgColorMap[key]} onClick={() => setVisible(false)}>
                 <p className='text-center text-xl'>{notification?.text}</p>
             </div>
-    ));
+        ));
 }

traque-front/components/team/placementOverlay.jsx

@@ -7,7 +7,7 @@ export default function PlacementOverlay() {
     const {logout} = useTeamConnexion();
     return (
         <>
-            <Image src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
+            <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
             <div className='fixed top-0 p-3 w-full bg-gray-300 shadow-xl rounded-b-xl flex flex-col z-10 justify-center items-center'>
                 <div className='text-2xl my-3'>Placement</div>
                 <div className='text-md'>{name}</div>

traque-front/components/team/waitingScreen.jsx

@@ -2,9 +2,11 @@ import useGame from "@/hook/useGame"
 import { GreenButton, LogoutButton } from "../util/button";
 import { useRef } from "react";
 import Image from "next/image";
+import { useTeamContext } from "@/context/teamContext";
 
 export function WaitingScreen() {
-    const { name, teamId } = useGame();
+    const { name, teamId  } = useGame();
+    const { gameSettings } = useTeamContext();
     const imageRef = useRef(null);
     const SERVER_URL = "https://" + process.env.NEXT_PUBLIC_SOCKET_HOST + ":" + process.env.NEXT_PUBLIC_SOCKET_PORT;
 
@@ -33,7 +35,7 @@ export function WaitingScreen() {
                 Equipe : {name}
             </div>
             <div className='text-2xl text-center'>
-                Jeu en préparation, veuillez patienter...
+                {gameSettings?.waitingMessage}
             </div>
             <div className='text-2xl text-center my-10'>
                 <p>Uploadez une photo où tous les membres de l&apos;équipe sont visibles</p>

traque-front/components/util/textInput.jsx

@@ -5,3 +5,9 @@ export default function TextInput({...props}) {
     <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" />
   )
 }
+
+export function TextArea({...props}) {
+  return (
+    <textarea {...props} 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" />
+  )
+}