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>

src/app/page.tsx

@@ -10,6 +10,7 @@ import { RoomScreen } from "@/components/screens/RoomScreen";
 import { MatchmakingScreen } from "@/components/screens/MatchmakingScreen";
 import { LeaderboardScreen } from "@/components/screens/LeaderboardScreen";
 import { ShopScreen } from "@/components/screens/ShopScreen";
+import { BuyCoinsScreen } from "@/components/screens/BuyCoinsScreen";
 import { ChatScreen } from "@/components/screens/ChatScreen";
 import { NotificationsScreen } from "@/components/screens/NotificationsScreen";
 import { AuthScreen } from "@/components/screens/AuthScreen";
@@ -101,6 +102,8 @@ function renderScreen(screen: string) {
       return <LeaderboardScreen />;
     case "shop":
       return <ShopScreen />;
+    case "buycoins":
+      return <BuyCoinsScreen />;
     case "chat":
       return <ChatScreen />;
     case "notifications":

src/components/online/TopBar.tsx

@@ -55,12 +55,17 @@ export function TopBar() {
         >
           <Gift className="size-4 text-gold-400" />
         </button>
-        <div className="glass rounded-full px-3 py-1.5 flex items-center gap-1.5">
+        <button
+          onClick={() => go("buycoins")}
+          className="glass rounded-full px-3 py-1.5 flex items-center gap-1.5 hover:bg-navy-800/80 transition"
+          title={t("buy.title")}
+        >
           <Coins className="size-4 text-gold-400" />
           <span className="text-sm font-bold text-cream tabular-nums">
             {profile.coins.toLocaleString()}
           </span>
-        </div>
+          <span className="text-gold-400 text-sm leading-none font-bold">+</span>
+        </button>
       </div>
     </div>
   );

src/components/screens/BuyCoinsScreen.tsx

@@ -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>
+  );
+}

src/components/screens/FriendsScreen.tsx

@@ -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>

src/components/screens/OnlineLobbyScreen.tsx

@@ -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>

src/lib/i18n.tsx

