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

[TASK-011] Full UI redesign — remaining tabs (Phase 6) #14

New Issue
Closed
opened 2026-05-13 10:45:02 +02:00 by Anexim · 3 comments
Anexim commented 2026-05-13 10:45:02 +02:00
Owner
Copy Link
Copy Source

Objective

Apply the dark arcane codex design system (defined in TASK-005 globals.css) to all remaining game tabs and components. TASK-005 (design tokens) and TASK-006 (left panel) are complete. This task covers everything else.

Design Direction

"Dark wizard's spellbook interface" — dark background, warm amber/teal accents, monospaced numbers, deliberate weight. No Material Design, no pastel cards, no Bootstrap.

Remaining Components to Redesign

Tab Bar

  • Redesign with font-display (Cinzel) headings
  • Active tab indicator: subtle left/bottom border with accent color, no pills or underlines
  • Background: --bg-panel with --border-subtle separator

Mana Display Component

  • Raw mana bar using --mana-raw color
  • Elemental mana bars (only show unlocked elements)
  • Use element-specific colors (--mana-fire, --mana-water, etc.)
  • Progress bar styling uses element colors

Stats Tab

  • All numbers rendered in font-ui (JetBrains Mono)
  • Sections: Combat, Element, Mana, Study, Loop, Pact
  • Panel layout with --bg-panel backgrounds and --border-subtle borders

Skills Tab

  • Most complex tab — do after skill system redesign (TASK-007) completes
  • Category headers use font-display
  • Skill rows show progress with element-themed bars
  • Milestone choices styled as selectable cards

Equipment Tab

  • Grid layout for equipment slots
  • Slot highlighting on hover, accent border for equipped items
  • Stats shown in monospace

Enchanting Crafting Tab

  • 3 sub-tabs: Fabricate, Enchant
  • Design/Apply/Progress bars use mana colors
  • Capacity cost shown with color coding (green = safe, red = over capacity)

Spire/Combat Tab

  • Floor display with dramatic styling
  • Enemy panels with element-colored borders
  • Spell casting progress bar

Spell Tab

  • Grid of spell cards
  • Element color coding per spell
  • Cooldown/progress visualization

UI Implementation Order (from remediation plan)

  1. Tab bar redesign
  2. Mana display component
  3. Stats tab
  4. Equipment tab
  5. Enchanting crafting tab
  6. Spire/combat tab
  7. Spell tab
  8. Skills tab (last — most complex, depends on TASK-007)

Design Token Reference

All tokens defined in globals.css (TASK-005):

  • --bg-void, --bg-panel, --bg-surface, --bg-raised
  • --text-primary, --text-secondary, --text-muted
  • --mana-* (10 element colors)
  • --color-success, --color-warning, --color-danger
  • --border-subtle, --border-default, --border-accent
  • --font-display, --font-body, --font-ui
  • --radius-sm, --radius-md, --radius-lg

Work Items

  • Redesign TabBar component
  • Create/redesign ManaDisplay component
  • Redesign StatsTab and sub-sections
  • Redesign EquipmentTab
  • Redesign EnchantingCraftingTab
  • Redesign SpireTab / combat UI
  • Redesign SpellsTab
  • Redesign SkillsTab (after TASK-007 completes)
  • Ensure all components use design tokens (no hardcoded colors, no shadcn defaults without override)
  • Visual review — ensure consistent dark arcane aesthetic across all tabs
  • Run E2E tests — no functional regression

Constraints

  • Use shadcn/ui components as base but MUST override all default styles to match the design system
  • Never use rounded-full for non-pill elements
  • Never use white backgrounds, blue link colors, or stock Tailwind colors like bg-blue-500
  • No drop shadows — use spacing and borders for hierarchy
  • Each tab component gets its own TASK.md if scope exceeds 200 lines of change

