Refactoring Agent
47c71e6f54
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
- Implemented complete design system with 40+ CSS custom properties - Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo) - Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug - Added toast notification system (GameToast) with success/warning/error/info types - Added confirmation dialogs for destructive actions - Removed all dev artifacts and component name labels - Added empty states to all tabs - Replaced emoji icons with Lucide React icons - Added enchantPower placeholder to StatsTab and EquipmentTab - Mobile audit passed at 375px viewport - Build passes with 0 errors, lint passes with 0 errors Sub-tasks completed: - ST1: Design System Implementation - ST2: Global Layout & Header - ST3: Left Panel (Mana Display & Action Area) - ST4: Skills Tab - ST5: Spire Tab & Spire Mode UI - ST6: Stats Tab - ST7: Equipment & Crafting Tabs - ST8: Attunements Tab - ST9: Remaining Tabs - ST10: Toast System & Confirmation Dialogs Documentation: 15+ files in docs/task4/
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { fmt } from '@/lib/game/store';
|
|
import { formatHour } from '@/lib/game/formatting';
|
|
import { TimeDisplay } from '@/components/game/TimeDisplay';
|
|
|
|
interface HeaderProps {
|
|
day: number;
|
|
hour: number;
|
|
insight: number;
|
|
}
|
|
|
|
export function Header({ day, hour, insight }: HeaderProps) {
|
|
return (
|
|
<header className="sticky top-0 z-50 bg-[var(--bg-surface)]/95 backdrop-blur-sm border-b border-[var(--border-subtle)] px-4 py-2">
|
|
<div className="flex items-center justify-between">
|
|
{/* Game Title - always visible */}
|
|
<h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
|
|
|
|
{/* Desktop header content */}
|
|
<div className="hidden md:flex items-center gap-4">
|
|
<TimeDisplay
|
|
day={day}
|
|
hour={hour}
|
|
insight={insight}
|
|
/>
|
|
</div>
|
|
|
|
{/* Mobile header content - compact */}
|
|
<div className="flex md:hidden items-center gap-2">
|
|
<div className="text-center">
|
|
<div className="text-sm font-bold game-mono text-[var(--mana-light)]">
|
|
D{day} {formatHour(hour)}
|
|
</div>
|
|
<div className="text-xs text-[var(--text-secondary)]">
|
|
{fmt(insight)} 💎
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
Header.displayName = "Header";
|