Setting up changing states

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import Host from "./Host";
-import Client from "./Client";
+import Host from "./host/Join";
+import Client from "./client/Join";
 
 export default function App() {
   const [isHost, setIsHost] = useState(false);

src/Client.tsx → src/client/Join.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import StringInput from "./lib/StringInput";
-import { State } from "./types/gameTypes";
-import { useClientState } from "./react-use-peer-state";
+import StringInput from "../lib/StringInput";
+import { State } from "../types/gameTypes";
+import { useClientState } from "../hooks/react-use-peer-state";
 
 export default function Client() {
   const [host, setHost] = useState<string>();
@@ -16,16 +16,13 @@ export default function Client() {
       <h3>CLIENT</h3>
       <p>
         {name ? `Current name: ${name}` : "Choose a name"}{" "}
-        <StringInput
-          onSubmit={(name) => {
-            name.trim() && setName(name.trim());
-          }}
-        />
+        <StringInput onSubmit={(name) => setName(name)} />
       </p>
 
       {connected ? (
         <>
           <p>Connected</p>
+          <code>{state?.kind === "join" && state.players}</code>
         </>
       ) : (
         <>

src/Host.tsx → src/host/Join.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import StringInput from "./lib/StringInput";
-import { GameState, State } from "./types/gameTypes";
-import { useHostState } from "./react-use-peer-state";
-import { toRemoved } from "./utils";
+import StringInput from "../lib/StringInput";
+import { State } from "../types/gameTypes";
+import { useHostState } from "../hooks/react-use-peer-state";
+import { toRemoved } from "../utils";
 
 export default function Host() {
   const [id, setId] = useState<string>();
@@ -25,8 +25,11 @@ export default function Host() {
 
       conn.on("close", () => {
         if (state.kind !== "join") return;
-        setState({...state, players: toRemoved(state.players, conn.label)})
-      })
+        setState({
+          ...state,
+          players: [name, ...toRemoved(state.players, conn.label)],
+        });
+      });
     });
 
     return () => {
@@ -36,7 +39,7 @@ export default function Host() {
         connection.off("error");
       });
     };
-  });
+  }, [connections]);
 
   return (
     <>
@@ -45,16 +48,35 @@ export default function Host() {
       <StringInput onSubmit={setId} />
       {connections ? (
         <>
-          <p>{connections.length} connected</p>
-          <code> [{connections.map((con) => con.label)}]</code> <br></br>
+          <code> [{state.kind === "join" && state.players.join(", ")}]</code>{" "}
+          <br></br>
         </>
       ) : (
         <p>None are connected</p>
       )}
       <p>
         Current name: {name}{" "}
-        <StringInput onSubmit={(name) => setName(name.trim())} />
+        <StringInput
+          onSubmit={(newName) => {
+            if (state.kind !== "join") return;
+            setName(newName);
+            setState({
+              ...state,
+              players: toRemoved([...state.players, newName], name),
+            });
+            // toRemoved([...], name): removes old name
+            // [...state.players, newName]: adds new name
+          }}
+        />
       </p>
+      <button
+        onClick={() => {
+          if (state.kind !== "join") return;
+          setState({ kind: "assign", players: state.players.map((p) => ({name: p, partyLeader: ""})) });
+        }}
+      >
+        Start Game
+      </button>
     </>
   );
 }

src/lib/StringInput.tsx

@@ -4,10 +4,12 @@ export default function StringInput({
   onSubmit,
   clearOnSubmit = true,
   enterSubmit = true,
+  acceptEmpty = false
 }: {
   onSubmit: (value: string) => void;
   clearOnSubmit?: boolean;
   enterSubmit?: boolean;
+  acceptEmpty?: boolean;
 }) {
   const [value, setValue] = useState("");
 
@@ -22,6 +24,7 @@ export default function StringInput({
   }
 
   function handleSubmit() {
+    if (!acceptEmpty && !value.trim()) return;
     if (clearOnSubmit) setValue("");
     onSubmit(value);
   }

src/types/gameTypes.ts

@@ -53,4 +53,4 @@ type State =
   | ModifierState
   | ChallengeState;
 
-export type { GameState, State, Player };
+export type { JoinState, GameState, State, Player };