90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
|
|||
|
|
interface HeaderProps {
|
|||
|
|
isConnected: boolean;
|
|||
|
|
onOpenRegister: () => void;
|
|||
|
|
onQuickSpawn: () => void;
|
|||
|
|
onResetBoard: () => void;
|
|||
|
|
playerCount: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const Header: React.FC<HeaderProps> = ({
|
|||
|
|
isConnected,
|
|||
|
|
onOpenRegister,
|
|||
|
|
onQuickSpawn,
|
|||
|
|
onResetBoard,
|
|||
|
|
playerCount,
|
|||
|
|
}) => {
|
|||
|
|
return (
|
|||
|
|
<header className="h-16 border-b border-slate-800 bg-slate-900/90 backdrop-blur px-6 flex items-center justify-between z-10">
|
|||
|
|
{/* Brand & Stats */}
|
|||
|
|
<div className="flex items-center gap-6">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-sky-500 to-indigo-600 flex items-center justify-center font-black text-white text-base shadow-lg shadow-sky-500/20">
|
|||
|
|
W
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-base font-bold tracking-tight text-white flex items-center gap-2">
|
|||
|
|
botWebWars
|
|||
|
|
<span className="text-[10px] uppercase font-mono px-1.5 py-0.5 rounded bg-sky-950 text-sky-400 border border-sky-800">
|
|||
|
|
v1.0
|
|||
|
|
</span>
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-[11px] text-slate-400 font-mono">
|
|||
|
|
64×64 Grid Arena • Coords (0,0) to (64,64)
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Live status badge */}
|
|||
|
|
<div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono">
|
|||
|
|
<span
|
|||
|
|
className={`w-2 h-2 rounded-full ${
|
|||
|
|
isConnected ? 'bg-emerald-400 shadow-[0_0_8px_#34d399]' : 'bg-amber-400 animate-ping'
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
<span className={isConnected ? 'text-slate-300' : 'text-amber-300'}>
|
|||
|
|
{isConnected ? 'LIVE SYNC' : 'CONNECTING...'}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Action Buttons */}
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<a
|
|||
|
|
href="/docs"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="text-xs font-mono text-slate-400 hover:text-sky-400 transition-colors px-2.5 py-1.5 rounded-lg border border-slate-800 hover:border-slate-700 bg-slate-950/40"
|
|||
|
|
title="Open FastAPI Swagger API Docs"
|
|||
|
|
>
|
|||
|
|
API Docs ↗
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
{playerCount > 0 && (
|
|||
|
|
<button
|
|||
|
|
onClick={onResetBoard}
|
|||
|
|
className="text-xs font-medium text-slate-400 hover:text-red-400 transition-colors px-3 py-1.5 rounded-lg border border-slate-800 hover:border-red-900/60 bg-slate-950/40"
|
|||
|
|
>
|
|||
|
|
Clear Board
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={onQuickSpawn}
|
|||
|
|
className="text-xs font-medium text-slate-200 hover:text-white transition-all px-3.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 shadow flex items-center gap-1.5"
|
|||
|
|
>
|
|||
|
|
<span>🎲</span> Quick Spawn Bot
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={onOpenRegister}
|
|||
|
|
className="text-xs font-semibold text-white transition-all px-4 py-1.5 rounded-lg bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-400 hover:to-indigo-500 shadow-lg shadow-sky-500/25 flex items-center gap-1.5"
|
|||
|
|
>
|
|||
|
|
<span>+</span> Register Player
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
);
|
|||
|
|
};
|