added visual indicator whos turn it is and who you are

src/layout/components/Hand.tsx

@@ -8,12 +8,16 @@ interface Props {
 }
 
 const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
+
+    const isMyHand = !isHidden;
+
     return (
         <div className="hand">
             {
                 hand.map((card, index) => {
                     return (
-                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
+                              isClickable={isMyHand}/>
                     )
                 })
             }

src/layout/pages/Room.tsx

@@ -7,8 +7,11 @@ import Card from "../components/Card";
 import Hand from "../components/Hand";
 
 interface GameState {
+    PlayerName: string;
     Hand: string[];
     CurrentCard: string;
+    CurrentPlayer: string;
+    Players: string[];
 }
 
 const Room = () => {
@@ -19,7 +22,7 @@ const Room = () => {
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
 
-    const [gameState, setGameState] = React.useState<GameState>({Hand: [], CurrentCard: ''});
+    const [gameState, setGameState] = React.useState<GameState>({PlayerName: '', Hand: [], CurrentCard: '', CurrentPlayer: '', Players: []});
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
@@ -49,6 +52,13 @@ const Room = () => {
                 <Card cardString={gameState.CurrentCard}/>
             }
             <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
+            <ul>
+                {
+                    gameState.Players.map((player, index) => {
+                        return <li key={index} style={{fontWeight: player === gameState.CurrentPlayer ? 'bold' : 'normal'}}>{player} {player === gameState.PlayerName && '(You)'}</li>
+                    })
+                }
+            </ul>
         </div>
     )
 }