soroush.asadi
03dfbe1e67
- MatchIntroOverlay: UNO-style pre-game reveal — the 4 seats animate into the table (with "?" placeholders until each player's data streams in for live matches), a 3-2-1-GO countdown, then the table shows. Wired via game-store matchIntroPending/consumeIntro, rendered online-only in GameScreen. - Fix: intro.found / intro.getReady / intro.go existed only in the Persian dict; added the English strings (would have shown raw keys to EN users). - Checkpoint of the in-progress UI/social batch (CoinsPill, shop titles section, friend-request rate limit, etc.) — all green. Verified: tsc + next build + scripts/sim.ts + dotnet build server/Hokm.slnx all pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { Bell, Crown, Gift, Store } from "lucide-react";
|
|
import { useSessionStore } from "@/lib/session-store";
|
|
import { useUIStore } from "@/lib/ui-store";
|
|
import { useNotifStore } from "@/lib/notification-store";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { MAX_LEVEL, xpNeededForLevel } from "@/lib/online/gamification";
|
|
import { Avatar } from "./Avatar";
|
|
import { CoinsPill } from "./CoinsPill";
|
|
|
|
export function TopBar() {
|
|
const profile = useSessionStore((s) => s.profile);
|
|
const go = useUIStore((s) => s.go);
|
|
const openDaily = useUIStore((s) => s.openDaily);
|
|
const unread = useNotifStore((s) => s.unread);
|
|
const { t } = useI18n();
|
|
if (!profile) return null;
|
|
|
|
const maxed = profile.level >= MAX_LEVEL;
|
|
const xpNeed = xpNeededForLevel(profile.level);
|
|
const xpPct = maxed ? 100 : Math.min(100, Math.max(0, Math.round((profile.xp / xpNeed) * 100)));
|
|
|
|
return (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<button
|
|
onClick={() => go("profile")}
|
|
className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
|
|
>
|
|
<span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
|
|
<Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
|
|
</span>
|
|
<span className="text-start leading-tight min-w-[96px]">
|
|
<span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
|
|
{profile.displayName}
|
|
{profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
|
|
</span>
|
|
<span className="flex items-center justify-between text-[10px] text-gold-400/80 mt-0.5">
|
|
<span>{t("common.level")} {profile.level}</span>
|
|
<span className="text-cream/40 tabular-nums">{maxed ? "MAX" : `${xpPct}%`}</span>
|
|
</span>
|
|
<span className="mt-0.5 block h-1 w-full rounded-full bg-navy-900 overflow-hidden">
|
|
<span
|
|
className="block h-full rounded-full bg-gradient-to-r from-gold-500 to-gold-300"
|
|
style={{ width: `${xpPct}%` }}
|
|
/>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => go("notifications")}
|
|
className="glass rounded-full p-2 hover:bg-navy-800/80 transition relative"
|
|
title={t("notif.title")}
|
|
>
|
|
<Bell className="size-4 text-gold-400" />
|
|
{unread > 0 && (
|
|
<span className="absolute -top-0.5 ltr:-right-0.5 rtl:-left-0.5 min-w-4 h-4 px-1 rounded-full bg-rose-500 text-[9px] font-bold text-white flex items-center justify-center">
|
|
{unread > 9 ? "9+" : unread}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={openDaily}
|
|
className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
|
|
title={t("daily.title")}
|
|
>
|
|
<Gift className="size-4 text-gold-400" />
|
|
</button>
|
|
<button
|
|
onClick={() => go("shop")}
|
|
className="glass rounded-full p-2 hover:bg-navy-800/80 transition"
|
|
title={t("menu.shop")}
|
|
>
|
|
<Store className="size-4 text-gold-400" />
|
|
</button>
|
|
<CoinsPill />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|