From 803b15a677a9a283154efe8879ac8d416012c81e Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 16:34:54 -0800
Subject: [PATCH] chore: properly fix the initial load

---
 client-src/constants/socket.ts           |  4 -
 client-src/main.tsx                      | 16 +---
 client-src/routes/index.tsx              | 36 +++++----
 client-src/views/draw/services/socket.ts |  2 +-
 client-src/views/room/UserToolbar.tsx    | 93 +++++++++++++++++-------
 server-src/server.ts                     |  2 +-
 6 files changed, 93 insertions(+), 60 deletions(-)
 delete mode 100644 client-src/constants/socket.ts

diff --git a/client-src/constants/socket.ts b/client-src/constants/socket.ts
deleted file mode 100644
index e749bc7..0000000
--- a/client-src/constants/socket.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createContext } from "react";
-import PartySocket from "partysocket";
-
-export const SocketContext = createContext<PartySocket>(null!);
\ No newline at end of file
diff --git a/client-src/main.tsx b/client-src/main.tsx
index 82fc8ab..48c4a6b 100644
--- a/client-src/main.tsx
+++ b/client-src/main.tsx
@@ -5,8 +5,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
-import PartySocket from "partysocket";
-import { SocketContext } from "./constants/socket";
 
 // Create a new router instance
 const router = createRouter({ routeTree });
@@ -18,12 +16,6 @@ declare module "@tanstack/react-router" {
   }
 }
 
-const socket = new PartySocket({
-  host: window.location.host,
-  room: "room-1",
-  party: "chat",
-})
-
 const queryClient = new QueryClient();
 
 // Render the app
@@ -32,11 +24,9 @@ if (!rootElement.innerHTML) {
   const root = createRoot(rootElement);
   root.render(
     <StrictMode>
-      <SocketContext value={socket}>
-        <QueryClientProvider client={queryClient}>
-          <RouterProvider router={router} />
-        </QueryClientProvider>
-      </SocketContext>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </StrictMode>,
   );
 }
diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index f772648..e28ce6d 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,21 +1,27 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
-import { useContext, useEffect, useState } from "react";
-import { Frog, FromServerSocketMessage, Hat, SVGUploaded } from "../../isomophic-src/isomorphic";
+import { useEffect, useState } from "react";
+import {
+  Frog,
+  FromServerSocketMessage,
+  Hat,
+  SVGUploaded,
+} from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
 import { HAT_MAP } from "../views/room/state/hats";
 import { FROG_MAP } from "../views/room/state/frogs";
 import { socketSend } from "../views/draw/services/socket";
-import { SocketContext } from "../constants/socket";
+import { socket } from "../views/draw/constants/constants";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
 function Index() {
-  const socket = useContext(SocketContext);
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
-  const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
+  const [userMap, setUserMap] = useState(
+    {} as Record<string, { frog: Frog; hat: Hat }>,
+  );
   const [hat, setHat] = useState("/TopHatP.png");
   const [frog, setFrog] = useState("/Frog1AP.png");
 
@@ -39,11 +45,8 @@ function Index() {
           break;
         }
         case "get_frog": {
-          debugger;
-          if (data.userId !== socket.id) return;
           setHat(HAT_MAP[data.hat]!);
           setFrog(FROG_MAP[data.frog]!);
-          console.log({data})
           break;
         }
       }
@@ -53,7 +56,7 @@ function Index() {
     return () => {
       socket.removeEventListener("message", onMessage);
     };
-  }, [socket]);
+  }, []);
 
   useEffect(() => {
     function onOpen() {
@@ -65,20 +68,23 @@ function Index() {
     return () => {
       socket.removeEventListener("open", onOpen);
     };
-  }, [socket]);
+  }, []);
 
   return (
     <div className="p-2 font-awexbmp h-screen flex flex-col">
       <ul className="flex-1 overflow-auto mb-0">
         {messages.map((message, i) => (
-          <UserMessage key={i} name="frogboi" hat={HAT_MAP[userMap[message.userId]!.hat]!} frog={FROG_MAP[userMap[message.userId]!.frog]!} image={message.svgPath} />
+          <UserMessage
+            key={i}
+            name="frogboi"
+            hat={HAT_MAP[userMap[message.userId]!.hat]!}
+            frog={FROG_MAP[userMap[message.userId]!.frog]!}
+            image={message.svgPath}
+          />
         ))}
       </ul>
       <div className="sticky bottom-0">
-        <UserToolbar hat={hat}
-          frog={frog}
-          setFrog={setFrog}
-          setHat={setHat} />
+        <UserToolbar hat={hat} frog={frog} setFrog={setFrog} setHat={setHat} />
       </div>
     </div>
   );
