Merge branch 'feature/draw_the_mau' into mauster

src/layout/components/Deck.tsx

@@ -0,0 +1,29 @@
+import React, {FunctionComponent} from "react";
+import Card from "./Card";
+
+interface Props {
+    currentCard: string;
+    actionOnClick: () => void;
+}
+
+const Deck: FunctionComponent<Props> = ({currentCard, actionOnClick}) => {
+
+    const handleClick = (card: string) => {
+        actionOnClick();
+    }
+
+    return (
+        <div className="deck-container">
+            <div className="used-cards">
+                <p></p>
+                <Card cardString={currentCard}/>
+            </div>
+            <div className="deck">
+                <p></p>
+                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden={true}/>
+            </div>
+        </div>
+    );
+}
+
+export default Deck;

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}/>
+            }
             <ul>
                 {
                     gameState.Players.map((player, index) => {

src/styles/layout/components/_components.scss

@@ -1,3 +1,4 @@
 @import "button";
 @import "card";
 @import "hand";
+@import "deck";

src/styles/layout/components/deck.scss

@@ -0,0 +1,6 @@
+.deck-container {
+  display: flex;
+  flex-direction: row;
+  margin-left: 0.5rem;
+  gap: 0.5rem;
+}