From 5f38e2860ab25ce80d74afc3ab9312fec9174b64 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 8 Mar 2026 14:21:06 +0000
Subject: [PATCH] fix: move stats HUD to header and add labels for better UX

Move the stats bar (items mined, crafted, planets visited) from the
game-log area above the navbar into the persistent app header, where
it works as a proper HUD element. Add text labels below each stat
so users immediately understand what the numbers represent.

Compact the game-log section to reduce vertical space and eliminate
the scroll pressure it was causing on the main content area.

https://claude.ai/code/session_01DKgJKUwQBzUAkxrmpDTMBY
---
 src/App.css                | 40 +++++++++++++++++++++++++++++---------
 src/App.tsx                | 16 +++++++++++++++
 src/components/GameLog.tsx |  7 +------
 src/i18n/locales/en.json   |  5 +++++
 src/i18n/locales/es.json   |  5 +++++
 5 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index 29219be..8edba32 100644
--- a/src/App.css
+++ b/src/App.css
@@ -643,23 +643,45 @@
 .rarity-border-rare { border: 2px solid var(--rarity-rare); }
 .rarity-border-legendary { border: 2px solid var(--rarity-legendary); }
 
-/* ===== GAME LOG ===== */
-.game-log {
-  padding: 8px 16px;
+/* ===== STATS BAR (header HUD) ===== */
+.stats-bar {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  padding: 8px 0 4px;
   border-top: 1px solid rgba(255,255,255,0.06);
+  margin-top: 8px;
 }
 
-.stats-bar {
+.stat-item {
   display: flex;
-  justify-content: center;
-  gap: 16px;
-  padding: 6px 0;
-  font-size: 0.75rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.stat-value {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 0.5px;
+}
+
+.stat-label {
+  font-size: 0.6rem;
   color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* ===== GAME LOG ===== */
+.game-log {
+  padding: 4px 16px 6px;
+  border-top: 1px solid rgba(255,255,255,0.06);
 }
 
 .log-entries {
-  max-height: 100px;
+  max-height: 72px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
diff --git a/src/App.tsx b/src/App.tsx
index ba81985..4819e4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import { useConvexAuth } from 'convex/react';
 import { useAuthActions } from '@convex-dev/auth/react';
 import { GameProvider } from './context/GameContext';
+import { useGame } from './context/GameContext';
 import PlanetView from './components/PlanetView';
 import StarMap from './components/StarMap';
 import Inventory from './components/Inventory';
@@ -39,6 +40,7 @@ const TABS: Tab[] = [
 
 function GameUI() {
   const { t } = useTranslation();
+  const { stats } = useGame();
   const [activeTab, setActiveTab] = useState('planet');
   const ActiveComponent = TABS.find(t => t.id === activeTab)!.component;
   const haptics = useHaptics();
@@ -53,6 +55,20 @@ function GameUI() {
           </div>
           <AuthUpgrade />
         </div>
+        <div className="stats-bar">
+          <div className="stat-item">
+            <span className="stat-value">⛏️ {stats.itemsMined}</span>
+            <span className="stat-label">{t('stats.mined')}</span>
+          </div>
+          <div className="stat-item">
+            <span className="stat-value">🔧 {stats.itemsCrafted}</span>
+            <span className="stat-label">{t('stats.crafted')}</span>
+          </div>
+          <div className="stat-item">
+            <span className="stat-value">🌍 {stats.planetsVisited}</span>
+            <span className="stat-label">{t('stats.planets')}</span>
+          </div>
+        </div>
       </header>
 
       <main className="game-main">
diff --git a/src/components/GameLog.tsx b/src/components/GameLog.tsx
index f5b2876..6a1bb67 100644
--- a/src/components/GameLog.tsx
+++ b/src/components/GameLog.tsx
@@ -28,15 +28,10 @@ function LogMessage({ entry }: { entry: LogEntry }) {
 }
 
 export default function GameLog() {
-  const { log, stats } = useGame();
+  const { log } = useGame();
 
   return (
     <div className="game-log">
-      <div className="stats-bar">
-        <span>⛏️ {stats.itemsMined}</span>
-        <span>🔧 {stats.itemsCrafted}</span>
-        <span>🌍 {stats.planetsVisited}</span>
-      </div>
       <div className="log-entries">
         {log.map((entry, i) => (
           <div key={`${entry.type}-${entry.key}-${i}`} className={`log-entry log-${entry.type}`}>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 775ca21..5f2c014 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -60,6 +60,11 @@
     "accountTooltip": "Account: {{email}}",
     "linkTooltip": "Link account to save progress"
   },
+  "stats": {
+    "mined": "mined",
+    "crafted": "crafted",
+    "planets": "planets"
+  },
   "log": {
     "welcome": "Welcome to space, explorer! You are on Terra Nova.",
     "welcomeBack": "Welcome back! Your progress has been restored.",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index f1129ee..07c246e 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -60,6 +60,11 @@
     "accountTooltip": "Cuenta: {{email}}",
     "linkTooltip": "Vincular cuenta para guardar progreso"
   },
+  "stats": {
+    "mined": "minados",
+    "crafted": "crafteados",
+    "planets": "planetas"
+  },
   "log": {
     "welcome": "¡Bienvenido al espacio, explorador! Estás en Terra Nova.",
     "welcomeBack": "¡Bienvenido de vuelta! Tu progreso ha sido restaurado.",