Works now

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
-

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>
     </>

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>
+    )
+  };