From dfe2fb98bcdd523b6b42e5bba34e2d080fada640 Mon Sep 17 00:00:00 2001
From: Dane Johnson <daneallenjohnson@protonmail.com>
Date: Sat, 11 Feb 2023 13:30:59 -0600
Subject: [PATCH] Begin host page

---
 src/App.tsx  |  2 ++
 src/Host.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/Host.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8b35fda..2e0d7ea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Error from "./Error";
 import Landing from "./Landing";
 import Display from "./Display";
 import Contestant from "./Contestant";
+import Host from "./Host";
 
 const App = () => {
   return (
@@ -15,6 +16,7 @@ const App = () => {
           <Route path="/" element={<Landing />} />
           <Route path="new-game" element={<Display />} />
           <Route path="contestant-join/:room" element={<Contestant />} />
+          <Route path="host-join/:room" element={<Host />} />
           <Route path="/*" element={<Error />} />
         </Routes>
       </BrowserRouter>
diff --git a/src/Host.tsx b/src/Host.tsx
new file mode 100644
index 0000000..7ba2482
--- /dev/null
+++ b/src/Host.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Container, Stack, Button } from "react-bootstrap";
+
+import { socket } from "./socket";
+
+const Host = () => {
+  const { room } = useParams();
+
+  useEffect(() => {
+    socket.emit("host-join", { room });
+  }, []);
+
+  return (
+    <Container>
+      <Stack gap={3} className="text-center">
+        <span>
+          <Button onClick={() => socket.emit("host-start")}>Start Game</Button>
+        </span>
+      </Stack>
+    </Container>
+  );
+};
+
+export default Host;