Image Preview

[03hchen]

Pushed to next semester - can be split into two tickets if needed

Context

Each game should have an image preview that is displayed:

• on the game gallery screen, so users get a sense of what the game looks like
• on the game page before the user clicks "Run Game", so the game only loads if the user is interested in playing
• on the game page if the game has no associated WebGL build
• on the home page if the game is a featured game
  This ticket will implement the frontend and backend of the image preview option.

The frontend for uploading images has already been implemented and ensures that only images with dimensions 630x500 pixels can be uploaded, and a field exists for the image in the database ("image" in the games collection).

Requirements

Backend

Integrate image previews into our application similar to how builds and PDFs are integrated using Backblaze and Cloudflare. Create a separate bucket for image previews and modify the .env file as necessary in your local and in Bitwarden.

Each image preview is associated with a game. Add a image field to the game model and type declaration where image is a url and is required. Create POST, PUT, and GET endpoints for image preview. Modify the delete game endpoint so that the image is deleted from Backblaze when the game is deleted.

Create Image

The frontend upload button and validation errors have already been implemented. Your task here will be to ensure the user input is uploaded to Backblaze.

Edit Image

On the Edit Game page, add an option next to the title for the user to edit the image preview. The tooltip should appear upon hover. Reference the Figma design here. This new image should replace the existing image in Backblaze.

View Image (Home Page)

The image preview should display within the gameboy on the home page. The database already stores the 1-3 games displayed on the home page, so your task is to display the image preview of the given game IDs. Reference the Figma design here.

View Image (Game Screen)

If a game has an associated WebGL build:

• display the image preview at first. Upon hover, the user should have the option to "Run Game". If the user clicks "Run Game", render the game itself. Reference the Figma design here. [TO DO: update when design done]
  If a game does not have an associated WebGL build:
• display the image preview in place of the WebGL build. Reference Figma design here

These updates should also update the game preview on the preview page and edit page.

View Image (Game Gallery)

The user should also be able to view the image preview on the game gallery. The game gallery should already display the title and description of each game. Modify the page so that the image preview displays in place of the current temporary image. Reference Figma design here.

Acceptance Criteria

• Admin should have the ability to add and edit image preview
• Adding and editing an image preview should update the new bucket in Backblaze
• Deleting a game should delete the image preview from Backblaze
• Image preview is visible on home page, game screen, and game gallery
• The frontend designs are updated to match the Figma designs

Notes

• Feel free to use any component library that may help such as Chakra or shadcn. Make sure to use Tailwind for styling!
• This is a big ticket, so don't be afraid to reach out for help!