Turn timer + auto-play, disconnect/reconnect, cosmetics, queue & paid plan
- Turn timer (20s) for play/trump; system auto-plays a smart move on timeout - Disconnect handling (mock): wait-for-return countdown, system covers turns - Cosmetics: titles, card-back styles, custom profile-image upload, badges; pickers in Profile; shop sells card styles; reward modal shows new titles - Paid plan (pro): free players queue when server busy, pro skips; upgrade flow - OnlineService extended (upgradePlan, richer profile patch); mock implements queue + plans; gamification adds TITLES + CARD_STYLES Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
+5
-1
@@ -87,8 +87,12 @@ function baseProfile(): UserProfile {
|
||||
games: 0, wins: 0, losses: 0, kotsFor: 0, kotsAgainst: 0,
|
||||
tricks: 0, bestWinStreak: 0, currentWinStreak: 0,
|
||||
},
|
||||
plan: "free",
|
||||
ownedAvatars: ["a-fox"],
|
||||
ownedThemes: ["royal"],
|
||||
ownedCardStyles: ["classic"],
|
||||
ownedTitles: ["novice"],
|
||||
title: "novice",
|
||||
cardStyle: "classic",
|
||||
achievements: {},
|
||||
unlocked: [],
|
||||
createdAt: 0,
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Crown, LogOut } from "lucide-react";
|
||||
import { useGameStore } from "@/lib/game-store";
|
||||
import { Crown, LogOut, WifiOff } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { TURN_MS, useGameStore } from "@/lib/game-store";
|
||||
import { legalMoves } from "@/lib/hokm/engine";
|
||||
import { sortHand } from "@/lib/hokm/deck";
|
||||
import {
|
||||
@@ -15,9 +16,22 @@ import {
|
||||
teamOf,
|
||||
} from "@/lib/hokm/types";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { useSessionStore } from "@/lib/session-store";
|
||||
import { cardStyleById } from "@/lib/online/gamification";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { PlayingCard } from "./PlayingCard";
|
||||
|
||||
function useCountdown(deadline: number | null) {
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
useEffect(() => {
|
||||
if (deadline == null) return;
|
||||
const id = setInterval(() => setNow(Date.now()), 250);
|
||||
return () => clearInterval(id);
|
||||
}, [deadline]);
|
||||
if (deadline == null) return null;
|
||||
return Math.max(0, Math.ceil((deadline - now) / 1000));
|
||||
}
|
||||
|
||||
export function GameTable({ onExit }: { onExit?: () => void } = {}) {
|
||||
const game = useGameStore((s) => s.game);
|
||||
const reset = useGameStore((s) => s.reset);
|
||||
@@ -73,6 +87,8 @@ export function GameTable({ onExit }: { onExit?: () => void } = {}) {
|
||||
|
||||
{/* Turn indicator */}
|
||||
<TurnIndicator />
|
||||
<TurnTimer />
|
||||
<DisconnectBanner />
|
||||
|
||||
{/* Overlays */}
|
||||
<AnimatePresence>
|
||||
@@ -220,6 +236,9 @@ function OpponentHand({
|
||||
horizontal?: boolean;
|
||||
}) {
|
||||
const count = useGameStore((s) => s.game.players[seat].hand.length);
|
||||
const styleId = useSessionStore((s) => s.profile?.cardStyle ?? "classic");
|
||||
const cs = cardStyleById(styleId);
|
||||
const back = { c1: cs.c1, c2: cs.c2, accent: cs.accent };
|
||||
const cards = Array.from({ length: count });
|
||||
return (
|
||||
<div
|
||||
@@ -234,7 +253,7 @@ function OpponentHand({
|
||||
key={i}
|
||||
style={horizontal ? { marginInlineStart: i === 0 ? 0 : -34 } : { marginTop: i === 0 ? 0 : -48 }}
|
||||
>
|
||||
<PlayingCard faceDown size="sm" />
|
||||
<PlayingCard faceDown size="sm" back={back} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -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 (
|
||||
<div className="absolute bottom-[190px] left-1/2 -translate-x-1/2 z-30 w-40 text-center">
|
||||
<span
|
||||
className={cn(
|
||||
"block text-sm font-black tabular-nums mb-1",
|
||||
danger ? "text-rose-300 animate-pulse" : "text-gold-300"
|
||||
)}
|
||||
>
|
||||
{secs}
|
||||
</span>
|
||||
<div className="h-1.5 rounded-full bg-navy-900/70 overflow-hidden gold-border">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
width: `${pct * 100}%`,
|
||||
background: danger
|
||||
? "#fb7185"
|
||||
: "linear-gradient(90deg, var(--gold-500), var(--gold-300))",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<AnimatePresence>
|
||||
{seat != null && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40"
|
||||
>
|
||||
<div className="glass rounded-2xl px-4 py-3 flex items-center gap-2.5 text-sm">
|
||||
<WifiOff className="size-5 text-rose-300 animate-pulse" />
|
||||
<span className="text-cream/90">
|
||||
{t("dc.waiting", { name: name ?? "", s: secs ?? 0 })}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------ Overlays ------------------------------ */
|
||||
|
||||
function Backdrop({ children }: { children: React.ReactNode }) {
|
||||
|
||||
@@ -11,12 +11,19 @@ const SIZES = {
|
||||
|
||||
export type CardSize = keyof typeof SIZES;
|
||||
|
||||
interface CardBack {
|
||||
c1: string;
|
||||
c2: string;
|
||||
accent: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
card?: Card;
|
||||
faceDown?: boolean;
|
||||
size?: CardSize;
|
||||
className?: string;
|
||||
dimmed?: boolean;
|
||||
back?: CardBack;
|
||||
}
|
||||
|
||||
export function PlayingCard({
|
||||
@@ -25,18 +32,34 @@ export function PlayingCard({
|
||||
size = "md",
|
||||
className,
|
||||
dimmed,
|
||||
back,
|
||||
}: Props) {
|
||||
const s = SIZES[size];
|
||||
|
||||
if (faceDown || !card) {
|
||||
const styled = back
|
||||
? {
|
||||
width: s.w,
|
||||
height: s.h,
|
||||
borderRadius: 8,
|
||||
background: `repeating-linear-gradient(45deg, ${back.accent}40 0 6px, transparent 6px 12px), linear-gradient(160deg, ${back.c1}, ${back.c2})`,
|
||||
border: `1px solid ${back.accent}80`,
|
||||
boxShadow: "0 6px 14px rgba(0,0,0,0.4)",
|
||||
}
|
||||
: { width: s.w, height: s.h };
|
||||
return (
|
||||
<div
|
||||
className={cn("card-back rounded-lg shrink-0", className)}
|
||||
style={{ width: s.w, height: s.h }}
|
||||
className={cn(!back && "card-back", "rounded-lg shrink-0", className)}
|
||||
style={styled}
|
||||
aria-hidden
|
||||
>
|
||||
<div className="h-full w-full rounded-lg flex items-center justify-center">
|
||||
<div className="text-gold-500/70 text-lg font-bold">✦</div>
|
||||
<div
|
||||
className={cn("text-lg font-bold", !back && "text-gold-500/70")}
|
||||
style={back ? { color: `${back.accent}cc` } : undefined}
|
||||
>
|
||||
✦
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { avatarEmoji } from "@/lib/online/types";
|
||||
import { cn } from "@/lib/cn";
|
||||
|
||||
export function Avatar({
|
||||
id,
|
||||
image,
|
||||
size = 40,
|
||||
className,
|
||||
}: {
|
||||
id: string;
|
||||
image?: string | null;
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
if (image) {
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
return (
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
width={size}
|
||||
height={size}
|
||||
className={cn("rounded-full object-cover", className)}
|
||||
style={{ width: size, height: size }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={cn("inline-flex items-center justify-center", className)}
|
||||
style={{ width: size, height: size, fontSize: size * 0.62 }}
|
||||
>
|
||||
{avatarEmoji(id)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -107,6 +107,28 @@ export function PostMatchRewardsModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{reward.newTitles.length > 0 && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{reward.newTitles.map((tt, i) => (
|
||||
<motion.div
|
||||
key={tt.id}
|
||||
initial={{ opacity: 0, x: locale === "fa" ? 20 : -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.7 + i * 0.12 }}
|
||||
className="glass rounded-xl px-3 py-2 flex items-center gap-2 text-start"
|
||||
>
|
||||
<span className="text-xl">🏷️</span>
|
||||
<span className="flex-1">
|
||||
<span className="block text-[10px] text-gold-400">{t("reward.newTitle")}</span>
|
||||
<span className="block text-sm text-cream font-semibold">
|
||||
{locale === "fa" ? tt.nameFa : tt.nameEn}
|
||||
</span>
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button onClick={onClose} className="btn-gold w-full rounded-xl py-3 mt-6">
|
||||
{t("reward.continue")}
|
||||
</button>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<span className="size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center text-xl">
|
||||
{avatarEmoji(profile.avatar)}
|
||||
<span className="relative size-9 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
|
||||
<Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
|
||||
</span>
|
||||
<span className="text-start leading-tight">
|
||||
<span className="block text-sm font-bold text-cream max-w-24 truncate">
|
||||
<span className="flex items-center gap-1 text-sm font-bold text-cream max-w-28 truncate">
|
||||
{profile.displayName}
|
||||
{profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
|
||||
</span>
|
||||
<span className="block text-[10px] text-gold-400/80">
|
||||
{t("common.level")} {profile.level}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Crown, Loader2 } from "lucide-react";
|
||||
import { ScreenShell } from "@/components/online/ScreenHeader";
|
||||
import { useGameStore } from "@/lib/game-store";
|
||||
import { useOnlineStore } from "@/lib/online-store";
|
||||
import { useSessionStore } from "@/lib/session-store";
|
||||
import { useUIStore } from "@/lib/ui-store";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { getService } from "@/lib/online/service";
|
||||
@@ -15,10 +16,12 @@ export function MatchmakingScreen() {
|
||||
const mm = useOnlineStore((s) => s.matchmaking);
|
||||
const cancelMatchmaking = useOnlineStore((s) => s.cancelMatchmaking);
|
||||
const newOnlineMatch = useGameStore((s) => s.newOnlineMatch);
|
||||
const upgradePlan = useSessionStore((s) => s.upgradePlan);
|
||||
const goGame = useUIStore((s) => s.goGame);
|
||||
const go = useUIStore((s) => s.go);
|
||||
|
||||
const ready = mm.phase === "ready";
|
||||
const queued = mm.phase === "queued";
|
||||
const slots = [0, 1, 2, 3];
|
||||
|
||||
const cancel = async () => {
|
||||
@@ -42,6 +45,39 @@ export function MatchmakingScreen() {
|
||||
goGame("home");
|
||||
};
|
||||
|
||||
if (queued) {
|
||||
return (
|
||||
<ScreenShell>
|
||||
<div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
|
||||
<div className="text-5xl mb-4">⏳</div>
|
||||
<h1 className="gold-text text-2xl font-black">{t("queue.title")}</h1>
|
||||
<p className="text-cream/60 text-sm mt-1">{t("queue.busy")}</p>
|
||||
<div className="my-6 text-7xl font-black gold-text tabular-nums">
|
||||
{mm.queuePosition ?? 0}
|
||||
</div>
|
||||
<p className="text-cream/70">{t("queue.position", { n: mm.queuePosition ?? 0 })}</p>
|
||||
|
||||
<div className="mt-9 flex flex-col items-center gap-3 w-full max-w-xs">
|
||||
<button
|
||||
onClick={() => upgradePlan()}
|
||||
className="btn-gold w-full rounded-xl py-3 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Crown className="size-4" />
|
||||
{t("queue.upgrade")}
|
||||
</button>
|
||||
<span className="text-[11px] text-cream/45">{t("queue.skip")}</span>
|
||||
<button
|
||||
onClick={cancel}
|
||||
className="glass rounded-xl px-6 py-2.5 text-cream/70 hover:text-cream"
|
||||
>
|
||||
{t("mm.cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ScreenShell>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScreenShell>
|
||||
<div className="flex flex-col items-center justify-center min-h-[80dvh] text-center">
|
||||
|
||||
@@ -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<HTMLInputElement>(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<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScreenShell>
|
||||
<ScreenHeader title={t("profile.title")} />
|
||||
|
||||
{/* identity */}
|
||||
<div className="glass rounded-3xl p-5 text-center">
|
||||
<div className="size-20 mx-auto rounded-2xl bg-navy-900 gold-border flex items-center justify-center text-4xl">
|
||||
{avatarEmoji(profile.avatar)}
|
||||
<div className="relative size-20 mx-auto">
|
||||
<div className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
|
||||
<Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
|
||||
</div>
|
||||
<button
|
||||
onClick={() => fileRef.current?.click()}
|
||||
className="absolute -bottom-1 ltr:-right-1 rtl:-left-1 btn-gold rounded-full p-1.5"
|
||||
title={t("profile.upload")}
|
||||
>
|
||||
<Upload className="size-3.5" />
|
||||
</button>
|
||||
<input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
|
||||
</div>
|
||||
|
||||
{titleName && (
|
||||
<div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
|
||||
)}
|
||||
|
||||
{editing ? (
|
||||
<div className="mt-3 flex items-center justify-center gap-2">
|
||||
<input
|
||||
@@ -72,6 +104,23 @@ export function ProfileScreen() {
|
||||
<div className="mt-4">
|
||||
<XpBar level={profile.level} xp={profile.xp} />
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{profile.plan === "pro" ? (
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
|
||||
<Crown className="size-3.5 fill-gold-500" />
|
||||
{t("plan.active")}
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={upgradePlan}
|
||||
className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
|
||||
>
|
||||
<Crown className="size-3.5" />
|
||||
{t("plan.upgrade")} — {t("plan.proDesc")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* avatar picker */}
|
||||
@@ -93,6 +142,57 @@ export function ProfileScreen() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* title picker */}
|
||||
<div className="glass rounded-2xl p-4 mt-4">
|
||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
|
||||
<button
|
||||
key={tt.id}
|
||||
onClick={() => updateProfile({ title: tt.id })}
|
||||
className={cn(
|
||||
"rounded-lg px-3 py-1.5 text-sm transition",
|
||||
profile.title === tt.id
|
||||
? "btn-gold"
|
||||
: "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
|
||||
)}
|
||||
>
|
||||
{locale === "fa" ? tt.nameFa : tt.nameEn}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* card style picker */}
|
||||
<div className="glass rounded-2xl p-4 mt-4">
|
||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardStyleLabel")}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CARD_STYLES.filter((c) => profile.ownedCardStyles.includes(c.id)).map((c) => (
|
||||
<button
|
||||
key={c.id}
|
||||
onClick={() => updateProfile({ cardStyle: c.id })}
|
||||
className={cn(
|
||||
"rounded-xl p-1.5 flex items-center gap-2 transition",
|
||||
profile.cardStyle === c.id
|
||||
? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
|
||||
: "bg-navy-900/70 border border-transparent hover:bg-navy-800"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="w-7 h-10 rounded-md border"
|
||||
style={{
|
||||
borderColor: `${c.accent}80`,
|
||||
background: `repeating-linear-gradient(45deg, ${c.accent}55 0 4px, transparent 4px 8px), ${c.c2}`,
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-cream/80 pe-1">
|
||||
{locale === "fa" ? c.nameFa : c.nameEn}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* stats */}
|
||||
<div className="glass rounded-2xl p-4 mt-4">
|
||||
<h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>
|
||||
|
||||
@@ -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 (
|
||||
<ScreenShell>
|
||||
@@ -64,9 +64,9 @@ export function ShopScreen() {
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title={t("shop.themes")}>
|
||||
<Section title={t("shop.cardstyles")}>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{themes.map((item) => (
|
||||
{cardstyles.map((item) => (
|
||||
<ItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
@@ -74,8 +74,11 @@ export function ShopScreen() {
|
||||
onBuy={() => buy(item)}
|
||||
preview={
|
||||
<span
|
||||
className="size-10 rounded-xl border border-white/20"
|
||||
style={{ background: item.preview }}
|
||||
className="w-8 h-11 rounded-md border"
|
||||
style={{
|
||||
borderColor: `${item.preview}80`,
|
||||
background: `repeating-linear-gradient(45deg, ${item.preview}55 0 4px, transparent 4px 8px), #0a142e`,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
+80
-10
@@ -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<GameStore>((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<GameStore>((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<GameStore>((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<GameStore>((set, get) => {
|
||||
break;
|
||||
|
||||
default:
|
||||
set({ turnDeadline: null });
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -162,6 +220,9 @@ export const useGameStore = create<GameStore>((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<GameStore>((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<GameStore>((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<GameStore>((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<GameStore>((set, get) => {
|
||||
mode: "ai",
|
||||
seatPlayers: [],
|
||||
tally: freshTally(),
|
||||
turnDeadline: null,
|
||||
disconnectedSeat: null,
|
||||
reconnectDeadline: null,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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<Locale, Dict> = { fa, en };
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
@@ -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<string, ChatMessage[]> = {};
|
||||
private unread: Record<string, number> = {};
|
||||
@@ -159,7 +176,8 @@ export class MockOnlineService implements OnlineService {
|
||||
|
||||
constructor() {
|
||||
this.session = load<AuthSession>(LS.session);
|
||||
this.profile = load<UserProfile>(LS.profile);
|
||||
const loaded = load<UserProfile>(LS.profile);
|
||||
this.profile = loaded ? migrateProfile(loaded) : null;
|
||||
this.messages = load<Record<string, ChatMessage[]>>(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<UserProfile>(LS.profile) ??
|
||||
defaultProfile({
|
||||
userId: rid("guest"),
|
||||
token: "",
|
||||
method: "guest",
|
||||
createdAt: Date.now(),
|
||||
});
|
||||
const loaded = load<UserProfile>(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<Pick<UserProfile, "displayName" | "avatar">>) {
|
||||
async updateProfile(
|
||||
patch: Partial<
|
||||
Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">
|
||||
>
|
||||
) {
|
||||
const p = await this.getProfile();
|
||||
this.profile = { ...p, ...patch };
|
||||
this.saveProfile();
|
||||
return this.profile;
|
||||
}
|
||||
|
||||
async upgradePlan(): Promise<UserProfile> {
|
||||
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" };
|
||||
|
||||
@@ -44,7 +44,12 @@ export interface OnlineService {
|
||||
|
||||
/* ----- profile ----- */
|
||||
getProfile(): Promise<UserProfile>;
|
||||
updateProfile(patch: Partial<Pick<UserProfile, "displayName" | "avatar">>): Promise<UserProfile>;
|
||||
updateProfile(
|
||||
patch: Partial<
|
||||
Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">
|
||||
>
|
||||
): Promise<UserProfile>;
|
||||
upgradePlan(): Promise<UserProfile>;
|
||||
|
||||
/* ----- friends ----- */
|
||||
listFriends(): Promise<Friend[]>;
|
||||
|
||||
+46
-2
@@ -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<string, number>; // 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;
|
||||
|
||||
@@ -21,7 +21,10 @@ interface SessionStore {
|
||||
signInGoogle: () => Promise<void>;
|
||||
signOut: () => Promise<void>;
|
||||
|
||||
updateProfile: (patch: Partial<Pick<UserProfile, "displayName" | "avatar">>) => Promise<void>;
|
||||
updateProfile: (
|
||||
patch: Partial<Pick<UserProfile, "displayName" | "avatar" | "avatarImage" | "title" | "cardStyle">>
|
||||
) => Promise<void>;
|
||||
upgradePlan: () => Promise<void>;
|
||||
}
|
||||
|
||||
export const useSessionStore = create<SessionStore>((set, get) => ({
|
||||
@@ -84,4 +87,9 @@ export const useSessionStore = create<SessionStore>((set, get) => ({
|
||||
const profile = await getService().updateProfile(patch);
|
||||
set({ profile });
|
||||
},
|
||||
|
||||
upgradePlan: async () => {
|
||||
const profile = await getService().upgradePlan();
|
||||
set({ profile });
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user