[priority: low] Redesign Elemental subtab in DisciplinesTab to group by mana type #192

New Issue

2026-05-28T15:57:25+02:00

Anexim commented

2026-05-28 15:57:25 +02:00

Enhancement: Redesign Elemental subtab to organize disciplines by mana type

Description

The Elemental subtab in the Disciplines tab currently shows all elemental disciplines jumbled together in a flat list. It should be reorganized to group disciplines by mana type, showing capacity and conversion speed side by side.

Current State

In DisciplinesTab.tsx:

{ key: 'elemental', label: 'Elemental', items: [...elementalAttunementDisciplines, ...elementalRegenDisciplines, ...elementalRegenAdvancedDisciplines] },

This flattens all capacity disciplines (from elemental.ts) and conversion disciplines (from elemental-regen.ts and elemental-regen-advanced.ts) into a single unordered list. The result is:

Fire Mana Capacity
Water Mana Capacity
Air Mana Capacity
... (all capacities)
Fire Mana Conversion Speed
Water Mana Conversion Speed
... (all conversions)

This is confusing because related disciplines (capacity + conversion for the same element) are far apart.

Expected Behavior

The Elemental subtab should group disciplines by mana type:

🔥 Fire
   ├── Fire Mana Capacity (capacity discipline)
   └── Fire Mana Conversion Speed (conversion discipline)

💧 Water
   ├── Water Mana Capacity
   └── Water Mana Conversion Speed

🌬️ Air
   ├── Air Mana Capacity
   └── Air Mana Conversion Speed

... etc for all elements ...

⚙️ Metal (Composite)
   └── Metal Mana Conversion Speed

💎 Crystal (Exotic)
   └── Crystal Mana Conversion Speed

Affected Files

src/components/game/tabs/DisciplinesTab.tsx — ATTUNEMENT_TABS and rendering logic

Suggested Implementation

Create a new component ElementalDisciplineGroup that renders a mana type header with its icon/color
Under each header, render the capacity discipline (if any) and conversion discipline (if any) side by side
Use the ELEMENTS constant for icons, colors, and ordering
Group by element category: Base → Utility → Composite → Exotic
Consider using a 2-column layout within each group for capacity + conversion

## Enhancement: Redesign Elemental subtab to organize disciplines by mana type ### Description The Elemental subtab in the Disciplines tab currently shows all elemental disciplines jumbled together in a flat list. It should be reorganized to group disciplines by mana type, showing capacity and conversion speed side by side. ### Current State In `DisciplinesTab.tsx`: ```ts { key: 'elemental', label: 'Elemental', items: [...elementalAttunementDisciplines, ...elementalRegenDisciplines, ...elementalRegenAdvancedDisciplines] }, ``` This flattens all capacity disciplines (from `elemental.ts`) and conversion disciplines (from `elemental-regen.ts` and `elemental-regen-advanced.ts`) into a single unordered list. The result is: - Fire Mana Capacity - Water Mana Capacity - Air Mana Capacity - ... (all capacities) - Fire Mana Conversion Speed - Water Mana Conversion Speed - ... (all conversions) This is confusing because related disciplines (capacity + conversion for the same element) are far apart. ### Expected Behavior The Elemental subtab should group disciplines by mana type: ``` 🔥 Fire ├── Fire Mana Capacity (capacity discipline) └── Fire Mana Conversion Speed (conversion discipline) 💧 Water ├── Water Mana Capacity └── Water Mana Conversion Speed 🌬️ Air ├── Air Mana Capacity └── Air Mana Conversion Speed ... etc for all elements ... ⚙️ Metal (Composite) └── Metal Mana Conversion Speed 💎 Crystal (Exotic) └── Crystal Mana Conversion Speed ``` ### Affected Files - `src/components/game/tabs/DisciplinesTab.tsx` — `ATTUNEMENT_TABS` and rendering logic ### Suggested Implementation 1. Create a new component `ElementalDisciplineGroup` that renders a mana type header with its icon/color 2. Under each header, render the capacity discipline (if any) and conversion discipline (if any) side by side 3. Use the `ELEMENTS` constant for icons, colors, and ordering 4. Group by element category: Base → Utility → Composite → Exotic 5. Consider using a 2-column layout within each group for capacity + conversion

Anexim added the ai:todo label 2026-05-28 15:57:25 +02:00

n8n-gitea was assigned by Anexim

2026-05-28 15:57:25 +02:00

Anexim commented

2026-05-28 21:11:14 +02:00

Starting work on redesigning Elemental subtab to group by mana type.

Anexim commented

2026-05-28 21:24:36 +02:00

Completed: Elemental subtab redesign

Changes Made

New files (all under 400 lines):

src/components/game/tabs/DisciplineCard.tsx (169 lines) — extracted card component
src/components/game/tabs/ElementalSubtab.tsx (167 lines) — grouped-by-mana-type subtab
src/components/game/tabs/DisciplinesTab.tsx (150 lines) — slim orchestrator, was 283 lines

What Changed

The Elemental subtab in the Disciplines tab now groups disciplines by mana type instead of showing a flat list. The layout organizes disciplines into:

Base Elements — Fire, Water, Air, Earth, Light, Dark, Death
Utility — Transference
Composite — Metal, Sand, Lightning
Exotic — Crystal, Stellar, Void

Each mana type shows a colored header with icon, and renders capacity + conversion disciplines side-by-side in a 2-column grid. Other subtabs (Base, Enchanter, Fabricator, Invoker) remain unchanged.

Test Results

48 test files, 917 tests passed (same as before)
One pre-existing flaky test in spire-utils.test.ts (random-dependent assertion, unrelated to this change)

## Completed: Elemental subtab redesign ### Changes Made **New files (all under 400 lines):** - `src/components/game/tabs/DisciplineCard.tsx` (169 lines) — extracted card component - `src/components/game/tabs/ElementalSubtab.tsx` (167 lines) — grouped-by-mana-type subtab - `src/components/game/tabs/DisciplinesTab.tsx` (150 lines) — slim orchestrator, was 283 lines ### What Changed The Elemental subtab in the Disciplines tab now groups disciplines by mana type instead of showing a flat list. The layout organizes disciplines into: 1. **Base Elements** — Fire, Water, Air, Earth, Light, Dark, Death 2. **Utility** — Transference 3. **Composite** — Metal, Sand, Lightning 4. **Exotic** — Crystal, Stellar, Void Each mana type shows a colored header with icon, and renders capacity + conversion disciplines side-by-side in a 2-column grid. Other subtabs (Base, Enchanter, Fabricator, Invoker) remain unchanged. ### Test Results - 48 test files, 917 tests passed (same as before) - One pre-existing flaky test in `spire-utils.test.ts` (random-dependent assertion, unrelated to this change)

Anexim closed this issue

2026-05-28 21:24:36 +02:00

Anexim commented

2026-05-28 21:24:37 +02:00

Issue completed. Elemental subtab now groups disciplines by mana type with capacity and conversion shown side-by-side.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#192