Acceptance Criteria

  • All game tabs follow the dark arcane codex design system
  • Design tokens used consistently — zero hardcoded colors in components
  • Numbers displayed in monospace (font-ui)
  • E2E tests still pass
  • Visual review approved

Reference

  • Remediation Plan: Part 5 — UI Redesign
  • Design tokens: src/app/globals.css (TASK-005 ✅)
  • Left panel reference: TASK-006 (✅)
  • Font imports to add to layout.tsx: Cinzel, Source_Serif_4, JetBrains_Mono
## Objective Apply the dark arcane codex design system (defined in TASK-005 globals.css) to all remaining game tabs and components. TASK-005 (design tokens) and TASK-006 (left panel) are complete. This task covers everything else. ## Design Direction "Dark wizard's spellbook interface" — dark background, warm amber/teal accents, monospaced numbers, deliberate weight. No Material Design, no pastel cards, no Bootstrap. ## Remaining Components to Redesign ### Tab Bar - Redesign with `font-display` (Cinzel) headings - Active tab indicator: subtle left/bottom border with accent color, no pills or underlines - Background: `--bg-panel` with `--border-subtle` separator ### Mana Display Component - Raw mana bar using `--mana-raw` color - Elemental mana bars (only show unlocked elements) - Use element-specific colors (`--mana-fire`, `--mana-water`, etc.) - Progress bar styling uses element colors ### Stats Tab - All numbers rendered in `font-ui` (JetBrains Mono) - Sections: Combat, Element, Mana, Study, Loop, Pact - Panel layout with `--bg-panel` backgrounds and `--border-subtle` borders ### Skills Tab - Most complex tab — do after skill system redesign (TASK-007) completes - Category headers use `font-display` - Skill rows show progress with element-themed bars - Milestone choices styled as selectable cards ### Equipment Tab - Grid layout for equipment slots - Slot highlighting on hover, accent border for equipped items - Stats shown in monospace ### Enchanting Crafting Tab - 3 sub-tabs: Fabricate, Enchant - Design/Apply/Progress bars use mana colors - Capacity cost shown with color coding (green = safe, red = over capacity) ### Spire/Combat Tab - Floor display with dramatic styling - Enemy panels with element-colored borders - Spell casting progress bar ### Spell Tab - Grid of spell cards - Element color coding per spell - Cooldown/progress visualization ## UI Implementation Order (from remediation plan) 1. Tab bar redesign 2. Mana display component 3. Stats tab 4. Equipment tab 5. Enchanting crafting tab 6. Spire/combat tab 7. Spell tab 8. Skills tab (last — most complex, depends on TASK-007) ## Design Token Reference All tokens defined in `globals.css` (TASK-005): - `--bg-void`, `--bg-panel`, `--bg-surface`, `--bg-raised` - `--text-primary`, `--text-secondary`, `--text-muted` - `--mana-*` (10 element colors) - `--color-success`, `--color-warning`, `--color-danger` - `--border-subtle`, `--border-default`, `--border-accent` - `--font-display`, `--font-body`, `--font-ui` - `--radius-sm`, `--radius-md`, `--radius-lg` ## Work Items - [ ] Redesign TabBar component - [ ] Create/redesign ManaDisplay component - [ ] Redesign StatsTab and sub-sections - [ ] Redesign EquipmentTab - [ ] Redesign EnchantingCraftingTab - [ ] Redesign SpireTab / combat UI - [ ] Redesign SpellsTab - [ ] Redesign SkillsTab (after TASK-007 completes) - [ ] Ensure all components use design tokens (no hardcoded colors, no shadcn defaults without override) - [ ] Visual review — ensure consistent dark arcane aesthetic across all tabs - [ ] Run E2E tests — no functional regression ## Constraints - Use shadcn/ui components as base but MUST override all default styles to match the design system - Never use `rounded-full` for non-pill elements - Never use white backgrounds, blue link colors, or stock Tailwind colors like `bg-blue-500` - No drop shadows — use spacing and borders for hierarchy - Each tab component gets its own TASK.md if scope exceeds 200 lines of change ## Acceptance Criteria - All game tabs follow the dark arcane codex design system - Design tokens used consistently — zero hardcoded colors in components - Numbers displayed in monospace (`font-ui`) - E2E tests still pass - Visual review approved ## Reference - Remediation Plan: Part 5 — UI Redesign - Design tokens: `src/app/globals.css` (TASK-005 ✅) - Left panel reference: TASK-006 (✅) - Font imports to add to `layout.tsx`: Cinzel, Source_Serif_4, JetBrains_Mono
Anexim added the ai:todo label 2026-05-13 10:45:02 +02:00
n8n-gitea was assigned by Anexim 2026-05-13 10:45:03 +02:00
Anexim commented 2026-05-14 02:28:32 +02:00
Author
Owner
Copy Link
Copy Source

