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;