From 6bbdbac23beb5d165f63c28b6017dc5d7f1fa632 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Fri, 5 Jun 2026 10:07:51 +0330
Subject: [PATCH] UNO-style UX rollout: Lobby, Matchmaking, Profile

- Lobby: the two hero actions (random / create room) are now tactile press-3d
  rounded-3xl with tinted icon chips.
- Matchmaking: seat slots use the Avatar frame with a gold border when filled
  (dashed placeholder when empty + spring pop-in); cancel/start/upgrade buttons
  are tactile.
- Profile: added a level badge on the avatar (casual-game style).

Verified: tsc + next build clean; web rebuilt :1500.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/screens/MatchmakingScreen.tsx | 22 +++++++++++++-------
 src/components/screens/OnlineLobbyScreen.tsx | 14 ++++++-------
 src/components/screens/ProfileScreen.tsx     |  4 ++++
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/screens/MatchmakingScreen.tsx b/src/components/screens/MatchmakingScreen.tsx
index 25ef53f..d2af51b 100644
--- a/src/components/screens/MatchmakingScreen.tsx
+++ b/src/components/screens/MatchmakingScreen.tsx
@@ -4,13 +4,13 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Crown, Loader2 } from "lucide-react";
 import { useEffect } from "react";
 import { ScreenShell } from "@/components/online/ScreenHeader";
+import { Avatar } from "@/components/online/Avatar";
 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";
-import { avatarEmoji } from "@/lib/online/types";
 
 export function MatchmakingScreen() {
   const { t } = useI18n();
@@ -70,7 +70,7 @@ export function MatchmakingScreen() {
           <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"
+              className="press-3d btn-gold w-full rounded-2xl py-3 flex items-center justify-center gap-2"
             >
               <Crown className="size-4" />
               {t("queue.upgrade")}
@@ -113,7 +113,10 @@ export function MatchmakingScreen() {
             return (
               <div
                 key={i}
-                className="w-16 h-20 rounded-2xl glass flex flex-col items-center justify-center gap-1"
+                className={
+                  "w-16 h-20 rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
+                  (p ? "glass gold-border" : "border border-dashed border-navy-700/60 bg-navy-900/30")
+                }
               >
                 <AnimatePresence mode="wait">
                   {p ? (
@@ -121,13 +124,16 @@ export function MatchmakingScreen() {
                       key={p.id}
                       initial={{ scale: 0, opacity: 0 }}
                       animate={{ scale: 1, opacity: 1 }}
+                      transition={{ type: "spring", stiffness: 260, damping: 18 }}
                       className="flex flex-col items-center gap-0.5"
                     >
-                      <span className="text-2xl">{avatarEmoji(p.avatar)}</span>
-                      <span className="text-[9px] text-cream/70 max-w-14 truncate">
+                      <span className="grid size-9 place-items-center rounded-xl bg-navy-900 overflow-hidden">
+                        <Avatar id={p.avatar} size={24} />
+                      </span>
+                      <span className="text-[9px] text-cream/80 max-w-14 truncate">
                         {p.displayName}
                       </span>
-                      <span className="text-[8px] text-gold-400/70">
+                      <span className="text-[8px] text-gold-400/80">
                         {t("common.level")} {p.level}
                       </span>
                     </motion.div>
@@ -148,7 +154,7 @@ export function MatchmakingScreen() {
         </div>
 
         <div className="mt-10 flex gap-3">
-          <button onClick={cancel} className="glass rounded-xl px-6 py-3 text-cream/70 hover:text-cream">
+          <button onClick={cancel} className="press-3d glass rounded-2xl px-6 py-3 text-cream/70">
             {t("mm.cancel")}
           </button>
           {ready && (
@@ -156,7 +162,7 @@ export function MatchmakingScreen() {
               initial={{ scale: 0.8, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               onClick={enter}
-              className="btn-gold rounded-xl px-8 py-3 text-lg"
+              className="press-3d btn-gold rounded-2xl px-8 py-3 text-lg"
             >
               {t("mm.start")}
             </motion.button>
diff --git a/src/components/screens/OnlineLobbyScreen.tsx b/src/components/screens/OnlineLobbyScreen.tsx
index e6c27f6..ae25ed7 100644
--- a/src/components/screens/OnlineLobbyScreen.tsx
+++ b/src/components/screens/OnlineLobbyScreen.tsx
@@ -112,12 +112,11 @@ export function OnlineLobbyScreen() {
 
       <div className="space-y-3">
         <motion.button
-          whileHover={{ y: -2 }}
-          whileTap={{ scale: 0.98 }}
+          whileTap={{ scale: 0.985 }}
           onClick={onRandom}
-          className="btn-gold w-full rounded-2xl p-5 flex items-center gap-4 text-start"
+          className="press-3d btn-gold w-full rounded-3xl p-5 flex items-center gap-4 text-start"
         >
-          <span className="size-12 rounded-xl bg-black/15 flex items-center justify-center text-[#2a1f04]">
+          <span className="grid size-12 place-items-center rounded-2xl bg-black/15 text-[#2a1f04]">
             <Trophy className="size-6" />
           </span>
           <span className="flex-1">
@@ -131,12 +130,11 @@ export function OnlineLobbyScreen() {
         </motion.button>
 
         <motion.button
-          whileHover={{ y: -2 }}
-          whileTap={{ scale: 0.98 }}
+          whileTap={{ scale: 0.985 }}
           onClick={onCreate}
-          className="glass w-full rounded-2xl p-5 flex items-center gap-4 text-start hover:bg-navy-800/80 transition"
+          className="press-3d glass w-full rounded-3xl p-5 flex items-center gap-4 text-start"
         >
-          <span className="size-12 rounded-xl bg-navy-900 gold-border flex items-center justify-center text-gold-400">
+          <span className="grid size-12 place-items-center rounded-2xl bg-teal-500/15 text-teal-300">
             <Users className="size-6" />
           </span>
           <span className="flex-1">
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index 3af979c..dceb252 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -69,6 +69,10 @@ export function ProfileScreen() {
           <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>
+          {/* level badge */}
+          <span className="absolute -top-2 ltr:-left-2 rtl:-right-2 rounded-full bg-navy-950 gold-border px-2 py-0.5 text-[10px] font-black text-gold-300 shadow-lg">
+            {t("common.level")} {profile.level}
+          </span>
           <button
             onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
             className={cn(