Our current package for rendering and animating spritesheets, react-responsive-spritesheet, is not state responsive, so we cannot dynamically update a player's appearance (say, upon inventory equips) without refreshing the page. The package itself is actually just a single class component. We could basically rewrite this in function component form and use the locally-written version (say, Spritesheet.tsx) instead of the package.
Checks
We would want to make sure that the rewrite is capable of the following functionality:
Rendered sprites in the Shop page should look nice in terms of margins, padding, centering, resizing, etc.
Rendered avatars should also look nice and be able to render as static avatars and animated sprites (depending on whether renderStatic() or renderAnimated() is used)
We would want the functionality that is already present in react-responsive-spritesheet where a sprite would animate on hover.
Previously, because react-responsive-spritesheet didn't work with state, we needed to reload the page in order to see updated avatars when someone customized avatars. In InventoryItemCard.tsx, remove the window.location.reload() and see if sprites can update dynamically as the player customizes them. This is very important! If this doesn't work, we might need to reconsider some of the state handling or class logic in items.tsx and Avatar.tsx.
Overview
Our current package for rendering and animating spritesheets,
react-responsive-spritesheet, is not state responsive, so we cannot dynamically update a player's appearance (say, upon inventory equips) without refreshing the page. The package itself is actually just a single class component. We could basically rewrite this in function component form and use the locally-written version (say,Spritesheet.tsx) instead of the package.Checks
We would want to make sure that the rewrite is capable of the following functionality:
renderStatic()orrenderAnimated()is used)react-responsive-spritesheetwhere a sprite would animate on hover.react-responsive-spritesheetdidn't work with state, we needed to reload the page in order to see updated avatars when someone customized avatars. InInventoryItemCard.tsx, remove thewindow.location.reload()and see if sprites can update dynamically as the player customizes them. This is very important! If this doesn't work, we might need to reconsider some of the state handling or class logic initems.tsxandAvatar.tsx.