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>
+    )
+}