[priority: 4] Recreate Crafting Tab with Fabricator and Enchanter Sub-Tabs #87

Closed
opened 2026-05-19 10:45:24 +02:00 by Anexim · 2 comments
Owner

Summary

Recreate the Crafting tab with a modular sub-tab system. The tab should have sub-tabs for each crafting attunement (Fabricator, Enchanter), designed to be easily extensible for future crafting attunements.

Context

  • Crafting store exists at src/lib/game/stores/craftingStore.ts with full design/prepare/apply lifecycle
  • Crafting UI components already exist in src/components/game/crafting/:
    • EnchantmentDesigner.tsx (with sub-components in EnchantmentDesigner/)
    • EnchantmentPreparer.tsx
    • EnchantmentApplier.tsx
    • EquipmentCrafter.tsx
  • Enchantment effects defined in src/lib/game/data/enchantments/ (7 categories, 30+ effects)
  • Equipment types defined in src/lib/game/data/equipment/ (9 categories)
  • The crafting system uses a 3-phase flow: Design → Prepare → Apply

Requirements

  • Create src/components/game/tabs/CraftingTab.tsx with an internal sub-tab system
  • Sub-tabs should use the same clsx-based styling as DisciplinesTab.tsx (not Radix nested tabs)

Fabricator Sub-Tab

  • Allows crafting upgraded gear from mana types the player has unlocked
  • Key design principle: No fire armor (would burn the wearer). Use common sense:
    • Earth → Compacted Earth gear (high defense)
    • Metal → Metal gear (balanced offense/defense)
    • Crystal → Crystal gear (high capacity for enchantments)
    • Sand → Sand gear (lightweight, agile)
    • Other solid/structural mana types as appropriate
  • Show available recipes based on unlocked mana types
  • Each recipe shows required materials, mana costs, and time
  • Use the existing EquipmentCrafter.tsx component as a starting point but adapt it for the fabricator attunement
  • Recipes should be defined in a new data file src/lib/game/data/fabricator-recipes.ts

Enchanter Sub-Tab

  • Integrate the existing 3-phase enchantment flow:
    • Phase 1 (Design): Select gear piece → select compatible enchantment effects → name and save blueprint
    • Phase 2 (Prepare): Select gear piece → select blueprint → disenchant existing enchantments if any → fill with transference mana + relevant mana types (e.g., 50 capacity fire blueprint = 500 transference + 500 fire mana). Preparation drains mana over time (like disciplines). A discipline should improve the mana cost multiplier but never make it free.
    • Phase 3 (Apply): When prepared, apply the enchantment. Takes time (improvable by discipline, never instant). Consumes the blueprint, resets prepared state, applies effects to the item.
  • Reuse existing EnchantmentDesigner, EnchantmentPreparer, EnchantmentApplier components
  • Add a discipline that reduces enchantment mana costs (e.g., enchantmentEfficiency in the enchanter discipline data)

Extensibility

  • The sub-tab system should be data-driven: define new crafting attunements by adding a data entry and a sub-tab component
  • Use a registry pattern similar to how disciplines are organized

Architecture

  • Add to src/components/game/tabs/index.ts barrel export
  • Add tab trigger and content to src/app/page.tsx with lazy loading pattern
  • Add DebugName wrapper
  • Keep under 400 lines; split into CraftingTab/ subdirectory with separate files for each sub-tab
  • Write tests for the crafting flow