@@ -89,6 +89,20 @@ const fa: Dict = {
   "common.copy": "کپی",
   "common.copied": "کپی شد",
   "common.free": "رایگان",
+  "common.yes": "بله",
+  "common.no": "خیر",
+
+  "buy.title": "خرید سکه",
+  "buy.note": "پرداخت امن — درگاه پرداخت ایرانی به‌زودی اضافه می‌شود",
+  "buy.toman": "تومان",
+  "buy.bonus": "هدیه",
+  "buy.popular": "محبوب",
+  "buy.best": "بهترین",
+
+  "lobby.entry": "ورودی",
+  "lobby.free": "رایگان",
+  "lobby.needCoins": "سکه کافی نیست — شارژ کنید",
+  "friends.removeQ": "این دوست حذف شود؟",
 
   "chat.title": "گفتگو",
   "chat.placeholder": "پیام بنویسید…",
@@ -316,6 +330,20 @@ const en: Dict = {
   "common.copy": "Copy",
   "common.copied": "Copied",
   "common.free": "Free",
+  "common.yes": "Yes",
+  "common.no": "No",
+
+  "buy.title": "Buy Coins",
+  "buy.note": "Secure payment — Iranian gateway coming soon",
+  "buy.toman": "Toman",
+  "buy.bonus": "bonus",
+  "buy.popular": "Popular",
+  "buy.best": "Best value",
+
+  "lobby.entry": "Entry",
+  "lobby.free": "Free",
+  "lobby.needCoins": "Not enough coins — top up",
+  "friends.removeQ": "Remove this friend?",
 
   "chat.title": "Chat",
   "chat.placeholder": "Type a message…",

src/lib/online/gamification.ts

@@ -104,10 +104,11 @@ export function ratingDelta(
 /* ------------------------------- Coins ------------------------------- */
 
 export function coinDelta(summary: MatchSummary): number {
-  const base = summary.won ? (summary.ranked ? 50 : 25) : 10;
-  const stakeNet = summary.won ? summary.stake : -summary.stake;
+  // Free games (vs computer / private friend rooms) never touch coins.
+  if (!summary.ranked) return 0;
+  // Ranked: win the stake (+kot bonus), lose the stake.
   const kotBonus = summary.won && summary.kotFor ? 40 : 0;
-  return base + stakeNet + kotBonus;
+  return (summary.won ? summary.stake : -summary.stake) + kotBonus;
 }
 
 /* ------------------------------- XP ---------------------------------- */

src/lib/online/mock-service.ts

@@ -21,6 +21,7 @@ import {
   AppNotification,
   AuthSession,
   ChatMessage,
+  CoinPack,
   Conversation,
   DailyRewardState,
   Friend,
@@ -772,6 +773,26 @@ export class MockOnlineService implements OnlineService {
 
   /* --------------------- leaderboard / shop / daily ------------------ */
 
+  async getCoinPacks(): Promise<CoinPack[]> {
+    return [
+      { id: "p1", coins: 1000, bonus: 0, priceToman: 19000 },
+      { id: "p2", coins: 5000, bonus: 500, priceToman: 89000, tag: "popular" },
+      { id: "p3", coins: 12000, bonus: 2000, priceToman: 179000, tag: "best" },
+      { id: "p4", coins: 30000, bonus: 7000, priceToman: 399000 },
+    ];
+  }
+
+  async buyCoins(packId: string) {
+    const p = await this.getProfile();
+    const pack = (await this.getCoinPacks()).find((x) => x.id === packId);
+    if (!pack) return { ok: false, coins: 0 };
+    // NOTE: real payment (Zarinpal/IDPay) goes here. For now we credit instantly.
+    const added = pack.coins + pack.bonus;
+    this.profile = { ...p, coins: p.coins + added };
+    this.saveProfile();
+    return { ok: true, profile: this.profile, coins: added };
+  }
+
   private onlineCount = 600 + Math.floor(Math.random() * 900);
   async getOnlineCount(): Promise<number> {
     // gentle random walk so the badge feels alive

src/lib/online/service.ts

@@ -7,6 +7,7 @@ import {
   AppNotification,
   AuthSession,
   ChatMessage,
+  CoinPack,
   Conversation,
   DailyRewardState,
   Friend,
@@ -111,6 +112,10 @@ export interface OnlineService {
   buyItem(id: string): Promise<{ ok: boolean; profile?: UserProfile; messageFa: string; messageEn: string }>;
   getDailyState(): Promise<DailyRewardState>;
   claimDaily(): Promise<{ reward: number; profile: UserProfile; day: number }>;
+
+  /* ----- coin purchases (real payment gateway: TODO Zarinpal/IDPay) ----- */
+  getCoinPacks(): Promise<CoinPack[]>;
+  buyCoins(packId: string): Promise<{ ok: boolean; profile?: UserProfile; coins: number }>;
 }
 
 import { MockOnlineService } from "./mock-service";

src/lib/online/signalr-service.ts

@@ -293,4 +293,6 @@ export class SignalrService implements OnlineService {
   buyItem(id: string) { return this.mock.buyItem(id); }
   getDailyState(): Promise<DailyRewardState> { return this.mock.getDailyState(); }
   claimDaily(): Promise<{ reward: number; profile: UserProfile; day: number }> { return this.mock.claimDaily(); }
+  getCoinPacks() { return this.mock.getCoinPacks(); }
+  buyCoins(id: string) { return this.mock.buyCoins(id); }
 }

src/lib/online/types.ts

@@ -327,6 +327,16 @@ export interface ShopItem {
   preview: string; // emoji/avatar id/color
 }
 
+/* ------------------------------ Coin packs --------------------------- */
+
+export interface CoinPack {
+  id: string;
+  coins: number;
+  bonus: number; // extra coins
+  priceToman: number;
+  tag?: "popular" | "best";
+}
+
 /* --------------------------- Daily reward ---------------------------- */
 
 export interface DailyRewardState {

src/lib/ui-store.ts

@@ -12,18 +12,19 @@ export type Screen =
   | "matchmaking"
   | "leaderboard"
   | "shop"
+  | "buycoins"
   | "chat"
   | "notifications"
   | "game"; // the table (used for both ai + online)
 
 const ALL_SCREENS: Screen[] = [
   "home", "auth", "profile", "friends", "online",
-  "room", "matchmaking", "leaderboard", "shop", "chat", "notifications", "game",
+  "room", "matchmaking", "leaderboard", "shop", "buycoins", "chat", "notifications", "game",
 ];
 
 /** Screens safe to restore from a URL on a cold load (no transient state needed). */
 export const STATIC_SCREENS: Screen[] = [
-  "home", "auth", "profile", "friends", "online", "leaderboard", "shop", "notifications",
+  "home", "auth", "profile", "friends", "online", "leaderboard", "shop", "buycoins", "notifications",
 ];
 
 export function screenFromHash(): Screen {