src/layout/components/Lobby.tsx

@@ -1,7 +1,27 @@
-const Lobby = () => {
+import {FunctionComponent} from "react";
+import {GHButton} from "./Button";
+
+interface Props {
+    winner: string | undefined;
+    handleLobbyAction: (action: string) => void;
+}
+
+const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction}) => {
+
+    const onStartClick = () => {
+        console.log('Start Game');
+        handleLobbyAction("START");
+    }
+
+    // @ts-ignore
     return (
         <div>
             <h1>Lobby</h1>
+            {
+                winner &&
+                <h2>{winner} has won the game!</h2>
+            }
+            <GHButton onClick={onStartClick}>Start Game</GHButton>
         </div>
     );
 }

src/layout/pages/Room.tsx

@@ -34,14 +34,9 @@ const Room = () => {
     const playerName = localStorage.getItem('playerName') || Math.random().toString(36).substring(7);
     const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
 
-    const [gameState, setGameState] = React.useState<GameState>({
+    const [gameState, setGameState] = React.useState<GameState | undefined>(undefined);
-        Me: {Name: playerName, Id: '', CardsLeft: 0},
+    const [lobbyState, setLobbyState] = React.useState<string>("");
-        CurrentState: '',
+    const [winner, setWinner] = React.useState<string | undefined>(undefined);
-        Hand: [],
-        CurrentCard: '',
-        CurrentPlayer: {Name: "", Id: '', CardsLeft: 0},
-        Players: []
-    });
 
     const [chatScroll, setChatScroll] = React.useState<boolean>(true);
     const chatRef = React.useRef<HTMLOListElement>(null);
@@ -68,8 +63,24 @@ const Room = () => {
         onMessage: (event) => {
             const data = JSON.parse(event.data);
             const payload = JSON.parse(data.Payload);
-            if (data.Type === 'GAME') setGameState(payload);
+            switch (data.Type) {
-            if (data.Type === 'CHAT') addChatMessage({Sender: payload.Sender, Message: payload.Message})
+                case 'LOBBY':
+                    setLobbyState(data.Type);
+                    break;
+                case 'GAME':
+                    setLobbyState(data.Type);
+                    setGameState(payload);
+                    break;
+                case 'CHAT':
+                    addChatMessage(payload);
+                    break;
+                case "END":
+                    setWinner(payload.Name)
+                    setGameState(undefined);
+                    break;
+                default:
+                    console.log('Unknown message type:', data.Type);
+            }
         }
     });
 
@@ -85,6 +96,10 @@ const Room = () => {
         handleSend({Type: "GAME", Payload: JSON.stringify(action)});
     }
 
+    const handleLobbyAction = (action: string) => {
+        handleSend({Type: "LOBBY", Payload: JSON.stringify(action)});
+    }
+
     const handleChatMessage = (chatMessage: string) => {
         handleSend({
             Type: "CHAT",
@@ -92,9 +107,6 @@ const Room = () => {
         });
     }
 
-    const isLobby = false;
-    const isGame = true;
-
     useEffect(() => {
         return () => {
             const socket = websocket.getWebSocket();
@@ -118,12 +130,10 @@ const Room = () => {
             </aside>
             <main className={"room-main"}>
                 {
-                    isLobby &&
+                    gameState ?
-                    <Lobby/>
+                        <Game gameState={gameState} handleGameAction={handleGameAction}/>
-                }
+                        :
-                {
+                        <Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
-                    isGame &&
-                    <Game gameState={gameState} handleGameAction={handleGameAction}/>
                 }
             </main>
         </div>