Mostly design update +

- Chat cleaning
- Player hand size visibility

src/layout/components/Chat.tsx

@@ -0,0 +1,31 @@
+import {GHButton} from "./Button";
+import React, {FormEvent, FunctionComponent, RefObject} from "react";
+
+interface Props{
+    chatRef: RefObject<HTMLOListElement>;
+    handleSend: (message: string) => void;
+}
+
+const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {
+
+    const handleChat = (form: FormEvent<HTMLFormElement>) => {
+        form.preventDefault();
+        const data = new FormData(form.currentTarget);
+        const chatInput = data.get("chat-input") as string;
+        if(!chatInput) return;
+        handleSend(chatInput);
+        form.currentTarget.reset();
+    }
+
+    return (
+        <>
+            <ol className={"chat__list"} ref={chatRef}/>
+            <form className={"chat-form"} onSubmit={handleChat}>
+                <input className={"chat-form__input"} type="text" placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}/>
+                <GHButton type={"submit"}>Send</GHButton>
+            </form>
+        </>
+    )
+}
+
+export default Chat;

src/layout/components/Game.tsx

@@ -2,7 +2,7 @@ import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
 import {GHButton} from "./Button";
-import {Player} from "../pages/Room";
+import {GameAction, Player} from "../pages/Room";
 
 export interface GameState {
     Me: Player;
@@ -15,16 +15,52 @@ export interface GameState {
 
 interface Props {
     gameState: GameState
-    handleCardSend: (cardString: string) => void;
-    handleDraw: () => void;
-    handleChoice: (choice: string) => void;
+    handleGameAction: (action: GameAction) => void;
 }
 
 const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
 
-const Game: FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw, handleChoice}) => {
+const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
+
+    const handleChoice = (choice: string) => {
+        handleGameAction({Action: 'CHOOSE', Data: choice});
+    }
+
+    const handleDraw = () => {
+        handleGameAction({Action: 'DRAW', Data: ""});
+    }
+
+    const handleCardSend = (cardString: string) => {
+        handleGameAction({Action: "PLAYCARD", Data: JSON.stringify({
+            CardType: cardString.split(' ')[0],
+            CardValue: cardString.split(' ')[1]
+        })})
+    }
+
     return (
         <div className="game">
+            <ol className={"game__players"}>
+                {
+                    gameState?.Me?.Id &&
+                    gameState.Players.map((player) => {
+                        const isCurrentPlayer = player.Id === gameState.CurrentPlayer.Id;
+                        const isMe = player.Id === gameState.Me.Id;
+
+                        const style =
+                            {
+                                fontWeight: isMe ? 'bold' : 'normal',
+                                outline: isCurrentPlayer ? '2px solid red' : 'none'
+                            }
+
+                        return <li key={player.Id} style={style}>
+                            <div className={"game__players__info"}>
+                                <h3>{player.Name} {isMe && '(You)'}</h3>
+                                <p>{player.CardsLeft} left</p>
+                            </div>
+                        </li>
+                    })
+                }
+            </ol>
             {
                 gameState.CurrentCard &&
                 <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
@@ -37,18 +73,6 @@ const Game: FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw,
                 gameState.CurrentState === 'CHOOSE' &&
                 CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
             }
-            <ul>
-                {
-                    gameState?.Me?.Id &&
-                    gameState.Players.map((player) => {
-                        const isCurrentPlayer = player.Id === gameState.CurrentPlayer.Id;
-                        const isMe = player.Id === gameState.Me.Id;
-                        return <li key={player.Id} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player.Name} {isMe && '(You)'}
-                        </li>
-                    })
-                }
-            </ul>
         </div>
     )
 }

src/layout/components/Lobby.tsx

@@ -0,0 +1,9 @@
+const Lobby = () => {
+    return (
+        <div>
+            <h1>Lobby</h1>
+        </div>
+    );
+}
+
+export default Lobby;