From 6aa4f376422d51774bd453596935d4a2c9815af7 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 16 Jun 2026 21:31:18 +0330
Subject: [PATCH] fix(mm): pro players also wait the 15s queue; compact
 post-match roster

- server: remove pro instant-start so all players queue for up to 15s,
  giving real players a chance to seat together before bot-fill
- post-match: render the 4 seats as a horizontal strip so every player
  is visible at once without scrolling

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 server/src/Hokm.Server/Game/GameManager.cs | 10 +--
 src/components/online/MatchPlayersList.tsx | 75 +++++++++-------------
 2 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/server/src/Hokm.Server/Game/GameManager.cs b/server/src/Hokm.Server/Game/GameManager.cs
index 91f08ae..135bc64 100644
--- a/server/src/Hokm.Server/Game/GameManager.cs
+++ b/server/src/Hokm.Server/Game/GameManager.cs
@@ -54,13 +54,9 @@ public sealed partial class GameManager
             return;
         }
 
-        // Pro players skip the queue entirely.
-        if (p.Plan == "pro")
-        {
-            StartMatch(new List<Player> { p });
-            return;
-        }
-
+        // Everyone — including pro — waits in the queue so we always try to seat
+        // real players together first. The 15s timer (NextQueueWaitMs) then fills
+        // any empty seats with bots, and a full group of 4 forms instantly.
         lock (_mmLock)
         {
             if (_waiting.Any(w => w.player.UserId == p.UserId)) return;
diff --git a/src/components/online/MatchPlayersList.tsx b/src/components/online/MatchPlayersList.tsx
index b1b7329..d7603e2 100644
--- a/src/components/online/MatchPlayersList.tsx
+++ b/src/components/online/MatchPlayersList.tsx
@@ -32,64 +32,47 @@ export function MatchPlayersList() {
   return (
     <div className="mt-3 sm:mt-4 text-start">
       <div className="text-[11px] font-bold text-cream/55 mb-1.5">{t("match.players")}</div>
-      <div className="space-y-1">
+      {/* Horizontal strip: all four seats are visible at once — no scrolling. */}
+      <div className="flex items-start justify-between gap-1.5">
         {seatPlayers.map((p, i) => {
           const isMe = p.id ? p.id === myId : !p.isBot;
           const canAdd = !!p.id && !p.isBot && p.id !== myId;
+          const tag = isMe ? t("match.you") : p.isBot ? t("match.bot") : null;
           return (
-            <div key={i} className="flex items-center gap-2.5 glass rounded-xl px-2.5 py-1">
-              {canAdd ? (
-                <button
-                  onClick={() => viewProfile(p.id!)}
-                  className="flex items-center gap-2.5 flex-1 min-w-0 text-start active:scale-[0.99] transition"
-                >
-                  <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-navy-900 text-lg">
-                    {p.avatar}
-                  </span>
-                  <span className="flex-1 min-w-0">
-                    <span className="block text-sm font-semibold text-cream truncate">{p.name}</span>
-                    {p.level > 0 && (
-                      <span className="block text-[10px] text-cream/45">
-                        {t("common.level")} {p.level}
-                      </span>
-                    )}
-                  </span>
-                </button>
-              ) : (
-                <>
-                  <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-navy-900 text-lg">
-                    {p.avatar}
-                  </span>
-                  <span className="flex-1 min-w-0">
-                    <span className="block text-sm font-semibold text-cream truncate">
-                      {p.name}
-                      {isMe && <span className="text-gold-300 font-normal"> ({t("match.you")})</span>}
-                      {p.isBot && <span className="text-cream/35 font-normal"> ({t("match.bot")})</span>}
-                    </span>
-                    {p.level > 0 && (
-                      <span className="block text-[10px] text-cream/45">
-                        {t("common.level")} {p.level}
-                      </span>
-                    )}
-                  </span>
-                </>
-              )}
+            <button
+              key={i}
+              onClick={() => canAdd && viewProfile(p.id!)}
+              className={
+                "flex-1 min-w-0 glass rounded-xl px-1 py-2 flex flex-col items-center gap-0.5 text-center " +
+                (canAdd ? "active:scale-[0.97] transition" : "cursor-default")
+              }
+            >
+              <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-navy-900 text-lg">
+                {p.avatar}
+              </span>
+              <span className="w-full truncate text-[11px] font-semibold text-cream">{p.name}</span>
+              <span className="text-[9px] text-cream/45 leading-tight">
+                {tag ?? (p.level > 0 ? `${t("common.level")} ${p.level}` : "")}
+              </span>
               {canAdd &&
                 (sent[p.id!] ? (
-                  <span className="text-[11px] text-teal-300 flex items-center gap-1 shrink-0">
-                    <Check className="size-3.5" />
+                  <span className="mt-0.5 text-[10px] text-teal-300 flex items-center gap-0.5">
+                    <Check className="size-3" />
                     {t("match.sent")}
                   </span>
                 ) : (
-                  <button
-                    onClick={() => add(p.id!)}
-                    className="press-3d btn-gold rounded-lg px-2.5 py-1.5 text-[11px] font-bold flex items-center gap-1 shrink-0"
+                  <span
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      add(p.id!);
+                    }}
+                    className="press-3d btn-gold mt-0.5 rounded-md px-2 py-0.5 text-[10px] font-bold flex items-center gap-0.5"
                   >
-                    <UserPlus className="size-3.5" />
+                    <UserPlus className="size-3" />
                     {t("match.addFriend")}
-                  </button>
+                  </span>
                 ))}
-            </div>
+            </button>
           );
         })}
       </div>