fix

src/layout/components/Game.tsx

@@ -0,0 +1,46 @@
+import React, {FunctionComponent} from "react";
+import Deck from "./Deck";
+import Hand from "./Hand";
+
+interface GameState {
+    PlayerName: string;
+    Hand: string[];
+    CurrentCard: string;
+    CurrentPlayer: string;
+    Players: string[];
+}
+
+interface Props {
+    gameState: GameState
+    handleCardSend: (cardString: string) => void;
+    handleDraw: () => void;
+}
+
+const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
+    return (
+        <div className="game">
+            {
+                gameState.CurrentCard &&
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
+            }
+            {
+                gameState.Hand &&
+                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
+            }
+            <ul>
+                {
+                    gameState.Players &&
+                    gameState.Players.map((player, index) => {
+                        const isCurrentPlayer = player === gameState.CurrentPlayer;
+                        const isMe = player === gameState.PlayerName;
+                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                            {player} {isMe && '(You)'}
+                        </li>
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default Game;

src/layout/pages/Room.tsx

@@ -5,6 +5,7 @@ import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
 import Hand from "../components/Hand";
 import Deck from "../components/Deck";
+import Game from "../components/Game";
 
 interface GameState {
     PlayerName: string;
@@ -14,6 +15,16 @@ interface GameState {
     Players: string[];
 }
 
+interface ChatMessage {
+    PlayerName: string;
+    Message: string;
+}
+
+interface SocketMessage {
+    Type: string;
+    Payload: any;
+}
+
 const Room = () => {
 
     useTitle('Mau!');
@@ -31,6 +42,7 @@ const Room = () => {
         CurrentPlayer: '',
         Players: []
     });
+    const [chatMessages, setChatMessages] = React.useState<ChatMessage[]>([]);
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
@@ -38,7 +50,9 @@ const Room = () => {
         },
         onMessage: (event) => {
             const data = JSON.parse(event.data);
-            setGameState(data);
+            const payload = JSON.parse(data.Payload);
+            if (data.Type === 'GAME') setGameState(payload);
+            if (data.Type === 'CHAT') setChatMessages(prev => [...prev, payload]);
         }
     });
 
@@ -48,45 +62,45 @@ const Room = () => {
         navigateTo('/');
     }
 
+    const handleSend = (message: SocketMessage) => {
+        websocket.sendMessage(JSON.stringify(message));
+    }
+
     const handleCardSend = (card: string) => {
-        const formattedAction = JSON.stringify({
+        handleSend({
+            Type: "GAME",
+            Payload: {
                 Action: "PLAYCARD",
-            Data: JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]})
+                Data: JSON.stringify({
-        });
+                    CardType: card.split(' ')[0],
-        websocket.sendMessage(formattedAction);
+                    CardValue: card.split(' ')[1]
+                })
+            }
+        })
     }
 
     const handleDraw = () => {
-        const formattedAction = JSON.stringify({
+        handleSend({
+            Type: "GAME",
+            Payload: {
                 Action: "DRAW",
                 Data: ""
+            }
+        });
+    }
+
+    const handleChat = (Message: string) => {
+        handleSend({
+            Type: "CHAT",
+            Payload: { Message }
         });
-        websocket.sendMessage(formattedAction);
     }
 
     return (
         <div>
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            {
+            <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw}/>
-                gameState.CurrentCard &&
-                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
-            }
-            {
-                gameState.Hand &&
-                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
-            }
-            <ul>
-                {
-                    gameState.Players.map((player, index) => {
-                        const isCurrentPlayer = player === gameState.CurrentPlayer;
-                        const isMe = player === gameState.PlayerName;
-                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player} {isMe && '(You)'}
-                        </li>
-                    })
-                }
-            </ul>
         </div>
     )
 }