Skip to content

feat(core): Implement extensible Cosmetic Unlock System #11

@BDubDesigns

Description

@BDubDesigns
  1. Configs (client/src/context/GameContext.jsx)
    EMPLOYEE_CONFIGS: We'll modify this config. Each employee will get two new keys:

cosmeticSlot: "employeeIcon_intern": A string to identify "what" is being skinned.

cosmeticUnlocks: []: An array of trigger objects, e.g., { triggerCount: 10, cosmeticId: "intern-icon-bronze" }.

New COSMETICS_CONFIG: We'll create a new config object. This acts as a master "database" mapping cosmetic IDs to their actual visual data (like the React component or CSS class).

"intern-icon-bronze": { name: "Bronze Duck", component: }

  1. State (client/src/context/GameContext.jsx)
    We'll add two new properties to the initialState:

unlockedCosmetics: []: An array of cosmeticId strings (e.g., "intern-icon-bronze") that the player has earned.

equippedCosmetics: {}: An object that maps a cosmeticSlot to an equipped cosmeticId (e.g., { employeeIcon_intern: "intern-icon-bronze" }).

  1. Reducer (client/src/context/GameContext.jsx)
    BUY_EMPLOYEE case: This is where the unlock logic lives. After a purchase, we'll check EMPLOYEE_CONFIGS.cosmeticUnlocks. If the new count matches a triggerCount, we'll add the corresponding cosmeticId to the state.unlockedCosmetics array.

New EQUIP_COSMETIC case: We'll add a new action so the player can change their visuals. This action will simply update the state.equippedCosmetics object.

  1. View (Components)
    EmployeeCard.jsx: This component will be refactored. Instead of directly rendering config.icon, it will:

Get the cosmeticSlot from config.

Use that slot to look up the equipped cosmeticId from state.equippedCosmetics.

Use that cosmeticId to look up the actual component from COSMETICS_CONFIG and render it.

New SetupShop.jsx: We'll need a new component that lets the player see their unlockedCosmetics and dispatch EQUIP_COSMETIC actions.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions