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>
This commit is contained in:
soroush.asadi
@@ -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":
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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…",
|
||||
|
||||
@@ -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 ---------------------------------- */
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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); }
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+3
-2
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user