Mana-Loop/docs/task5/subtask_17_context.md

Task 17: Fix Skill Requirement Display Bug (undefined Lv.[object Object])

Summary

This bug causes skills to display "Requires: [Skill Name] Lv.[object Object]" instead of the proper level requirement. The root cause is that cost objects are incorrectly placed INSIDE the req (requirements) object in skills.ts, causing the rendering code to iterate over the cost object as if it were a skill requirement.

Root Cause

In /home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts, several skill entries have the cost property incorrectly nested inside the req object.

Correct Format (cost OUTSIDE req):

researchFireSpells: { 
  name: "Fire Spell Research", 
  desc: "...", 
  cat: "effectResearch", 
  max: 1, 
  base: 300, 
  studyTime: 6, 
  req: { enchanting: 2 }, 
  cost: { type: 'element', element: 'fire', amount: 100 }, 
  attunementReq: { enchanter: 1 } 
}

Malformed Format (cost INSIDE req - BUG):

researchLifeDeathSpells: { 
  name: "Death Research", 
  desc: "...", 
  cat: "effectResearch", 
  max: 1, 
  base: 400, 
  studyTime: 8, 
  req: { enchanting: 3 , cost: { type: 'element', element: 'death', amount: 100 }},  // BUG: cost inside req
  attunementReq: { enchanter: 2 } 
}

Malformed Skill Entries

The following skills have cost incorrectly placed inside req (lines in skills.ts):

1. researchLifeDeathSpells (line 51)
2. researchAdvancedFire (line 54)
3. researchAdvancedWater (line 55)
4. researchAdvancedAir (line 56)
5. researchAdvancedEarth (line 57)
6. researchAdvancedLight (line 58)
7. researchAdvancedDark (line 59)
8. researchMasterFire (line 62)
9. researchMasterWater (line 63)
10. researchMasterEarth (line 64)
11. researchMetalSpells (line 86)
12. researchSandSpells (line 87)
13. researchLightningSpells (line 88)
14. researchAdvancedMetal (line 91)
15. researchAdvancedSand (line 92)
16. researchAdvancedLightning (line 93)
17. researchMasterMetal (line 96)
18. researchMasterSand (line 97)
19. researchMasterLightning (line 98)

Total: 19 malformed skill entries

How Skill Requirements are Rendered

In /home/user/repos/Mana-Loop/src/components/game/tabs/SkillsTab.tsx (lines 233-235):

{!prereqMet && def.req && (
  <div className="text-xs text-red-400 mt-1">
    Requires: {Object.entries(def.req).map(([r, rl]) => `${SKILLS_DEF[r]?.name} Lv.${rl}`).join(', ')}
  </div>
)}

The code expects def.req to be Record<string, number> (skill ID -> required level). When cost is inside req, the iteration produces entries like:

• [ "enchanting", 3 ] → "Enchanting Lv.3" ✓
• [ "cost", { type: 'element', ... } ] → "undefined Lv.[object Object]" ✗

The Fix

For each malformed entry in skills.ts, move the cost property OUT of the req object:

Before:

req: { enchanting: 3 , cost: { type: 'element', element: 'death', amount: 100 }}

After:

req: { enchanting: 3 }, cost: { type: 'element', element: 'death', amount: 100 }

Files to Modify

1. /home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts - Fix 19 malformed skill entries

No Changes Needed In

• /home/user/repos/Mana-Loop/src/components/game/tabs/SkillsTab.tsx - Rendering code is correct
• /home/user/repos/Mana-Loop/src/lib/game/formatting.ts - Not related to this bug
• /home/user/repos/Mana-Loop/src/lib/game/types/skills.ts - Type definitions are correct

Steps to Fix

1. Edit /home/user/repos/Mana-Loop/src/lib/game/constants/skills.ts
2. For each of the 19 malformed entries, move cost from inside req to be a separate property
3. Verify the fix by checking that Object.entries(def.req) only returns skill ID/level pairs
4. Run typecheck and lint to confirm no errors