From 178002678e4de70722df6dc9f2daac227b4732f5 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Sat, 15 Nov 2025 17:15:17 -0800
Subject: [PATCH] chore: fix ribbit cross-sync

---
 client-src/routes/index.tsx           | 5 +++++
 client-src/views/room/UserToolbar.tsx | 3 ---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 01c9b33..14a5e50 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -50,6 +50,11 @@ function Index() {
           setFrog(FROG_MAP[data.frog]!);
           break;
         }
+        case "ribbit_sent": {
+          const audio = new Audio("/ribbit.mp3");
+          audio.play().catch((err) => console.error("Failed to play ribbit:", err));
+          break;
+        }
       }
     }
 
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index ab2e65f..635b909 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -22,12 +22,10 @@ export default function UserToolbar({
   setHat,
 }: UserToolbarProps) {
   const [name, setName] = useState("frogboi");
-  const ribbitRef = useRef<HTMLAudioElement>(null);
   const customizeDialogRef = useRef<HTMLDialogElement>(null);
 
   return (
     <>
-      <audio ref={ribbitRef} src="/ribbit.mp3"></audio>
       <CustomizeFrogDialog
         hat={hat}
         frog={frog}
@@ -74,7 +72,6 @@ export default function UserToolbar({
           </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"
-- 
2.51.2