## Summary Recreate the Crafting tab with a modular sub-tab system. The tab should have sub-tabs for each crafting attunement (Fabricator, Enchanter), designed to be easily extensible for future crafting attunements. ## Context - Crafting store exists at `src/lib/game/stores/craftingStore.ts` with full design/prepare/apply lifecycle - Crafting UI components already exist in `src/components/game/crafting/`: - `EnchantmentDesigner.tsx` (with sub-components in `EnchantmentDesigner/`) - `EnchantmentPreparer.tsx` - `EnchantmentApplier.tsx` - `EquipmentCrafter.tsx` - Enchantment effects defined in `src/lib/game/data/enchantments/` (7 categories, 30+ effects) - Equipment types defined in `src/lib/game/data/equipment/` (9 categories) - The crafting system uses a 3-phase flow: Design → Prepare → Apply ## Requirements - Create `src/components/game/tabs/CraftingTab.tsx` with an internal sub-tab system - Sub-tabs should use the same clsx-based styling as `DisciplinesTab.tsx` (not Radix nested tabs) ### Fabricator Sub-Tab - Allows crafting upgraded gear from mana types the player has unlocked - **Key design principle**: No fire armor (would burn the wearer). Use common sense: - Earth → Compacted Earth gear (high defense) - Metal → Metal gear (balanced offense/defense) - Crystal → Crystal gear (high capacity for enchantments) - Sand → Sand gear (lightweight, agile) - Other solid/structural mana types as appropriate - Show available recipes based on unlocked mana types - Each recipe shows required materials, mana costs, and time - Use the existing `EquipmentCrafter.tsx` component as a starting point but adapt it for the fabricator attunement - Recipes should be defined in a new data file `src/lib/game/data/fabricator-recipes.ts` ### Enchanter Sub-Tab - Integrate the existing 3-phase enchantment flow: - **Phase 1 (Design)**: Select gear piece → select compatible enchantment effects → name and save blueprint - **Phase 2 (Prepare)**: Select gear piece → select blueprint → disenchant existing enchantments if any → fill with transference mana + relevant mana types (e.g., 50 capacity fire blueprint = 500 transference + 500 fire mana). Preparation drains mana over time (like disciplines). A discipline should improve the mana cost multiplier but never make it free. - **Phase 3 (Apply)**: When prepared, apply the enchantment. Takes time (improvable by discipline, never instant). Consumes the blueprint, resets prepared state, applies effects to the item. - Reuse existing `EnchantmentDesigner`, `EnchantmentPreparer`, `EnchantmentApplier` components - Add a discipline that reduces enchantment mana costs (e.g., `enchantmentEfficiency` in the enchanter discipline data) ### Extensibility - The sub-tab system should be data-driven: define new crafting attunements by adding a data entry and a sub-tab component - Use a registry pattern similar to how disciplines are organized ## Architecture - Add to `src/components/game/tabs/index.ts` barrel export - Add tab trigger and content to `src/app/page.tsx` with lazy loading pattern - Add `DebugName` wrapper - Keep under 400 lines; split into `CraftingTab/` subdirectory with separate files for each sub-tab - Write tests for the crafting flow
Anexim added the ai:blocked label 2026-05-19 10:45:24 +02:00
n8n-gitea was assigned by Anexim 2026-05-19 10:45:24 +02:00
Anexim added ai:todo and removed ai:blocked labels 2026-05-20 01:18:28 +02:00
Author
Owner

Starting work on Crafting Tab recreation. Plan: create fabricator recipes data, FabricatorSubTab, EnchanterSubTab (integrating existing 3-phase flow), main CraftingTab with sub-tab system, wire into page.tsx, write tests.

Starting work on Crafting Tab recreation. Plan: create fabricator recipes data, FabricatorSubTab, EnchanterSubTab (integrating existing 3-phase flow), main CraftingTab with sub-tab system, wire into page.tsx, write tests.
Author
Owner

Crafting Tab recreated with Fabricator and Enchanter sub-tabs.

New files:

  • src/lib/game/data/fabricator-recipes.ts — 12 recipes across earth/metal/crystal/sand mana types
  • src/components/game/tabs/CraftingTab.tsx — Main tab with clsx-based sub-tab system
  • src/components/game/tabs/CraftingTab/FabricatorSubTab.tsx — Recipe filtering, crafting, materials inventory
  • src/components/game/tabs/CraftingTab/EnchanterSubTab.tsx — 3-phase flow (Design → Prepare → Apply)
  • src/components/game/tabs/CraftingTab.test.ts — 17 tests

Modified files:

  • src/components/game/tabs/index.ts — Added CraftingTab barrel export
  • src/app/page.tsx — Added lazy-loaded Crafting tab trigger + content

All files under 400 lines. All 17 tests pass. No new TypeScript errors.

✅ Crafting Tab recreated with Fabricator and Enchanter sub-tabs. **New files:** - `src/lib/game/data/fabricator-recipes.ts` — 12 recipes across earth/metal/crystal/sand mana types - `src/components/game/tabs/CraftingTab.tsx` — Main tab with clsx-based sub-tab system - `src/components/game/tabs/CraftingTab/FabricatorSubTab.tsx` — Recipe filtering, crafting, materials inventory - `src/components/game/tabs/CraftingTab/EnchanterSubTab.tsx` — 3-phase flow (Design → Prepare → Apply) - `src/components/game/tabs/CraftingTab.test.ts` — 17 tests **Modified files:** - `src/components/game/tabs/index.ts` — Added CraftingTab barrel export - `src/app/page.tsx` — Added lazy-loaded Crafting tab trigger + content All files under 400 lines. All 17 tests pass. No new TypeScript errors.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Anexim/Mana-Loop#87