soroush.asadi
53759be8b7
- GameTable reactions button (and its tray) moved up from the bottom-right so it no longer overlaps the player's cards on mobile portrait. - Gender options are now Male / Female / Unknown — removed "other" from the Gender type, GENDER_META, and the profile picker; the empty value renders as «نامشخص» / "Unknown". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
707 lines
28 KiB
TypeScript
707 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Check, ChevronLeft, Crown, Eye, EyeOff, Gift, Lock, LogOut, MapPin, Pencil, Search, Star, Upload, Users, Volume2 } from "lucide-react";
|
|
import { useRef, useState } from "react";
|
|
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
|
|
import { RankBadge } from "@/components/online/RankBadge";
|
|
import { CoinsPill } from "@/components/online/CoinsPill";
|
|
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 { useUIStore } from "@/lib/ui-store";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import {
|
|
ACHIEVEMENTS,
|
|
CARD_BACKS,
|
|
CARD_FRONTS,
|
|
CITY_REWARD,
|
|
TITLES,
|
|
achievementProgress,
|
|
ownedAvatarIds,
|
|
ownedCardBackIds,
|
|
ownedCardFrontIds,
|
|
} from "@/lib/online/gamification";
|
|
import { IRAN_CITIES, cityById, searchCities, type City } from "@/lib/iran-cities";
|
|
import { pushNotification } from "@/lib/notification-store";
|
|
import { sound } from "@/lib/sound";
|
|
|
|
/** Level required before a player can upload a custom profile photo. */
|
|
const PHOTO_UPLOAD_MIN_LEVEL = 3;
|
|
import { AVATARS, Gender, SocialVisibility } from "@/lib/online/types";
|
|
import { GENDER_META, SOCIAL_PLATFORMS } from "@/lib/social";
|
|
import { backVisualFromDef, cardBackMotif } from "@/lib/cardBack";
|
|
import { cn } from "@/lib/cn";
|
|
|
|
export function ProfileScreen() {
|
|
const { t, locale } = useI18n();
|
|
const profile = useSessionStore((s) => s.profile);
|
|
const updateProfile = useSessionStore((s) => s.updateProfile);
|
|
const upgradePlan = useSessionStore((s) => s.upgradePlan);
|
|
const signOut = useSessionStore((s) => s.signOut);
|
|
const isAuthed = useSessionStore((s) => s.isAuthed);
|
|
const go = useUIStore((st) => st.go);
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
const [editing, setEditing] = useState(false);
|
|
const [name, setName] = useState(profile?.displayName ?? "");
|
|
const [tab, setTab] = useState<"basic" | "collection" | "settings">("basic");
|
|
|
|
if (!profile) return null;
|
|
const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
|
|
const s = profile.stats;
|
|
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 ownedAvatars = new Set(ownedAvatarIds(profile));
|
|
|
|
const saveName = async () => {
|
|
if (name.trim()) await updateProfile({ displayName: name.trim() });
|
|
setEditing(false);
|
|
};
|
|
|
|
const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file || !canUpload) return;
|
|
const reader = new FileReader();
|
|
reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
return (
|
|
<ScreenShell>
|
|
<ScreenHeader title={t("profile.title")} showXp={false} />
|
|
|
|
{/* tabs */}
|
|
<div className="flex gap-2 mb-4">
|
|
{(
|
|
[
|
|
["basic", t("profile.tabBasic")],
|
|
["collection", t("profile.tabCollection")],
|
|
["settings", t("profile.tabSettings")],
|
|
] as const
|
|
).map(([key, label]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setTab(key)}
|
|
className={cn(
|
|
"rounded-2xl px-5 py-2 text-sm font-bold transition",
|
|
tab === key ? "btn-gold" : "panel text-cream/70 hover:text-cream"
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ===== Basic: player card + stats/achievements ===== */}
|
|
{tab === "basic" && (
|
|
<div className="grid gap-4 items-start landscape:grid-cols-[minmax(0,340px)_minmax(0,1fr)]">
|
|
{/* one-time "set your city" reward */}
|
|
<div className="landscape:col-span-2">
|
|
<CityRewardCard />
|
|
</div>
|
|
|
|
{/* 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" />
|
|
|
|
<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>
|
|
<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>
|
|
)}
|
|
|
|
{/* ===== Collection: cosmetics pickers ===== */}
|
|
{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>
|
|
)}
|
|
|
|
{/* ===== Settings ===== */}
|
|
{tab === "settings" && (
|
|
<div className="grid gap-4 items-start landscape:grid-cols-2">
|
|
<SocialSettings />
|
|
<SoundSettings />
|
|
{isAuthed && (
|
|
<button
|
|
onClick={() => {
|
|
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"
|
|
>
|
|
<LogOut className="size-4" />
|
|
{t("menu.signOut")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value }: { label: string; value: string | number }) {
|
|
return (
|
|
<div className="bg-navy-900/60 rounded-xl py-3 text-center">
|
|
<div className="text-xl font-black gold-text">{value}</div>
|
|
<div className="text-[10px] text-cream/55 mt-0.5">{label}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const GENDERS: Gender[] = ["male", "female", ""];
|
|
const VIS_OPTIONS: { id: SocialVisibility; icon: React.ReactNode; key: string }[] = [
|
|
{ id: "public", icon: <Eye className="size-3.5" />, key: "profile.visPublic" },
|
|
{ id: "friends", icon: <Users className="size-3.5" />, key: "profile.visFriends" },
|
|
{ id: "hidden", icon: <EyeOff className="size-3.5" />, key: "profile.visHidden" },
|
|
];
|
|
|
|
function SocialSettings() {
|
|
const { t, locale } = useI18n();
|
|
const profile = useSessionStore((s) => s.profile);
|
|
const updateProfile = useSessionStore((s) => s.updateProfile);
|
|
const [links, setLinks] = useState<Record<string, string>>(() => ({
|
|
instagram: profile?.socials?.instagram ?? "",
|
|
telegram: profile?.socials?.telegram ?? "",
|
|
x: profile?.socials?.x ?? "",
|
|
youtube: profile?.socials?.youtube ?? "",
|
|
}));
|
|
const [saved, setSaved] = useState(false);
|
|
if (!profile) return null;
|
|
|
|
const gender = profile.gender ?? "";
|
|
const vis = profile.socialsVisibility ?? "public";
|
|
|
|
const saveLinks = async () => {
|
|
const socials = Object.fromEntries(
|
|
Object.entries(links).map(([k, v]) => [k, v.trim()]).filter(([, v]) => v)
|
|
);
|
|
await updateProfile({ socials });
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 1800);
|
|
};
|
|
|
|
return (
|
|
<div className="panel rounded-2xl p-4">
|
|
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>
|
|
|
|
{/* gender */}
|
|
<div className="text-xs text-cream/55 mb-2">{t("profile.gender")}</div>
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{GENDERS.map((g) => {
|
|
const meta = g ? GENDER_META[g] : null;
|
|
const active = gender === g;
|
|
return (
|
|
<button
|
|
key={g || "none"}
|
|
onClick={() => updateProfile({ gender: g })}
|
|
className={cn(
|
|
"rounded-lg px-3 py-1.5 text-sm font-semibold transition flex items-center gap-1.5",
|
|
active ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
|
|
)}
|
|
>
|
|
{meta ? (
|
|
<>
|
|
<span style={{ color: active ? undefined : meta.color }}>{meta.symbol}</span>
|
|
{locale === "fa" ? meta.faLabel : meta.enLabel}
|
|
</>
|
|
) : (
|
|
t("profile.genderNone")
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* social links */}
|
|
<div className="text-xs text-cream/55 mb-2">{t("profile.socialLinks")}</div>
|
|
<div className="space-y-2">
|
|
{SOCIAL_PLATFORMS.map((p) => (
|
|
<div key={p.key} className="flex items-center gap-2">
|
|
<span className="grid size-8 place-items-center rounded-lg bg-navy-900/70 text-base shrink-0" style={{ color: p.color }}>
|
|
{p.icon}
|
|
</span>
|
|
<input
|
|
value={links[p.key]}
|
|
onChange={(e) => setLinks((l) => ({ ...l, [p.key]: e.target.value }))}
|
|
placeholder={p.label}
|
|
dir="ltr"
|
|
className="flex-1 rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-sm text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* visibility */}
|
|
<div className="text-xs text-cream/55 mt-4 mb-2">{t("profile.socialsVisibility")}</div>
|
|
<div className="glass rounded-xl p-1 flex gap-1">
|
|
{VIS_OPTIONS.map((o) => (
|
|
<button
|
|
key={o.id}
|
|
onClick={() => updateProfile({ socialsVisibility: o.id })}
|
|
className={cn(
|
|
"flex-1 rounded-lg py-1.5 text-xs font-bold transition flex items-center justify-center gap-1",
|
|
vis === o.id ? "btn-gold" : "text-cream/60 hover:text-cream"
|
|
)}
|
|
>
|
|
{o.icon}
|
|
{t(o.key)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="text-[10px] text-cream/40 mt-1.5">{t("profile.socialsHint")}</p>
|
|
|
|
<button onClick={saveLinks} className="press-3d btn-gold w-full rounded-xl py-2.5 mt-3 text-sm font-bold flex items-center justify-center gap-1.5">
|
|
{saved ? <><Check className="size-4" />{t("profile.saved")}</> : t("profile.saveLinks")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* One-time gamification box: pick your city from a searchable list and earn a
|
|
* 500-coin reward (granted server-side the first time a city is set). Once
|
|
* claimed it collapses to a compact summary with an option to change city.
|
|
*/
|
|
function CityRewardCard() {
|
|
const { t, locale } = useI18n();
|
|
const profile = useSessionStore((s) => s.profile);
|
|
const updateProfile = useSessionStore((s) => s.updateProfile);
|
|
|
|
const claimed = !!profile?.cityRewardClaimed;
|
|
const currentCity = cityById(profile?.city);
|
|
const [editing, setEditing] = useState(!claimed);
|
|
const [query, setQuery] = useState("");
|
|
const [pickedId, setPickedId] = useState<string | null>(profile?.city ?? null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const results = query.trim() ? searchCities(query, 40) : IRAN_CITIES.slice(0, 40);
|
|
const picked = cityById(pickedId ?? undefined);
|
|
const cityName = (c?: City) => (c ? (locale === "fa" ? c.fa : c.en) : "");
|
|
|
|
const choose = (c: City) => {
|
|
setPickedId(c.id);
|
|
setQuery(cityName(c));
|
|
};
|
|
|
|
const save = async () => {
|
|
if (!pickedId || saving) return;
|
|
const firstClaim = !claimed;
|
|
setSaving(true);
|
|
try {
|
|
await updateProfile({ city: pickedId });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
setEditing(false);
|
|
if (firstClaim) {
|
|
sound.play("award");
|
|
pushNotification({
|
|
kind: "system",
|
|
titleFa: `+${CITY_REWARD.toLocaleString("fa")} سکه دریافت شد! 🎉`,
|
|
titleEn: `+${CITY_REWARD} coins earned! 🎉`,
|
|
bodyFa: "شهر شما ثبت شد.",
|
|
bodyEn: "Your city has been saved.",
|
|
icon: "📍",
|
|
});
|
|
}
|
|
};
|
|
|
|
// ---- Claimed + collapsed: compact summary ----
|
|
if (claimed && !editing) {
|
|
return (
|
|
<div className="panel rounded-2xl p-3.5 flex items-center gap-3">
|
|
<span className="grid size-10 place-items-center rounded-xl bg-teal-500/15 text-teal-300 shrink-0">
|
|
<MapPin className="size-5" />
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-bold text-cream truncate">{cityName(currentCity) || t("city.unknown")}</div>
|
|
<div className="text-[11px] text-teal-300">{t("city.claimed")}</div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setEditing(true);
|
|
setQuery(cityName(currentCity));
|
|
}}
|
|
className="text-xs font-bold text-gold-300 hover:text-gold-200 px-2 py-1 rounded-lg"
|
|
>
|
|
{t("city.change")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---- Editing / unclaimed: reward prompt + searchable picker ----
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="rounded-3xl p-4 relative overflow-hidden border border-gold-500/30 bg-gradient-to-br from-gold-500/10 to-navy-900/40"
|
|
>
|
|
{!claimed && (
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<motion.span
|
|
initial={{ scale: 0, rotate: -15 }}
|
|
animate={{ scale: 1, rotate: 0 }}
|
|
transition={{ type: "spring", stiffness: 240, delay: 0.05 }}
|
|
className="grid size-11 place-items-center rounded-2xl btn-gold shrink-0"
|
|
>
|
|
<Gift className="size-5" />
|
|
</motion.span>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-black text-cream">{t("city.rewardTitle")}</div>
|
|
<div className="text-[11px] text-gold-300 font-bold">
|
|
{t("city.rewardSub").replace("{n}", CITY_REWARD.toLocaleString(locale === "fa" ? "fa" : "en"))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* searchable city combobox */}
|
|
<div className="relative">
|
|
<Search className="absolute top-1/2 -translate-y-1/2 ltr:left-3 rtl:right-3 size-4 text-cream/40 pointer-events-none" />
|
|
<input
|
|
value={query}
|
|
onChange={(e) => {
|
|
setQuery(e.target.value);
|
|
setPickedId(null);
|
|
}}
|
|
placeholder={t("city.search")}
|
|
className="w-full rounded-xl bg-navy-900/70 gold-border ltr:pl-9 rtl:pr-9 px-3 py-2.5 text-sm text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
|
|
/>
|
|
</div>
|
|
|
|
{/* results — only while there's no committed pick yet */}
|
|
{!picked && (
|
|
<div className="mt-2 max-h-44 overflow-y-auto rounded-xl bg-navy-900/50 divide-y divide-navy-800/60">
|
|
{results.length === 0 && (
|
|
<div className="px-3 py-3 text-xs text-cream/40 text-center">{t("city.none")}</div>
|
|
)}
|
|
{results.map((c) => (
|
|
<button
|
|
key={c.id}
|
|
onClick={() => choose(c)}
|
|
className="w-full text-start px-3 py-2 text-sm text-cream/85 hover:bg-navy-800/70 flex items-center gap-2"
|
|
>
|
|
<MapPin className="size-3.5 text-cream/40 shrink-0" />
|
|
{cityName(c)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* confirm / claim */}
|
|
{picked && (
|
|
<button
|
|
onClick={save}
|
|
disabled={saving}
|
|
className="press-3d btn-gold w-full rounded-xl py-3 mt-3 font-black text-sm flex items-center justify-center gap-2 disabled:opacity-60"
|
|
>
|
|
<MapPin className="size-4" />
|
|
{claimed
|
|
? t("city.saveCity").replace("{city}", cityName(picked))
|
|
: t("city.claim").replace("{n}", CITY_REWARD.toLocaleString(locale === "fa" ? "fa" : "en"))}
|
|
</button>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
function SoundSettings() {
|
|
const { t } = useI18n();
|
|
const { sfx, toggleSfx } = useSoundStore();
|
|
return (
|
|
<div className="panel rounded-2xl p-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} />
|
|
</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>
|
|
);
|
|
}
|