fast failover

client/src/App.tsx

@@ -1,12 +1,27 @@
+import { useState } from "react";
 import "./App.css";
 import { UserInput } from "./game/UserInput";
 import { BoardDisplay } from "./game/BoardDisplay";
 import { ConnectionStatus } from "./game/ConnectionStatus";
+import { NameInput } from "./game/NameInput";
+
+const getPlayerNameFromUrl = () => {
+  const params = new URLSearchParams(window.location.search);
+  return params.get("name") || null;
+};
 
 function App() {
+  const [playerName, setPlayerName] = useState<string | null>(
+    getPlayerNameFromUrl,
+  );
+
+  if (!playerName) {
+    return <NameInput onNameSubmit={setPlayerName} />;
+  }
+
   return (
     <>
-      <UserInput />
+      <UserInput playerName={playerName} />
       <div
         style={{
           width: "100vw",
@@ -17,7 +32,7 @@ function App() {
         }}
       >
         <ConnectionStatus />
-        <BoardDisplay />
+        <BoardDisplay playerName={playerName} />
       </div>
     </>
   );