added cards and basic gamestate communication via websocket

src/layout/pages/Room.tsx

@@ -3,6 +3,13 @@ import React from "react";
 import {useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/TitleHook";
+import Card from "../components/Card";
+import Hand from "../components/Hand";
+
+interface GameState {
+    Hand: string[];
+    CurrentCard: string;
+}
 
 const Room = () => {
 
@@ -12,50 +19,36 @@ const Room = () => {
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
 
-    const [message, setMessage] = React.useState<string>('');
-    const [messages, setMessages] = React.useState<string[]>([]);
+    const [gameState, setGameState] = React.useState<GameState>({Hand: [], CurrentCard: ''});
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
             console.log('WebSocket connection established.');
         },
         onMessage: (event) => {
-            setMessages([...messages, event.data]);
+            const data = JSON.parse(event.data);
+            setGameState(data);
         }
     });
 
-    const handleSend = () => {
-        websocket.sendMessage(message);
-        setMessage('');
-    }
-
-    const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setMessage(event.target.value);
-    }
-
     const handleLeaveRoom = () => {
         window.location.href = '/';
     }
 
+    const handleCardSend = (card: string) => {
+        const formattedCard = JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]});
+        websocket.sendMessage(formattedCard);
+    }
+
     return (
         <div>
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <form onSubmit={(event) => {
-                event.preventDefault();
-                handleSend();
-            }}>
-                <input type="text" name="message" placeholder="Send a message" value={message}
-                       onChange={handleMessageChange}/>
-                <span onClick={handleSend}>Send</span>
-            </form>
-            <ul>
-                {
-                    messages.map((message, index) => {
-                        return <li key={index}>{message}</li>
-                    })
-                }
-            </ul>
+            {
+                gameState.CurrentCard &&
+                    <Card cardString={gameState.CurrentCard}/>
+            }
+            <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
         </div>
     )
 }