What a mess

pwa/src/components/GameHeader.tsx

@@ -0,0 +1,48 @@
+import { useNavigate, useLocation } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+import './Game.css'
+
+interface GameHeaderProps {
+  className?: string
+}
+
+export default function GameHeader({ className = '' }: GameHeaderProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { user, logout } = useAuth()
+
+  const isActive = (path: string) => {
+    return location.pathname === path || location.pathname.startsWith(path)
+  }
+
+  const isOnOwnProfile = location.pathname === `/profile/${user?.id}`
+
+  return (
+    <header className={`game-header ${className}`}>
+      <h1>Echoes of the Ash</h1>
+      <nav className="nav-links">
+        <button 
+          onClick={() => navigate('/game')} 
+          className={`nav-link ${isActive('/game') ? 'active' : ''}`}
+        >
+          🎮 Game
+        </button>
+        <button 
+          onClick={() => navigate('/leaderboards')} 
+          className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
+        >
+          🏆 Leaderboards
+        </button>
+      </nav>
+      <div className="user-info">
+        <button 
+          onClick={() => navigate(`/profile/${user?.id}`)}
+          className={`username-link ${isOnOwnProfile ? 'active' : ''}`}
+        >
+          {user?.username}
+        </button>
+        <button onClick={logout} className="button-secondary">Logout</button>
+      </div>
+    </header>
+  )
+}