[priority: medium] AttunementsTab: Redesign attunement cards to reflect importance #182

New Issue

2026-05-28T11:39:15+02:00

Anexim commented

2026-05-28 11:39:15 +02:00

Description

Attunement cards in the Attunements tab are visually plain and all look identical, making it hard to distinguish between the starting attunement (Enchanter), unlocked attunements, and locked attunements (Invoker, Fabricator).

Current State

All cards use the same gray styling (border-gray-700, bg-gray-900/60, text-gray-400). Locked cards are only distinguished by opacity-60. The unique def.color field for each attunement (teal #1ABC9C, purple #9B59B6, earth #F4A261) is defined in the data but never used in rendering.

Proposed Improvements

Use attunement color: Apply def.color as a left border accent, tinted icon background, colored XP bar, and colored level badge
Visual hierarchy: The starting attunement (Enchanter, unlocked: true) should appear more prominent — perhaps with a special badge
Locked state: Instead of just opacity-60, use a distinct locked treatment — darker background, subtle lock overlay, colored border at low opacity
Capability badges: Use attunement color with low-opacity backgrounds instead of plain gray
Invoker special: Since it has primaryManaType: undefined (pact-based), it could have visually distinct styling

Affected Files

src/components/game/tabs/AttunementsTab.tsx — AttunementCard component (lines 38–147)
src/lib/game/data/attunements.ts — attunement definitions already have color field (used)

Data Available per Attunement

color: Unique hex color (e.g., #1ABC9C)
icon: Emoji icon (e.g., ✨)
capabilities[]: e.g., ['enchanting']
skillCategories[]: e.g., ['enchant', 'effectResearch']
description: Full description text
unlocked: Boolean (starting state)
unlockCondition: String (shown when locked)

## Description Attunement cards in the Attunements tab are visually plain and all look identical, making it hard to distinguish between the starting attunement (Enchanter), unlocked attunements, and locked attunements (Invoker, Fabricator). ## Current State All cards use the same gray styling (`border-gray-700`, `bg-gray-900/60`, `text-gray-400`). Locked cards are only distinguished by `opacity-60`. The unique `def.color` field for each attunement (teal `#1ABC9C`, purple `#9B59B6`, earth `#F4A261`) is **defined in the data but never used in rendering**. ## Proposed Improvements 1. **Use attunement color**: Apply `def.color` as a left border accent, tinted icon background, colored XP bar, and colored level badge 2. **Visual hierarchy**: The starting attunement (Enchanter, `unlocked: true`) should appear more prominent — perhaps with a special badge 3. **Locked state**: Instead of just `opacity-60`, use a distinct locked treatment — darker background, subtle lock overlay, colored border at low opacity 4. **Capability badges**: Use attunement color with low-opacity backgrounds instead of plain gray 5. **Invoker special**: Since it has `primaryManaType: undefined` (pact-based), it could have visually distinct styling ## Affected Files - `src/components/game/tabs/AttunementsTab.tsx` — `AttunementCard` component (lines 38–147) - `src/lib/game/data/attunements.ts` — attunement definitions already have `color` field (used) ## Data Available per Attunement - `color`: Unique hex color (e.g., `#1ABC9C`) - `icon`: Emoji icon (e.g., `✨`) - `capabilities[]`: e.g., `['enchanting']` - `skillCategories[]`: e.g., `['enchant', 'effectResearch']` - `description`: Full description text - `unlocked`: Boolean (starting state) - `unlockCondition`: String (shown when locked)

Anexim added the ai:todo label 2026-05-28 11:39:15 +02:00

n8n-gitea was assigned by Anexim

2026-05-28 11:39:15 +02:00

Anexim referenced this issue

2026-05-28 13:55:04 +02:00

[priority: medium] AttunementsTab: Remove scrollable view, use natural page scroll instead #181

Anexim commented

2026-05-28 14:53:45 +02:00

Starting attunement card redesign. Will apply def.color accents, visual hierarchy for unlocked/starting attunements, distinct locked treatment, colored capability badges, and special Invoker styling.

Anexim closed this issue

2026-05-28 14:57:58 +02:00

Anexim commented

2026-05-28 14:57:58 +02:00

Redesigned attunement cards with:\n- Left border accent using def.color\n- Colored icon backgrounds and level badges\n- Starting attunement gets a colored "Starting" ribbon badge\n- Locked attunements get darker background, subtle diagonal stripe pattern, and colored border at low opacity instead of just opacity-60\n- XP progress bar uses attunement color\n- Capability and skill category badges use colored borders/backgrounds\n- Invoker gets a special "pact-based" note row\n- All borders and separators use color-tinted variants\n- Summary counter uses Enchanter teal color

Redesigned attunement cards with:\n- Left border accent using def.color\n- Colored icon backgrounds and level badges\n- Starting attunement gets a colored \"Starting\" ribbon badge\n- Locked attunements get darker background, subtle diagonal stripe pattern, and colored border at low opacity instead of just opacity-60\n- XP progress bar uses attunement color\n- Capability and skill category badges use colored borders/backgrounds\n- Invoker gets a special \"pact-based\" note row\n- All borders and separators use color-tinted variants\n- Summary counter uses Enchanter teal color

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#182