Release v0.2.10: Update package-lock.json and CI config

pwa/src/components/GameHeader.tsx

@@ -3,6 +3,8 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { useAuth } from '../hooks/useAuth'
 import { useGameWebSocket } from '../hooks/useGameWebSocket'
 import api from '../services/api'
+import { useTranslation } from 'react-i18next'
+import LanguageSelector from './LanguageSelector'
 import './Game.css'
 
 interface GameHeaderProps {
@@ -13,6 +15,7 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
   const navigate = useNavigate()
   const location = useLocation()
   const { currentCharacter, logout } = useAuth()
+  const { t } = useTranslation()
   const [playerCount, setPlayerCount] = useState<number>(0)
 
   // Fetch initial player count
@@ -63,19 +66,20 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
           onClick={() => navigate('/game')}
           className={`nav-link ${isActive('/game') ? 'active' : ''}`}
         >
-          🎮 Game
+          🎮 {t('common.game')}
         </button>
         <button
           onClick={() => navigate('/leaderboards')}
           className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
         >
-          🏆 Leaderboards
+          🏆 {t('common.leaderboards')}
         </button>
       </nav>
       <div className="user-info">
-        <div className="player-count-badge" title="Online Players">
+        <LanguageSelector />
+        <div className="player-count-badge" title={t('game.onlineCount', { count: playerCount })}>
           <span className="status-dot"></span>
-          <span className="count-text">{playerCount} Online</span>
+          <span className="count-text">{t('game.onlineCount', { count: playerCount })}</span>
         </div>
         <button
           onClick={() => navigate(`/profile/${currentCharacter?.id}`)}
@@ -87,9 +91,9 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
           onClick={() => navigate('/account')}
           className="button-secondary"
         >
-          Account
+          {t('common.account')}
         </button>
-        <button onClick={logout} className="button-secondary">Logout</button>
+        <button onClick={logout} className="button-secondary">{t('auth.logout')}</button>
       </div>
     </header>
   )