Implement an onboarding workflow for users entering a classroom for the first time to designate their player name and customize a basic avatar.
Resources:
Firebase documentation (linked in wiki)
Database diagram (see wiki)
Frontend:
When a user opens a classroom for the first time, bring up a page prompting them to input their player name and select a starting avatar. User input:
Player name (text field, required)
Selecting one each (required) of avatar Body, Hair, Shirt, Pants, Shoes
This page should not be able to be "bypassed", although clicking the Questable logo in the top left should still take you back to the home page.
Upon confirming the form, the player's name and outfit should be set to the chosen inputs.
Suggested Strategy:
See database diagram for an onboarded field to the user document. This will contain the list of classroom IDs for which the user has been onboarded.
Create a component OnboardingPage.tsx that is displayed conditionally in ClassroomPage.tsx instead of TeacherView or StudentView if the user has not been onboarded. You can do this conditionally by subscribing to the user's onboarded field and checking if the classroom ID is in that list. You can start with just the field for setting the name in the onboarding page.
Create a mutation in mutations.js called onboardClassroom() that will run upon completion of the form. This mutation should update the player name with the user input (and eventually, set avaBody, avaHair, avaShirt, avaPants, avaShoes), and it should also add the classroom id to the user's onboarded list. Since you subscribed earlier to onboarded, making this mutation should automatically trigger a rerender to stop displaying the OnboardingPage and display the correct TeacherView or StudentView instead (let me know if it doesn't)
Once you have the basic form structure working, add in selection for the avatar outfit. You can reuse code from Shop.tsx, but for the individual item cards you'll want to create a new component OnboardingItemCard that utilizes ItemInfoCard as a wrapper. See ShopItemCard and InventoryItemCard as references.
Ensure that the user must select one and only one of each item type (body, hair, shirt, pants, shoes) in order to submit the form.
Since we're still having trouble dynamically updating rendered avatars, you don't have to worry about showing an updated player avatar as they select outfit items.
Onboarding Workflow
Overview:
Implement an onboarding workflow for users entering a classroom for the first time to designate their player name and customize a basic avatar.
Resources:
Frontend:
When a user opens a classroom for the first time, bring up a page prompting them to input their player name and select a starting avatar. User input:
This page should not be able to be "bypassed", although clicking the Questable logo in the top left should still take you back to the home page.
Upon confirming the form, the player's name and outfit should be set to the chosen inputs.
Suggested Strategy:
onboardedfield to the user document. This will contain the list of classroom IDs for which the user has been onboarded.OnboardingPage.tsxthat is displayed conditionally inClassroomPage.tsxinstead ofTeacherVieworStudentViewif the user has not been onboarded. You can do this conditionally by subscribing to the user'sonboardedfield and checking if the classroom ID is in that list. You can start with just the field for setting the name in the onboarding page.mutations.jscalledonboardClassroom()that will run upon completion of the form. This mutation should update theplayername with the user input (and eventually, setavaBody,avaHair,avaShirt,avaPants,avaShoes), and it should also add the classroom id to the user'sonboardedlist. Since you subscribed earlier toonboarded, making this mutation should automatically trigger a rerender to stop displaying theOnboardingPageand display the correctTeacherVieworStudentViewinstead (let me know if it doesn't)Shop.tsx, but for the individual item cards you'll want to create a new componentOnboardingItemCardthat utilizesItemInfoCardas a wrapper. SeeShopItemCardandInventoryItemCardas references.