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

[priority: 4] Recreate Equipment Tab — Equip/Unequip Gear #90

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

Summary

Recreate the Equipment tab that was deleted in commit fe0f2a0. This tab should allow the player to equip and unequip gear, view equipped items, and manage their inventory.

Context

  • Equipment system is fully implemented in the crafting store (craftingStore.ts)
  • EquipmentInstance has: instanceId, typeId, name, enchantments[], usedCapacity, totalCapacity, rarity, quality, tags[], weapon mana fields
  • Equipment slots: mainHand, offHand, head, body, hands, feet, accessory1, accessory2
  • equippedInstances: Record<string, string | null> maps slot → instanceId
  • Equipment types defined in src/lib/game/data/equipment/ (9 categories, 40+ types)
  • Equipment actions in src/lib/game/crafting-actions/equipment-actions.ts: createEquipmentInstance(), equipItem(), unequipItem(), deleteEquipmentInstance()
  • Loot inventory components exist in src/components/game/LootInventory/
  • Rarity system: common → mythic with colors defined in the design token system

Requirements

  • Create src/components/game/tabs/EquipmentTab.tsx
  • Show all 8 equipment slots with currently equipped items (or empty slot)
  • For each equipped item display:
    • Name with rarity color
    • Slot type and category
    • Enchantment count and capacity used/total
    • Quality percentage
    • Unequip button
  • Show unequipped inventory items in a separate section below the slots
  • For each inventory item display:
    • Name with rarity color
    • Equip button (auto-assigns to correct slot, or shows slot selector for flexible items)
    • Delete button (with confirmation)
  • Drag-and-drop is NOT required — click-based equip/unequip is fine
  • Show total enchantment effects summary from all equipped items
  • Use shared UI components from src/components/ui/
  • Use Tailwind CSS from the global design token system (no SCSS)
  • 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
  • Write tests

Architecture Notes

  • Follow the existing lazy-loaded tab pattern
  • Use Zustand store selectors
  • Keep under 400 lines; split into sub-components (e.g., EquipmentSlotGrid.tsx, InventoryList.tsx) if needed
  • Reuse EquipmentItem.tsx from LootInventory/ where appropriate
## Summary Recreate the Equipment tab that was deleted in commit `fe0f2a0`. This tab should allow the player to equip and unequip gear, view equipped items, and manage their inventory. ## Context - Equipment system is fully implemented in the crafting store (`craftingStore.ts`) - `EquipmentInstance` has: `instanceId`, `typeId`, `name`, `enchantments[]`, `usedCapacity`, `totalCapacity`, `rarity`, `quality`, `tags[]`, weapon mana fields - Equipment slots: `mainHand`, `offHand`, `head`, `body`, `hands`, `feet`, `accessory1`, `accessory2` - `equippedInstances: Record<string, string | null>` maps slot → instanceId - Equipment types defined in `src/lib/game/data/equipment/` (9 categories, 40+ types) - Equipment actions in `src/lib/game/crafting-actions/equipment-actions.ts`: `createEquipmentInstance()`, `equipItem()`, `unequipItem()`, `deleteEquipmentInstance()` - Loot inventory components exist in `src/components/game/LootInventory/` - Rarity system: common → mythic with colors defined in the design token system ## Requirements - Create `src/components/game/tabs/EquipmentTab.tsx` - Show all 8 equipment slots with currently equipped items (or empty slot) - For each equipped item display: - Name with rarity color - Slot type and category - Enchantment count and capacity used/total - Quality percentage - Unequip button - Show unequipped inventory items in a separate section below the slots - For each inventory item display: - Name with rarity color - Equip button (auto-assigns to correct slot, or shows slot selector for flexible items) - Delete button (with confirmation) - Drag-and-drop is NOT required — click-based equip/unequip is fine - Show total enchantment effects summary from all equipped items - Use shared UI components from `src/components/ui/` - Use Tailwind CSS from the global design token system (no SCSS) - 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 - Write tests ## Architecture Notes - Follow the existing lazy-loaded tab pattern - Use Zustand store selectors - Keep under 400 lines; split into sub-components (e.g., `EquipmentSlotGrid.tsx`, `InventoryList.tsx`) if needed - Reuse `EquipmentItem.tsx` from `LootInventory/` where appropriate
Anexim added the ai:blocked label 2026-05-19 10:45:25 +02:00
n8n-gitea was assigned by Anexim 2026-05-19 10:45:25 +02:00
Anexim added ai:todo and removed ai:blocked labels 2026-05-19 21:54:22 +02:00
Anexim commented 2026-05-19 21:55:11 +02:00
Author
Owner
Copy Link
Copy Source

