110 lines
4.1 KiB
TypeScript
110 lines
4.1 KiB
TypeScript
import React from 'react';
|
||
|
||
interface HeaderProps {
|
||
isConnected: boolean;
|
||
onOpenRegister: () => void;
|
||
onQuickSpawn: () => void;
|
||
onResetBoard: () => void;
|
||
playerCount: number;
|
||
isConcluded?: boolean;
|
||
onOpenScoreboard?: () => void;
|
||
}
|
||
|
||
export const Header: React.FC<HeaderProps> = ({
|
||
isConnected,
|
||
onOpenRegister,
|
||
onQuickSpawn,
|
||
onResetBoard,
|
||
playerCount,
|
||
isConcluded,
|
||
onOpenScoreboard,
|
||
}) => {
|
||
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>
|
||
|
||
{/* Game concluded banner tag */}
|
||
{isConcluded && (
|
||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/20 border border-amber-400 text-amber-300 text-xs font-bold animate-pulse">
|
||
<span>🏆</span> GAME CONCLUDED
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Action Buttons */}
|
||
<div className="flex items-center gap-3">
|
||
{isConcluded && onOpenScoreboard && (
|
||
<button
|
||
onClick={onOpenScoreboard}
|
||
className="text-xs font-bold text-amber-950 px-3.5 py-1.5 rounded-lg bg-gradient-to-r from-amber-400 to-yellow-300 hover:from-amber-300 hover:to-yellow-200 shadow-lg shadow-amber-400/30 flex items-center gap-1.5 transition-all"
|
||
>
|
||
<span>🏆</span> Final Scoreboard
|
||
</button>
|
||
)}
|
||
|
||
<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>
|
||
);
|
||
};
|