UNO home: mode cards + bottom nav bar

Rebuild HomeScreen to UNO's home layout: top bar (avatar+coins) + 3 big glossy
3D mode cards in the center (Online[gold,live-count badge] / vs-Computer[teal] /
Private Room[violet]) + a bottom icon nav bar (NavRail bottom variant, drops the
redundant home item). Speed toggle + language sit in a slim controls row. Online
card shows live player count; room card creates a private room then enters it.
New menu.room/menu.roomDesc i18n.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/HomeScreen.tsx

@@ -1,20 +1,13 @@
 "use client";
 
 import { motion } from "framer-motion";
-import {
-  Bot,
-  ChevronLeft,
-  ChevronRight,
-  Globe,
-  LogIn,
-  LogOut,
-  Play,
-} from "lucide-react";
+import { Bot, Globe, Play, Users } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Zap } from "lucide-react";
 import { useGameStore, hasActiveMatch } from "@/lib/game-store";
 import { pushNotification } from "@/lib/notification-store";
 import { useSessionStore } from "@/lib/session-store";
+import { useOnlineStore } from "@/lib/online-store";
 import { useUIStore, type Screen } from "@/lib/ui-store";
 import { useI18n } from "@/lib/i18n";
 import { getService } from "@/lib/online/service";
@@ -32,7 +25,7 @@ export function HomeScreen() {
   const go = useUIStore((s) => s.go);
   const profile = useSessionStore((s) => s.profile);
   const isAuthed = useSessionStore((s) => s.isAuthed);
-  const signOut = useSessionStore((s) => s.signOut);
+  const createRoom = useOnlineStore((s) => s.createRoom);
 
   const nav = (screen: Screen) => {
     sound.init();
@@ -41,6 +34,35 @@ export function HomeScreen() {
   };
 
   const [speed, setSpeed] = useState(false);
+  const [online, setOnline] = useState<number | null>(null);
+
+  // Live online count for the «بازی آنلاین» card badge.
+  useEffect(() => {
+    let alive = true;
+    const tick = async () => {
+      try {
+        const n = await getService().getOnlineCount();
+        if (alive) setOnline(n);
+      } catch {
+        /* ignore */
+      }
+    };
+    tick();
+    const id = setInterval(tick, 8000);
+    return () => {
+      alive = false;
+      clearInterval(id);
+    };
+  }, []);
+
+  // Private room: create one and jump in (auth required).
+  const playRoom = async () => {
+    if (!isAuthed) return nav("auth");
+    sound.init();
+    sound.play("click");
+    await createRoom({ targetScore: 7, stake: 0, ranked: false });
+    go("room");
+  };
 
   const playVsComputer = () => {
     // One game at a time: resume the running match instead of starting a new one.
@@ -67,86 +89,62 @@ export function HomeScreen() {
   };
 
   const playOnline = () => nav(isAuthed ? "online" : "auth");
-  const Chevron = locale === "fa" ? ChevronLeft : ChevronRight;
-
   return (
     <main className="persian-pattern relative h-dvh w-full overflow-hidden overscroll-contain safe-top safe-x flex flex-col landscape:flex-row">
       <FloatingSuits />
 
       {/* content */}
-      <div className="relative z-10 flex-1 min-h-0 flex flex-col p-4 sm:p-5">
+      <div className="relative z-10 flex flex-col h-full min-h-0 gap-2.5 short:gap-2">
         <TopBar />
 
-        {/* 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 */}
+        {/* title */}
+        <div className="shrink-0 text-center">
+          <span className="gold-text align-middle text-2xl short:text-xl font-black">{t("app.title")}</span>
+          <span className="text-cream/60 align-middle mr-2 text-xs sm:text-sm">{t("app.subtitle")}</span>
+        </div>
+
+        {/* mode cards */}
         <motion.div
           initial={{ opacity: 0, y: 14 }}
           animate={{ opacity: 1, y: 0 }}
-            className="flex flex-col items-center landscape:items-start"
+          className="flex-1 min-h-0 flex items-stretch justify-center gap-3 short:gap-2"
         >
-            <div className="flex items-center gap-3">
-              <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-4xl sm:text-5xl short:text-3xl font-black tracking-tight leading-none">
-                  {t("app.title")}
-                </h1>
-                <p className="text-cream/65 mt-2 text-sm leading-none">{t("app.subtitle")}</p>
-              </div>
-            </div>
-            <div className="mt-4 short:mt-2">
-              <OnlinePlayers />
-            </div>
+          <ModeCard
+            tone="gold"
+            icon={<Play className="size-7 short:size-6" fill="currentColor" />}
+            name={t("menu.online")}
+            desc={t("menu.onlineDesc")}
+            badge={
+              online != null
+                ? t("home.onlineCount", { n: new Intl.NumberFormat(locale === "fa" ? "fa-IR" : "en-US").format(online) })
+                : undefined
+            }
+            onClick={playOnline}
+          />
+          <ModeCard
+            tone="teal"
+            icon={<Bot className="size-7 short:size-6" />}
+            name={t("menu.vsComputer")}
+            desc={speed ? t("speed.desc") : t("menu.vsComputerDesc")}
+            onClick={playVsComputer}
+          />
+          <ModeCard
+            tone="violet"
+            icon={<Users className="size-7 short:size-6" />}
+            name={t("menu.room")}
+            desc={t("menu.roomDesc")}
+            onClick={playRoom}
+          />
         </motion.div>
 
-          {/* play actions */}
-          <motion.div
-            initial={{ opacity: 0, y: 14 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.05 }}
-            className="w-full max-w-sm landscape:max-w-xs flex flex-col gap-3 short:gap-2"
-          >
-            <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 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" />
-            </button>
-
-            <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 */}
+        {/* controls: speed toggle (center) + language (end) */}
+        <div className="shrink-0 flex items-center gap-2">
+          <div className="flex-1" />
           <div className="panel rounded-2xl p-1 flex gap-1">
             <button
               onClick={() => setSpeed(false)}
               className={cn(
-                  "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                "rounded-xl px-4 py-1.5 text-xs font-bold transition",
                 !speed ? "btn-gold" : "text-cream/60 hover:text-cream"
               )}
             >
@@ -155,7 +153,7 @@ export function HomeScreen() {
             <button
               onClick={() => setSpeed(true)}
               className={cn(
-                  "flex-1 rounded-xl py-2 short:py-1.5 text-xs font-bold transition flex items-center justify-center gap-1.5",
+                "rounded-xl px-4 py-1.5 text-xs font-bold transition flex items-center gap-1.5",
                 speed ? "btn-gold" : "text-cream/60 hover:text-cream"
               )}
             >
@@ -163,43 +161,76 @@ export function HomeScreen() {
               {t("speed.label")}
             </button>
           </div>
-          </motion.div>
-        </div>
-
-        {/* footer */}
-        <div className="flex items-center justify-between gap-2 pt-2 short:pt-1">
-          {isAuthed ? (
-            <button
-              onClick={signOut}
-              className="glass rounded-full px-4 py-2 text-sm flex items-center gap-2 hover:bg-navy-800/80 transition"
-            >
-              <LogOut className="size-4 text-rose-300" />
-              {t("menu.signOut")}
-            </button>
-          ) : (
-            <button
-              onClick={() => go("auth")}
-              className="btn-gold rounded-full px-4 py-2 text-sm flex items-center gap-2"
-            >
-              <LogIn className="size-4" />
-              {t("menu.signIn")}
-            </button>
-          )}
+          <div className="flex-1 flex justify-end">
             <button
               onClick={toggle}
-            className="glass rounded-full px-4 py-2 text-sm flex items-center gap-2 hover:bg-navy-800/80 transition"
+              className="glass rounded-full p-2.5 hover:bg-navy-800/80 transition"
+              aria-label={t("home.lang")}
             >
               <Globe className="size-4 text-gold-400" />
-            {t("home.lang")}
             </button>
           </div>
         </div>
 
-      <NavRail />
+        {/* bottom nav */}
+        <NavRail bottom />
+      </div>
     </main>
   );
 }
 
+const MODE_TONES = {
+  gold: { bg: "linear-gradient(180deg,#f1da8a,#d4af37)", lo: "#946c0c", fg: "#2a1f04" },
+  teal: { bg: "linear-gradient(180deg,#3fd0c2,#0d8a78)", lo: "#0a5a4c", fg: "#04261f" },
+  violet: { bg: "linear-gradient(180deg,#c79cff,#7c4ddb)", lo: "#4f2e9e", fg: "#1c0e3a" },
+} as const;
+
+function ModeCard({
+  icon,
+  name,
+  desc,
+  onClick,
+  tone,
+  badge,
+}: {
+  icon: React.ReactNode;
+  name: string;
+  desc: string;
+  onClick: () => void;
+  tone: keyof typeof MODE_TONES;
+  badge?: string;
+}) {
+  const c = MODE_TONES[tone];
+  return (
+    <motion.button
+      whileTap={{ scale: 0.95, y: 4 }}
+      onClick={onClick}
+      style={{
+        background: c.bg,
+        color: c.fg,
+        boxShadow: `0 7px 0 ${c.lo}, 0 12px 20px rgba(0,0,0,.32), inset 0 2px 0 rgba(255,255,255,.4)`,
+      }}
+      className="relative flex-1 max-w-[210px] rounded-3xl px-3 py-5 short:py-3 flex flex-col items-center justify-center gap-2.5 short:gap-1.5 text-center"
+    >
+      {badge && (
+        <span className="absolute top-2 ltr:right-2 rtl:left-2 rounded-full bg-rose-500 px-2 py-0.5 text-[10px] font-bold text-white shadow">
+          {badge}
+        </span>
+      )}
+      <span
+        className="grid size-14 short:size-11 place-items-center rounded-2xl"
+        style={{ background: "rgba(255,255,255,.22)" }}
+      >
+        {icon}
+      </span>
+      <span className="text-base short:text-sm font-black leading-tight">{name}</span>
+      <span className="text-[11px] font-medium leading-tight" style={{ opacity: 0.78 }}>
+        {desc}
+      </span>
+    </motion.button>
+  );
+}
+
 function OnlinePlayers() {
   const { t, locale } = useI18n();
   const [count, setCount] = useState<number | null>(null);

src/components/online/NavRail.tsx

@@ -13,13 +13,13 @@ type Item = { key: Screen; icon: typeof Home; label: string; authed?: boolean };
  * (the app's main orientation) and a bottom tab bar in portrait. Active section
  * is highlighted gold and pulled forward.
  */
-export function NavRail() {
+export function NavRail({ bottom = false }: { bottom?: boolean }) {
   const screen = useUIStore((s) => s.screen);
   const go = useUIStore((s) => s.go);
   const isAuthed = useSessionStore((s) => s.isAuthed);
   const { t } = useI18n();
 
-  const items: Item[] = [
+  const all: Item[] = [
     { key: "home", icon: Home, label: t("nav.home") },
     { key: "profile", icon: User, label: t("menu.profile") },
     { key: "shop", icon: ShoppingBag, label: t("menu.shop") },
@@ -27,16 +27,22 @@ export function NavRail() {
     { key: "leaderboard", icon: Trophy, label: t("menu.leaderboard") },
     { key: "achievements", icon: Star, label: t("achv.title") },
   ];
+  // On the home screen (bottom bar) drop the redundant "home" item.
+  const items = bottom ? all.filter((i) => i.key !== "home") : all;
 
   return (
     <nav
       className={cn(
         "z-20 shrink-0 glass flex justify-around gap-1 p-1.5",
+        bottom
+          ? "rounded-2xl border border-gold/15"
+          : cn(
               // portrait: bottom bar; landscape: side rail
               "border-t border-gold/10 pb-[max(0.375rem,env(safe-area-inset-bottom))]",
               "landscape:order-first landscape:h-full landscape:w-[78px] landscape:flex-col landscape:justify-start",
               "landscape:gap-1.5 landscape:py-3 landscape:pb-3 landscape:border-t-0",
               "ltr:landscape:border-r rtl:landscape:border-l"
+            )
       )}
     >
       {items.map((it) => {
@@ -46,7 +52,8 @@ export function NavRail() {
             key={it.key}
             onClick={() => go(it.authed && !isAuthed ? "auth" : it.key)}
             className={cn(
-              "flex min-w-[54px] flex-col items-center justify-center gap-1 rounded-2xl px-1.5 py-2 transition landscape:w-full landscape:py-2.5",
+              "flex min-w-[54px] flex-col items-center justify-center gap-1 rounded-2xl px-1.5 py-2 transition",
+              !bottom && "landscape:w-full landscape:py-2.5",
               active ? "btn-gold shadow-lg" : "text-cream/55 hover:bg-navy-800/60 hover:text-cream"
             )}
           >

src/lib/i18n.tsx

@@ -109,6 +109,8 @@ const fa: Dict = {
   "menu.online": "بازی آنلاین",
   "menu.onlineDesc": "با دوستان یا بازیکن‌های واقعی",
   "nav.home": "خانه",
+  "menu.room": "اتاق دوستان",
+  "menu.roomDesc": "بازی خصوصی با دوستان",
   "menu.profile": "پروفایل",
   "menu.friends": "دوستان",
   "menu.leaderboard": "جدول امتیازات",
@@ -452,6 +454,8 @@ const en: Dict = {
   "menu.online": "Play Online",
   "menu.onlineDesc": "With friends or real players",
   "nav.home": "Home",
+  "menu.room": "Private room",
+  "menu.roomDesc": "Play privately with friends",
   "menu.profile": "Profile",
   "menu.friends": "Friends",
   "menu.leaderboard": "Leaderboard",