chore: save progress before layout changes

pwa/src/components/GameHeader.tsx

@@ -5,6 +5,8 @@ import { useGameWebSocket } from '../hooks/useGameWebSocket'
 import api from '../services/api'
 import { useTranslation } from 'react-i18next'
 import LanguageSelector from './LanguageSelector'
+import { useOptionalGame } from '../contexts/GameContext'
+import { getTranslatedText } from '../utils/i18nUtils'
 import './Game.css'
 
 import { GameTooltip } from './common/GameTooltip'
@@ -12,17 +14,39 @@ import { GameTooltip } from './common/GameTooltip'
 // Import the new specific header styles
 import './GameHeader.css'
 
-interface GameHeaderProps {
-  className?: string
+interface CombatInfo {
+  enemyName: string
+  yourTurn: boolean
 }
 
-export default function GameHeader({ className = '' }: GameHeaderProps) {
+interface GameHeaderProps {
+  className?: string
+  locationName?: string
+  combatInfo?: CombatInfo | null
+  dangerLevel?: number
+}
+
+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)
 
+  // Get game state from context (undefined when outside GameProvider)
+  const gameContext = useOptionalGame()
+  const gameState = gameContext?.state
+
+  // Extract location and combat info from game state
+  const locationName = gameState?.location?.name ? getTranslatedText(gameState.location.name) : undefined
+  const dangerLevel = gameState?.location?.danger_level
+  const combatInfo = gameState?.combatState ? {
+    enemyName: getTranslatedText(gameState.enemyName) || 'Enemy',
+    yourTurn: gameState.combatState.yourTurn || false
+  } : null
+
   // Fetch initial player count
   useEffect(() => {
     const fetchPlayerCount = async () => {
@@ -61,8 +85,15 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
 
   const isOnOwnProfile = location.pathname === `/profile/${currentCharacter?.id}`
 
+  // Helper for danger badge class
+  const getDangerClass = (level: number | undefined) => {
+    if (level === undefined || level === 0) return 'danger-safe'
+    return `danger-${Math.min(level, 5)}`
+  }
+
   return (
     <header className={`game-header ${className}`}>
+      {/* Left: Logo and Version */}
       <div className="header-left">
         <div className="header-title-container">
           <h1>Echoes of the Ash</h1>
@@ -70,22 +101,45 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
         </div>
       </div>
 
-      <nav className="nav-links">
-        <button
-          onClick={() => navigate('/game')}
-          className={`nav-link ${isActive('/game') ? 'active' : ''}`}
-        >
-          <span style={{ fontSize: '1.1em' }}>🎮</span> {t('common.game')}
-        </button>
-        <button
-          onClick={() => navigate('/leaderboards')}
-          className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
-        >
-          <span style={{ fontSize: '1.1em' }}>🏆</span> {t('common.leaderboards')}
-        </button>
-      </nav>
+      {/* Center: Location/Combat Title */}
+      <div className="header-center">
+        {combatInfo ? (
+          <div className="header-location-title combat">
+            <span className="combat-indicator">⚔️</span>
+            <span className="location-name">{combatInfo.enemyName}</span>
+            <span className={`turn-indicator ${combatInfo.yourTurn ? 'your-turn' : 'enemy-turn'}`}>
+              {combatInfo.yourTurn ? t('combat.yourTurn') : t('combat.enemyTurn')}
+            </span>
+          </div>
+        ) : locationName ? (
+          <div className="header-location-title">
+            <span className="location-name">{locationName}</span>
+            {dangerLevel !== undefined && (
+              <span className={`danger-badge ${getDangerClass(dangerLevel)}`}>
+                {dangerLevel === 0 ? t('danger.safe') : `⚠️ ${dangerLevel}`}
+              </span>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      {/* Right: Navigation + User Info */}
+      <div className="header-right">
+        <nav className="nav-links">
+          <button
+            onClick={() => navigate('/game')}
+            className={`nav-link ${isActive('/game') ? 'active' : ''}`}
+          >
+            🎮 {t('common.game')}
+          </button>
+          <button
+            onClick={() => navigate('/leaderboards')}
+            className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
+          >
+            🏆 {t('common.leaderboards')}
+          </button>
+        </nav>
 
-      <div className="user-info">
         <GameTooltip content={t('game.onlineCount', { count: playerCount })}>
           <div className="player-count-badge">
             <span className="status-dot"></span>