-
Notifications
You must be signed in to change notification settings - Fork 0
Description
- 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: }
- 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" }).
- 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.
- 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.