added cards and basic gamestate communication via websocket

src/layout/components/Card.tsx

@@ -0,0 +1,32 @@
+import React, {FunctionComponent} from "react";
+
+interface Props {
+    cardString: string;
+    handleClick?: (cardString: string) => void;
+    isHidden?: boolean;
+    isClickable?: boolean;
+}
+
+const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
+    const cardType = cardString.split(' ')[0].toLowerCase();
+    const cardValue = cardString.split(' ')[1].toLowerCase();
+
+    const cardSource = isHidden ?
+        require(`../../assets/cards/back.png`) :
+        require(`../../assets/cards/${cardType}_${cardValue}.png`);
+    const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
+
+    const handleCardClick = () => {
+        if (handleClick) {
+            handleClick(cardString);
+        }
+    }
+
+    return (
+        <div className={`card ${isClickable && 'card-clickable'}`}>
+            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+        </div>
+    )
+}
+
+export default Card;

src/layout/components/Hand.tsx

@@ -0,0 +1,24 @@
+import React, {FunctionComponent} from 'react';
+import Card from "./Card";
+
+interface Props {
+    hand: string[];
+    actionOnClick: (cardString: string) => void;
+    isHidden?: boolean;
+}
+
+const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
+    return (
+        <div className="hand">
+            {
+                hand.map((card, index) => {
+                    return (
+                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Hand;

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