main page overhaul

src/layout/pages/MainLobby.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import useTitle from "../../utils/TitleHook";
+import Card from "../components/Card";
+
+const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
+
+const MainLobby = () => {
+
+    useTitle('MauLobby');
+
+    const handleCreateRoom = () => {
+        fetch(ROOM_URL, {
+            method: 'POST',
+        }).then(r => r.json()).then(data => {
+            window.location.href = `/room/${data}`;
+        });
+    }
+
+    const gotoRooms = () => {
+        window.location.href = '/rooms';
+    }
+
+    return (
+        <div className={"main-lobby"}>
+            <div className={"main-lobby__button clickable"} onClick={handleCreateRoom}>
+                <h2>Host Game</h2>
+                <Card cardString={'SPADES ACE'} isClickable />
+            </div>
+            <div className={"main-lobby__button clickable"} onClick={gotoRooms}>
+                <h2>Join Game</h2>
+                <Card cardString={'SPADES ACE'} isHidden isClickable />
+            </div>
+        </div>
+    );
+}
+
+export default MainLobby;

src/layout/pages/Room.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import {useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/TitleHook";
-import Card from "../components/Card";
 import Hand from "../components/Hand";
 import Deck from "../components/Deck";
 
@@ -23,7 +22,13 @@ const Room = () => {
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
 
-    const [gameState, setGameState] = React.useState<GameState>({PlayerName: '', Hand: [], CurrentCard: '', CurrentPlayer: '', Players: []});
+    const [gameState, setGameState] = React.useState<GameState>({
+        PlayerName: '',
+        Hand: [],
+        CurrentCard: '',
+        CurrentPlayer: '',
+        Players: []
+    });
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
@@ -36,6 +41,8 @@ const Room = () => {
     });
 
     const handleLeaveRoom = () => {
+        const socket = websocket.getWebSocket();
+        if (socket) socket.close();
         window.location.href = '/';
     }
 
@@ -61,7 +68,7 @@ const Room = () => {
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             {
                 gameState.CurrentCard &&
-                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw} />
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
             }
             {
                 gameState.Hand &&
@@ -70,7 +77,11 @@ const Room = () => {
             <ul>
                 {
                     gameState.Players.map((player, index) => {
-                        return <li key={index} style={{fontWeight: player === gameState.CurrentPlayer ? 'bold' : 'normal'}}>{player} {player === gameState.PlayerName && '(You)'}</li>
+                        const isCurrentPlayer = player === gameState.CurrentPlayer;
+                        const isMe = player === gameState.PlayerName;
+                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                            {player} {isMe && '(You)'}
+                        </li>
                     })
                 }
             </ul>

src/layout/pages/Rooms.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-import {GHButton} from "../components/Button";
-import {Link} from "react-router-dom";
 import useTitle from "../../utils/TitleHook";
+import React from "react";
+import {Link} from "react-router-dom";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
 
-const Home = () => {
+const Rooms = () => {
 
-    useTitle('Home');
+    useTitle('Rooms');
 
     const [rooms, setRooms] = React.useState<string[]>([]);
 
@@ -17,17 +16,9 @@ const Home = () => {
             .then(data => setRooms(data));
     }, []);
 
-    const handleCreateRoom = () => {
-        fetch(ROOM_URL, {
-            method: 'POST',
-        }).then(r => r.json()).then(data => {
-            setRooms([...rooms, data]);
-        });
-    }
-
     return (
         <div>
-            <GHButton onClick={handleCreateRoom}>Create Room</GHButton>
+            <h1>Rooms</h1>
             <ul>
                 {
                     rooms.map((room, index) => {
@@ -37,6 +28,6 @@ const Home = () => {
             </ul>
         </div>
     );
-}
+};
 
-export default Home;
+export default Rooms;