soroushdes/HokmPlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
soroush.asadi
2026-06-04 11:49:19 +03:30
parent db4eade619
commit ae239f4c51
18 changed files with 579 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/screens/ProfileScreen.tsx
+85 -10
View File
@@ -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>
);
}