Add an inventory page for teachers, where teacher has access to every item and can equip as they please
Details
The easiest + best way to do this is refactoring existing code from inventory.
Refactor Inventory.tsx into a subcomponent InventoryDisplay that accepts player, classroom, and inventoryObjects props where inventoryObjects is the same as in the current implementation. It will keep the value state variable, but everything from line 48 (inventoryItems state variable) to the beginning of the return statement will be factored out into a separate component.
Create a new component called InventoryStudent that contains all the code factored out from Inventory. Like in the original Inventory, this will handle the fetching of student inventory and constructing the inventoryObjects list. This component should return InventoryDisplay with inventoryObjects passed in.
You will have to update routing in StudentView.tsx to this line: <Route path='inventory' element={<InventoryStudent player={player} classroom={classroom} />} />
Create a new component called InventoryTeacher. This will generate the inventoryObjects list using various get___Items() functions (see implementation in Shop.tsx) to get all possible items, then pass this into InventoryDisplay to be returned.
You will want to add a new route to TeacherView: <Route path='inventory' element={<InventoryTeacher player={player} classroom={classroom} />} />
Also update listItems.tsx with a new navbar item that links to the inventory route.
Teacher Inventory
Overview
Add an inventory page for teachers, where teacher has access to every item and can equip as they please
Details
The easiest + best way to do this is refactoring existing code from inventory.
Inventory.tsxinto a subcomponentInventoryDisplaythat acceptsplayer,classroom, andinventoryObjectsprops whereinventoryObjectsis the same as in the current implementation. It will keep thevaluestate variable, but everything from line 48 (inventoryItemsstate variable) to the beginning of the return statement will be factored out into a separate component.InventoryStudentthat contains all the code factored out fromInventory. Like in the originalInventory, this will handle the fetching of student inventory and constructing theinventoryObjectslist. This component should returnInventoryDisplaywithinventoryObjectspassed in.StudentView.tsxto this line:<Route path='inventory' element={<InventoryStudent player={player} classroom={classroom} />} />InventoryTeacher. This will generate theinventoryObjectslist using variousget___Items()functions (see implementation inShop.tsx) to get all possible items, then pass this intoInventoryDisplayto be returned.TeacherView:<Route path='inventory' element={<InventoryTeacher player={player} classroom={classroom} />} />listItems.tsxwith a new navbar item that links to theinventoryroute.