-
))}
@@ -387,6 +406,68 @@ function TurnIndicator() {
);
}
+/* ----------------------------- Turn timer ----------------------------- */
+
+function TurnTimer() {
+ const deadline = useGameStore((s) => s.turnDeadline);
+ const phase = useGameStore((s) => s.game.phase);
+ const secs = useCountdown(deadline);
+ if (deadline == null || secs == null) return null;
+ if (phase !== "playing" && phase !== "choosing-trump") return null;
+ const pct = Math.max(0, Math.min(1, (deadline - Date.now()) / TURN_MS));
+ const danger = secs <= 5;
+ return (
+
+
+ {secs}
+
+
+ );
+}
+
+function DisconnectBanner() {
+ const seat = useGameStore((s) => s.disconnectedSeat);
+ const deadline = useGameStore((s) => s.reconnectDeadline);
+ const name = useGameStore((s) => (seat != null ? s.seatPlayers[seat]?.name : null));
+ const secs = useCountdown(deadline);
+ const { t } = useI18n();
+ return (
+
+
+
+
+
+
-
✦
+
+ ✦
+
+ {reward.newTitles.map((tt, i) => (
+
+ 🏷️
+
+ {t("reward.newTitle")}
+
+ {locale === "fa" ? tt.nameFa : tt.nameEn}
+
+
+
+ ))}
+
+ )}
+
diff --git a/src/components/online/TopBar.tsx b/src/components/online/TopBar.tsx
index 77f5286..f7b506d 100644
--- a/src/components/online/TopBar.tsx
+++ b/src/components/online/TopBar.tsx
@@ -1,10 +1,10 @@
"use client";
-import { Coins, Gift } from "lucide-react";
+import { Coins, Crown, Gift } from "lucide-react";
import { useSessionStore } from "@/lib/session-store";
import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
-import { avatarEmoji } from "@/lib/online/types";
+import { Avatar } from "./Avatar";
export function TopBar() {
const profile = useSessionStore((s) => s.profile);
@@ -19,12 +19,13 @@ export function TopBar() {
onClick={() => go("profile")}
className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 hover:bg-navy-800/80 transition"
>
-
- {avatarEmoji(profile.avatar)}
+
+
+
+ ⏳
+ {t("queue.title")}
+{t("queue.busy")}
+
+ {mm.queuePosition ?? 0}
+
+ {t("queue.position", { n: mm.queuePosition ?? 0 })}
+ +
+
+ {t("queue.skip")}
+
+
+
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index abaac61..1a1c250 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -1,42 +1,74 @@
"use client";
-import { Check, Coins, Pencil } from "lucide-react";
-import { useState } from "react";
+import { Check, Coins, Crown, Pencil, Upload } from "lucide-react";
+import { useRef, useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { RankBadge } from "@/components/online/RankBadge";
import { XpBar } from "@/components/online/XpBar";
+import { Avatar } from "@/components/online/Avatar";
import { useSessionStore } from "@/lib/session-store";
import { useI18n } from "@/lib/i18n";
-import { ACHIEVEMENTS, achievementProgress } from "@/lib/online/gamification";
-import { AVATARS, avatarEmoji } from "@/lib/online/types";
+import {
+ ACHIEVEMENTS,
+ CARD_STYLES,
+ TITLES,
+ achievementProgress,
+} from "@/lib/online/gamification";
+import { AVATARS } from "@/lib/online/types";
import { cn } from "@/lib/cn";
export function ProfileScreen() {
const { t, locale } = useI18n();
const profile = useSessionStore((s) => s.profile);
const updateProfile = useSessionStore((s) => s.updateProfile);
+ const upgradePlan = useSessionStore((s) => s.upgradePlan);
+ const fileRef = useRef(null);
const [editing, setEditing] = useState(false);
const [name, setName] = useState(profile?.displayName ?? "");
if (!profile) return null;
const s = profile.stats;
const winrate = s.games > 0 ? Math.round((s.wins / s.games) * 100) : 0;
+ const titleDef = TITLES.find((x) => x.id === profile.title);
+ const titleName = titleDef ? (locale === "fa" ? titleDef.nameFa : titleDef.nameEn) : null;
const saveName = async () => {
if (name.trim()) await updateProfile({ displayName: name.trim() });
setEditing(false);
};
+ const onUpload = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
+ reader.readAsDataURL(file);
+ };
+
return (
+ {/* title picker */}
+
-
- {avatarEmoji(profile.avatar)}
+
{/* avatar picker */}
@@ -93,6 +142,57 @@ export function ProfileScreen() {
+
+ {titleName && (
+
+
+
+
{titleName}
+ )}
+
{editing ? (
+ {profile.plan === "pro" ? (
+
+
+
+
+ {/* card style picker */}
+ {t("profile.titleLabel")}
+
+ {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
+
+ ))}
+
+
+
+
{/* stats */}
{t("profile.cardStyleLabel")}
+
+ {CARD_STYLES.filter((c) => profile.ownedCardStyles.includes(c.id)).map((c) => (
+
+ ))}
+
+ {t("profile.stats")}
diff --git a/src/components/screens/ShopScreen.tsx b/src/components/screens/ShopScreen.tsx index 5c7315d..d56b691 100644 --- a/src/components/screens/ShopScreen.tsx +++ b/src/components/screens/ShopScreen.tsx @@ -25,7 +25,7 @@ export function ShopScreen() { const owns = (item: ShopItem) => item.kind === "avatar" ? profile.ownedAvatars.includes(item.id) - : profile.ownedThemes.includes(item.id); + : profile.ownedCardStyles.includes(item.id); const buy = async (item: ShopItem) => { const res = await getService().buyItem(item.id); @@ -38,7 +38,7 @@ export function ShopScreen() { }; const avatars = items.filter((i) => i.kind === "avatar"); - const themes = items.filter((i) => i.kind === "theme"); + const cardstyles = items.filter((i) => i.kind === "cardstyle"); return (
- {themes.map((item) => (
+ {cardstyles.map((item) => (
buy(item)}
preview={
}
/>
diff --git a/src/lib/game-store.ts b/src/lib/game-store.ts
index 28403b2..c361aea 100644
--- a/src/lib/game-store.ts
+++ b/src/lib/game-store.ts
@@ -11,7 +11,7 @@ import {
selectHakem,
startNextRound,
} from "./hokm/engine";
-import { Card, GameState, RoundResult, Suit } from "./hokm/types";
+import { Card, GameState, RoundResult, Seat, Suit } from "./hokm/types";
import { avatarEmoji } from "./online/types";
const KOT_POINTS = 2;
@@ -25,6 +25,13 @@ export const TIMING = {
roundPause: 2600,
} as const;
+/** How long a player has to act before the system plays for them. */
+export const TURN_MS = 20000;
+/** Grace period to wait for a disconnected player to return. */
+export const RECONNECT_MS = 15000;
+/** Per-turn chance an online opponent briefly drops (mock). */
+const DISCONNECT_CHANCE = 0.07;
+
export type GameMode = "ai" | "online";
export interface SeatPlayer {
@@ -59,6 +66,12 @@ interface GameStore {
matchMeta: { ranked: boolean; stake: number };
tally: MatchTally;
+ /** epoch ms by which the current actor must act (for the turn-timer UI). */
+ turnDeadline: number | null;
+ /** a seat that has dropped and we're waiting on (online). */
+ disconnectedSeat: Seat | null;
+ reconnectDeadline: number | null;
+
newMatch: (settings: GameSettings) => void;
newOnlineMatch: (cfg: OnlineMatchConfig) => void;
chooseTrump: (suit: Suit) => void;
@@ -93,12 +106,21 @@ export const useGameStore = create((set, get) => {
});
}
+ function playSeatAI(seat: Seat) {
+ const cur = get().game;
+ if (cur.phase !== "playing" || cur.turn !== seat) return;
+ const card = chooseCardAI(cur, seat);
+ set({ game: playCard(cur, seat, card) });
+ scheduleAuto();
+ }
+
function scheduleAuto() {
clearPending();
const g = get().game;
switch (g.phase) {
case "selecting-hakem":
+ set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
set({ game: dealForTrump(get().game) });
scheduleAuto();
@@ -107,7 +129,18 @@ export const useGameStore = create((set, get) => {
case "choosing-trump": {
const hakem = g.hakem!;
- if (!g.players[hakem].isHuman) {
+ if (g.players[hakem].isHuman) {
+ // human hakem: timed choice, system auto-picks on timeout
+ set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
+ pending = setTimeout(() => {
+ const cur = get().game;
+ if (cur.phase !== "choosing-trump") return;
+ const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
+ set({ game: engineChooseTrump(cur, suit), turnDeadline: null });
+ scheduleAuto();
+ }, TURN_MS);
+ } else {
+ set({ turnDeadline: null });
pending = setTimeout(() => {
const cur = get().game;
const suit = chooseTrumpAI(cur.players[cur.hakem!].hand);
@@ -120,29 +153,53 @@ export const useGameStore = create((set, get) => {
case "playing": {
const seat = g.turn!;
- if (!g.players[seat].isHuman) {
+ if (g.players[seat].isHuman) {
+ // human turn: timed; system plays a smart legal move on timeout
+ set({ turnDeadline: Date.now() + TURN_MS, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
const cur = get().game;
- const s = cur.turn!;
- const card = chooseCardAI(cur, s);
- set({ game: playCard(cur, s, card) });
+ if (cur.phase !== "playing" || cur.turn !== seat) return;
+ set({ game: playCard(cur, seat, chooseCardAI(cur, seat)), turnDeadline: null });
scheduleAuto();
- }, TIMING.aiPlay);
+ }, TURN_MS);
+ } else {
+ const st = get();
+ if (
+ st.mode === "online" &&
+ st.disconnectedSeat == null &&
+ Math.random() < DISCONNECT_CHANCE
+ ) {
+ // simulate this opponent dropping; wait for them, then they return
+ set({
+ turnDeadline: null,
+ disconnectedSeat: seat,
+ reconnectDeadline: Date.now() + RECONNECT_MS,
+ });
+ const back = Math.floor(RECONNECT_MS * (0.4 + Math.random() * 0.45));
+ pending = setTimeout(() => {
+ set({ disconnectedSeat: null, reconnectDeadline: null });
+ playSeatAI(seat);
+ }, back);
+ } else {
+ set({ turnDeadline: null });
+ pending = setTimeout(() => playSeatAI(seat), TIMING.aiPlay);
+ }
}
break;
}
case "trick-complete":
+ set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
const next = advanceAfterTrick(get().game, KOT_POINTS);
set({ game: next });
- // record the round once when it finalizes into match-over
if (next.phase === "match-over") recordRound(next.lastRoundResult);
scheduleAuto();
}, TIMING.trickPause);
break;
case "round-over":
+ set({ turnDeadline: null, disconnectedSeat: null, reconnectDeadline: null });
pending = setTimeout(() => {
recordRound(get().game.lastRoundResult);
set({ game: startNextRound(get().game) });
@@ -151,6 +208,7 @@ export const useGameStore = create((set, get) => {
break;
default:
+ set({ turnDeadline: null });
break;
}
}
@@ -162,6 +220,9 @@ export const useGameStore = create((set, get) => {
seatPlayers: [],
matchMeta: { ranked: false, stake: 0 },
tally: freshTally(),
+ turnDeadline: null,
+ disconnectedSeat: null,
+ reconnectDeadline: null,
newMatch: (settings) => {
clearPending();
@@ -172,6 +233,9 @@ export const useGameStore = create((set, get) => {
mode: "ai",
matchMeta: { ranked: false, stake: 0 },
tally: freshTally(),
+ turnDeadline: null,
+ disconnectedSeat: null,
+ reconnectDeadline: null,
seatPlayers: settings.names.map((name, i) => ({
name,
avatar: AI_AVATARS[i],
@@ -191,6 +255,9 @@ export const useGameStore = create((set, get) => {
mode: "online",
matchMeta: { ranked: cfg.ranked, stake: cfg.stake },
tally: freshTally(),
+ turnDeadline: null,
+ disconnectedSeat: null,
+ reconnectDeadline: null,
seatPlayers: cfg.players.map((p) => ({
name: p.displayName,
avatar: avatarEmoji(p.avatar),
@@ -203,14 +270,14 @@ export const useGameStore = create((set, get) => {
chooseTrump: (suit) => {
const g = get().game;
if (g.phase !== "choosing-trump") return;
- set({ game: engineChooseTrump(g, suit) });
+ set({ game: engineChooseTrump(g, suit), turnDeadline: null });
scheduleAuto();
},
playHuman: (card) => {
const g = get().game;
if (g.phase !== "playing" || g.turn !== 0) return;
- set({ game: playCard(g, 0, card) });
+ set({ game: playCard(g, 0, card), turnDeadline: null });
scheduleAuto();
},
@@ -222,6 +289,9 @@ export const useGameStore = create((set, get) => {
mode: "ai",
seatPlayers: [],
tally: freshTally(),
+ turnDeadline: null,
+ disconnectedSeat: null,
+ reconnectDeadline: null,
});
},
};
diff --git a/src/lib/i18n.tsx b/src/lib/i18n.tsx
index 020bd70..a6c2a3e 100644
--- a/src/lib/i18n.tsx
+++ b/src/lib/i18n.tsx
@@ -196,6 +196,29 @@ const fa: Dict = {
"daily.come": "فردا برگردید",
"rank.label": "لیگ",
+
+ "dc.waiting": "{name} قطع شد — منتظر بازگشت ({s})",
+
+ "profile.titleLabel": "عنوان",
+ "profile.cardStyleLabel": "طرح کارت",
+ "profile.image": "تصویر پروفایل",
+ "profile.upload": "آپلود تصویر",
+ "profile.plan": "اشتراک",
+
+ "plan.pro": "ویژه",
+ "plan.free": "رایگان",
+ "plan.upgrade": "ارتقا به ویژه",
+ "plan.proDesc": "بازی بدون صف، در هر زمان",
+ "plan.active": "اشتراک ویژه فعال است",
+
+ "queue.title": "در صف بازی",
+ "queue.busy": "سرور شلوغ است",
+ "queue.position": "نفر {n} در صف",
+ "queue.skip": "با اشتراک ویژه بدون صف وارد شوید",
+ "queue.upgrade": "ورود سریع (ویژه)",
+
+ "shop.cardstyles": "طرح کارتها",
+ "reward.newTitle": "عنوان جدید",
};
const en: Dict = {
@@ -381,6 +404,29 @@ const en: Dict = {
"daily.come": "Come back tomorrow",
"rank.label": "League",
+
+ "dc.waiting": "{name} disconnected — waiting ({s})",
+
+ "profile.titleLabel": "Title",
+ "profile.cardStyleLabel": "Card style",
+ "profile.image": "Profile image",
+ "profile.upload": "Upload image",
+ "profile.plan": "Plan",
+
+ "plan.pro": "Pro",
+ "plan.free": "Free",
+ "plan.upgrade": "Upgrade to Pro",
+ "plan.proDesc": "Skip the queue, play anytime",
+ "plan.active": "Pro plan active",
+
+ "queue.title": "In queue",
+ "queue.busy": "Server is busy",
+ "queue.position": "{n} in line",
+ "queue.skip": "Go Pro to skip the queue",
+ "queue.upgrade": "Skip queue (Pro)",
+
+ "shop.cardstyles": "Card styles",
+ "reward.newTitle": "New title",
};
const DICTS: Record = { fa, en };
diff --git a/src/lib/online/gamification.ts b/src/lib/online/gamification.ts
index f18b095..c35a9d2 100644
--- a/src/lib/online/gamification.ts
+++ b/src/lib/online/gamification.ts
@@ -4,12 +4,15 @@
import {
AchievementDef,
AchievementUnlock,
+ CardStyleDef,
LeagueInfo,
MatchSummary,
PlayerStats,
RankTier,
RankTierId,
RewardResult,
+ TitleDef,
+ TitleUnlock,
UserProfile,
} from "./types";
@@ -176,6 +179,55 @@ export function achievementProgress(
}
}
+/* ------------------------------ Titles ------------------------------- */
+
+export const TITLES: TitleDef[] = [
+ { id: "novice", nameFa: "تازهکار", nameEn: "Novice", hintFa: "پیشفرض", hintEn: "Default" },
+ { id: "winner", nameFa: "برنده", nameEn: "Winner", hintFa: "۱۰ برد", hintEn: "10 wins" },
+ { id: "kot_master", nameFa: "استاد کُت", nameEn: "Kot Master", hintFa: "۱۰ کُت", hintEn: "10 kots" },
+ { id: "veteran", nameFa: "کهنهکار", nameEn: "Veteran", hintFa: "سطح ۲۰", hintEn: "Level 20" },
+ { id: "champion", nameFa: "قهرمان", nameEn: "Champion", hintFa: "لیگ طلا", hintEn: "Gold league" },
+ { id: "legend", nameFa: "اسطوره", nameEn: "Legend", hintFa: "لیگ استاد", hintEn: "Master league" },
+];
+
+export function titleUnlocked(
+ id: string,
+ stats: PlayerStats,
+ rating: number,
+ level: number
+): boolean {
+ switch (id) {
+ case "novice":
+ return true;
+ case "winner":
+ return stats.wins >= 10;
+ case "kot_master":
+ return stats.kotsFor >= 10;
+ case "veteran":
+ return level >= 20;
+ case "champion":
+ return rating >= tierById("gold").floor;
+ case "legend":
+ return rating >= tierById("master").floor;
+ default:
+ return false;
+ }
+}
+
+/* ---------------------------- Card styles ---------------------------- */
+
+export const CARD_STYLES: CardStyleDef[] = [
+ { id: "classic", nameFa: "کلاسیک", nameEn: "Classic", c1: "#14274f", c2: "#0a142e", accent: "#d4af37", price: 0 },
+ { id: "sapphire", nameFa: "یاقوت کبود", nameEn: "Sapphire", c1: "#0b3a82", c2: "#06173a", accent: "#6aa6ff", price: 800 },
+ { id: "ruby", nameFa: "یاقوت", nameEn: "Ruby", c1: "#7f1d2e", c2: "#2b0a12", accent: "#ff7a90", price: 800 },
+ { id: "emerald", nameFa: "زمرد", nameEn: "Emerald", c1: "#0d6b5e", c2: "#062420", accent: "#2dd4bf", price: 1000 },
+ { id: "royal", nameFa: "سلطنتی", nameEn: "Royal", c1: "#4a1d7f", c2: "#1a0a2e", accent: "#c77dff", price: 1500 },
+];
+
+export function cardStyleById(id: string): CardStyleDef {
+ return CARD_STYLES.find((c) => c.id === id) ?? CARD_STYLES[0];
+}
+
/* ---------------------- Apply a match result ------------------------- */
function applyStats(stats: PlayerStats, summary: MatchSummary): PlayerStats {
@@ -239,6 +291,19 @@ export function applyMatchResult(
const coinsAfter = Math.max(0, coinsBefore + cDelta + achievementCoins);
+ // Titles unlocked by the new state.
+ const ownedTitles = [...(profile.ownedTitles ?? [])];
+ const newTitles: TitleUnlock[] = [];
+ for (const tdef of TITLES) {
+ if (
+ titleUnlocked(tdef.id, stats, ratingAfter, lvl.level) &&
+ !ownedTitles.includes(tdef.id)
+ ) {
+ ownedTitles.push(tdef.id);
+ newTitles.push({ id: tdef.id, nameFa: tdef.nameFa, nameEn: tdef.nameEn });
+ }
+ }
+
const leagueBefore = getLeagueInfo(ratingBefore);
const leagueAfter = getLeagueInfo(ratingAfter);
const tierIndex = (id: RankTierId) => RANK_TIERS.findIndex((t) => t.id === id);
@@ -256,6 +321,7 @@ export function applyMatchResult(
stats,
achievements,
unlocked,
+ ownedTitles,
};
const reward: RewardResult = {
@@ -270,6 +336,7 @@ export function applyMatchResult(
levelAfter: lvl.level,
leveledUp: lvl.level > levelBefore,
newAchievements,
+ newTitles,
promoted,
demoted,
};
diff --git a/src/lib/online/mock-service.ts b/src/lib/online/mock-service.ts
index 29ad613..6d84c38 100644
--- a/src/lib/online/mock-service.ts
+++ b/src/lib/online/mock-service.ts
@@ -2,7 +2,7 @@
// Simulates remote players, friends presence, room invites and matchmaking
// with timers, and computes rewards via gamification.ts.
-import { applyMatchResult, dailyRewardFor } from "./gamification";
+import { CARD_STYLES, applyMatchResult, dailyRewardFor } from "./gamification";
import {
CreateRoomOptions,
MatchmakingOptions,
@@ -94,7 +94,7 @@ function defaultProfile(session: AuthSession): UserProfile {
username: "player_" + session.userId.slice(-4),
displayName: "بازیکن",
avatar: AVATARS[0].id,
- phone: session.method === "phone" ? undefined : undefined,
+ plan: "free",
level: 1,
xp: 0,
coins: 1000,
@@ -110,13 +110,29 @@ function defaultProfile(session: AuthSession): UserProfile {
currentWinStreak: 0,
},
ownedAvatars: [AVATARS[0].id, AVATARS[1].id],
- ownedThemes: ["royal"],
+ ownedCardStyles: ["classic"],
+ ownedTitles: ["novice"],
+ title: "novice",
+ cardStyle: "classic",
achievements: {},
unlocked: [],
createdAt: Date.now(),
};
}
+/** Backfill fields on older persisted profiles so the app never crashes. */
+function migrateProfile(p: UserProfile): UserProfile {
+ return {
+ ...p,
+ plan: p.plan ?? "free",
+ ownedAvatars: p.ownedAvatars ?? [AVATARS[0].id],
+ ownedCardStyles: p.ownedCardStyles ?? ["classic"],
+ ownedTitles: p.ownedTitles ?? ["novice"],
+ title: p.title ?? "novice",
+ cardStyle: p.cardStyle ?? "classic",
+ };
+}
+
function makeFriend(status?: PresenceStatus): Friend {
return {
id: rid("fr"),
@@ -147,6 +163,7 @@ export class MockOnlineService implements OnlineService {
| null = null;
private currentOppRating = 1000;
private lastOtp = "";
+ private mmOpts: MatchmakingOptions | null = null;
private messages: Record = {};
private unread: Record = {};
@@ -159,7 +176,8 @@ export class MockOnlineService implements OnlineService {
constructor() {
this.session = load(LS.session);
- this.profile = load(LS.profile);
+ const loaded = load(LS.profile);
+ this.profile = loaded ? migrateProfile(loaded) : null;
this.messages = load>(LS.chats) ?? {};
this.seedFriends();
}
@@ -282,27 +300,40 @@ export class MockOnlineService implements OnlineService {
async getProfile() {
if (!this.profile) {
- // guest fallback profile (not persisted as session)
- this.profile =
- load(LS.profile) ??
- defaultProfile({
- userId: rid("guest"),
- token: "",
- method: "guest",
- createdAt: Date.now(),
- });
+ const loaded = load(LS.profile);
+ this.profile = loaded
+ ? migrateProfile(loaded)
+ : defaultProfile({
+ userId: rid("guest"),
+ token: "",
+ method: "guest",
+ createdAt: Date.now(),
+ });
this.saveProfile();
}
return this.profile;
}
- async updateProfile(patch: Partial>) {
+ async updateProfile(
+ patch: Partial<
+ Pick
+ >
+ ) {
const p = await this.getProfile();
this.profile = { ...p, ...patch };
this.saveProfile();
return this.profile;
}
+ async upgradePlan(): Promise {
+ const p = await this.getProfile();
+ this.profile = { ...p, plan: "pro", planUntil: Date.now() + 30 * 864e5 };
+ this.saveProfile();
+ // pro players skip the queue immediately
+ if (this.matchmaking.phase === "queued") this.beginSearch();
+ return this.profile;
+ }
+
/* ----------------------------- friends ----------------------------- */
async listFriends() {
@@ -536,6 +567,44 @@ export class MockOnlineService implements OnlineService {
async startMatchmaking(opts: MatchmakingOptions) {
await this.getProfile();
+ this.mmOpts = opts;
+ const me = this.profile!;
+ const pro = me.plan === "pro";
+ const busy = Math.random() < 0.7;
+
+ if (!pro && busy) {
+ // server is busy and the player is on the free plan → queue them
+ let pos = randInt(3, 8);
+ this.matchmaking = {
+ phase: "queued",
+ players: [{ id: me.id, displayName: me.displayName, avatar: me.avatar, level: me.level, rating: me.rating }],
+ elapsedMs: 0,
+ ranked: opts.ranked,
+ stake: opts.stake,
+ queuePosition: pos,
+ };
+ this.emitMM();
+ const tick = () =>
+ this.after(1100, () => {
+ if (this.matchmaking.phase !== "queued") return;
+ pos -= 1;
+ if (pos <= 0) {
+ this.beginSearch();
+ } else {
+ this.matchmaking.queuePosition = pos;
+ this.emitMM();
+ tick();
+ }
+ });
+ tick();
+ return;
+ }
+
+ this.beginSearch();
+ }
+
+ private beginSearch() {
+ const opts = this.mmOpts!;
const me = this.profile!;
this.matchmaking = {
phase: "searching",
@@ -646,12 +715,15 @@ export class MockOnlineService implements OnlineService {
price: 500 + i * 150,
preview: a.emoji,
}));
- const themes: ShopItem[] = [
- { id: "midnight", kind: "theme", nameFa: "تم نیمهشب", nameEn: "Midnight", price: 1200, preview: "#0a142e" },
- { id: "emerald", kind: "theme", nameFa: "تم زمرد", nameEn: "Emerald", price: 1500, preview: "#0d6b6b" },
- { id: "crimson", kind: "theme", nameFa: "تم یاقوت", nameEn: "Crimson", price: 1800, preview: "#7f1d2e" },
- ];
- return [...avatarItems, ...themes];
+ const cardItems: ShopItem[] = CARD_STYLES.filter((c) => c.price > 0).map((c) => ({
+ id: c.id,
+ kind: "cardstyle",
+ nameFa: c.nameFa,
+ nameEn: c.nameEn,
+ price: c.price,
+ preview: c.accent,
+ }));
+ return [...avatarItems, ...cardItems];
}
async buyItem(id: string) {
@@ -660,7 +732,7 @@ export class MockOnlineService implements OnlineService {
const item = items.find((i) => i.id === id);
if (!item) return { ok: false, messageFa: "آیتم یافت نشد", messageEn: "Item not found" };
const owned =
- item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedThemes.includes(id);
+ item.kind === "avatar" ? p.ownedAvatars.includes(id) : p.ownedCardStyles.includes(id);
if (owned) return { ok: false, messageFa: "قبلاً خریداری شده", messageEn: "Already owned" };
if (p.coins < item.price)
return { ok: false, messageFa: "سکه کافی نیست", messageEn: "Not enough coins" };
@@ -669,7 +741,8 @@ export class MockOnlineService implements OnlineService {
...p,
coins: p.coins - item.price,
ownedAvatars: item.kind === "avatar" ? [...p.ownedAvatars, id] : p.ownedAvatars,
- ownedThemes: item.kind === "theme" ? [...p.ownedThemes, id] : p.ownedThemes,
+ ownedCardStyles:
+ item.kind === "cardstyle" ? [...p.ownedCardStyles, id] : p.ownedCardStyles,
};
this.saveProfile();
return { ok: true, profile: this.profile, messageFa: "خرید انجام شد", messageEn: "Purchased" };
diff --git a/src/lib/online/service.ts b/src/lib/online/service.ts
index e17cb6f..b0fd2c9 100644
--- a/src/lib/online/service.ts
+++ b/src/lib/online/service.ts
@@ -44,7 +44,12 @@ export interface OnlineService {
/* ----- profile ----- */
getProfile(): Promise;
- updateProfile(patch: Partial>): Promise;
+ updateProfile(
+ patch: Partial<
+ Pick
+ >
+ ): Promise;
+ upgradePlan(): Promise;
/* ----- friends ----- */
listFriends(): Promise;
diff --git a/src/lib/online/types.ts b/src/lib/online/types.ts
index f5cf239..3d374bd 100644
--- a/src/lib/online/types.ts
+++ b/src/lib/online/types.ts
@@ -28,22 +28,35 @@ export interface PlayerStats {
currentWinStreak: number;
}
+export type PlanId = "free" | "pro";
+
export interface UserProfile {
id: string;
username: string;
displayName: string;
avatar: string; // avatar id (see AVATARS)
+ avatarImage?: string; // custom uploaded image (data URL); overrides avatar
phone?: string;
email?: string;
+ plan: PlanId;
+ /** epoch ms when a pro plan expires (mock: far future) */
+ planUntil?: number;
+
level: number;
xp: number; // xp within the current level
coins: number;
rating: number; // competitive rating
stats: PlayerStats;
+
+ // cosmetics
ownedAvatars: string[];
- ownedThemes: string[];
+ ownedCardStyles: string[];
+ ownedTitles: string[];
+ title: string | null; // equipped title id
+ cardStyle: string; // equipped card-back style id
+
achievements: Record; // achievementId -> progress count
unlocked: string[]; // achievementId list already unlocked
@@ -98,6 +111,27 @@ export interface AchievementView extends AchievementDef {
unlocked: boolean;
}
+/* ----------------------- Titles & card styles ------------------------ */
+
+export interface TitleDef {
+ id: string;
+ nameFa: string;
+ nameEn: string;
+ /** how it's unlocked (for display) */
+ hintFa: string;
+ hintEn: string;
+}
+
+export interface CardStyleDef {
+ id: string;
+ nameFa: string;
+ nameEn: string;
+ c1: string; // back gradient start
+ c2: string; // back gradient end
+ accent: string; // pattern/border accent
+ price: number; // 0 = free/default
+}
+
/* ------------------------------ Friends ------------------------------ */
export type PresenceStatus = "online" | "offline" | "in-game";
@@ -152,6 +186,7 @@ export interface Room {
export type MatchmakingPhase =
| "idle"
+ | "queued" // server busy, free plan waiting in line
| "searching"
| "found"
| "ready"
@@ -170,6 +205,8 @@ export interface MatchmakingState {
elapsedMs: number;
ranked: boolean;
stake: number;
+ /** position in the queue when phase === "queued" */
+ queuePosition?: number;
}
/* ------------------------- Match + Rewards --------------------------- */
@@ -193,6 +230,12 @@ export interface AchievementUnlock {
coinReward: number;
}
+export interface TitleUnlock {
+ id: string;
+ nameFa: string;
+ nameEn: string;
+}
+
export interface RewardResult {
ratingBefore: number;
ratingAfter: number;
@@ -205,6 +248,7 @@ export interface RewardResult {
levelAfter: number;
leveledUp: boolean;
newAchievements: AchievementUnlock[];
+ newTitles: TitleUnlock[];
promoted: boolean;
demoted: boolean;
}
@@ -223,7 +267,7 @@ export interface LeaderboardEntry {
/* ------------------------------- Shop -------------------------------- */
-export type ShopItemKind = "avatar" | "theme";
+export type ShopItemKind = "avatar" | "cardstyle";
export interface ShopItem {
id: string;
diff --git a/src/lib/session-store.ts b/src/lib/session-store.ts
index 42b5294..3bb754d 100644
--- a/src/lib/session-store.ts
+++ b/src/lib/session-store.ts
@@ -21,7 +21,10 @@ interface SessionStore {
signInGoogle: () => Promise;
signOut: () => Promise;
- updateProfile: (patch: Partial>) => Promise;
+ updateProfile: (
+ patch: Partial>
+ ) => Promise;
+ upgradePlan: () => Promise;
}
export const useSessionStore = create((set, get) => ({
@@ -84,4 +87,9 @@ export const useSessionStore = create((set, get) => ({
const profile = await getService().updateProfile(patch);
set({ profile });
},
+
+ upgradePlan: async () => {
+ const profile = await getService().upgradePlan();
+ set({ profile });
+ },
}));