Avatar: Inventory + Customization Tab

[IsoPhoenix]

Avatar: Inventory + Customization Tab

Overview:

Tab for browsing inventory and customizing the player's avatar with inventory items

Frontend:

• There isn't a corresponding Figma mockup for this yet, but I think something analogous to the current "Student View: Shop Page" should work fine
• Perhaps coordinate with Eileen and Alex, who are in charge of shop page, so that you can recycle each other's code/write efficiently
• Tabs for the different types of inventory items that can be "equipped"
• Instead of "purchase", the green button should "equip" the selected item (first de-equipping any item in the same category that is already equipped)
• Change should reflect in the avatar

Backend:

• The player's Firestore document holds fields corresponding to the player inventory. These are under inventory in the DB diagram. Note this isn't an actual subcollection, just separated for organization. Each category contains a list of item ids (categories may vary, they are just placeholders in the DB diagram atm).
• Similarly, the player document has avatar fields corresponding to what it has equipped at the moment. Note that the ava_accessoriesfield is currently marked as a list of item ids, because I'm assuming you can have multiple accessories equipped at the same time (think bracelets, glasses, etc). If this isn't the case then you can change it and lmk
• Subscribe to the player document to get information about the current equipped items and inventory items
• When equipping something, just update the corresponding avatar field in the player document. If you subscribed correctly to the player document and used state variables to maintain the avatar appearance, the avatar appearance should update automatically
• In order to map item ids to correct spritesheet locations you will probably need to create a local file holding all the mappings. This can take a similar form to listItems.js, where you can export const an object holding all the correct mappings. For instance:

export const spriteMappings = {
    item_1_ID: {
        spriteFileName: 'itemsprites.png',
        spriteStart: 123,
        spriteEnd: 456,
    },
    item_2_ID: {
        spriteFileName: 'itemsprites.png',
        spriteStart: 443,
        spriteEnd: 466,
    },
    ...
}