main page overhaul

src/config/Router.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
-import Home from "../layout/pages/Home";
+import MainLobby from "../layout/pages/MainLobby";
 import NotFound from "../layout/pages/NotFound";
 import Room from "../layout/pages/Room";
+import Rooms from "../layout/pages/Rooms";
 
 const Router = () => {
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Home/>}/>
+                <Route path="/" element={<MainLobby/>}/>
+                <Route path="rooms" element={<Rooms/>}/>
                 <Route path="room/:roomId" element={<Room/>}/>
                 <Route path="*" element={<NotFound/>}/>
             </Routes>

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;

src/styles/App.scss

@@ -1,2 +1,12 @@
 @import "vendor/vendor";
-@import "layout/layout";
+@import "layout/layout";
+@import "utils/utils";
+
+@font-face {
+  font-family: "Mau";
+  src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: "Mau", serif;
+}

src/styles/layout/pages/_pages.scss

@@ -0,0 +1 @@
+@import "mainlobby";

src/styles/layout/pages/mainlobby.scss

@@ -0,0 +1,15 @@
+.main-lobby {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+
+  &__button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/styles/utils/_utils.scss

@@ -0,0 +1 @@
+@import "pointer";

src/styles/utils/pointer.scss

@@ -0,0 +1,4 @@
+.clickable {
+  cursor: pointer;
+  user-select: none;
+}