Starting work on Equipment Tab recreation. Will create EquipmentTab.tsx with slot grid, inventory list, and effects summary.

Starting work on Equipment Tab recreation. Will create EquipmentTab.tsx with slot grid, inventory list, and effects summary.
Anexim commented 2026-05-19 22:05:16 +02:00
Author
Owner
Copy Link
Copy Source

Equipment Tab successfully recreated and deployed. All 20 tests pass, build compiles cleanly, and code is pushed to master.

Files created:

  • src/components/game/tabs/EquipmentTab.tsx — Main tab component (96 lines)
  • src/components/game/tabs/EquipmentTab/EquipmentSlotGrid.tsx — 8-slot grid showing equipped items (80 lines)
  • src/components/game/tabs/EquipmentTab/InventoryList.tsx — Unequipped items with equip/delete actions (136 lines)
  • src/components/game/tabs/EquipmentTab/EquipmentEffectsSummary.tsx — Aggregated enchantment effects display (94 lines)
  • src/components/game/tabs/EquipmentTab.test.ts — 20 tests covering exports, slots, types, actions, effects, file sizes

Files modified:

  • src/components/game/tabs/index.ts — Added EquipmentTab barrel export
  • src/app/page.tsx — Added lazy-loaded EquipmentTab + "⚔️ Equipment" tab trigger

Features:

  • All 8 equipment slots displayed in a 4×2 grid with rarity-colored borders
  • Equipped items show name, type, capacity, enchantment count, quality, and unequip button
  • Inventory section with equip (auto-assign or slot selector for accessories), and delete with confirmation dialog
  • Equipment effects summary showing bonuses, multipliers, and specials from all equipped enchantments
  • DebugName wrapper for debug mode visibility
  • All files well under 400-line limit
Equipment Tab successfully recreated and deployed. All 20 tests pass, build compiles cleanly, and code is pushed to master. **Files created:** - `src/components/game/tabs/EquipmentTab.tsx` — Main tab component (96 lines) - `src/components/game/tabs/EquipmentTab/EquipmentSlotGrid.tsx` — 8-slot grid showing equipped items (80 lines) - `src/components/game/tabs/EquipmentTab/InventoryList.tsx` — Unequipped items with equip/delete actions (136 lines) - `src/components/game/tabs/EquipmentTab/EquipmentEffectsSummary.tsx` — Aggregated enchantment effects display (94 lines) - `src/components/game/tabs/EquipmentTab.test.ts` — 20 tests covering exports, slots, types, actions, effects, file sizes **Files modified:** - `src/components/game/tabs/index.ts` — Added EquipmentTab barrel export - `src/app/page.tsx` — Added lazy-loaded EquipmentTab + "⚔️ Equipment" tab trigger **Features:** - All 8 equipment slots displayed in a 4×2 grid with rarity-colored borders - Equipped items show name, type, capacity, enchantment count, quality, and unequip button - Inventory section with equip (auto-assign or slot selector for accessories), and delete with confirmation dialog - Equipment effects summary showing bonuses, multipliers, and specials from all equipped enchantments - DebugName wrapper for debug mode visibility - All files well under 400-line limit
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 ai:todo
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#90
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?