pridanie pocty online/available hracov

frontend/src/components/HeaderMenu.tsx

@@ -1,14 +1,21 @@
 import { useEffect, useRef, useState } from 'react';
 
 interface Props {
-  username?: string;
+  onlineCount?: number;
+  availableCount?: number;
   onHistory: () => void;
   onDonate: () => void;
   onLogout: () => void;
 }
 
 /** Header navigation: a row of links from `sm:` up, a hamburger dropdown below it. */
-export default function HeaderMenu({ username, onHistory, onDonate, onLogout }: Props) {
+export default function HeaderMenu({
+  onlineCount,
+  availableCount,
+  onHistory,
+  onDonate,
+  onLogout,
+}: Props) {
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -34,9 +41,16 @@ export default function HeaderMenu({ username, onHistory, onDonate, onLogout }:
   };
 
   return (
-    <>
-      <div className="hidden sm:flex items-center gap-3 text-sm">
-        <span className="text-green-dim">{username}</span>
+    <div className="flex items-center gap-3 text-sm">
+      {typeof onlineCount === 'number' && (
+        <span className="flex items-center gap-1.5 text-green-dim" title="Online / dostupní hráči">
+          <span className="w-1.5 h-1.5 rounded-full bg-green-score" />
+          {onlineCount}
+          {typeof availableCount === 'number' && `/${availableCount} free`}
+        </span>
+      )}
+
+      <div className="hidden sm:flex items-center gap-3">
         <button onClick={onHistory} className="text-gold hover:text-gold-bright">
           História
         </button>
@@ -66,11 +80,6 @@ export default function HeaderMenu({ username, onHistory, onDonate, onLogout }:
             role="menu"
             className="absolute right-0 top-11 z-40 w-44 bg-header border border-[#142018] rounded-xl py-1 shadow-[0_20px_60px_rgba(0,0,0,.6)]"
           >
-            {username && (
-              <p className="px-4 py-2 text-xs text-green-dim border-b border-[#142018] truncate">
-                {username}
-              </p>
-            )}
             <button
               role="menuitem"
               onClick={pick(onHistory)}
@@ -95,6 +104,6 @@ export default function HeaderMenu({ username, onHistory, onDonate, onLogout }:
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 }