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