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