fix

src/layout/components/Game.tsx

@@ -0,0 +1,46 @@
+import React, {FunctionComponent} from "react";
+import Deck from "./Deck";
+import Hand from "./Hand";
+
+interface GameState {
+    PlayerName: string;
+    Hand: string[];
+    CurrentCard: string;
+    CurrentPlayer: string;
+    Players: string[];
+}
+
+interface Props {
+    gameState: GameState
+    handleCardSend: (cardString: string) => void;
+    handleDraw: () => void;
+}
+
+const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
+    return (
+        <div className="game">
+            {
+                gameState.CurrentCard &&
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
+            }
+            {
+                gameState.Hand &&
+                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
+            }
+            <ul>
+                {
+                    gameState.Players &&
+                    gameState.Players.map((player, index) => {
+                        const isCurrentPlayer = player === gameState.CurrentPlayer;
+                        const isMe = player === gameState.PlayerName;
+                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                            {player} {isMe && '(You)'}
+                        </li>
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default Game;