Added the ability to choose your cardtype when playing a jack or the newly added joker

src/layout/components/Card.tsx

@@ -11,9 +11,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
     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 cardSource = (): string => {
+        if (isHidden) return require("../../assets/cards/back.png");
+        if (cardType === "JOKER") {
+            if (cardValue === "RED") {
+                return require("../../assets/cards/joker_red.png")
+            }
+            return require("../../assets/cards/joker_black.png")
+        }
+        return require(`../../assets/cards/${cardType}_${cardValue}.png`);
+    }
+
     const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
 
     const handleCardClick = () => {
@@ -24,7 +32,7 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
 
     return (
         <div className={`card ${isClickable && 'card-clickable'}`}>
-            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+            <img className="card__texture" src={cardSource()} alt={cardName} onClick={handleCardClick}/>
         </div>
     )
 }

src/layout/components/Game.tsx

@@ -1,9 +1,11 @@
 import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
+import {GHButton} from "./Button";
 
-interface GameState {
+export interface GameState {
     PlayerName: string;
+    CurrentState: string;
     Hand: string[];
     CurrentCard: string;
     CurrentPlayer: string;
@@ -14,9 +16,12 @@ interface Props {
     gameState: GameState
     handleCardSend: (cardString: string) => void;
     handleDraw: () => void;
+    handleChoice: (choice: string) => void;
 }
 
-const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
+const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
+
+const Game: FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw, handleChoice}) => {
     return (
         <div className="game">
             {
@@ -27,13 +32,17 @@ const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw})
                 gameState.Hand &&
                 <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             }
+            {
+                gameState.CurrentState === 'CHOOSE' &&
+                CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
+            }
             <ul>
                 {
-                    gameState.Players &&
-                    gameState.Players.map((player, index) => {
+                    gameState?.Players &&
+                    gameState.Players.map((player) => {
                         const isCurrentPlayer = player === gameState.CurrentPlayer;
                         const isMe = player === gameState.PlayerName;
-                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                        return <li key={player} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
                             {player} {isMe && '(You)'}
                         </li>
                     })