93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Coins } from "lucide-react";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
|
||
|
|
import { useSessionStore } from "@/lib/session-store";
|
||
|
|
import { useI18n } from "@/lib/i18n";
|
||
|
|
import { getService } from "@/lib/online/service";
|
||
|
|
import { sound } from "@/lib/sound";
|
||
|
|
import { CoinPack } from "@/lib/online/types";
|
||
|
|
import { cn } from "@/lib/cn";
|
||
|
|
|
||
|
|
export function BuyCoinsScreen() {
|
||
|
|
const { t, locale } = useI18n();
|
||
|
|
const profile = useSessionStore((s) => s.profile);
|
||
|
|
const setProfile = useSessionStore((s) => s.setProfile);
|
||
|
|
const [packs, setPacks] = useState<CoinPack[]>([]);
|
||
|
|
const [busy, setBusy] = useState<string | null>(null);
|
||
|
|
const [gained, setGained] = useState<number | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getService().getCoinPacks().then(setPacks);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const fmt = (n: number) =>
|
||
|
|
new Intl.NumberFormat(locale === "fa" ? "fa-IR" : "en-US").format(n);
|
||
|
|
|
||
|
|
const buy = async (p: CoinPack) => {
|
||
|
|
setBusy(p.id);
|
||
|
|
const res = await getService().buyCoins(p.id);
|
||
|
|
if (res.ok && res.profile) {
|
||
|
|
setProfile(res.profile);
|
||
|
|
sound.play("purchase");
|
||
|
|
setGained(res.coins);
|
||
|
|
setTimeout(() => setGained(null), 2500);
|
||
|
|
}
|
||
|
|
setBusy(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ScreenShell>
|
||
|
|
<ScreenHeader
|
||
|
|
title={t("buy.title")}
|
||
|
|
right={
|
||
|
|
profile && (
|
||
|
|
<span className="glass rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 flex items-center gap-1">
|
||
|
|
<Coins className="size-3.5 text-gold-400" />
|
||
|
|
{fmt(profile.coins)}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<p className="text-center text-cream/50 text-xs mb-4">{t("buy.note")}</p>
|
||
|
|
|
||
|
|
{gained != null && (
|
||
|
|
<div className="mb-4 text-center text-teal-300 font-bold glass rounded-xl py-2 flex items-center justify-center gap-1.5">
|
||
|
|
+{fmt(gained)} <Coins className="size-4 text-gold-400" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-3 pb-6">
|
||
|
|
{packs.map((p) => (
|
||
|
|
<button
|
||
|
|
key={p.id}
|
||
|
|
disabled={busy !== null}
|
||
|
|
onClick={() => buy(p)}
|
||
|
|
className={cn(
|
||
|
|
"glass rounded-2xl p-4 pt-5 flex flex-col items-center gap-1 relative hover:bg-navy-800/80 transition disabled:opacity-60",
|
||
|
|
p.tag && "ring-2 ring-gold-400/50"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{p.tag && (
|
||
|
|
<span className="absolute -top-2 rounded-full btn-gold text-[10px] font-bold px-2 py-0.5">
|
||
|
|
{p.tag === "best" ? t("buy.best") : t("buy.popular")}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<Coins className="size-7 text-gold-400" />
|
||
|
|
<span className="text-xl font-black gold-text">{fmt(p.coins + p.bonus)}</span>
|
||
|
|
{p.bonus > 0 && (
|
||
|
|
<span className="text-[10px] text-teal-300">
|
||
|
|
+{fmt(p.bonus)} {t("buy.bonus")}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
<span className="mt-1 text-sm font-bold text-cream">
|
||
|
|
{fmt(p.priceToman)} {t("buy.toman")}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</ScreenShell>
|
||
|
|
);
|
||
|
|
}
|