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>
+  );
+}
@@ -1,6 +1,6 @@
 "use client";

-import { Check, MessageCircle, UserPlus, X } from "lucide-react";
+import { Check, MessageCircle, UserMinus, UserPlus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useOnlineStore } from "@/lib/online-store";
@@ -28,6 +28,7 @@ export function FriendsScreen() {
  const go = useUIStore((s) => s.go);

  const [query, setQuery] = useState("");
+  const [confirmId, setConfirmId] = useState<string | null>(null);

  useEffect(() => {
    load();
@@ -113,23 +114,48 @@ export function FriendsScreen() {
              </div>
            </div>
            <span className="text-[11px] text-gold-300/80">{Math.round(f.rating)}</span>
-            <button
-              onClick={async () => {
-                await openChat(f);
-                go("chat");
-              }}
-              className="size-8 rounded-lg hover:bg-teal-700/40 flex items-center justify-center text-teal-300/80 hover:text-teal-200"
-              title={t("friends.message")}
-            >
-              <MessageCircle className="size-4" />
-            </button>
-            <button
-              onClick={() => remove(f.id)}
-              className="size-8 rounded-lg hover:bg-rose-700/40 flex items-center justify-center text-cream/40 hover:text-rose-300"
-              title={t("friends.remove")}
-            >
-              <X className="size-4" />
-            </button>
+            {confirmId === f.id ? (
+              <>
+                <span className="text-[11px] text-cream/70">{t("friends.removeQ")}</span>
+                <button
+                  onClick={() => {
+                    remove(f.id);
+                    setConfirmId(null);
+                  }}
+                  className="size-8 rounded-lg bg-rose-700/70 flex items-center justify-center hover:bg-rose-700"
+                  title={t("common.yes")}
+                >
+                  <Check className="size-4 text-white" />
+                </button>
+                <button
+                  onClick={() => setConfirmId(null)}
+                  className="size-8 rounded-lg bg-navy-700/70 flex items-center justify-center hover:bg-navy-700"
+                  title={t("common.no")}
+                >
+                  <X className="size-4 text-cream/80" />
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  onClick={async () => {
+                    await openChat(f);
+                    go("chat");
+                  }}
+                  className="size-8 rounded-lg hover:bg-teal-700/40 flex items-center justify-center text-teal-300/80 hover:text-teal-200"
+                  title={t("friends.message")}
+                >
+                  <MessageCircle className="size-4" />
+                </button>
+                <button
+                  onClick={() => setConfirmId(f.id)}
+                  className="size-8 rounded-lg hover:bg-navy-800 flex items-center justify-center text-cream/35 hover:text-cream/70"
+                  title={t("friends.remove")}
+                >
+                  <UserMinus className="size-4" />
+                </button>
+              </>
+            )}
          </div>
        ))}
      </div>
@@ -5,52 +5,72 @@ import { Coins, Trophy, Users } from "lucide-react";
 import { useState } from "react";
 import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
 import { useOnlineStore } from "@/lib/online-store";
+import { useSessionStore } from "@/lib/session-store";
 import { useUIStore } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/cn";

-const STAKES = [0, 100, 500, 1000];
+const ENTRIES = [100, 500, 1000];

 export function OnlineLobbyScreen() {
  const { t } = useI18n();
  const createRoom = useOnlineStore((s) => s.createRoom);
  const startMatchmaking = useOnlineStore((s) => s.startMatchmaking);
  const go = useUIStore((s) => s.go);
-  const [stake, setStake] = useState(100);
+  const coins = useSessionStore((s) => s.profile?.coins ?? 0);
+  const [entry, setEntry] = useState(100);

+  // Private rooms with friends are free.
  const onCreate = async () => {
-    await createRoom({ targetScore: 7, stake, ranked: false });
+    await createRoom({ targetScore: 7, stake: 0, ranked: false });
    go("room");
  };
+
+  // Ranked random always costs the entry (you stake it).
  const onRandom = async () => {
-    await startMatchmaking({ ranked: true, stake });
+    if (coins < entry) {
+      go("buycoins");
+      return;
+    }
+    await startMatchmaking({ ranked: true, stake: entry });
    go("matchmaking");
  };

  return (
    <ScreenShell>
-      <ScreenHeader title={t("lobby.title")} />
+      <ScreenHeader
+        title={t("lobby.title")}
+        right={
+          <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" />
+            {coins.toLocaleString()}
+          </span>
+        }
+      />

-      {/* stake */}
+      {/* entry (only for ranked) */}
      <div className="glass rounded-2xl p-4 mb-4">
        <div className="flex items-center gap-1.5 text-sm text-cream/70 mb-2.5">
          <Coins className="size-4 text-gold-400" />
-          {t("room.stake")}
+          {t("lobby.entry")}
        </div>
        <div className="flex gap-2">
-          {STAKES.map((s) => (
+          {ENTRIES.map((s) => (
            <button
              key={s}
-              onClick={() => setStake(s)}
+              onClick={() => setEntry(s)}
              className={cn(
                "flex-1 rounded-xl py-2.5 text-sm font-bold transition",
-                stake === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
+                entry === s ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
              )}
            >
-              {s === 0 ? t("common.free") : s.toLocaleString()}
+              {s.toLocaleString()}
            </button>
          ))}
        </div>
+        {coins < entry && (
+          <p className="text-rose-300 text-xs mt-2 text-center">{t("lobby.needCoins")}</p>
+        )}
      </div>

      <div className="space-y-3">
@@ -63,10 +83,14 @@ export function OnlineLobbyScreen() {
          <span className="size-12 rounded-xl bg-black/15 flex items-center justify-center text-[#2a1f04]">
            <Trophy className="size-6" />
          </span>
-          <span>
+          <span className="flex-1">
            <span className="block text-lg font-black text-[#2a1f04]">{t("lobby.random")}</span>
            <span className="block text-xs text-[#2a1f04]/70">{t("lobby.randomDesc")}</span>
          </span>
+          <span className="flex items-center gap-1 text-[#2a1f04] font-black">
+            {entry}
+            <Coins className="size-4" />
+          </span>
        </motion.button>

        <motion.button
@@ -78,10 +102,11 @@ export function OnlineLobbyScreen() {
          <span className="size-12 rounded-xl bg-navy-900 gold-border flex items-center justify-center text-gold-400">
            <Users className="size-6" />
          </span>
-          <span>
+          <span className="flex-1">
            <span className="block text-lg font-black text-cream">{t("lobby.createRoom")}</span>
            <span className="block text-xs text-cream/55">{t("lobby.createDesc")}</span>
          </span>
+          <span className="text-teal-300 font-bold text-sm">{t("lobby.free")}</span>
        </motion.button>
      </div>
    </ScreenShell>