From 631419267d49a99001d75d51a1a7e3a3751b5a5d Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 10:13:33 -0800
Subject: [PATCH 1/4] chore: WIP

---
 client-src/routes/index.tsx              | 23 ++++++++--
 client-src/views/draw/services/socket.ts |  5 ---
 client-src/views/room/UserToolbar.tsx    | 55 +++++++++++++++++-------
 isomophic-src/isomorphic.ts              | 13 ++++++
 server-src/server.ts                     | 11 +++++
 5 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 19a99ac..02e8e89 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,11 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
 import usePartySocket from "partysocket/react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, 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 { HAT_MAP, HATS, REVERSE_HAT_MAP } from "../views/room/state/hats";
+import { FROG_MAP, FROGS, REVERSE_FROG_MAP } from "../views/room/state/frogs";
+import { socketSend } from "../views/draw/services/socket";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -14,6 +15,8 @@ export const Route = createFileRoute("/")({
 function Index() {
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
+  const [hat, setHat] = useState("/TopHatP.png");
+  const [frog, setFrog] = useState("/Frog1AP.png");
 
   usePartySocket({
     host: window.location.host,
@@ -37,10 +40,19 @@ function Index() {
           }));
           break;
         }
+        case "get_frog": {
+          setHat(HAT_MAP[data.hat]!);
+          setFrog(FROG_MAP[data.frog]!);
+          break;
+        }
       }
     },
   });
 
+  useEffect(() => {
+    socketSend({ type: "request-frog" });
+  }, []);
+
   return (
     <div className="p-2 font-awexbmp h-screen flex flex-col">
       <ul className="flex-1 overflow-auto mb-0">
@@ -49,7 +61,10 @@ function Index() {
         ))}
       </ul>
       <div className="sticky bottom-0">
-        <UserToolbar />
+        <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 8177fa5..cacbdac 100644
--- a/client-src/views/draw/services/socket.ts
+++ b/client-src/views/draw/services/socket.ts
@@ -4,8 +4,3 @@ import { socket } from "../constants/constants";
 export function socketSend(type: FromClientSocketMessage) {
     socket.send(JSON.stringify(type));
 }
-
-socket.addEventListener('message', (event) => {
-    const data: FromServerSocketMessage = JSON.parse(event.data);
-    console.log({ data });
-});
\ No newline at end of file
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index 4a5ccb5..6f85dd6 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -7,17 +7,22 @@ import { FROGS, REVERSE_FROG_MAP } from "./state/frogs";
 import { socketSend } from "../draw/services/socket";
 import { app } from "../draw/state";
 
-export default function UserToolbar() {
+interface UserToolbarProps {
+  hat: string;
+  frog: string;
+  setFrog: (value: string) => void;
+  setHat: (value: string) => void;
+}
+
+export default function UserToolbar({ hat, frog, setFrog, setHat }: UserToolbarProps) {
   const [name, setName] = useState("frogboi");
-  const [hat, setHat] = useState("/TopHatP.png");
-  const [frog, setFrog] = useState("/Frog1AP.png");
   const ribbitRef = useRef<HTMLAudioElement>(null);
   const customizeDialogRef = useRef<HTMLDialogElement>(null);
 
   return (
     <>
       <audio ref={ribbitRef} src="/ribbit.mp3"></audio>
-      <CustomizeFrogDialog 
+      <CustomizeFrogDialog
         hat={hat}
         frog={frog}
         dialogRef={customizeDialogRef}
@@ -50,15 +55,15 @@ export default function UserToolbar() {
         </div>
 
         <div className="font-bold text-green-800 flex flex-col justify-center gap-4 w-full max-w-50 h-auto text-4xl">
-          <button 
+          <button
             onClick={() => {
               socketSend({ svg: app.copySvg(), type: "upload-svg" });
             }}
             className="w-full bg-green-400 hover:bg-green-600 hover:text-green-300 border-2 border-green-800 rounded p-4"
           >
             Send
-          </button>          
-          <button 
+          </button>
+          <button
             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"
           >
@@ -79,30 +84,48 @@ type CustomizeFrogDialogProps = {
 }
 
 function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComplete }: CustomizeFrogDialogProps) {
-  const [hatIndex, setHatIndex] = useState(HATS.findIndex((v) => v === hat));
-  const [frogIndex, setFrogIndex] = useState(FROGS.findIndex((v) => v === frog));
+  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]);
+
+  function safeSetHatIndex(fn: (v: number) => number) {
+    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;
+    });
+  }
 
