UoaWDCC / passport

WDCC Passport project. Established in 2024.

Home Page:https://wdcc-passport.fly.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dynamic Progress bar

derogative404 opened this issue · comments

Description

As a user
I want to view a progress bar on the leaderboard page
So that I can understand how far I am from the next prize

Proposed Solution

https://www.figma.com/file/tvnkfOcsSfp21oouz9Lbqy/Initial-Design?type=design&node-id=1%3A2&mode=design&t=iO7v0AKyK6vCJEkG-1

Acceptance Criteria

  • Designed as per Figma layout
  • Route to be used is /leaderboard
  • Max height is 5 and min height is 0
  • height is set as a variable and can be adjusted to make the progress bar dynamic
  • Airplane travels with the top of the progress bar
  • When the progress is full (aka height is 5), airplane is no longer visible and user routed to the "Leaderboard page - achieved a prize"
  • prizes achieved counter should go up by 1 whenever the height is 5
  • Redeem prize button is greyed out till bar height is 5. Then it becomes active
  • Once redeem prize button is clicked, user routed to leaderboard-prize

Notes

completed