diff --git a/client-src/views/draw/services/socket.ts b/client-src/views/draw/services/socket.ts
index cacbdac..c39d919 100644
--- a/client-src/views/draw/services/socket.ts
+++ b/client-src/views/draw/services/socket.ts
@@ -1,4 +1,4 @@
-import { FromClientSocketMessage, FromServerSocketMessage } from "../../../../isomophic-src/isomorphic";
+import { FromClientSocketMessage } from "../../../../isomophic-src/isomorphic";
 import { socket } from "../constants/constants";
 
 export function socketSend(type: FromClientSocketMessage) {
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index 6f85dd6..ab2e65f 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -1,12 +1,13 @@
-import { RefObject, useEffect, useMemo, useRef, useState } from "react";
+import { RefObject, useMemo, useRef, useState } from "react";
 import { Controls } from "../draw/components/controls";
 import { Editor } from "../draw/components/editor";
-import EditPencil from "/StreamlineFreehand-EditPencil.svg" with { type: "svg" };
 import { HATS, REVERSE_HAT_MAP } from "./state/hats";
 import { FROGS, REVERSE_FROG_MAP } from "./state/frogs";
 import { socketSend } from "../draw/services/socket";
 import { app } from "../draw/state";
 
+const EditPencil = `/StreamlineFreehand-EditPencil.svg`;
+
 interface UserToolbarProps {
   hat: string;
   frog: string;
@@ -14,7 +15,12 @@ interface UserToolbarProps {
   setHat: (value: string) => void;
 }
 
-export default function UserToolbar({ hat, frog, setFrog, setHat }: UserToolbarProps) {
+export default function UserToolbar({
+  hat,
+  frog,
+  setFrog,
+  setHat,
+}: UserToolbarProps) {
   const [name, setName] = useState("frogboi");
   const ribbitRef = useRef<HTMLAudioElement>(null);
   const customizeDialogRef = useRef<HTMLDialogElement>(null);
@@ -42,7 +48,10 @@ export default function UserToolbar({ hat, frog, setFrog, setHat }: UserToolbarP
             onChange={(e) => setName(e.currentTarget.value)}
             className="text-lg text-center w-fit border-2 border-green-800 bg-white font-bold rounded pl-2"
           />
-          <button onClick={() => customizeDialogRef.current?.showModal()} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+          <button
+            onClick={() => customizeDialogRef.current?.showModal()}
+            className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full"
+          >
             <img src={EditPencil} className="group-hover:text-green-300" />
           </button>
         </div>
@@ -64,7 +73,10 @@ export default function UserToolbar({ hat, frog, setFrog, setHat }: UserToolbarP
             Send
           </button>
           <button
-            onClick={() => { ribbitRef.current?.play(); socketSend({ type: "ribbit", name }) }}
+            onClick={() => {
+              ribbitRef.current?.play();
+              socketSend({ type: "ribbit", name });
+            }}
             className="w-full bg-green-400 hover:bg-green-600 hover:text-green-300 border-2 border-green-800 rounded p-4"
           >
             Ribbit
@@ -81,18 +93,30 @@ type CustomizeFrogDialogProps = {
   hat: string;
   onFrogComplete: (frog: string) => void;
   onHatComplete: (hat: string) => void;
-}
+};
 
-function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComplete }: CustomizeFrogDialogProps) {
+function CustomizeFrogDialog({
+  dialogRef,
+  frog,
+  hat,
+  onFrogComplete,
+  onHatComplete,
+}: CustomizeFrogDialogProps) {
   const [_hatIndex, setHatIndex] = useState(null as number | null);
   const [_frogIndex, setFrogIndex] = useState(null as number | null);
 
-  const currentHat = useMemo(() => _hatIndex !== null ? HATS[_hatIndex]! : hat, [_hatIndex, hat]);
-  const currentFrog = useMemo(() => _frogIndex !== null ? FROGS[_frogIndex]! : frog, [_frogIndex, frog]);
+  const currentHat = useMemo(
+    () => (_hatIndex !== null ? HATS[_hatIndex]! : hat),
+    [_hatIndex, hat],
+  );
+  const currentFrog = useMemo(
+    () => (_frogIndex !== null ? FROGS[_frogIndex]! : frog),
+    [_frogIndex, frog],
+  );
 
   function safeSetHatIndex(fn: (v: number) => number) {
-    setHatIndex(v => {
-      const index = fn(v ?? HATS.findIndex(h => h === hat) ?? 0);
+    setHatIndex((v) => {
+      const index = fn(v ?? HATS.findIndex((h) => h === hat) ?? 0);
       if (index < 0) return HATS.length - 1;
       if (index >= HATS.length) return 0;
       return index;
@@ -100,8 +124,8 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
   }
 
   function safeSetFrogIndex(fn: (v: number) => number) {
-    setFrogIndex(v => {
-      const index = fn(v ?? FROGS.findIndex(f => f === frog) ?? 0);
+    setFrogIndex((v) => {
+      const index = fn(v ?? FROGS.findIndex((f) => f === frog) ?? 0);
       if (index < 0) return FROGS.length - 1;
       if (index >= FROGS.length) return 0;
       return index;
@@ -111,34 +135,51 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
   return (
     <dialog ref={dialogRef} className="bg-white absolute p-4">
       <div className="flex justify-between items-center">
-        <button onClick={() => safeSetHatIndex(v => v - 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+        <button
+          onClick={() => safeSetHatIndex((v) => v - 1)}
+          className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full"
+        >
           <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
         <img src={currentHat} className="" />
-        <button onClick={() => safeSetHatIndex(v => v + 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+        <button
+          onClick={() => safeSetHatIndex((v) => v + 1)}
+          className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full"
+        >
           <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
       </div>
 
       <div className="flex justify-between items-center">
-        <button onClick={() => safeSetFrogIndex(v => v - 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+        <button
+          onClick={() => safeSetFrogIndex((v) => v - 1)}
+          className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full"
+        >
           <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
         <img src={currentFrog} className="" />
-        <button onClick={() => safeSetFrogIndex(v => v + 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+        <button
+          onClick={() => safeSetFrogIndex((v) => v + 1)}
+          className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full"
+        >
           <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
-
       </div>
 
-      <button onClick={() => {
-        onFrogComplete(currentFrog);
-        onHatComplete(currentHat);
-        setFrogIndex(null);
-        setHatIndex(null);
-        socketSend({ type: "change-frog", frog: REVERSE_FROG_MAP[currentFrog] as never, hat: REVERSE_HAT_MAP[currentHat] as never });
-        dialogRef.current?.close();
-      }}>
+      <button
+        onClick={() => {
+          onFrogComplete(currentFrog);
+          onHatComplete(currentHat);
+          setFrogIndex(null);
+          setHatIndex(null);
+          socketSend({
+            type: "change-frog",
+            frog: REVERSE_FROG_MAP[currentFrog] as never,
+            hat: REVERSE_HAT_MAP[currentHat] as never,
+          });
+          dialogRef.current?.close();
+        }}
+      >
         Confirm
       </button>
     </dialog>
diff --git a/server-src/server.ts b/server-src/server.ts
index 6c21644..bafdca2 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -49,7 +49,7 @@ export class Chat extends Server {
       case "request-frog": {
         const hat = await this.ctx.storage.get<Hat>("hat") || "";
         const frog = await this.ctx.storage.get<Frog>("frog") || "Frog1AP";
-        this.broadcast(getMessageForClient({
+        connection.send(getMessageForClient({
           type: "get_frog",
           hat,
           frog,
-- 
2.51.2