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

2026-06-14 22:29:50 +03:00
parent b34a009eb0
commit 610cbbec0f
4 changed files with 181 additions and 88 deletions
--- a/components/BingoCard.tsx
+++ b/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}
              />
            ))}
--- a/components/BingoCell.tsx
+++ b/components/BingoCell.tsx
@@ -8,6 +8,7 @@ type Item = {
  text: string;
  emoji: string;
  soundCategory: string;
+  soundUrl?: string | null;
  gridIndex: number;
 };

@@ -19,6 +20,7 @@ type Props = {
  markedBy: string[];
  gridSize: number;
  onMark: (itemId: string) => void;
+  onUnmark?: (itemId: string) => void;
  disabled?: boolean;
  isFreeSpace?: boolean;
 };
@@ -36,7 +38,7 @@ function getSoundEmoji(cat: string) {
  }
 }

-export function BingoCell({ item, index, marked, markCount, markedBy, gridSize, onMark, disabled, isFreeSpace }: Props) {
+export function BingoCell({ item, index, marked, markCount, markedBy, gridSize, onMark, onUnmark, disabled, isFreeSpace }: Props) {
  const [shake, setShake] = useState(false);
  const [glow, setGlow] = useState(false);

@@ -66,14 +68,17 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,

  return (
    <button
-      onClick={() => !disabled && !marked && onMark(item.id)}
-      disabled={disabled || marked}
+      onClick={() => {
+        if (disabled) return;
+        if (marked) { onUnmark?.(item.id); return; }
+        onMark(item.id);
+      }}
      className={cn(
        "relative flex flex-col items-center justify-center rounded-lg border transition-all duration-200 overflow-hidden",
        "select-none",
        gridSize > 5 ? "p-1 gap-0" : "p-2 gap-1",
        marked
-          ? "border-cyan-500/60 bg-cyan-900/40 cursor-default"
+          ? "border-cyan-500/60 bg-cyan-900/40 hover:bg-cyan-800/40 cursor-pointer"
          : "border-slate-700/40 bg-slate-800/40 hover:bg-slate-700/40 hover:border-cyan-600/40 hover:shadow-lg hover:shadow-cyan-900/20 cursor-pointer active:scale-95",
        shake && "animate-shake",
        glow && "animate-glow-pulse",
@@ -94,12 +99,15 @@ export function BingoCell({ item, index, marked, markCount, markedBy, gridSize,
      </span>
      {marked && markCount > 0 && (
        <span className={cn(
-          "absolute top-0.5 right-1 font-bold text-cyan-400",
+          "absolute top-0.5 right-1 font-bold text-amber-400",
          gridSize > 5 ? "text-[9px]" : "text-xs"
        )}>
          {markCount}
        </span>
      )}
+      {marked && (
+        <span className="absolute top-0.5 left-1 text-[8px] text-cyan-500/60">✕</span>
+      )}
      {!marked && !isFree && (
        <span className="text-[9px] text-slate-600 mt-0.5">{getSoundEmoji(item.soundCategory)}</span>
      )}
--- a/components/ItemEditor.tsx
+++ b/components/ItemEditor.tsx
@@ -67,12 +67,14 @@ function EmojiPicker({ value, onChange }: { value: string; onChange: (v: string)
 export function ItemEditor({ campaign }: { campaign: Campaign }) {
  const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(true);
+  const [editItemId, setEditItemId] = useState<string | null>(null);
  const [editText, setEditText] = useState("");
  const [editEmoji, setEditEmoji] = useState("💀");
  const [editSound, setEditSound] = useState("horn");
  const [editSoundUrl, setEditSoundUrl] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLDivElement>(null);

  const fetchItems = async () => {
    const res = await fetch(`/api/campaigns/${campaign.id}/items`);
@@ -101,6 +103,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
  };

  const deleteItem = async (itemId: string) => {
+    if (editItemId === itemId) resetForm();
    await fetch(`/api/campaigns/${campaign.id}/items?itemId=${itemId}`, { method: "DELETE" });
    await fetchItems();
  };
@@ -124,11 +127,45 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
        gridIndex: maxIdx + 1,
      }),
    });
+    resetForm();
+    await fetchItems();
+  };
+
+  const submitItem = async () => {
+    if (!editText) return;
+    if (editItemId) {
+      const existing = items.find(it => it.id === editItemId);
+      if (existing) {
+        await updateItem({
+          ...existing,
+          text: editText,
+          emoji: editEmoji,
+          soundCategory: editSound,
+          soundUrl: editSoundUrl,
+        });
+      }
+      resetForm();
+    } else {
+      await addItem();
+    }
+  };
+
+  const editItem = (item: Item) => {
+    setEditItemId(item.id);
+    setEditText(item.text);
+    setEditEmoji(item.emoji);
+    setEditSound(item.soundCategory);
+    setEditSoundUrl(item.soundUrl || null);
+    formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const resetForm = () => {
+    setEditItemId(null);
    setEditText("");
    setEditEmoji("💀");
    setEditSound("horn");
    setEditSoundUrl(null);
-    await fetchItems();
+    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const uploadSound = async (file: File) => {
@@ -141,6 +178,10 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
    setUploading(false);
  };

+  const playSoundOnce = (url: string) => {
+    try { const a = new Audio(url); a.preload = "auto"; a.volume = 0.4; a.play().catch(() => {}); } catch {}
+  };
+
  const totalCells = campaign.gridSize * campaign.gridSize;

  if (loading) {
@@ -149,9 +190,17 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {

  return (
    <div className="space-y-4">
-      <Card className="border-cyan-800/30">
+      <div ref={formRef}>
+        <Card className={editItemId ? "border-amber-500/40" : "border-cyan-800/30"}>
          <CardContent className="p-4 space-y-3">
-          <h3 className="text-xs font-mono text-cyan-400 uppercase">+ Add New Cell</h3>
+            <div className="flex items-center justify-between">
+              <h3 className="text-xs font-mono text-cyan-400 uppercase">{editItemId ? "✏ Edit Cell" : "+ Add New Cell"}</h3>
+              {editItemId && (
+                <button onClick={resetForm} className="text-[10px] font-mono text-slate-500 hover:text-slate-300 cursor-pointer">
+                  Cancel
+                </button>
+              )}
+            </div>
            <div className="flex flex-wrap gap-2 items-end">
              <div className="flex-1 min-w-[150px]">
                <label className="text-[9px] font-mono text-slate-600 uppercase">Text</label>
@@ -207,7 +256,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                    {editSoundUrl && (
                      <button
                        type="button"
-                      onClick={() => { const a = new Audio(editSoundUrl); a.volume = 0.4; a.play(); }}
+                        onClick={() => playSoundOnce(editSoundUrl)}
                        className="text-sm cursor-pointer hover:text-cyan-300"
                      >
                        ▶
@@ -216,12 +265,13 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                  </div>
                </div>
              )}
-            <Button size="sm" onClick={addItem} disabled={!editText} className="font-mono text-xs">
-              ADD
+              <Button size="sm" onClick={submitItem} disabled={!editText} className="font-mono text-xs">
+                {editItemId ? "SAVE" : "ADD"}
              </Button>
            </div>
          </CardContent>
        </Card>
+      </div>

      <div
        className="grid gap-1"
@@ -236,17 +286,26 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
              </div>
            );
          }
+          const isEditing = editItemId === item.id;
          return (
-            <Card key={item.id} className="border-slate-700/30 aspect-square group">
+            <Card key={item.id} className={"border-slate-700/30 aspect-square group" + (isEditing ? " ring-2 ring-amber-500/50" : "")}>
              <CardContent className="p-1.5 h-full flex flex-col items-center justify-center gap-0.5 relative">
                <span className="text-lg">{item.emoji}</span>
-                <span className="text-[8px] text-center font-mono text-slate-300 leading-tight line-clamp-2">
+                <span className="text-[10px] text-center font-mono text-slate-300 leading-tight line-clamp-3 px-0.5">
                  {item.text}
                </span>
-                <Badge variant="outline" className="text-[6px] px-1 py-0 absolute top-0.5 right-0.5">
+                <Badge variant="outline" className="text-[8px] px-1 py-0 absolute top-0.5 right-0.5">
                  {item.soundUrl ? "🔊" : item.soundCategory}
                </Badge>
                <div className="absolute bottom-0.5 left-0.5 right-0.5 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="h-4 text-[8px] px-1 py-0 flex-1"
+                    onClick={() => editItem(item)}
+                  >
+                    ✏
+                  </Button>
                  <Button
                    variant="destructive"
                    size="sm"
@@ -256,6 +315,15 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                    ✕
                  </Button>
                </div>
+                {item.soundUrl && (
+                  <button
+                    type="button"
+                    onClick={e => { e.stopPropagation(); playSoundOnce(item.soundUrl!); }}
+                    className="absolute bottom-0.5 left-0.5 text-[10px] text-cyan-500/60 hover:text-cyan-300 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    🔊
+                  </button>
+                )}
              </CardContent>
            </Card>
          );
@@ -301,3 +369,5 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
    </div>
  );
 }
+
+
--- a/lib/sounds.ts
+++ b/lib/sounds.ts
@@ -110,6 +110,7 @@ export function playChaosRiser() {
 export function playSoundUrl(url: string) {
  try {
    const audio = new Audio(url);
+    audio.preload = "auto";
    audio.volume = 0.4;
    audio.play().catch(() => {});
  } catch {}