Anexim/Mana-Loop
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: partial UI redesign - TabBar, ManaDisplay, StatsTab sub-sections
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 42s
Details

Browse Source 
Design token migration:
- TabBar: replaced hardcoded colors/shadows with --bg-panel, --border-subtle,
  --font-display tokens. Removed rounded-full pills, added Cinzel font tracking.
- ManaDisplay: replaced bg-gray-900/text-blue-400 with --mana-raw, --bg-panel,
  element-specific --mana-* tokens. Updated progress bar styling.
- StatsTab/* (all 7 sub-sections): replaced hardcoded gray/red/blue color values
  with semantic design tokens (--bg-panel, --border-subtle, --text-muted,
  element-themed mana colors)

NOTE: This is a partial implementation. TASK-011 paused to address
foundational issues (missing types, duplicate stat functions) first.
See issue #14 for full context.
This commit is contained in:
n8n-gitea
2026-05-14 12:03:09 +02:00
parent ba231ac9dd
commit 3e5b634815
9 changed files with 228 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/game/StatsTab/ElementStatsSection.tsx
+18 -18
View File
@@ -27,9 +27,9 @@ export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
};
return (
<Card className="bg-gray-900/80 border-gray-700">
<Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
<CardHeader className="pb-2">
<CardTitle className="text-green-400 game-panel-title text-xs flex items-center gap-2">
<CardTitle className="text-[var(--color-success)] game-panel-title text-xs flex items-center gap-2">
<FlaskConical className="w-4 h-4" />
Element Stats
</CardTitle>
@@ -38,40 +38,40 @@ export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-gray-400">Element Capacity:</span>
<span className="text-green-300">{elemMax}</span>
<span style={{ color: 'var(--text-muted)' }}>Element Capacity:</span>
<span style={{ color: 'var(--color-success)' }}>{elemMax}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-400">Elem. Attunement Bonus:</span>
<span className="text-green-300">+{getElemAttunementBonus()}</span>
<span style={{ color: 'var(--text-muted)' }}>Elem. Attunement Bonus:</span>
<span style={{ color: 'var(--color-success)' }}>+{getElemAttunementBonus()}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-400">Prestige Attunement:</span>
<span className="text-green-300">+{(prestigeUpgrades.elementalAttune || 0) * 25}</span>
<span style={{ color: 'var(--text-muted)' }}>Prestige Attunement:</span>
<span style={{ color: 'var(--color-success)' }}>+{(prestigeUpgrades.elementalAttune || 0) * 25}</span>
</div>
</div>
<div className="space-y-2">
<div className="flex justify-between text-sm">
<span className="text-gray-400">Unlocked Elements:</span>
<span className="text-green-300">{Object.values(elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
<span style={{ color: 'var(--text-muted)' }}>Unlocked Elements:</span>
<span style={{ color: 'var(--color-success)' }}>{Object.values(elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-400">Elem. Crafting Bonus:</span>
<span className="text-green-300">×{fmtDec(1 + (skills.elemCrafting || 0) * 0.25, 2)}</span>
<span style={{ color: 'var(--text-muted)' }}>Elem. Crafting Bonus:</span>
<span style={{ color: 'var(--color-success)' }}>×{fmtDec(1 + (skills.elemCrafting || 0) * 0.25, 2)}</span>
</div>
</div>
</div>
<Separator className="bg-gray-700 my-3" />
<div className="text-xs text-gray-400 mb-2">Elemental Mana Pools:</div>
<Separator className="bg-[var(--border-subtle)] my-3" />
<div className="text-xs" style={{ color: 'var(--text-muted)' }}>Elemental Mana Pools:</div>
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
{Object.entries(elements)
.filter(([, state]: [string, any]) => state.unlocked)
.map(([id, state]: [string, any]) => {
const def = ELEMENTS[id];
return (
<div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 text-center">
<div className="text-lg">{def?.sym}</div>
<div className="text-xs text-gray-400">{state.current}/{state.max}</div>
<div key={id} className="p-2 rounded transition-colors" style={{ border: `1px solid ${def?.color}30`, background: 'var(--bg-sunken)/50', textAlign: 'center' }}>
<div className="text-lg" style={{ color: def?.color }}>{def?.sym}</div>
<div className="text-xs" style={{ color: 'var(--text-muted)' }}>{state.current}/{state.max}</div>
</div>
);
})}
@@ -79,4 +79,4 @@ export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
</CardContent>
</Card>
);
}
}