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
@@ -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`,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user