Music mute everywhere + card-draw SFX

- MusicToggle: global floating button (enable/disable music from any screen; hidden on the table, which has its own audio control in its HUD). Uses sound-store toggleMusic. - Card sounds now use a synthesized card-draw "swish" (filtered noise burst with a downward sweep) for cardPlay (+ soft landing tap) and deal (a flurry), replacing the old beep tones. Verified: tsc + next build pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-07 00:21:27 +03:30
parent 36600fa494
commit ed3e11b64b
3 changed files with 71 additions and 2 deletions
@@ -0,0 +1,38 @@
+"use client";
+
+import { Music } from "lucide-react";
+import { useSoundStore } from "@/lib/sound-store";
+import { useUIStore } from "@/lib/ui-store";
+import { useI18n } from "@/lib/i18n";
+
+/**
+ * Always-available music mute toggle (enable/disable from anywhere). Floats in a
+ * corner on every screen except the game table, which has its own audio control
+ * in its HUD.
+ */
+export function MusicToggle() {
+  const { t } = useI18n();
+  const music = useSoundStore((s) => s.music);
+  const toggleMusic = useSoundStore((s) => s.toggleMusic);
+  const screen = useUIStore((s) => s.screen);
+
+  if (screen === "game") return null;
+
+  return (
+    <button
+      onClick={toggleMusic}
+      title={music ? t("settings.music") : t("settings.music")}
+      aria-label={t("settings.music")}
+      className="fixed z-[55] bottom-[max(0.75rem,env(safe-area-inset-bottom))] ltr:left-3 rtl:right-3 glass rounded-full min-h-11 min-w-11 grid place-items-center hover:bg-navy-800/80 transition"
+    >
+      {music ? (
+        <Music className="size-4 text-gold-400" />
+      ) : (
+        <span className="relative grid place-items-center">
+          <Music className="size-4 text-cream/40" />
+          <span className="absolute block h-0.5 w-5 rotate-45 rounded bg-rose-400" />
+        </span>
+      )}
+    </button>
+  );
+}