From 99fab031754c7173e343cc059c8a0f5ff2c8c1e7 Mon Sep 17 00:00:00 2001
From: Christopher Miller <hello@chrismiller.xyz>
Date: Sat, 15 Jul 2023 13:13:44 -0700
Subject: [PATCH] Works now

---
 Justfile                      |  3 +--
 web/src/Game.tsx              | 16 ++++++++++++----
 web/src/components/Button.tsx | 12 ++++++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/Button.tsx

diff --git a/Justfile b/Justfile
index 64456ba..9c069f9 100644
--- a/Justfile
+++ b/Justfile
@@ -1,6 +1,6 @@
 
 install-global-deps:
-  cargo install wasm-bindgen-cli@0.2.87
+  cargo install wasm-bindgen-cli
 
 serve: build-client
   yarn workspace web dev
@@ -23,4 +23,3 @@ client-wasm-bindgen: build-wasm
 
 build-wasm:
   cargo build -p game --lib --profile wasm-release --target wasm32-unknown-unknown
-
diff --git a/web/src/Game.tsx b/web/src/Game.tsx
index 38ed985..f5aa67f 100644
--- a/web/src/Game.tsx
+++ b/web/src/Game.tsx
@@ -1,27 +1,35 @@
 import { useEffect, useState } from "react";
+import { Button } from "./components/Button";
 
 const Game = () => {
-  const [gameLoaded, setGameLoaded] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [startGame, setStartGame] = useState(false);
 
   useEffect(() => {
     const run = async () => {
+      console.log("Loading bevy");
       setLoading(true);
       const { main } = await import("./game");
-      setGameLoaded(true);
       setLoading(false);
       main();
     };
 
-    if (!gameLoaded && !loading) {
+    if (startGame) {
       run();
     }
-  }, [gameLoaded]);
+  }, [startGame]);
+
+  const joinForm = !startGame ? (
+    <div className="flex flex-col gap-3">
+      <Button disabled={false} text="Join Server" onClick={() => setStartGame(true)} />
+    </div>
+  ) : null;
 
   const statusText = loading ? <h1 className="text-4xl text-center my-4">Loading Game...</h1> : null;
 
   return (
     <>
+      {joinForm}
       {statusText}
       <canvas className="bevy-instance__canvas" id="bevy" onContextMenu={(e) => e.preventDefault()}></canvas>
     </>
diff --git a/web/src/components/Button.tsx b/web/src/components/Button.tsx
new file mode 100644
index 0000000..65b1964
--- /dev/null
+++ b/web/src/components/Button.tsx
@@ -0,0 +1,12 @@
+
+interface ButtonProps {
+    text: string;
+    disabled: boolean;
+    onClick: () => void;
+  }
+  
+  export const Button = ({ text, disabled, onClick }: ButtonProps) => {
+    return (
+      <div className={`${disabled ? "italic" : "hover:cursor-pointer hover:bg-teal-600 active:bg-teal-800"} bg-teal-500 rounded-md text-center px-3 p-2`} onClick={() => !disabled ? onClick() : null}>{text}</div>
+    )
+  };
\ No newline at end of file