Updated front-end to match back-end rewrite

src/layout/components/Card.tsx

@@ -1,13 +1,13 @@
 import React, {FunctionComponent} from "react";
+import {NoButton} from "./Button";
 
 interface Props {
     cardString: string;
     handleClick?: (cardString: string) => void;
     isHidden?: boolean;
-    isClickable?: boolean;
 }
 
-const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
+const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden}) => {
     const cardType = cardString.split(' ')[0].toLowerCase();
     const cardValue = cardString.split(' ')[1].toLowerCase();
 
@@ -30,9 +30,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
         }
     }
 
+    if (handleClick) {
+        return (
+            <NoButton className={"card"} onClick={handleCardClick}>
+                <img className="card__texture" src={cardSource()} alt={cardName}/>
+            </NoButton>
+        )
+    }
+
     return (
-        <div className={`card ${isClickable && 'card-clickable'}`}>
-            <img className="card__texture" src={cardSource()} alt={cardName} onClick={handleCardClick}/>
+        <div className={"card"}>
+            <img className="card__texture" src={cardSource()} alt={cardName}/>
         </div>
     )
 }

src/layout/components/Deck.tsx

@@ -15,12 +15,10 @@ const Deck: FunctionComponent<Props> = ({currentCard, 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 isClickable/>
+                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden/>
             </div>
         </div>
     );

src/layout/components/Game.tsx

@@ -2,11 +2,11 @@ import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
 import {GHButton} from "./Button";
-import {GameAction, Player} from "../pages/Room";
+import {Player, SocketMessage} from "../pages/Room";
 
 export interface GameState {
     Me: Player;
-    CurrentState: string;
+    MyState: string;
     Hand: string[];
     CurrentCard: string;
     CurrentPlayer: Player;
@@ -15,7 +15,7 @@ export interface GameState {
 
 interface Props {
     gameState: GameState
-    handleGameAction: (action: GameAction) => void;
+    handleGameAction: (message: SocketMessage) => void;
 }
 
 const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
@@ -23,15 +23,15 @@ const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
 const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
 
     const handleChoice = (choice: string) => {
-        handleGameAction({Action: 'CHOOSE', Data: choice});
+        handleGameAction({Type: 'CHOOSE', Data: choice});
     }
 
     const handleDraw = () => {
-        handleGameAction({Action: 'DRAW', Data: ""});
+        handleGameAction({Type: 'DRAW', Data: ""});
     }
 
     const handleCardSend = (cardString: string) => {
-        handleGameAction({Action: "PLAYCARD", Data: JSON.stringify({
+        handleGameAction({Type: "PLAY", Data: JSON.stringify({
             CardType: cardString.split(' ')[0],
             CardValue: cardString.split(' ')[1]
         })})
@@ -70,7 +70,7 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
                 <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             }
             {
-                gameState.CurrentState === 'CHOOSE' &&
+                gameState.MyState === 'CHOOSE' &&
                 CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
             }
         </div>

src/layout/components/Hand.tsx

@@ -3,25 +3,24 @@ import Card from "./Card";
 
 interface Props {
     hand: string[];
-    actionOnClick: (cardString: string) => void;
+    actionOnClick?: (cardString: string) => void;
     isHidden?: boolean;
 }
 
 const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
 
-    const isMyHand = !isHidden;
-
     return (
-        <div className="hand">
+        <ul className="hand">
             {
                 hand.map((card, index) => {
                     return (
-                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
-                              isClickable={isMyHand}/>
+                        <li key={card} className={"hand__item"}>
+                            <Card cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                        </li>
                     )
                 })
             }
-        </div>
+        </ul>
     )
 }