User Profiles

[Code-Over-Time]

Category: Fullstack Development

Level: Mid

Description

The Game Portal already has a data model for storing a user profile, however it is not actively used. It was added out of a future desire to have user profile management as a feature of Varcade Games.

It's time to start making use of this data model. A user should be able to change their user name and we would like them to be able to select an avatar.

You need to build a new piece of UI that the user can use to change their user name and select an avatar. This avatar will simply be an image selected from a predefined set of images.

Again the UI design here is up to you. Think about websites and apps you are familiar with. How do they manage this sort of feature? Would you prefer a pop-up 'modal' that sits on top of the current UI? Or an entirely new screen?

There will also need to be an API update to allow the Varcade Games client to fetch a users profile, including their avatar.

Avatar management

Users will not be allowed to upload their own avatars - they must select from a predefined list that is managed by the Game Portal. This list should be managed via the Game Portal similar to how games are added. We want to be able to add and remove avatars at any time via this UI.

Changing user name

User names must be unique, so when a user is changing their name they need to be notified if their selected name is unavailable.

Deliverable

• Updated Game Portal that allows website admins to upload avatars that can be selected by users
• Updated API endpoints for updating player name and avatar
• A new Varcade Games UI screen for profile management

Acceptance Criteria

• A Varcade Games website admin can add / remove avatars from the admin panel
• A player can change their user name
• A player can select an avatar
• The players chosen avatar is displayed in the edit profile screen

---

Task Tips!

• The player profile data model will want to store an ID that references a file that has been uploaded to the admin panel - this is similar to how the Game data model in the Game Portal has a field for cover_art.
• You can use the headshots from Rock Paper Scissors Apocalypse (see game_rps/client/src/assets/characters/headshots) as avatar images