fix: custom sound playback, unmark, editor click-to-edit, bigger fonts

components/BingoCard.tsx

@@ -100,8 +100,10 @@ export function BingoCard({ campaign, initialGrid, currentUserNickname, isAdmin
     return () => { if (pollingRef.current) clearInterval(pollingRef.current); };
   }, [fetchState]);
 
-  const handleMark = async (itemId: string) => {
+  const markItem = async (itemId: string) => {
     if (marking) return;
+    const item = grid.find(c => c.item?.id === itemId);
+    if (item?.item) playSound(item.item.soundCategory, item.item.soundUrl);
     setMarking(itemId);
     try {
       const res = await fetch("/api/game/mark", {
@@ -109,13 +111,24 @@ export function BingoCard({ campaign, initialGrid, currentUserNickname, isAdmin
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ campaignId: campaign.id, itemId }),
       });
-      if (res.ok) {
-        const item = grid.find(c => c.item?.id === itemId);
-        if (item?.item) playSound(item.item.soundCategory, item.item.soundUrl);
-        await fetchState();
-      } else if (res.status === 409) {
-        await fetchState();
+      if (!res.ok && res.status === 409) {
+        // already marked by someone else, just refresh
       }
+      await fetchState();
+    } catch {}
+    setMarking(null);
+  };
+
+  const unmarkItem = async (itemId: string) => {
+    if (marking) return;
+    setMarking(itemId);
+    try {
+      await fetch("/api/game/mark", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ campaignId: campaign.id, itemId }),
+      });
+      await fetchState();
     } catch {}
     setMarking(null);
   };
@@ -239,7 +252,8 @@ export function BingoCard({ campaign, initialGrid, currentUserNickname, isAdmin
                 markCount={cell.markCount}
                 markedBy={cell.markedBy}
                 gridSize={campaign.gridSize}
-                onMark={handleMark}
+                onMark={markItem}
+                onUnmark={unmarkItem}
                 disabled={marking !== null}
               />
             ))}