Starting TASK-011: Full UI redesign — remaining tabs (Phase 6). Session started. Working through the implementation order from the issue.

Starting TASK-011: Full UI redesign — remaining tabs (Phase 6). Session started. Working through the implementation order from the issue.
Anexim commented 2026-05-14 12:04:01 +02:00
Author
Owner
Copy Link
Copy Source

Paused TASK-011 (Phase 6 UI redesign) — started UI work but this should be last priority. Found several blocking issues that need resolution first:

  • Issue 9: Memory type missing (breaks MemorySlotPicker, prestigeStore)
  • Issue 8: EquipmentSlot type missing (breaks EnchantmentPreparer, crafting-actions)
  • Issue 7: EquipmentCategory type missing (breaks EnchantmentDesigner)
  • Issue 4: Duplicate stat functions across modules
  • Issue 3: gameStore.ts uses old computeEffects() not new computeStats()
  • Issue 2: Missing evolution paths for 30+ skills
  • Issue 6: Legacy skill-evolution-modules/ need removal

Partial UI work done (committed as 3e5b634):

  • TabBar.tsx: design token migration, Cinzel font, removed hardcoded colors
  • ManaDisplay.tsx: --mana-raw, --bg-panel, element-specific --mana-* tokens
  • StatsTab/* (7 sub-sections): all migrated to semantic design tokens

Will resume TASK-011 after foundational issues are resolved.

Paused TASK-011 (Phase 6 UI redesign) — started UI work but this should be last priority. Found several blocking issues that need resolution first: - Issue 9: Memory type missing (breaks MemorySlotPicker, prestigeStore) - Issue 8: EquipmentSlot type missing (breaks EnchantmentPreparer, crafting-actions) - Issue 7: EquipmentCategory type missing (breaks EnchantmentDesigner) - Issue 4: Duplicate stat functions across modules - Issue 3: gameStore.ts uses old computeEffects() not new computeStats() - Issue 2: Missing evolution paths for 30+ skills - Issue 6: Legacy skill-evolution-modules/ need removal Partial UI work done (committed as 3e5b634): - TabBar.tsx: design token migration, Cinzel font, removed hardcoded colors - ManaDisplay.tsx: --mana-raw, --bg-panel, element-specific --mana-* tokens - StatsTab/* (7 sub-sections): all migrated to semantic design tokens Will resume TASK-011 after foundational issues are resolved.
Anexim commented 2026-05-16 11:59:41 +02:00
Author
Owner
Copy Link
Copy Source

Blocked by Issue #15: migration to Active Disciplines

Blocked by Issue #15: migration to Active Disciplines
Anexim added the ai:blocked label 2026-05-16 13:34:02 +02:00
Anexim added ai:done and removed ai:todoai:blocked labels 2026-05-18 10:19:01 +02:00
Anexim removed the ai:done label 2026-05-18 10:19:28 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai:blocked
ai:done
ai:in-progress
ai:priority:high
priority
 ai:review
ai:todo
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
n8n-gitea zhipu Anexim
No Assignees n8n-gitea
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#14
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?