UNO refactor (stage 2): Profile → tabbed 2-panel layout
Restructure ProfileScreen UNO-style: tabs (نمایه / مجموعه / تنظیمات). - Basic: player card (avatar/level/name/rank/coins/XP/VIP) BESIDE a stats grid + «زندگیِ حکم» ribbon + achievements summary (landscape 2-column). - Collection: avatar / title / card-front / card-back pickers in panels. - Settings: social + audio + sign-out. All glass cards → .panel; every handler/feature preserved. New profile.tab*/ lifeRibbon i18n. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -41,6 +41,7 @@ export function ProfileScreen() {
|
|||||||
const fileRef = useRef<HTMLInputElement>(null);
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
const [editing, setEditing] = useState(false);
|
const [editing, setEditing] = useState(false);
|
||||||
const [name, setName] = useState(profile?.displayName ?? "");
|
const [name, setName] = useState(profile?.displayName ?? "");
|
||||||
|
const [tab, setTab] = useState<"basic" | "collection" | "settings">("basic");
|
||||||
|
|
||||||
if (!profile) return null;
|
if (!profile) return null;
|
||||||
const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
|
const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
|
||||||
@@ -67,300 +68,322 @@ export function ProfileScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ScreenShell>
|
<ScreenShell>
|
||||||
{/* showXp=false: the identity card below already has a detailed XP bar. */}
|
|
||||||
<ScreenHeader title={t("profile.title")} showXp={false} />
|
<ScreenHeader title={t("profile.title")} showXp={false} />
|
||||||
|
|
||||||
{/* identity */}
|
{/* tabs */}
|
||||||
<motion.div
|
<div className="flex gap-2 mb-4">
|
||||||
initial={{ opacity: 0, y: 16 }}
|
{(
|
||||||
animate={{ opacity: 1, y: 0 }}
|
[
|
||||||
transition={{ type: "spring", stiffness: 200, damping: 22 }}
|
["basic", t("profile.tabBasic")],
|
||||||
className="glass rounded-3xl p-5 text-center relative overflow-hidden"
|
["collection", t("profile.tabCollection")],
|
||||||
>
|
["settings", t("profile.tabSettings")],
|
||||||
{/* soft gold glow behind avatar */}
|
] as const
|
||||||
<div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />
|
).map(([key, label]) => (
|
||||||
|
|
||||||
<div className="relative size-20 mx-auto">
|
|
||||||
<motion.div
|
|
||||||
initial={{ scale: 0.8, rotate: -6 }}
|
|
||||||
animate={{ scale: 1, rotate: 0 }}
|
|
||||||
transition={{ type: "spring", stiffness: 260, damping: 18, delay: 0.1 }}
|
|
||||||
className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden"
|
|
||||||
>
|
|
||||||
<Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
|
|
||||||
</motion.div>
|
|
||||||
{/* level badge */}
|
|
||||||
<motion.span
|
|
||||||
initial={{ scale: 0 }}
|
|
||||||
animate={{ scale: 1 }}
|
|
||||||
transition={{ type: "spring", stiffness: 320, delay: 0.25 }}
|
|
||||||
className="absolute -top-2 ltr:-left-2 rtl:-right-2 inline-flex items-center gap-0.5 rounded-full btn-gold px-2 py-0.5 text-[10px] font-black shadow-lg"
|
|
||||||
>
|
|
||||||
<Star className="size-2.5" fill="currentColor" />
|
|
||||||
{profile.level}
|
|
||||||
</motion.span>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
|
key={key}
|
||||||
|
onClick={() => setTab(key)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute -bottom-1 ltr:-right-1 rtl:-left-1 rounded-full p-1.5",
|
"rounded-2xl px-5 py-2 text-sm font-bold transition",
|
||||||
canUpload ? "btn-gold" : "bg-navy-900 gold-border text-cream/50 cursor-not-allowed"
|
tab === key ? "btn-gold" : "panel text-cream/70 hover:text-cream"
|
||||||
)}
|
)}
|
||||||
title={canUpload ? t("profile.upload") : t("profile.uploadLocked")}
|
|
||||||
>
|
>
|
||||||
{canUpload ? <Upload className="size-3.5" /> : <Lock className="size-3.5" />}
|
{label}
|
||||||
</button>
|
</button>
|
||||||
<input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{titleName && (
|
{/* ===== Basic: player card + stats/achievements ===== */}
|
||||||
<div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
|
{tab === "basic" && (
|
||||||
)}
|
<div className="grid gap-4 items-start landscape:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
|
||||||
|
{/* player card */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 16 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200, damping: 22 }}
|
||||||
|
className="panel rounded-3xl p-5 text-center relative overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />
|
||||||
|
|
||||||
{editing ? (
|
<div className="relative size-20 mx-auto">
|
||||||
<div className="mt-3 flex items-center justify-center gap-2">
|
<motion.div
|
||||||
<input
|
initial={{ scale: 0.8, rotate: -6 }}
|
||||||
value={name}
|
animate={{ scale: 1, rotate: 0 }}
|
||||||
onChange={(e) => setName(e.target.value)}
|
transition={{ type: "spring", stiffness: 260, damping: 18, delay: 0.1 }}
|
||||||
className="rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-center text-cream outline-none focus:ring-2 focus:ring-gold-500/40"
|
className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden"
|
||||||
/>
|
>
|
||||||
<button onClick={saveName} className="btn-gold rounded-lg p-2">
|
<Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
|
||||||
<Check className="size-4" />
|
</motion.div>
|
||||||
</button>
|
<motion.span
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 320, delay: 0.25 }}
|
||||||
|
className="absolute -top-2 ltr:-left-2 rtl:-right-2 inline-flex items-center gap-0.5 rounded-full btn-gold px-2 py-0.5 text-[10px] font-black shadow-lg"
|
||||||
|
>
|
||||||
|
<Star className="size-2.5" fill="currentColor" />
|
||||||
|
{profile.level}
|
||||||
|
</motion.span>
|
||||||
|
<button
|
||||||
|
onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
|
||||||
|
className={cn(
|
||||||
|
"absolute -bottom-1 ltr:-right-1 rtl:-left-1 rounded-full p-1.5",
|
||||||
|
canUpload ? "btn-gold" : "bg-navy-900 gold-border text-cream/50 cursor-not-allowed"
|
||||||
|
)}
|
||||||
|
title={canUpload ? t("profile.upload") : t("profile.uploadLocked")}
|
||||||
|
>
|
||||||
|
{canUpload ? <Upload className="size-3.5" /> : <Lock className="size-3.5" />}
|
||||||
|
</button>
|
||||||
|
<input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{titleName && <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>}
|
||||||
|
|
||||||
|
{editing ? (
|
||||||
|
<div className="mt-3 flex items-center justify-center gap-2">
|
||||||
|
<input
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-center text-cream outline-none focus:ring-2 focus:ring-gold-500/40"
|
||||||
|
/>
|
||||||
|
<button onClick={saveName} className="btn-gold rounded-lg p-2">
|
||||||
|
<Check className="size-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setName(profile.displayName);
|
||||||
|
setEditing(true);
|
||||||
|
}}
|
||||||
|
className="mt-3 inline-flex items-center gap-2 text-xl font-black text-cream hover:text-gold-300 transition"
|
||||||
|
>
|
||||||
|
{profile.displayName}
|
||||||
|
<Pencil className="size-3.5 text-cream/40" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-2 flex items-center justify-center gap-2">
|
||||||
|
<RankBadge rating={profile.rating} showRating />
|
||||||
|
<CoinsPill />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<XpBar level={profile.level} xp={profile.xp} showBadge />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
{profile.plan === "pro" ? (
|
||||||
|
<span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
|
||||||
|
<Crown className="size-3.5 fill-gold-500" />
|
||||||
|
{t("plan.active")}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={upgradePlan}
|
||||||
|
className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
|
||||||
|
>
|
||||||
|
<Crown className="size-3.5" />
|
||||||
|
{t("plan.upgrade")} — {t("plan.proDesc")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* stats + achievements */}
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="ribbon rounded-2xl py-2.5 text-center text-base">{t("profile.lifeRibbon")}</div>
|
||||||
|
|
||||||
|
<div className="panel rounded-2xl p-4">
|
||||||
|
<div className="grid grid-cols-3 gap-2.5">
|
||||||
|
<Stat label={t("profile.games")} value={s.games} />
|
||||||
|
<Stat label={t("profile.wins")} value={s.wins} />
|
||||||
|
<Stat label={t("profile.winrate")} value={`${winrate}%`} />
|
||||||
|
<Stat label={t("profile.kots")} value={s.kotsFor} />
|
||||||
|
<Stat label={t("profile.streak")} value={s.bestWinStreak} />
|
||||||
|
<Stat label={t("common.rating")} value={Math.round(profile.rating)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="panel rounded-2xl p-4">
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-sm font-bold text-cream/80">
|
||||||
|
{t("profile.achievements")}
|
||||||
|
<span className="text-cream/40 font-normal">
|
||||||
|
{" "}
|
||||||
|
({profile.unlocked.length}/{ACHIEVEMENTS.length})
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => go("achievements")}
|
||||||
|
className="text-xs font-bold text-gold-300 flex items-center gap-0.5 hover:text-gold-200"
|
||||||
|
>
|
||||||
|
{t("achv.viewAll")}
|
||||||
|
<ChevronLeft className="size-3.5 rtl:rotate-0 ltr:rotate-180" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{[...ACHIEVEMENTS]
|
||||||
|
.sort((a, b) => {
|
||||||
|
const ua = profile.unlocked.includes(a.id) ? 1 : 0;
|
||||||
|
const ub = profile.unlocked.includes(b.id) ? 1 : 0;
|
||||||
|
return ub - ua;
|
||||||
|
})
|
||||||
|
.slice(0, 6)
|
||||||
|
.map((a, idx) => {
|
||||||
|
const prog = achievementProgress(a, s, profile.rating, profile.level);
|
||||||
|
const unlocked = profile.unlocked.includes(a.id) || prog >= a.goal;
|
||||||
|
const pct = Math.min(100, Math.round((prog / a.goal) * 100));
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={a.id}
|
||||||
|
initial={{ opacity: 0, x: locale === "fa" ? 16 : -16 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: idx * 0.05 }}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl p-3 flex items-center gap-3 border",
|
||||||
|
unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>{a.icon}</span>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-sm font-semibold text-cream">
|
||||||
|
{locale === "fa" ? a.nameFa : a.nameEn}
|
||||||
|
</div>
|
||||||
|
<div className="text-[11px] text-cream/50 truncate">
|
||||||
|
{locale === "fa" ? a.descFa : a.descEn}
|
||||||
|
</div>
|
||||||
|
{!unlocked && a.goal > 1 && (
|
||||||
|
<div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
|
||||||
|
<div className="h-full bg-gold-500/70" style={{ width: `${pct}%` }} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{unlocked && <Check className="size-4 text-gold-400 shrink-0" />}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setName(profile.displayName);
|
|
||||||
setEditing(true);
|
|
||||||
}}
|
|
||||||
className="mt-3 inline-flex items-center gap-2 text-xl font-black text-cream hover:text-gold-300 transition"
|
|
||||||
>
|
|
||||||
{profile.displayName}
|
|
||||||
<Pencil className="size-3.5 text-cream/40" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="mt-2 flex items-center justify-center gap-2">
|
|
||||||
<RankBadge rating={profile.rating} showRating />
|
|
||||||
<CoinsPill />
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="mt-4">
|
{/* ===== Collection: cosmetics pickers ===== */}
|
||||||
<XpBar level={profile.level} xp={profile.xp} showBadge />
|
{tab === "collection" && (
|
||||||
|
<div className="grid gap-4 items-start landscape:grid-cols-2">
|
||||||
|
{/* avatar picker */}
|
||||||
|
<div className="panel rounded-2xl p-4">
|
||||||
|
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
|
||||||
|
<button
|
||||||
|
key={a.id}
|
||||||
|
onClick={() => updateProfile({ avatar: a.id })}
|
||||||
|
className={cn(
|
||||||
|
"size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
|
||||||
|
profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Avatar id={a.id} size={40} />
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* title picker */}
|
||||||
|
<div className="panel rounded-2xl p-4">
|
||||||
|
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
|
||||||
|
<button
|
||||||
|
key={tt.id}
|
||||||
|
onClick={() => updateProfile({ title: tt.id })}
|
||||||
|
className={cn(
|
||||||
|
"rounded-lg px-3 py-1.5 text-sm transition",
|
||||||
|
profile.title === tt.id ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{locale === "fa" ? tt.nameFa : tt.nameEn}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* card front picker */}
|
||||||
|
<div className="panel rounded-2xl p-4">
|
||||||
|
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
|
||||||
|
<button
|
||||||
|
key={c.id}
|
||||||
|
onClick={() => updateProfile({ cardFront: c.id })}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl p-1.5 flex items-center gap-2 transition",
|
||||||
|
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="panel rounded-2xl p-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"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="w-7 h-10 rounded-md border grid place-items-center"
|
||||||
|
style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
|
||||||
|
>
|
||||||
|
<span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
|
||||||
|
{cardBackMotif(c.pattern, c.motif)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="mt-4">
|
{/* ===== Settings ===== */}
|
||||||
{profile.plan === "pro" ? (
|
{tab === "settings" && (
|
||||||
<span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
|
<div className="grid gap-4 items-start landscape:grid-cols-2">
|
||||||
<Crown className="size-3.5 fill-gold-500" />
|
<SocialSettings />
|
||||||
{t("plan.active")}
|
<SoundSettings />
|
||||||
</span>
|
{isAuthed && (
|
||||||
) : (
|
|
||||||
<button
|
<button
|
||||||
onClick={upgradePlan}
|
onClick={() => {
|
||||||
className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
|
signOut();
|
||||||
|
go("home");
|
||||||
|
}}
|
||||||
|
className="w-full panel rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
|
||||||
>
|
>
|
||||||
<Crown className="size-3.5" />
|
<LogOut className="size-4" />
|
||||||
{t("plan.upgrade")} — {t("plan.proDesc")}
|
{t("menu.signOut")}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* avatar picker */}
|
|
||||||
<div className="glass rounded-2xl p-4 mt-4">
|
|
||||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
|
|
||||||
<button
|
|
||||||
key={a.id}
|
|
||||||
onClick={() => updateProfile({ avatar: a.id })}
|
|
||||||
className={cn(
|
|
||||||
"size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
|
|
||||||
profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Avatar id={a.id} size={40} />
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* title picker */}
|
|
||||||
<div className="glass rounded-2xl p-4 mt-4">
|
|
||||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
|
|
||||||
<button
|
|
||||||
key={tt.id}
|
|
||||||
onClick={() => updateProfile({ title: tt.id })}
|
|
||||||
className={cn(
|
|
||||||
"rounded-lg px-3 py-1.5 text-sm transition",
|
|
||||||
profile.title === tt.id
|
|
||||||
? "btn-gold"
|
|
||||||
: "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{locale === "fa" ? tt.nameFa : tt.nameEn}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 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.cardFront")}</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
|
|
||||||
<button
|
|
||||||
key={c.id}
|
|
||||||
onClick={() => updateProfile({ cardFront: c.id })}
|
|
||||||
className={cn(
|
|
||||||
"rounded-xl p-1.5 flex items-center gap-2 transition",
|
|
||||||
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"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="w-7 h-10 rounded-md border grid place-items-center"
|
|
||||||
style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
|
|
||||||
>
|
|
||||||
<span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
|
|
||||||
{cardBackMotif(c.pattern, c.motif)}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* gender + social links */}
|
|
||||||
<SocialSettings />
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
<div className="grid grid-cols-3 gap-2.5">
|
|
||||||
<Stat label={t("profile.games")} value={s.games} />
|
|
||||||
<Stat label={t("profile.wins")} value={s.wins} />
|
|
||||||
<Stat label={t("profile.winrate")} value={`${winrate}%`} />
|
|
||||||
<Stat label={t("profile.kots")} value={s.kotsFor} />
|
|
||||||
<Stat label={t("profile.streak")} value={s.bestWinStreak} />
|
|
||||||
<Stat label={t("common.rating")} value={Math.round(profile.rating)} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* achievements */}
|
|
||||||
<div className="glass rounded-2xl p-4 mt-4 mb-6">
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<h3 className="text-sm font-bold text-cream/80">
|
|
||||||
{t("profile.achievements")}
|
|
||||||
<span className="text-cream/40 font-normal">
|
|
||||||
{" "}
|
|
||||||
({profile.unlocked.length}/{ACHIEVEMENTS.length})
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => go("achievements")}
|
|
||||||
className="text-xs font-bold text-gold-300 flex items-center gap-0.5 hover:text-gold-200"
|
|
||||||
>
|
|
||||||
{t("achv.viewAll")}
|
|
||||||
<ChevronLeft className="size-3.5 rtl:rotate-0 ltr:rotate-180" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{[...ACHIEVEMENTS]
|
|
||||||
.sort((a, b) => {
|
|
||||||
const ua = profile.unlocked.includes(a.id) ? 1 : 0;
|
|
||||||
const ub = profile.unlocked.includes(b.id) ? 1 : 0;
|
|
||||||
return ub - ua;
|
|
||||||
})
|
|
||||||
.slice(0, 6)
|
|
||||||
.map((a, idx) => {
|
|
||||||
const prog = achievementProgress(a, s, profile.rating, profile.level);
|
|
||||||
const unlocked = profile.unlocked.includes(a.id) || prog >= a.goal;
|
|
||||||
const pct = Math.min(100, Math.round((prog / a.goal) * 100));
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
key={a.id}
|
|
||||||
initial={{ opacity: 0, x: locale === "fa" ? 16 : -16 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ delay: idx * 0.05 }}
|
|
||||||
className={cn(
|
|
||||||
"rounded-xl p-3 flex items-center gap-3 border",
|
|
||||||
unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>
|
|
||||||
{a.icon}
|
|
||||||
</span>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="text-sm font-semibold text-cream">
|
|
||||||
{locale === "fa" ? a.nameFa : a.nameEn}
|
|
||||||
</div>
|
|
||||||
<div className="text-[11px] text-cream/50 truncate">
|
|
||||||
{locale === "fa" ? a.descFa : a.descEn}
|
|
||||||
</div>
|
|
||||||
{!unlocked && a.goal > 1 && (
|
|
||||||
<div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
|
|
||||||
<div
|
|
||||||
className="h-full bg-gold-500/70"
|
|
||||||
style={{ width: `${pct}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{unlocked && <Check className="size-4 text-gold-400 shrink-0" />}
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Sign out */}
|
|
||||||
{isAuthed && (
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
signOut();
|
|
||||||
go("home");
|
|
||||||
}}
|
|
||||||
className="mt-6 w-full glass rounded-2xl py-3 flex items-center justify-center gap-2 text-rose-300 hover:bg-navy-800/80 transition"
|
|
||||||
>
|
|
||||||
<LogOut className="size-4" />
|
|
||||||
{t("menu.signOut")}
|
|
||||||
</button>
|
|
||||||
)}
|
)}
|
||||||
</ScreenShell>
|
</ScreenShell>
|
||||||
);
|
);
|
||||||
@@ -408,7 +431,7 @@ function SocialSettings() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass rounded-2xl p-4 mt-4">
|
<div className="panel rounded-2xl p-4">
|
||||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>
|
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>
|
||||||
|
|
||||||
{/* gender */}
|
{/* gender */}
|
||||||
@@ -492,7 +515,7 @@ function SoundSettings() {
|
|||||||
{ id: "playful" as const, label: t("settings.trackPlayful") },
|
{ id: "playful" as const, label: t("settings.trackPlayful") },
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div className="glass rounded-2xl p-4 mt-4">
|
<div className="panel rounded-2xl p-4">
|
||||||
<h3 className="text-sm font-bold text-cream/80 mb-2">{t("settings.audio")}</h3>
|
<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={<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} />
|
<ToggleRow icon={<Music className="size-4 text-gold-400" />} label={t("settings.music")} on={music} onClick={toggleMusic} />
|
||||||
|
|||||||
@@ -155,6 +155,10 @@ const fa: Dict = {
|
|||||||
"friends.message": "پیام",
|
"friends.message": "پیام",
|
||||||
|
|
||||||
"profile.title": "پروفایل",
|
"profile.title": "پروفایل",
|
||||||
|
"profile.tabBasic": "نمایه",
|
||||||
|
"profile.tabCollection": "مجموعه",
|
||||||
|
"profile.tabSettings": "تنظیمات",
|
||||||
|
"profile.lifeRibbon": "زندگیِ حکم",
|
||||||
"profile.stats": "آمار",
|
"profile.stats": "آمار",
|
||||||
"profile.games": "بازیها",
|
"profile.games": "بازیها",
|
||||||
"profile.wins": "بردها",
|
"profile.wins": "بردها",
|
||||||
@@ -500,6 +504,10 @@ const en: Dict = {
|
|||||||
"friends.message": "Message",
|
"friends.message": "Message",
|
||||||
|
|
||||||
"profile.title": "Profile",
|
"profile.title": "Profile",
|
||||||
|
"profile.tabBasic": "Profile",
|
||||||
|
"profile.tabCollection": "Collection",
|
||||||
|
"profile.tabSettings": "Settings",
|
||||||
|
"profile.lifeRibbon": "Hokm Life",
|
||||||
"profile.stats": "Stats",
|
"profile.stats": "Stats",
|
||||||
"profile.games": "Games",
|
"profile.games": "Games",
|
||||||
"profile.wins": "Wins",
|
"profile.wins": "Wins",
|
||||||
|
|||||||
Reference in New Issue
Block a user