draw works

src/layout/pages/Room.tsx

@@ -5,6 +5,7 @@ import {GHButton} from "../components/Button";
 import useTitle from "../../utils/TitleHook";
 import Card from "../components/Card";
 import Hand from "../components/Hand";
+import Deck from "../components/Deck";
 
 interface GameState {
     PlayerName: string;
@@ -39,8 +40,19 @@ const Room = () => {
     }
 
     const handleCardSend = (card: string) => {
-        const formattedCard = JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]});
-        websocket.sendMessage(formattedCard);
+        const formattedAction = JSON.stringify({
+            Action: "PLAYCARD",
+            Data: JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]})
+        });
+        websocket.sendMessage(formattedAction);
+    }
+
+    const handleDraw = () => {
+        const formattedAction = JSON.stringify({
+            Action: "DRAW",
+            Data: ""
+        });
+        websocket.sendMessage(formattedAction);
     }
 
     return (
@@ -49,9 +61,12 @@ const Room = () => {
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             {
                 gameState.CurrentCard &&
-                <Card cardString={gameState.CurrentCard}/>
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw} />
+            }
+            {
+                gameState.Hand &&
+                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             }
-            <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             <ul>
                 {
                     gameState.Players.map((player, index) => {