Economy: free vs paid games + buy-coins page; friends remove confirmation

- Coins only matter for ranked: free games (vs computer / private friend rooms) cost nothing; random ranked requires an entry (stake), gated by balance → routes to buy-coins when short - Buy Coins page (CoinPack/getCoinPacks/buyCoins; mock credits now, real Zarinpal/IDPay TODO); TopBar coins → buy; lobby create-room is Free - Friends: removed instant red ✕ delete; UserMinus → inline confirm before remove Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-04 16:28:59 +03:30
parent fe136f7ee4
commit cdb8d522dd
12 changed files with 257 additions and 38 deletions
@@ -0,0 +1,92 @@
+"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>
+  );
+}