fix

src/layout/pages/Room.tsx

@@ -41,6 +41,7 @@ const Room = () => {
         Players: []
     });
     const [chatMessages, setChatMessages] = React.useState<ChatMessage[]>([]);
+    const [chatInput, setChatInput] = React.useState<string>('');
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
@@ -87,10 +88,10 @@ const Room = () => {
         });
     }
 
-    const handleChat = (Message: string) => {
+    const handleChat = (message: string) => {
         handleSend({
             Type: "CHAT",
-            Payload: { Message }
+            Payload: message
         });
     }
 
@@ -99,6 +100,13 @@ const Room = () => {
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw}/>
+            <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
+            <button onClick={() => handleChat(chatInput)}>Send</button>
+            <ul>
+                {chatMessages.map((message, index) => (
+                    <li key={index}>{message.PlayerName}: {message.Message}</li>
+                ))}
+            </ul>
         </div>
     )
 }