UNO refactor (stage 1): emerald felt theme + kit + full Home redesign
- Theme: retint to lit emerald card-table felt + gold (body radial felt, green glass panels). New component kit in globals.css: glossy chunky 3D btn-gold + btn-green, .panel, .ribbon. Card backs pinned to classic navy. - Home fully redesigned UNO-style: nav rail + branding + two big 3D play buttons (gold online / green-glass vs-computer) + speed toggle; dropped the redundant 4 tiles (the rail covers them). Fits landscape (short: variants). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
+64
-26
@@ -7,26 +7,34 @@
|
||||
@custom-variant tall (@media (min-height: 700px));
|
||||
|
||||
/*
|
||||
FlatRender Hokm — "Persian Luxury" theme.
|
||||
Deep navy/teal table, gold filigree accents, geometric motifs.
|
||||
Barg-e Vasat — "Emerald Felt" theme (UNO-style, on-brand).
|
||||
Lit emerald card-table felt + gold; dark-green glass panels, glossy 3D buttons.
|
||||
The `navy-*` token names are kept (used app-wide) but now map to deep GREEN
|
||||
surfaces — retinting here recolors every surface cohesively.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--navy-950: #060c1f;
|
||||
--navy-900: #0a142e;
|
||||
--navy-800: #0e1c3f;
|
||||
--navy-700: #14274f;
|
||||
--teal-700: #0d6b6b;
|
||||
--navy-950: #062a18; /* deepest surface */
|
||||
--navy-900: #0a3b25; /* panel base */
|
||||
--navy-800: #114e2e; /* raised surface */
|
||||
--navy-700: #1c7a4a; /* accent surface */
|
||||
--teal-700: #0d6b5c;
|
||||
--teal-500: #14b8a6;
|
||||
--teal-400: #2dd4bf;
|
||||
--gold-600: #b8860b;
|
||||
--gold-600: #9a6f0d;
|
||||
--gold-500: #d4af37;
|
||||
--gold-400: #e6c659;
|
||||
--gold-300: #f1da8a;
|
||||
--cream: #f5ecd6;
|
||||
--cream: #f6efdd;
|
||||
|
||||
--felt-center: #1c7a4a; /* lit table center */
|
||||
--felt-mid: #114e2e;
|
||||
--felt-edge: #07301c;
|
||||
--green-btn: #2faa55;
|
||||
--green-btn-lo: #1c6e36;
|
||||
|
||||
--background: var(--navy-950);
|
||||
--foreground: #eef2f8;
|
||||
--foreground: #f3f7ef;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -101,9 +109,8 @@ body {
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1200px 800px at 50% -10%, rgba(20, 184, 166, 0.12), transparent 60%),
|
||||
radial-gradient(900px 700px at 50% 120%, rgba(212, 175, 55, 0.08), transparent 55%),
|
||||
var(--navy-950);
|
||||
radial-gradient(120% 90% at 50% 18%, var(--felt-center) 0%, var(--felt-mid) 52%, var(--felt-edge) 100%),
|
||||
radial-gradient(900px 700px at 50% 120%, rgba(212, 175, 55, 0.10), transparent 55%);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -139,25 +146,56 @@ body {
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgba(10, 20, 46, 0.72);
|
||||
background: rgba(6, 42, 25, 0.78);
|
||||
backdrop-filter: blur(14px);
|
||||
border: 1px solid rgba(212, 175, 55, 0.18);
|
||||
border: 1px solid rgba(212, 175, 55, 0.22);
|
||||
}
|
||||
|
||||
.btn-gold {
|
||||
background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
|
||||
color: #2a1f04;
|
||||
/* ── UNO-style component kit ────────────────────────────────────────── */
|
||||
|
||||
/* Chunky rounded panel: dark-green glass, gold hairline, inner top highlight. */
|
||||
.panel {
|
||||
background: rgba(6, 42, 25, 0.82);
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.30);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.34);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Banner ribbon header (e.g. «زندگیِ حکم»). */
|
||||
.ribbon {
|
||||
background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
|
||||
border: 1.5px solid var(--gold-500);
|
||||
color: var(--gold-300);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
|
||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.btn-gold:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.05);
|
||||
box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* Glossy, chunky 3D gold button (own solid underside — no press-3d needed). */
|
||||
.btn-gold {
|
||||
background: linear-gradient(180deg, var(--gold-300), var(--gold-400) 45%, var(--gold-500));
|
||||
color: #2a1f04;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 6px 0 0 var(--gold-600), 0 9px 16px rgba(0, 0, 0, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.55);
|
||||
transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
|
||||
}
|
||||
.btn-gold:hover { filter: brightness(1.04); }
|
||||
.btn-gold:active {
|
||||
transform: translateY(0);
|
||||
transform: translateY(4px);
|
||||
box-shadow: 0 2px 0 0 var(--gold-600), 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Glossy, chunky 3D green button (UNO secondary actions). */
|
||||
.btn-green {
|
||||
background: linear-gradient(180deg, #6bd98a, var(--green-btn));
|
||||
color: #08220f;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 6px 0 0 var(--green-btn-lo), 0 9px 16px rgba(0, 0, 0, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.4);
|
||||
transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
|
||||
}
|
||||
.btn-green:hover { filter: brightness(1.04); }
|
||||
.btn-green:active {
|
||||
transform: translateY(4px);
|
||||
box-shadow: 0 2px 0 0 var(--green-btn-lo), 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Card face */
|
||||
@@ -169,7 +207,7 @@ body {
|
||||
.card-back {
|
||||
background:
|
||||
repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.22) 0 6px, transparent 6px 12px),
|
||||
linear-gradient(160deg, var(--navy-700), var(--navy-900));
|
||||
linear-gradient(160deg, #14274f, #0a142e);
|
||||
border: 1px solid rgba(212, 175, 55, 0.45);
|
||||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(212, 175, 55, 0.25);
|
||||
}
|
||||
|
||||
+47
-138
@@ -9,10 +9,6 @@ import {
|
||||
LogIn,
|
||||
LogOut,
|
||||
Play,
|
||||
ShoppingBag,
|
||||
Trophy,
|
||||
User,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Zap } from "lucide-react";
|
||||
@@ -27,6 +23,7 @@ import { SPEED_TARGET_SCORE } from "@/lib/online/gamification";
|
||||
import { SUIT_SYMBOL } from "@/lib/hokm/types";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { TopBar } from "./online/TopBar";
|
||||
import { NavRail } from "./online/NavRail";
|
||||
|
||||
export function HomeScreen() {
|
||||
const { t, toggle, locale } = useI18n();
|
||||
@@ -73,77 +70,79 @@ export function HomeScreen() {
|
||||
const Chevron = locale === "fa" ? ChevronLeft : ChevronRight;
|
||||
|
||||
return (
|
||||
<main className="persian-pattern relative h-dvh w-full overflow-y-auto landscape:overflow-hidden overscroll-contain safe-top safe-x safe-bottom">
|
||||
<main className="persian-pattern relative h-dvh w-full overflow-hidden overscroll-contain safe-top safe-x flex flex-col landscape:flex-row">
|
||||
<FloatingSuits />
|
||||
<div className="relative z-10 mx-auto w-full max-w-md landscape:max-w-5xl p-4 sm:p-6 flex flex-col min-h-dvh landscape:min-h-0 landscape:h-dvh">
|
||||
<div className="pt-1">
|
||||
|
||||
{/* content */}
|
||||
<div className="relative z-10 flex-1 min-h-0 flex flex-col p-4 sm:p-5">
|
||||
<TopBar />
|
||||
</div>
|
||||
|
||||
{/* content: single column (portrait) → two columns (landscape) */}
|
||||
<div className="flex-1 flex flex-col min-h-0 landscape:flex-row landscape:items-stretch landscape:justify-center landscape:gap-6">
|
||||
|
||||
{/* ===== column A: branding + play actions ===== */}
|
||||
<div className="flex flex-col landscape:flex-1 landscape:max-w-md landscape:justify-center landscape:min-h-0">
|
||||
|
||||
{/* logo */}
|
||||
{/* hero: branding + play actions (stacked portrait, side-by-side landscape) */}
|
||||
<div className="flex-1 min-h-0 flex flex-col items-center justify-center gap-6 short:gap-4 landscape:flex-row landscape:gap-10">
|
||||
{/* branding */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-col items-center mt-4 mb-5 sm:mt-6 sm:mb-7 landscape:mt-0 landscape:mb-3"
|
||||
className="flex flex-col items-center landscape:items-start"
|
||||
>
|
||||
{/* logo + title on one row (no overflow); subtitle beneath the title */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="size-12 sm:size-14 short:size-10 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
|
||||
<span className="gold-text text-3xl short:text-2xl font-black leading-none">♠</span>
|
||||
<div className="size-14 sm:size-16 short:size-11 shrink-0 rounded-2xl gold-border flex items-center justify-center bg-navy-900 shadow-lg">
|
||||
<span className="gold-text text-3xl sm:text-4xl short:text-2xl font-black leading-none">♠</span>
|
||||
</div>
|
||||
<div className="text-start">
|
||||
<h1 className="gold-text text-3xl sm:text-4xl short:text-2xl font-black tracking-tight leading-none">
|
||||
<h1 className="gold-text text-4xl sm:text-5xl short:text-3xl font-black tracking-tight leading-none">
|
||||
{t("app.title")}
|
||||
</h1>
|
||||
<p className="text-cream/60 mt-1.5 text-xs sm:text-sm leading-none">{t("app.subtitle")}</p>
|
||||
<p className="text-cream/65 mt-2 text-sm leading-none">{t("app.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 short:mt-1.5">
|
||||
<div className="mt-4 short:mt-2">
|
||||
<OnlinePlayers />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* HERO: play online */}
|
||||
<div className="relative">
|
||||
{/* glow */}
|
||||
<div className="pointer-events-none absolute -inset-2 rounded-[28px] bg-gold-500/25 blur-2xl" />
|
||||
<motion.button
|
||||
{/* play actions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 14 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05 }}
|
||||
whileTap={{ scale: 0.985 }}
|
||||
onClick={playOnline}
|
||||
className="press-3d btn-gold relative w-full rounded-3xl px-5 py-4 sm:py-5 short:py-2.5 flex items-center gap-4 short:gap-3 text-start"
|
||||
className="w-full max-w-sm landscape:max-w-xs flex flex-col gap-3 short:gap-2"
|
||||
>
|
||||
<span className="grid size-12 sm:size-14 short:size-10 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
|
||||
<Play className="size-7 short:size-5" fill="currentColor" />
|
||||
<button
|
||||
onClick={playOnline}
|
||||
className="btn-gold w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start"
|
||||
>
|
||||
<span className="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
|
||||
<Play className="size-6 short:size-5" fill="currentColor" />
|
||||
</span>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="block text-xl sm:text-2xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
|
||||
<span className="block text-xl short:text-lg font-black text-[#2a1f04] leading-tight truncate">
|
||||
{t("menu.online")}
|
||||
</span>
|
||||
<span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
|
||||
</span>
|
||||
<Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
|
||||
</motion.button>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* vs computer */}
|
||||
<div className="mt-3 short:mt-2">
|
||||
<PrimaryCard
|
||||
icon={<Bot className="size-6" />}
|
||||
title={t("menu.vsComputer")}
|
||||
desc={speed ? t("speed.desc") : t("menu.vsComputerDesc")}
|
||||
<button
|
||||
onClick={playVsComputer}
|
||||
/>
|
||||
className="press-3d panel w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start text-cream"
|
||||
>
|
||||
<span className="grid size-12 short:size-9 shrink-0 place-items-center rounded-2xl bg-teal-500/15 text-teal-300">
|
||||
<Bot className="size-6 short:size-5" />
|
||||
</span>
|
||||
<span className="flex-1 min-w-0">
|
||||
<span className="block text-lg short:text-base font-black leading-tight truncate">
|
||||
{t("menu.vsComputer")}
|
||||
</span>
|
||||
<span className="block text-xs text-cream/55 truncate">
|
||||
{speed ? t("speed.desc") : t("menu.vsComputerDesc")}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Normal / Speed mode picker */}
|
||||
<div className="mt-2 short:mt-1.5 glass rounded-2xl p-1 flex gap-1">
|
||||
<div className="panel rounded-2xl p-1 flex gap-1">
|
||||
<button
|
||||
onClick={() => setSpeed(false)}
|
||||
className={cn(
|
||||
@@ -164,25 +163,11 @@ export function HomeScreen() {
|
||||
{t("speed.label")}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
{/* ===== end column A ===== */}
|
||||
</div>
|
||||
|
||||
{/* ===== column B: tiles + footer ===== */}
|
||||
<div className="flex flex-col landscape:flex-1 landscape:max-w-sm landscape:justify-center landscape:min-h-0">
|
||||
|
||||
{/* tiles */}
|
||||
<div className="grid grid-cols-4 gap-2.5 mt-3 sm:mt-4 landscape:mt-0">
|
||||
<Tile icon={<User className="size-5" />} label={t("menu.profile")} tint="teal" onClick={() => nav("profile")} />
|
||||
<Tile icon={<Users className="size-5" />} label={t("menu.friends")} tint="sky" onClick={() => nav(isAuthed ? "friends" : "auth")} />
|
||||
<Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} tint="gold" onClick={() => nav("leaderboard")} />
|
||||
<Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} tint="rose" onClick={() => nav("shop")} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 landscape:hidden" />
|
||||
|
||||
{/* footer */}
|
||||
<div className="flex items-center justify-between gap-2 pt-4 sm:pt-6 pb-2 landscape:pt-0 landscape:mt-4">
|
||||
<div className="flex items-center justify-between gap-2 pt-2 short:pt-1">
|
||||
{isAuthed ? (
|
||||
<button
|
||||
onClick={signOut}
|
||||
@@ -208,89 +193,13 @@ export function HomeScreen() {
|
||||
{t("home.lang")}
|
||||
</button>
|
||||
</div>
|
||||
{/* ===== end column B ===== */}
|
||||
</div>
|
||||
{/* ===== end content columns ===== */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavRail />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function PrimaryCard({
|
||||
icon,
|
||||
title,
|
||||
desc,
|
||||
onClick,
|
||||
primary,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
desc: string;
|
||||
onClick: () => void;
|
||||
primary?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.985 }}
|
||||
onClick={onClick}
|
||||
className={
|
||||
"press-3d w-full rounded-3xl px-5 py-4 short:py-2.5 flex items-center gap-4 short:gap-3 text-start " +
|
||||
(primary ? "btn-gold" : "glass")
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
"grid size-12 short:size-10 shrink-0 place-items-center rounded-2xl " +
|
||||
(primary ? "bg-black/15 text-[#2a1f04]" : "bg-teal-500/15 text-teal-300")
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<span className="flex-1">
|
||||
<span className={"block text-lg font-black " + (primary ? "text-[#2a1f04]" : "text-cream")}>
|
||||
{title}
|
||||
</span>
|
||||
<span className={"block text-xs " + (primary ? "text-[#2a1f04]/70" : "text-cream/55")}>
|
||||
{desc}
|
||||
</span>
|
||||
</span>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
const TILE_TINTS: Record<string, string> = {
|
||||
teal: "bg-teal-500/15 text-teal-400",
|
||||
sky: "bg-sky-500/15 text-sky-400",
|
||||
gold: "bg-gold-500/15 text-gold-400",
|
||||
rose: "bg-rose-500/15 text-rose-400",
|
||||
};
|
||||
|
||||
function Tile({
|
||||
icon,
|
||||
label,
|
||||
tint = "gold",
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
tint?: keyof typeof TILE_TINTS;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.94 }}
|
||||
onClick={onClick}
|
||||
className="press-3d glass rounded-2xl py-3 flex flex-col items-center gap-2"
|
||||
>
|
||||
<span className={"grid size-10 place-items-center rounded-xl " + TILE_TINTS[tint]}>
|
||||
{icon}
|
||||
</span>
|
||||
<span className="text-[11px] font-semibold text-cream/85">{label}</span>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
function OnlinePlayers() {
|
||||
const { t, locale } = useI18n();
|
||||
const [count, setCount] = useState<number | null>(null);
|
||||
|
||||
Reference in New Issue
Block a user