Split card design into front+back, add sound effects & background music

Card design: - Separate cardFront + cardBack (each own/equip independently) - Fronts: classic (free), ivory/rosegold (buy), parchment/mint (earned) - Backs: classic (free), sapphire/emerald (buy), ruby/royal (earned) - PlayingCard `front` prop; table applies front to all faces, back to opponents - Profile has front + back pickers; shop has both sections Audio: - Web Audio synth engine (no asset files): SFX for card/deal/trump/trick, win/lose, message, notify, award, levelup, purchase, kot + ambient music - Toggles in profile (Audio) + mute button in game HUD; prefs persisted - Wired across game-store, rewards, daily, shop, chat Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 11:49:19 +03:30
parent db4eade619
commit ae239f4c51
18 changed files with 579 additions and 72 deletions
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from "react";
 import { useOnlineStore } from "@/lib/online-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
+import { sound } from "@/lib/sound";
 import { avatarEmoji } from "@/lib/online/types";
 import { cn } from "@/lib/cn";

@@ -17,10 +18,16 @@ export function ChatScreen() {
  const go = useUIStore((s) => s.go);
  const [text, setText] = useState("");
  const endRef = useRef<HTMLDivElement>(null);
+  const prevLen = useRef(0);
  const Chevron = locale === "fa" ? ChevronRight : ChevronLeft;

  useEffect(() => {
    endRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (messages.length > prevLen.current) {
+      const last = messages[messages.length - 1];
+      if (last && !last.fromMe) sound.play("message");
+    }
+    prevLen.current = messages.length;
  }, [messages]);

  if (!friend) {
@@ -1,18 +1,22 @@
 "use client";

-import { Check, Coins, Crown, Pencil, Upload } from "lucide-react";
+import { Check, Coins, Crown, Music, Pencil, Upload, Volume2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { RankBadge } from "@/components/online/RankBadge";
 import { XpBar } from "@/components/online/XpBar";
 import { Avatar } from "@/components/online/Avatar";
 import { useSessionStore } from "@/lib/session-store";
+import { useSoundStore } from "@/lib/sound-store";
 import { useI18n } from "@/lib/i18n";
 import {
  ACHIEVEMENTS,
-  CARD_STYLES,
+  CARD_BACKS,
+  CARD_FRONTS,
  TITLES,
  achievementProgress,
+  ownedCardBackIds,
+  ownedCardFrontIds,
 } from "@/lib/online/gamification";
 import { AVATARS } from "@/lib/online/types";
 import { cn } from "@/lib/cn";
@@ -31,6 +35,8 @@ export function ProfileScreen() {
  const winrate = s.games > 0 ? Math.round((s.wins / s.games) * 100) : 0;
  const titleDef = TITLES.find((x) => x.id === profile.title);
  const titleName = titleDef ? (locale === "fa" ? titleDef.nameFa : titleDef.nameEn) : null;
+  const ownedFronts = new Set(ownedCardFrontIds(profile));
+  const ownedBacks = new Set(ownedCardBackIds(profile));

  const saveName = async () => {
    if (name.trim()) await updateProfile({ displayName: name.trim() });
@@ -163,17 +169,44 @@ export function ProfileScreen() {
        </div>
      </div>

-      {/* card style picker */}
+      {/* card front picker */}
      <div className="glass rounded-2xl p-4 mt-4">
-        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardStyleLabel")}</h3>
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
        <div className="flex flex-wrap gap-2">
-          {CARD_STYLES.filter((c) => profile.ownedCardStyles.includes(c.id)).map((c) => (
+          {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
            <button
              key={c.id}
-              onClick={() => updateProfile({ cardStyle: c.id })}
+              onClick={() => updateProfile({ cardFront: c.id })}
              className={cn(
                "rounded-xl p-1.5 flex items-center gap-2 transition",
-                profile.cardStyle === c.id
+                profile.cardFront === c.id
+                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
+                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
+              )}
+            >
+              <span
+                className="w-7 h-10 rounded-md border flex items-center justify-center text-xs text-slate-900"
+                style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
+              >
+                ♠
+              </span>
+              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* card back picker */}
+      <div className="glass rounded-2xl p-4 mt-4">
+        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
+        <div className="flex flex-wrap gap-2">
+          {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
+            <button
+              key={c.id}
+              onClick={() => updateProfile({ cardBack: c.id })}
+              className={cn(
+                "rounded-xl p-1.5 flex items-center gap-2 transition",
+                profile.cardBack === c.id
                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
              )}
@@ -185,14 +218,15 @@ export function ProfileScreen() {
                  background: `repeating-linear-gradient(45deg, ${c.accent}55 0 4px, transparent 4px 8px), ${c.c2}`,
                }}
              />
-              <span className="text-xs text-cream/80 pe-1">
-                {locale === "fa" ? c.nameFa : c.nameEn}
-              </span>
+              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
            </button>
          ))}
        </div>
      </div>

+      {/* audio settings */}
+      <SoundSettings />
+
      {/* stats */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>
@@ -259,3 +293,44 @@ function Stat({ label, value }: { label: string; value: string | number }) {
    </div>
  );
 }
+
+function SoundSettings() {
+  const { t } = useI18n();
+  const { sfx, music, toggleSfx, toggleMusic } = useSoundStore();
+  return (
+    <div className="glass rounded-2xl p-4 mt-4">
+      <h3 className="text-sm font-bold text-cream/80 mb-2">{t("settings.audio")}</h3>
+      <ToggleRow icon={<Volume2 className="size-4 text-gold-400" />} label={t("settings.sound")} on={sfx} onClick={toggleSfx} />
+      <ToggleRow icon={<Music className="size-4 text-gold-400" />} label={t("settings.music")} on={music} onClick={toggleMusic} />
+    </div>
+  );
+}
+
+function ToggleRow({
+  icon,
+  label,
+  on,
+  onClick,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  on: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button onClick={onClick} className="w-full flex items-center justify-between py-2">
+      <span className="flex items-center gap-2 text-sm text-cream/85">
+        {icon}
+        {label}
+      </span>
+      <span className={cn("relative w-11 h-6 rounded-full transition", on ? "bg-gold-500" : "bg-navy-700")}>
+        <span
+          className={cn(
+            "absolute top-0.5 size-5 rounded-full bg-white transition-all",
+            on ? "ltr:right-0.5 rtl:left-0.5" : "ltr:left-0.5 rtl:right-0.5"
+          )}
+        />
+      </span>
+    </button>
+  );
+}
@@ -7,6 +7,7 @@ import { Sticker } from "@/components/online/Sticker";
 import { useSessionStore } from "@/lib/session-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
+import { sound } from "@/lib/sound";
 import { ShopItem } from "@/lib/online/types";
 import { cn } from "@/lib/cn";

@@ -23,19 +24,26 @@ export function ShopScreen() {

  if (!profile) return null;

-  const owns = (item: ShopItem) =>
-    item.kind === "avatar"
-      ? profile.ownedAvatars.includes(item.id)
-      : item.kind === "cardstyle"
-      ? profile.ownedCardStyles.includes(item.id)
-      : item.kind === "reactionpack"
-      ? profile.ownedReactionPacks.includes(item.id)
-      : profile.ownedStickerPacks.includes(item.id);
+  const owns = (item: ShopItem) => {
+    switch (item.kind) {
+      case "avatar":
+        return profile.ownedAvatars.includes(item.id);
+      case "cardfront":
+        return profile.ownedCardFronts.includes(item.id);
+      case "cardback":
+        return profile.ownedCardBacks.includes(item.id);
+      case "reactionpack":
+        return profile.ownedReactionPacks.includes(item.id);
+      default:
+        return profile.ownedStickerPacks.includes(item.id);
+    }
+  };

  const buy = async (item: ShopItem) => {
    const res = await getService().buyItem(item.id);
    if (res.ok && res.profile) {
      setProfile(res.profile);
+      sound.play("purchase");
    } else {
      setMsg(locale === "fa" ? res.messageFa : res.messageEn);
      setTimeout(() => setMsg(""), 1800);
@@ -43,7 +51,8 @@ export function ShopScreen() {
  };

  const avatars = items.filter((i) => i.kind === "avatar");
-  const cardstyles = items.filter((i) => i.kind === "cardstyle");
+  const cardfronts = items.filter((i) => i.kind === "cardfront");
+  const cardbacks = items.filter((i) => i.kind === "cardback");
  const reactions = items.filter((i) => i.kind === "reactionpack");
  const stickers = items.filter((i) => i.kind === "stickerpack");

@@ -71,9 +80,30 @@ export function ShopScreen() {
        </div>
      </Section>

-      <Section title={t("shop.cardstyles")}>
+      <Section title={t("shop.cardfronts")}>
        <div className="grid grid-cols-3 gap-3">
-          {cardstyles.map((item) => (
+          {cardfronts.map((item) => (
+            <ItemCard
+              key={item.id}
+              item={item}
+              owned={owns(item)}
+              onBuy={() => buy(item)}
+              preview={
+                <span
+                  className="w-8 h-11 rounded-md border flex items-center justify-center text-slate-900"
+                  style={{ background: `linear-gradient(160deg, #ffffff, ${item.preview})`, borderColor: "rgba(0,0,0,0.18)" }}
+                >
+                  ♠
+                </span>
+              }
+            />
+          ))}
+        </div>
+      </Section>
+
+      <Section title={t("shop.cardbacks")}>
+        <div className="grid grid-cols-3 gap-3">
+          {cardbacks.map((item) => (
            <ItemCard
              key={item.id}
              item={item}