-  const currentHat = useMemo(() => HATS[hatIndex]!, [hatIndex]);
-  const currentFrog = useMemo(() => FROGS[frogIndex]!, [frogIndex]);
+  function safeSetFrogIndex(fn: (v: number) => number) {
+    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;
+    });
+  }
 
   return (
     <dialog ref={dialogRef} className="bg-white absolute p-4">
       <div className="flex justify-between items-center">
-        <button onClick={() => hatIndex === 0 ? setHatIndex(HATS.length - 1) : setHatIndex(hatIndex - 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={() => hatIndex === HATS.length ? setHatIndex(0) : setHatIndex(hatIndex + 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={() => frogIndex === 0 ? setFrogIndex(HATS.length - 1) : setFrogIndex(frogIndex - 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={() => frogIndex === HATS.length ? setFrogIndex(0) : setFrogIndex(frogIndex + 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>
 
@@ -111,6 +134,8 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
       <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();
       }}>
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index c5accff..9de6348 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -54,11 +54,16 @@ const ChangeFrogSchema = z.object({
     frog: FrogSchema,
 });
 
+const RequestFrogSchema = z.object({
+    type: z.literal("request-frog"),
+});
+
 // The type of messages sent from the client to the server via WebSocket
 export const FromClientSocketMessageSchema = z.union([
     UploadSVGSchema,
     RibbitSchema,
     ChangeFrogSchema,
+    RequestFrogSchema,
 ]);
 
 export type FromClientSocketMessage = z.infer<typeof FromClientSocketMessageSchema>;
@@ -85,11 +90,19 @@ const FrogChangedSchema = z.object({
     frog: FrogSchema,
 });
 
+const GetFrogSchema = z.object({
+    type: z.literal("get_frog"),
+    userId: z.string(),
+    frog: FrogSchema,
+    hat: HatSchema,
+});
+
 // The type of messages sent from the server to the client via WebSocket
 export const FromServerSocketMessageSchema = z.union([
     SVGUploadedSchema,
     RibbitSentSchema,
     FrogChangedSchema,
+    GetFrogSchema,
 ]);
 
 export type FromServerSocketMessage = z.infer<typeof FromServerSocketMessageSchema>;
diff --git a/server-src/server.ts b/server-src/server.ts
index 6010007..bafdca2 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -46,6 +46,17 @@ export class Chat extends Server {
         }));
         break;
       }
+      case "request-frog": {
+        const hat = await this.ctx.storage.get<Hat>("hat") || "";
+        const frog = await this.ctx.storage.get<Frog>("frog") || "Frog1AP";
+        connection.send(getMessageForClient({
+          type: "get_frog",
+          hat,
+          frog,
+          userId: connection.id,
+        }));
+        break;
+      }
       case "change-frog": {
         this.ctx.storage.put("hat", data.hat);
         this.ctx.storage.put("frog", data.frog);
-- 
2.51.2


From 05114bf31ca9391606cf567da26bfab628e12c89 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 16:17:09 -0800
Subject: [PATCH 2/4] chore: temp fix

but now introduces a new bug
---
 client-src/routes/index.tsx | 52 ++++++++++++++++++++++++++-----------
 server-src/server.ts        |  2 +-
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 02e8e89..5e1ad38 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,28 +1,35 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
-import usePartySocket from "partysocket/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Frog, FromServerSocketMessage, Hat, SVGUploaded } from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
-import { HAT_MAP, HATS, REVERSE_HAT_MAP } from "../views/room/state/hats";
-import { FROG_MAP, FROGS, REVERSE_FROG_MAP } from "../views/room/state/frogs";
+import { HAT_MAP } from "../views/room/state/hats";
+import { FROG_MAP } from "../views/room/state/frogs";
 import { socketSend } from "../views/draw/services/socket";
+import PartySocket from "partysocket";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
+const socket = new PartySocket({
+  host: window.location.host,
+  room: "room-1",
+  party: "chat",
+})
+
+socket.addEventListener("message", (event) => {
+  console.log("Socket Message:", event.data);
+});
+
 function Index() {
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
   const [hat, setHat] = useState("/TopHatP.png");
   const [frog, setFrog] = useState("/Frog1AP.png");
 
-  usePartySocket({
-    host: window.location.host,
-    room: "room-1",
-    party: "chat",
-    onMessage(event) {
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
       const data: FromServerSocketMessage = JSON.parse(event.data);
       switch (data.type) {
         case "svg_uploaded": {
@@ -41,23 +48,38 @@ 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;
         }
       }
-    },
-  });
+    }
 
-  useEffect(() => {
-    socketSend({ type: "request-frog" });
+    socket.addEventListener("message", onMessage);
+    return () => {
+      socket.removeEventListener("message", onMessage);
+    };
   }, []);
 
+  useEffect(() => {
+    function onOpen() {
+      socketSend({ type: "request-frog" });
+    }
+    socket.addEventListener("open", onOpen);
+
+    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) => (
-          <UserMessage name="frogboi" hat={HAT_MAP[userMap[message.userId]!.hat]!} frog={FROG_MAP[userMap[message.userId]!.frog]!} image={message.svgPath} />
+        {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} />
         ))}
       </ul>
       <div className="sticky bottom-0">
diff --git a/server-src/server.ts b/server-src/server.ts
index bafdca2..6c21644 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";
-        connection.send(getMessageForClient({
+        this.broadcast(getMessageForClient({
           type: "get_frog",
           hat,
           frog,
-- 
2.51.2


From 4232f5e6fd892cb103fc4dbc0e4befb6f214daf9 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 16:25:17 -0800
Subject: [PATCH 3/4] chore: make socket connection more stable

---
 client-src/constants/socket.ts |  4 ++++
 client-src/main.tsx            | 16 +++++++++++++---
 client-src/routes/index.tsx    | 18 +++++-------------
 3 files changed, 22 insertions(+), 16 deletions(-)
 create mode 100644 client-src/constants/socket.ts

diff --git a/client-src/constants/socket.ts b/client-src/constants/socket.ts
new file mode 100644
index 0000000..e749bc7
--- /dev/null
+++ b/client-src/constants/socket.ts
@@ -0,0 +1,4 @@
+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 48c4a6b..82fc8ab 100644
--- a/client-src/main.tsx
+++ b/client-src/main.tsx
@@ -5,6 +5,8 @@ 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 });
@@ -16,6 +18,12 @@ 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
@@ -24,9 +32,11 @@ if (!rootElement.innerHTML) {
   const root = createRoot(rootElement);
   root.render(
     <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
+      <SocketContext value={socket}>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </SocketContext>
     </StrictMode>,
   );
 }
diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 5e1ad38..f772648 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,28 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
-import { useEffect, useState } from "react";
+import { useContext, 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 PartySocket from "partysocket";
+import { SocketContext } from "../constants/socket";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
-const socket = new PartySocket({
-  host: window.location.host,
-  room: "room-1",
-  party: "chat",
-})
-
-socket.addEventListener("message", (event) => {
-  console.log("Socket Message:", event.data);
-});
-
 function Index() {
+  const socket = useContext(SocketContext);
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
   const [hat, setHat] = useState("/TopHatP.png");
@@ -62,13 +53,14 @@ function Index() {
     return () => {
       socket.removeEventListener("message", onMessage);
     };
-  }, []);
+  }, [socket]);
 
   useEffect(() => {
     function onOpen() {
       socketSend({ type: "request-frog" });
     }
     socket.addEventListener("open", onOpen);
+    onOpen();
 
     return () => {
       socket.removeEventListener("open", onOpen);
-- 
2.51.2


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