Avatar: Update sprite generation package to Pixi

[IsoPhoenix]

Avatar: Update sprite generation package to Pixi

Overview:

At the moment, Questable uses a package called react-responsive-spritesheet to navigate spritesheets and render sprites. This package is outdated and doesn't work with modern React state variables. Updating to Pixi, a modern React animation package, will allow for more fluid and responsive sprite animation in avatars and otherwise.

Resources:

• ReactPixi documentation
• react-responsive-spritesheet documentation

  Frontend:

• All sprite rendering logic is abstracted into items.tsx, which contains class definitions for different objects. Rewrite the render() function to use react-pixi instead of react-responsive-spritesheet to render sprites.
• Remove all references to react-responsive-spritesheet and uninstall with npm uninstall react-responsive-spritesheet
• Run the following "tests" on the app:
  • 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)
  • 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.