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/GameTable.tsx
+35 -7
View File
@@ -1,9 +1,10 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { Crown, LogOut, SmilePlus, WifiOff } from "lucide-react";
import { Crown, LogOut, SmilePlus, Volume2, VolumeX, WifiOff } from "lucide-react";
import { useEffect, useState } from "react";
import { TURN_MS, useGameStore } from "@/lib/game-store";
import { useSoundStore } from "@/lib/sound-store";
import { legalMoves } from "@/lib/hokm/engine";
import { sortHand } from "@/lib/hokm/deck";
import {
@@ -17,7 +18,7 @@ import {
} from "@/lib/hokm/types";
import { useI18n } from "@/lib/i18n";
import { useSessionStore } from "@/lib/session-store";
import { cardStyleById, ownedReactions, ownedStickers } from "@/lib/online/gamification";
import { cardBackById, cardFrontById, ownedReactions, ownedStickers } from "@/lib/online/gamification";
import { getService } from "@/lib/online/service";
import { cn } from "@/lib/cn";
import { PlayingCard } from "./PlayingCard";
@@ -34,12 +35,26 @@ function useCountdown(deadline: number | null) {
return Math.max(0, Math.ceil((deadline - now) / 1000));
}
function useCardSkins() {
const frontId = useSessionStore((s) => s.profile?.cardFront ?? "classic");
const backId = useSessionStore((s) => s.profile?.cardBack ?? "classic");
const f = cardFrontById(frontId);
const b = cardBackById(backId);
return {
front: { bg1: f.bg1, bg2: f.bg2, border: f.border },
back: { c1: b.c1, c2: b.c2, accent: b.accent },
};
}
export function GameTable({ onExit }: { onExit?: () => void } = {}) {
const game = useGameStore((s) => s.game);
const reset = useGameStore((s) => s.reset);
const mode = useGameStore((s) => s.mode);
const { t } = useI18n();
const sfx = useSoundStore((s) => s.sfx);
const toggleSfx = useSoundStore((s) => s.toggleSfx);
const exit = onExit ?? reset;
const { phase, players, hakem, trump, turn, currentTrick } = game;
@@ -56,6 +71,17 @@ export function GameTable({ onExit }: { onExit?: () => void } = {}) {
<Scoreboard />
<div className="flex items-center gap-2">
{trump && <TrumpBadge trump={trump} />}
<button
onClick={toggleSfx}
className="glass rounded-full p-2.5 hover:bg-navy-800 transition"
title={t("settings.sound")}
>
{sfx ? (
<Volume2 className="size-4 text-gold-400" />
) : (
<VolumeX className="size-4 text-cream/60" />
)}
</button>
<button
onClick={exit}
className="glass rounded-full p-2.5 hover:bg-navy-800 transition"
@@ -239,9 +265,7 @@ function OpponentHand({
horizontal?: boolean;
}) {
const count = useGameStore((s) => s.game.players[seat].hand.length);
const styleId = useSessionStore((s) => s.profile?.cardStyle ?? "classic");
const cs = cardStyleById(styleId);
const back = { c1: cs.c1, c2: cs.c2, accent: cs.accent };
const { back } = useCardSkins();
const cards = Array.from({ length: count });
return (
<div
@@ -287,6 +311,7 @@ function TrickArea({
winner: Seat | null;
phase: string;
}) {
const { front } = useCardSkins();
return (
<div className="absolute inset-0 flex items-center justify-center">
<div className="relative size-1 ">
@@ -315,7 +340,7 @@ function TrickArea({
: undefined,
}}
>
<PlayingCard card={pc.card} size="md" />
<PlayingCard card={pc.card} size="md" front={front} />
</motion.div>
);
})}
@@ -332,6 +357,7 @@ function PlayerHand({ legalIds }: { legalIds: Set<string> }) {
const phase = useGameStore((s) => s.game.phase);
const turn = useGameStore((s) => s.game.turn);
const playHuman = useGameStore((s) => s.playHuman);
const { front } = useCardSkins();
const sorted = sortHand(hand);
const myTurn = phase === "playing" && turn === 0;
@@ -376,6 +402,7 @@ function PlayerHand({ legalIds }: { legalIds: Set<string> }) {
card={card}
size="lg"
dimmed={dimmed}
front={front}
className={cn(playable && "ring-2 ring-gold-400/70")}
/>
</motion.button>
@@ -627,6 +654,7 @@ function Backdrop({ children }: { children: React.ReactNode }) {
function HakemOverlay() {
const game = useGameStore((s) => s.game);
const { t } = useI18n();
const { front } = useCardSkins();
const hakemName = game.hakem != null ? game.players[game.hakem].name : "";
return (
<Backdrop>
@@ -645,7 +673,7 @@ function HakemOverlay() {
animate={{ opacity: 1, y: 0, rotateY: 0 }}
transition={{ delay: i * 0.12 }}
>
<PlayingCard card={pc.card} size="sm" />
<PlayingCard card={pc.card} size="sm" front={front} />
</motion.div>
))}
</div>
src/components/HomeScreen.tsx
+13 -6
View File
@@ -14,8 +14,9 @@ import {
} from "lucide-react";
import { useGameStore } from "@/lib/game-store";
import { useSessionStore } from "@/lib/session-store";
import { useUIStore } from "@/lib/ui-store";
import { useUIStore, type Screen } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
import { sound } from "@/lib/sound";
import { SUIT_SYMBOL } from "@/lib/hokm/types";
import { TopBar } from "./online/TopBar";
@@ -28,13 +29,19 @@ export function HomeScreen() {
const isAuthed = useSessionStore((s) => s.isAuthed);
const signOut = useSessionStore((s) => s.signOut);
const nav = (screen: Screen) => {
sound.init();
sound.play("click");
go(screen);
};
const playVsComputer = () => {
const you = profile?.displayName || t("seat.you");
newMatch({ names: [you, "آرش", "کیان", "نیلوفر"], targetScore: 7 });
goGame("home");
};
const playOnline = () => (isAuthed ? go("online") : go("auth"));
const playOnline = () => nav(isAuthed ? "online" : "auth");
return (
<main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
@@ -78,10 +85,10 @@ export function HomeScreen() {
{/* tiles */}
<div className="grid grid-cols-4 gap-2.5 mt-4">
<Tile icon={<User className="size-5" />} label={t("menu.profile")} onClick={() => go("profile")} />
<Tile icon={<Users className="size-5" />} label={t("menu.friends")} onClick={() => go(isAuthed ? "friends" : "auth")} />
<Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} onClick={() => go("leaderboard")} />
<Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} onClick={() => go("shop")} />
<Tile icon={<User className="size-5" />} label={t("menu.profile")} onClick={() => nav("profile")} />
<Tile icon={<Users className="size-5" />} label={t("menu.friends")} onClick={() => nav(isAuthed ? "friends" : "auth")} />
<Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} onClick={() => nav("leaderboard")} />
<Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} onClick={() => nav("shop")} />
</div>
<div className="flex-1" />
src/components/PlayingCard.tsx
+15 -1
View File
@@ -17,6 +17,12 @@ interface CardBack {
accent: string;
}
interface CardFront {
bg1: string;
bg2: string;
border: string;
}
interface Props {
card?: Card;
faceDown?: boolean;
@@ -24,6 +30,7 @@ interface Props {
className?: string;
dimmed?: boolean;
back?: CardBack;
front?: CardFront;
}
export function PlayingCard({
@@ -33,6 +40,7 @@ export function PlayingCard({
className,
dimmed,
back,
front,
}: Props) {
const s = SIZES[size];
@@ -76,7 +84,13 @@ export function PlayingCard({
dimmed && "opacity-45",
className
)}
style={{ width: s.w, height: s.h }}
style={{
width: s.w,
height: s.h,
...(front
? { background: `linear-gradient(160deg, ${front.bg1}, ${front.bg2})`, borderColor: front.border }
: {}),
}}
>
<div className={cn("absolute top-1 left-1.5 leading-none font-bold", color, s.rank)}>
<div>{rankLabel(card.rank)}</div>
src/components/online/DailyRewardModal.tsx
+2
View File
@@ -8,6 +8,7 @@ import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
import { DAILY_REWARDS } from "@/lib/online/gamification";
import { getService } from "@/lib/online/service";
import { sound } from "@/lib/sound";
import { DailyRewardState } from "@/lib/online/types";
import { cn } from "@/lib/cn";
@@ -29,6 +30,7 @@ export function DailyRewardModal() {
const claim = async () => {
const res = await getService().claimDaily();
setClaimed(res.reward);
sound.play("award");
await refreshProfile();
setState(await getService().getDailyState());
};
src/components/online/PostMatchRewardsModal.tsx
+10
View File
@@ -2,7 +2,9 @@
import { motion } from "framer-motion";
import { Coins, Sparkles, Star, TrendingDown, TrendingUp } from "lucide-react";
import { useEffect } from "react";
import { useI18n } from "@/lib/i18n";
import { sound } from "@/lib/sound";
import { RewardResult } from "@/lib/online/types";
export function PostMatchRewardsModal({
@@ -17,6 +19,14 @@ export function PostMatchRewardsModal({
const { t, locale } = useI18n();
const sign = (n: number) => (n > 0 ? `+${n}` : `${n}`);
useEffect(() => {
const id = setTimeout(() => {
if (reward.leveledUp) sound.play("levelUp");
else if (reward.newAchievements.length || reward.newTitles.length) sound.play("award");
}, 500);
return () => clearTimeout(id);
}, [reward]);
return (
<motion.div
initial={{ opacity: 0 }}
src/components/screens/ChatScreen.tsx
+7
View File
@@ -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) {
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>
);
}
src/components/screens/ShopScreen.tsx
+41 -11
View File
@@ -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}