[medium] Discipline UI doesn't show required mana type or mana cost to reach 100% #131

New Issue

2026-05-25T11:36:12+02:00

Anexim commented

2026-05-25 11:36:12 +02:00

UI Issue: Discipline cards don't clearly show mana type requirement or mana needed for 100%

Description

The discipline card UI in DisciplinesTab.tsx does not clearly communicate:

What mana type is required to practice the discipline
How much mana is required to reach 100% progress

Current State

The DisciplineCard component receives DisciplineCardDefinition which does not include manaType or baseCost fields. The card displays:

Name, description
A progress bar (but it's based on xp / (concurrentLimit * 100), not mana)
Drain rate and XP
Stat bonus
Perks

There is no indication of:

Which mana type is consumed (fire, water, raw, etc.)
How much of that mana type is needed
The baseCost field from the discipline definition

Expected Behavior

Each discipline card should clearly show:

Mana type required — e.g., "🔥 Fire Mana" with the element's icon/symbol
Mana cost / drain — current drain rate and base cost
Progress toward next XP — clear indication of how much mana is needed to reach the next level/threshold
Element color coding — use the element's color from ELEMENTS constants

Files Involved

src/components/game/tabs/DisciplinesTab.tsx — DisciplineCardDefinition interface and DisciplineCard component
src/lib/game/types/disciplines.ts — DisciplineDefinition has manaType and baseCost but they're not passed to the card
src/lib/game/constants/elements.ts — ELEMENTS record has icons, colors, names for display

Suggested Fix

Add manaType and baseCost to DisciplineCardDefinition
Pass these from the ATTUNEMENT_TABS mapping in DisciplinesTab
Render the mana type as a colored element badge (e.g., 🔥 Fire) on each card
Show current mana drain and base cost clearly
Consider showing "Mana needed for next perk" or similar progress indicator

## UI Issue: Discipline cards don't clearly show mana type requirement or mana needed for 100% ### Description The discipline card UI in `DisciplinesTab.tsx` does not clearly communicate: 1. **What mana type** is required to practice the discipline 2. **How much mana** is required to reach 100% progress ### Current State The `DisciplineCard` component receives `DisciplineCardDefinition` which does not include `manaType` or `baseCost` fields. The card displays: - Name, description - A progress bar (but it's based on `xp / (concurrentLimit * 100)`, not mana) - Drain rate and XP - Stat bonus - Perks There is no indication of: - Which mana type is consumed (fire, water, raw, etc.) - How much of that mana type is needed - The `baseCost` field from the discipline definition ### Expected Behavior Each discipline card should clearly show: 1. **Mana type required** — e.g., "🔥 Fire Mana" with the element's icon/symbol 2. **Mana cost / drain** — current drain rate and base cost 3. **Progress toward next XP** — clear indication of how much mana is needed to reach the next level/threshold 4. **Element color coding** — use the element's color from `ELEMENTS` constants ### Files Involved - `src/components/game/tabs/DisciplinesTab.tsx` — `DisciplineCardDefinition` interface and `DisciplineCard` component - `src/lib/game/types/disciplines.ts` — `DisciplineDefinition` has `manaType` and `baseCost` but they're not passed to the card - `src/lib/game/constants/elements.ts` — `ELEMENTS` record has icons, colors, names for display ### Suggested Fix 1. Add `manaType` and `baseCost` to `DisciplineCardDefinition` 2. Pass these from the `ATTUNEMENT_TABS` mapping in `DisciplinesTab` 3. Render the mana type as a colored element badge (e.g., `🔥 Fire`) on each card 4. Show current mana drain and base cost clearly 5. Consider showing "Mana needed for next perk" or similar progress indicator

Anexim added the ai:todo label 2026-05-25 11:36:12 +02:00

n8n-gitea was assigned by Anexim

2026-05-25 11:36:12 +02:00

Anexim commented

2026-05-25 12:46:51 +02:00

Starting work on discipline UI mana type/cost display. Plan:

Add manaType and baseCost to DisciplineCardDefinition
Pass these from the ATTUNEMENT_TABS mapping in DisciplinesTab
Render the mana type as a colored element badge (🔥 Fire) on each card
Show current mana drain and base cost clearly

Starting work on discipline UI mana type/cost display. Plan: 1. Add manaType and baseCost to DisciplineCardDefinition 2. Pass these from the ATTUNEMENT_TABS mapping in DisciplinesTab 3. Render the mana type as a colored element badge (🔥 Fire) on each card 4. Show current mana drain and base cost clearly

Anexim closed this issue

2026-05-25 12:50:30 +02:00

Anexim commented

2026-05-25 12:50:31 +02:00

✅ Fixed. Changes in commit 2c58186:

Added manaType and baseCost to DisciplineCardDefinition interface
Passed disc.manaType and disc.baseCost from the ATTUNEMENT_TABS mapping to each DisciplineCard
Rendered mana type as a colored element badge (e.g. 🔥 Fire) with element-specific colors from ELEMENTS constants, displayed in the card header
Split the drain/XP display into a flex row showing Drain/tick, Base Cost, and XP separately for clarity
File: src/components/game/tabs/DisciplinesTab.tsx (277 lines, under 400 limit)
TypeScript compiles cleanly, all pre-commit checks passed

✅ Fixed. Changes in commit 2c58186: - Added `manaType` and `baseCost` to `DisciplineCardDefinition` interface - Passed `disc.manaType` and `disc.baseCost` from the ATTUNEMENT_TABS mapping to each DisciplineCard - Rendered mana type as a colored element badge (e.g. 🔥 Fire) with element-specific colors from ELEMENTS constants, displayed in the card header - Split the drain/XP display into a flex row showing Drain/tick, Base Cost, and XP separately for clarity - File: `src/components/game/tabs/DisciplinesTab.tsx` (277 lines, under 400 limit) - TypeScript compiles cleanly, all pre-commit checks passed

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#131