leaderboardsgg / leaderboard-site

Frontend of Leaderboards.gg

leaderboards.gg

The dream: src 2.0

The MVP (minimum viable product): LTTP Leaderboards (starting with this because its an okay sized game with complex categories, and a db that we already have (or at least I think pinkus has it) User Profiles Run Uploads (or external linking) Board Customization and good management tools.

Discord

• If you have any questions, comments, concerns that don't fit in GitHub please direct them here!

Contributing

If you'd like to start contributing to the project please check CONTRIBUTING.md first to make sure things go as smoothly as possible!

VSCode Setup

• Install the recommended extensions

  • These come from /.vscode/extensions.json
  • They will also appear in the extensions tab in the recommended dropdown alongside some automatically suggested extensions from VSCode itself.

• Make sure if you have done Vue 2 dev in VSCode to disable Vetur extension for the workspace

• Enable Volar Takeover mode

Build Setup

• set node version with nvm

  • $ nvm use (You may need to run nvm install first)

• install pnpm (Performant NPM)

  • $ npm install -g pnpm

• install dependencies

  • $ pnpm install

• run nuxt generate

  • $ pnpm generate

• run and connect to backend

  • Create a copy of .env.example named .env file with the BACKEND_BASE_URL set to the address of the backend.
    1. you can use https://lbgg-backend-dev.fly.dev as is in the .env.example file if you don't want to run the backend locally
    2. You can download the backend project and run it locally here

• serve with hot reload at localhost:3000

  • $ pnpm dev

Look at the nuxt 3 documentation to learn more.

Other commands you can use

• build for production and launch server

  • $ pnpm build
  • $ pnpm preview

• generate static project

  • $ pnpm generate

Checkout the deployment documentation for more information.

Development Environment

If you're using VSCode (which we highly recommend) please install the 6 extensions that we have in our extensions.json file. This in the extensions section then shows you ESLint, Prettier, Vetur, NPM Intellisense, TailwindCSS IntelliSense, PostCSS Language Support, etc. This will allow you to have proper automatic linting, formatting, and more with no extra setup!

Vue File Structure

Check out FILESTRUCTURE.md if you are unsure how things are laid out in this repository.

leaderboard-site's Issues

Feature Request: After account creation, a user's nominated email address needs to be confirmed.

What are you wanting to be added?

Goal: Verify your account

Objectives:

After receiving an email, with a link to /confirm-account?code={code}, during navigation to that page the following should happen:

• Attempt to confirm the account with the correct backend API
• If the API response is invalid, redirect the user to the homepage with a modal showing the reason why
• If the API response is successful, redirect the user to the homepage with a success modal that tells them they can now log in
• If there is no code param present in the request, abort the navigation altogether

What might break?

Routing? In order to confirm or reject the confirmation code during navigation, this would seemingly be best to be done in a custom middleware. This bit is new to me, so I would highly recommend reading the docs on how this should be setup: https://nuxt.com/docs/guide/directory-structure/middleware

Relevant Issues

Parent Issue: #556
Backend Issue: leaderboardsgg/leaderboard-backend#144

Style the `<SiteNavbar />` component

What

Thanks to this PR #5. We have Tailwind setup and a functional <SiteNavbar /> component. Now we want to make it match our wireframes.

Wireframe

https://www.figma.com/file/DNCMCfWjft4poxGIgJSHyA/Wireframes?node-id=9%3A27

Acceptance

Have our newly created <SiteNavbar /> match our wireframes for both the Mobile and Desktop designs.

Task: Adding a proper icon library

What are you wanting to be added?

Add a library to handle any icons to be used on the site.
Requires a discussion to figure out what library works for the majority of contributors.

What might break?

Any inline svg's that are currently being used in the absence of a library will have to be replaced.

Relevant Issues

No response

Task: RenderOptions Is Not Generic Anymore

Contact Details

No response

What happened?

In testUtils.tsL49, we have RenderOptions<Vue>. Problem is that RenderOptions isn't generic anymore, which breaks all component rendering tests, and in turn, prevents commits. However, simply removing <Vue> isn't possible, since doing that causes the return of the enclosing function, stubbedRender to break as well. This is because the new RenderOptions does not have a mocks and stubs property.

What did you expect to happen?

Tests should succeed.

Step(s) to Reproduce

Commit some changes.

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Other

Other Browser

N/A

Relevant log output

(There's a bunch of repeated errors for all of our components. Pasting just one of them.)

 FAIL  components/blocks/cards/SignUpCard/SignUpCard.test.ts
  ● Test suite failed to run

    testUtils.ts:49:13 - error TS2315: Type 'RenderOptions' is not generic.

    49   options?: RenderOptions<Vue>,
                   ~~~~~~~~~~~~~~~~~~

Feature Request: Give user feedback during account creation/login

What are you wanting to be added?

Currently, a user can create an account, login, and logout. However, during the account creation and login processes, if an error occurs the user is not notified. For obvious reasons, this needs to be addressed, as it otherwise looks like our system is just broken.

Objectives:

• Update the current sign up modal, to accurately capture the minimum requirements for a password

The following are the current limitations/requirements for a password:

• supports Unicode

• must be at least 8 characters in length, and no more than 80 characters

• must have at least:

  • one uppercase letter
  • one lowercase letter
  • one number

• Report to the user the error(s) that occurred during the login or sign up process (if any)

Some common errors might be:

• the username already exists
• the password is missing a requirement

What might break?

Nothing should 🤞

Relevant Issues

Parent Issue: #556

Feature Request: Convert the `LanguageSelector` component

What are you wanting to be added?

During the process of migrating from Nuxt 2 -> 3, we lost a few components due to compatibility issues at the time. Thanks to efforts from @buffet-time we now have i18n back in the project. We should now be able to convert the LanguageSelector component, from the nuxt2 branch, to work with Nuxt 3.

The documentation on the library we're using for this can be found here: https://v8.i18n.nuxtjs.org/, but it's not totally up to date, since they're still in the trenches on trying to get everything upgraded as well.

What might break?

Nothing.

Relevant Issues

No response

Bug: Signup form unrecoverable from mismatched pwds

Contact Details

No response

What happened?

After fixing mismatched password and password confirmation fields, the "Sign Up" button still does not become available and the box stays red.

What did you expect to happen?

The error would be cleared and I would be able to sign up to the website.

Step(s) to Reproduce

Open the sign up form. Enter a valid email. Enter two different but valid passwords. Attempt to click "sign up". It should give an error saying the passwords don't match. Fix the passwords so that they match. Attempt to sign up. It will fail.

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Firefox

Other Browser

No response

Relevant log output

No response

Feature Request: [Nuxt3] Add I18n

What are you wanting to be added?

We were using this module in Nuxt2, and now that we're on Nuxt3 we need to re-implement this too.

Here's their current checklist before it's ready:
https://github.com/nuxt-community/i18n-module/blob/next/TODO.md

Might need another alternative.

What might break?

Possibly everything

Relevant Issues

No response

Task: Remove Unusued Imports in Tests

What are you wanting to be added?

Re: #502:

when i was trying to get things working here, these were helping. So i'm going to leave them for now but its on the TODO to wrangle these tests and get them working in as concise a manner as possible :)

Remove unused imports in the test files. Refer to linked thread above for example of what needs to be removed.

What might break?

Tests may break. CI/local runs will catch things though.

Relevant Issues

No response

Bug: Code doesn't compile after #92 was merged

Contact Details

No response

What happened?

Doing a simple npm run dev doesn't compile, there are various typescript error. Also the code is using the Object api which we should avoid using and functions such as parseInt which is a bad idea too.

What did you expect to happen?

Code the compile

Step(s) to Reproduce

clone the repo on main
npm install
npm run dev

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Chrome

Other Browser

No response

Relevant log output

ERROR  ERROR in components/Run/Run.vue:97:5                                                                                                                                                             18:57:20
TS7023: 'formattedStanding' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
     95 |   },
     96 |   computed: {
  >  97 |     formattedStanding() {
        |     ^^^^^^^^^^^^^^^^^
     98 |       switch (this.standing[this.standing.length - 1]) {
     99 |         case '1':
    100 |           if (this.standing === '1') {

ERROR in components/Run/Run.vue:101:28
TS2339: Property 'standing' does not exist on type '{ formattedStanding(): any; }'.
     99 |         case '1':
    100 |           if (this.standing === '1') {
  > 101 |             return `${this.standing}st`;
        |                            ^^^^^^^^
    102 |           } else {
    103 |             return `${this.standing}th`;
    104 |           }

ERROR in components/Run/Run.vue:103:28
TS2339: Property 'standing' does not exist on type '{ formattedStanding(): any; }'.
    101 |             return `${this.standing}st`;
    102 |           } else {
  > 103 |             return `${this.standing}th`;
        |                            ^^^^^^^^
    104 |           }
    105 |         case '2':
    106 |           return `${this.standing}nd`;

ERROR in components/Run/Run.vue:106:26
TS2339: Property 'standing' does not exist on type '{ formattedStanding(): any; }'.
    104 |           }
    105 |         case '2':
  > 106 |           return `${this.standing}nd`;
        |                          ^^^^^^^^
    107 |         case '3':
    108 |           return `${this.standing}rd`;
    109 |         default:

ERROR in components/Run/Run.vue:108:26
TS2339: Property 'standing' does not exist on type '{ formattedStanding(): any; }'.
    106 |           return `${this.standing}nd`;
    107 |         case '3':
  > 108 |           return `${this.standing}rd`;
        |                          ^^^^^^^^
    109 |         default:
    110 |           return `${this.standing}th`;
    111 |       }

ERROR in components/Run/Run.vue:110:26
TS2339: Property 'standing' does not exist on type '{ formattedStanding(): any; }'.
    108 |           return `${this.standing}rd`;
    109 |         default:
  > 110 |           return `${this.standing}th`;
        |                          ^^^^^^^^
    111 |       }
    112 |     },
    113 |   },

Bug: Dependabot Breaks CI at PNPM Step

Contact Details

No response

What happened?

Dependabot doesn't support PNPM, which causes our CI to fail with every Dependabot PR. So we've got two choices:

1. Manually update dependencies and close Dependabot PRs (lmao);
2. Swap out to Renovatebot

Methinks we could try Renovate out.

What did you expect to happen?

Our CI should, well, work lmao

Step(s) to Reproduce

Sit around and wait for a new Dependabot PR.

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Other

Other Browser

N/A

Relevant log output

No response

Feature Request: Use eslint-plugin-tailwindcss

What are you wanting to be added?

Would probably be a good idea to add https://github.com/francoismassart/eslint-plugin-tailwindcss to our eslint rules

What might break?

At first lots of components wouldn't match the rules

Relevant Issues

No response

Task: Update tests to be self contained

What are you wanting to be added?

In order to make sure that our code is well written and thoroughly tested, we want to strive towards making sure that tests are self contained. This means each testing block contains all the proper set-up/tear-down steps so that the individual test isn't relying on some state that was updated by a previous test.

Original context: #529 (comment)

Validation:

For this to be considered complete, we should be able to set the sequence.shuffle option to true in the vitest.config.ts file, and all the tests will be passing across multiple runs.

What might break?

Tests 😅

Relevant Issues

N/A

Task: Create profile about card component

What are you wanting to be added?

Description

Create a component for the about card for the profile pages desktop layout

Requirements

• Must have well named component props for all data
• Must support a varying number of social links from a fixed list (currently: Twitch, Youtube, Discord, Twitter)
• Must be an SSR component

Images

What might break?

Pretty much nothing :/

Relevant Issues

No response

Create a `<NavBar />` component

What

Create our <NavBar /> component

Wireframe

https://www.figma.com/file/DNCMCfWjft4poxGIgJSHyA/Wireframes?node-id=9%3A27

Acceptance

Should be responsive between the mobile and desktop environments

Bug: Closing the tab logs you out

Contact Details

No response

What happened?

While logged into the website, upon closing the tab where I was logged in, I was no longer logged in.

What did you expect to happen?

Closing the tab where I am logged into the website and then re-opening it (while keeping the browser open) should not affect my login state.

Step(s) to Reproduce

Open two browser tabs. In one tab, log into the website. Close that tab. Navigate to the website. You are no longer logged in.

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Firefox

Other Browser

No response

Relevant log output

No response

Feature Request: Create new Leaderboard Page

What are you wanting to be added?

Goal: Create a Leaderboard Page

Objectives:

• Anyone should be able to navigate to /board/{slug}
• Fetch the leaderboard information with a new composable (see the current composables's for reference)
• Navigating to /board/{slug} should just display the name of the leaderboard for now

Things to know:

• You'll need the backend to be running, and have some leaderboard data in the DB. You can find the backend here, as well as information on how to set it all up. If you need help, you can ask in #general-dev or #backend.

• Don't worry about making the page look nice, we'll work on that more in the future

• It may have been a while, since the last time our API has been updated, so I would run pnpm generate:api, just to make sure we have the most up to date data contracts and everything else

• Routing documentation for Nuxt

What might break?

N/A

Relevant Issues

This issue is most similar to #541, if you need some references on how to set things up

Feature Request: Create Leaderboard Info Component

What are you wanting to be added?

Goal: Create the Leaderboard Info component

Objectives:

• After navigating to /board/{slug}, you should see the a profile header for the given user
• This component should be reactive and mobile first

Resources:

Figma Component

Mobile design	Desktop design

Things to know:

• If #545, is not done yet, it's completely fine to have generic defaults in place of actual leaderboard details
• If you don't have access to the Figma, that can be found also in the #resources, ask about access to it in #general-dev and someone should be able to help you out

What might break?

N/A

Relevant Issues

#545 is kind of a blocker in terms of getting actual information about the leaderboard. Theoretically, the route should be setup the same, so these two issue should be able to be worked on simultaneously.

Feature Request: User accounts & session handling

What are you wanting to be added?

I'm going to write this as if none of this is currently implemented as I'm unsure on the status.

Linked to backend issue leaderboardsgg/leaderboard-backend#144

Goal: Create functionality for user registration, account verification, and session handling

Objectives:

• A person must be able to create a user account via our account creation service.
  • Account creation must include key user identity details - a username, an email address, and a password. Constraints on key details should be presented/explained to the user on the form. We should explain to a user in this form what data we are storing, and the reasons behind it.
  • Validation: A username must be unique.
  • Validation: An email address must be unique.
  • Further details are not MVP.
  • A user's password must be properly secured immediately upon receipt.
  • #563 This information must be validated immediately upon receipt; If it does not pass all requirements, the account creation must be rejected by sending the user back to the account creation form with all of their provided information pre-filled. The user must receive a negative feedback notice explaining what the specific validations issue(s) are/was.
  • Upon successful validation, a user account's details must be stored within the database. The user must be sent to the homepage and receive a positive feedback notice confirming successful account creation. The user should be informed that they've been sent a confirmation email.
• #564
  • We do this by sending the user an email.
  • The email must contain a hyperlink that contains a URL token associated with their account by some method.
  • A confirmation email must be single use, so we need a way for it to be considered valid or invalid. (This is probably a backend task)
  • A confirmation email must only function for 1 hour, at which point it must become invalid.
  • If a hyperlink that is no longer valid is clicked, it must send the user to the homepage with a negative feedback notice explaining that the link has timed out and is no longer valid.
  • A valid hyperlink must send the user to a script page.
  • If the script page confirms that the email confirmation is valid, it must adjust their database entry's email confirmation status value to recognize confirmation.
  • The user must be sent to the homepage upon completion of the confirmation script, and receive a positive feedback notice confirming that their email has been successfully confirmed.
  • Email confirmation must be entirely decoupled from user session handling. This script should not log a user in immediately.
• A user must be able to login by providing their account credentials
  • This option must be available on any page on the application
  • For MVP, it does not matter if they have extensive ways of logging in through Google etc. So long as they can, that is what matters.
  • Account credentials must include either username or email address, and password.
  • Passwords as received from the database will be secured, so the user's password value must be secured using the same method and the two secured passwords must be compared to verify the correct password. We do not de-encrypt the stored password.
  • If the user provides valid credentials, we must create a session for the user
• #565
  • This must only be accessible if no session exists. A logged in user must not be able to access account recovery.
  • This script must require the user to input both their username and their email address.
  • We must verify and validate both username and email address before firing the account recovery email off
  • Upon successful verification, we must email the user with a hyperlink to a password reset script. This link must contain a URL token associated with their account by some method. We do not handle the actual recovery via the email.
  • An account recovery email needs to have a way to be considered valid or invalid.
  • An account recovery email must be single use. Upon successful use, it must become invalid.
  • An account recovery email needs to be valid for 1 hour, at which point it becomes invalid.
  • Sending an account recovery email must make any existing account recovery emails for the user invalid.
  • If a hyperlink that is no longer valid is clicked, it must send the user to the homepage with a negative feedback notice explaining that the link has timed out and is no longer valid.
  • A valid hyperlink must send the user to a form which allows them to input a new password.
  • The submitted password must be properly validated & secured immediately upon receipt.
  • Once validated and secured, their password must be adjusted in the database.
  • A successful password reset via account recovery must destroy a user's session if one exists as an additional protection.
• A user with an active session must be able to logout
  • This option must be available on any page on the application; and replace the login button
  • We do not need to do any validation upon this script being actioned by the user, we can simply destroy the session.

What might break?

N/A

Relevant Issues

No response

Feature Request: Auto-login on Register

What are you wanting to be added?

So this is only for MVP, and this needs to be removed before launch, but we should trigger logging in immediately after registering.

What might break?

Nothing

Relevant Issues

No response

Task: Create Login/Signup components

What are you wanting to be added?

Description

Create a components for logging in and singing in based off of the Figma wire frame

Requirements

• Components must be responsive
• Fields must have proper data binding
• Components must work both in a standalone page or a modal

Images

Layout	Image
Mobile Login
Mobile Signup
Desktop Login
Desktop Signup

What might break?

Nothing should break unless you really screw this up somehow.

Relevant Issues

No response

Feature Request: [Nuxt3] Auth

What are you wanting to be added?

We were using this module in Nuxt2, and now that we're on Nuxt3 we need to re-implement this too.

While they don't have a checklist to see when the next version will be ready, their current version is on the way out. On top of that it requires the use of Vuex, which Nuxt3 dropped as the official state management system.
https://github.com/nuxt-community/auth-module/tree/next-poc

Might need to find an alternative or figure out how to implement it with a plan for upgrading later.

What might break?

Nothing, since no auth exists currently.

Relevant Issues

No response

Feature Request: Create Run Table Component

What are you wanting to be added?

Goal: Create the Run Table component and sub components

Objectives:

• After navigating to /board/{slug}, you should see the run table for a given leaderboard
  • it is not expected that the table be populated with real data at this time
• This component should be reactive and mobile first

Resources:

Figma Component

Mobile design	Desktop design

• Note that the Run Table design is slightly out of date, as the verified column is no longer needed
• Also note that the Run Component itself has two variants in the mobile design. There is a list style, which makes the table have a horizontal overflow, and then there is a compact style, which displays all the information without the table headers. Ideally, this difference in rendering will be based on user preferences, but for now I think it's okay to assume the default would be the list style.

List Style	Compact Style

Things to know:

• Designs are likely going to change, once we have enough of a working demo site together for our designers to work on the look and feel of the project. If handling both the styles of the run component is too much effort, then I would say it's okay to just stick with the list style view for now.
• If you don't have access to the Figma, that can be found also in the #resources, ask about access to it in #general-dev and someone should be able to help you out

What might break?

N/A

Relevant Issues

#545 is kind of a blocker in terms of getting actual information about the leaderboard. Theoretically, the route should be setup the same, so these issues should be able to be worked on simultaneously.

Feature Request: Resend confirmation email link

What are you wanting to be added?

Currently, there is no way to actually resend the confirmation email besides literally just hitting the endpoint manually. There should be a link on the website to resend the confirmation email that appears while logged in but not confirmed.

What might break?

nothing probably™️

Relevant Issues

Could be done as part of #591 a la "Don't forget to confirm your account. Click here to resend the confirmation email."

Conver test files `.js` -> `.ts`

One last thing I didn't mention:
all the tests are in .js files and therefore not typed. Should we move on to TS with this directly or create another issue?

So specifically around this, I think it's probably best to make another issue for it. I tried to address it with a commit in this PR, but I was having a bunch of trouble with it, especially since I've never setup anything TS related on my own. So I'd love to have someone more familiar with TS help out with this.

Originally posted by @erunks in #19 (comment)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency @types/node to v20.12.8
• Update dependency vitest to v1.5.3
• Update dependency unplugin-icons to ^0.19.0
• Update dependency unplugin-vue-components to ^0.27.0
• Update typescript-eslint monorepo to v7.8.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/github-script action to v7
• Update actions/setup-node action to v4
• Update dependency eslint to v9
• Update dependency node to v20
• Update pnpm/action-setup action to v3

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v3
• juliangruber/read-file-action v1
• buffet-time/pnpm-versions-check-action v1.2
• actions/cache v3
• pnpm/action-setup v2.4.0
• actions/setup-node v3.8.2
• actions/cache v3

.github/workflows/code_quality.yml

• actions/checkout v3
• juliangruber/read-file-action v1
• buffet-time/pnpm-versions-check-action v1.2
• actions/cache v3
• pnpm/action-setup v2.4.0
• actions/setup-node v3.8.2
• actions/cache v3

.github/workflows/update-api.yml

• actions/checkout v3
• juliangruber/read-file-action v1
• buffet-time/pnpm-versions-check-action v1.2
• actions/cache v3.7.0
• pnpm/action-setup v2.4.0
• actions/setup-node v3
• actions/cache v3
• actions/github-script v6

npm

package.json

• @nuxt/vite-builder ^3.11.2
• @nuxtjs/eslint-config-typescript ^12.1.0
• @nuxtjs/tailwindcss ^6.12.0
• @types/dotenv-safe ^8.1.6
• @types/eslint ^8.56.10
• @types/node ^20.12.7
• @typescript-eslint/eslint-plugin ^7.7.1
• @typescript-eslint/parser ^7.7.1
• @vitejs/plugin-vue ^5.0.4
• @vue/compiler-sfc ^3.4.25
• @vue/eslint-config-typescript ^13.0.0
• @vue/test-utils ^2.4.5
• dotenv-safe ^9.1.0
• eslint ^8.57.0
• eslint-config-prettier ^9.1.0
• eslint-plugin-nuxt ^4.0.0
• eslint-plugin-prettier ^5.1.3
• eslint-plugin-tailwindcss ^3.15.1
• eslint-plugin-vue ^9.25.0
• eslint-plugin-vuejs-accessibility ^2.3.0
• happy-dom ^14.7.1
• husky ^9.0.11
• postcss ^8.4.38
• prettier ^3.2.5
• pretty-quick ^4.0.0
• swagger-typescript-api ^13.0.3
• tailwindcss ^3.4.3
• typescript 5.4.5
• unplugin-icons ^0.18.5
• unplugin-vue-components ^0.26.0
• vite-plugin-eslint ^1.8.1
• vite-plugin-top-level-await ^1.4.1
• vitest ^1.5.2
• vitest-fetch-mock ^0.2.2
• node >=18.0.0
• pnpm 9.0.6
• pnpm 9.0.6

nvm

.nvmrc

• node 18.20.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Task: Add Step to Edit Readme When Making PR, Maybe

What are you wanting to be added?

I'm thinking that moving forward, we should encourage devs to update the Readme as part of their PR where relevant, by way of adding a description in CONTRIBUTING.md.

What might break?

None, as this involves editing the Readme.

Relevant Issues

No response

Feature Request: Create new User Page

What are you wanting to be added?

Goal: Create a User Page

Objectives:

• Anyone should be able to navigate to /user/{id}
• Fetch user information with a new composable (see the current composables's for reference)
• Navigating to /user/{id} should just display the username for now

Things to know:

• You'll need the backend to be running, and have some user data in the DB. You can find the backend here, as well as information on how to set it all up. If you need help, you can ask in #general-dev or #backend.

• Don't worry about making the page look nice, we'll work on that more in the future

• It may have been a while, since the last time our API has been updated, so I would run pnpm generate:api, just to make sure we have the most up to date data contracts and everything else

• Routing documentation for Nuxt

What might break?

N/A

Relevant Issues

N/A

Task: Move SVG code into separate files, away from page structure.

What are you wanting to be added?

The svg code is huge and ugly and we shold have a way to pull in the data from another file.

What might break?

Nothing if we do it right.

Relevant Issues

No response

Create a `<Footer />` component

What

Create our <Footer /> component

Wireframe

https://www.figma.com/file/DNCMCfWjft4poxGIgJSHyA/Wireframes?node-id=28%3A215

Acceptance

Should be responsive between the mobile and desktop environments

Can I refactor our components and move the tailwind to the style section?

What are you wanting to be added?

BEM class names when needed, and moving the tailwind into the style section, to separate the html markup and the styles in a clearer way that won't muddy up the legibility of the code when it comes time for more complex components.

What might break?

Unknown

Relevant Issues

No response

Create a `<Run />` component

What

Create our <Run /> component

Wireframe

https://www.figma.com/file/DNCMCfWjft4poxGIgJSHyA/Wireframes?node-id=90%3A238

Acceptance

Should be responsive between the mobile and desktop environments

Fix All References to the Old Site Name

What are you wanting to be added?

Move through the readme and switch srw stuff to lbgg stuff. It might also be good to separate with markdown the information about the structure of a vue file from the actual project information that we wrote.

What might break?

Nothing, its a readme

Relevant Issues

No response

Task: Add rules to keep accessibility and performances as high as possible

What are you wanting to be added?

speedrun.website should be opened to everyone and every computer, every kind of connection. As such, we need to make sure that this stays a priority whenever we create new features or when we change the UI.

In order to do so, we need to make sure to respect as many rules of the WCAG (https://www.w3.org/WAI/standards-guidelines/wcag/ ) which gives all the standard for accessibility, and at least stay at AA standard. To do so, I propose to setup eslint a11y (https://www.npmjs.com/package/eslint-plugin-vue-a11y) on the project, which follows these rules.

We should also use Lighthouse on the CI ( https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md ) to make sure we stay high on both performances and accessibility.

TL;DR:

• Setup a11y rules with Eslint for local development
• Setup Lighthouse on the CI to measure performances and accessibility
• Fix whatever else needs to be fixed to meet our standard: I advice going for AA.

What might break?

Nothing should break; if anything it should make fix stuff for accessibility purpose :D

Relevant Issues

N/A

Task: Create Profile Header Component

What are you wanting to be added?

Description

Create a component for the header of the profile page based of off the Figma wire frame

Requirements

• Must be responsive and follow both the desktop and mobile layout
• Must have well named component props for all data
• Banner images must be properly centred and fully cover the banner area
• Component must work in the grid layout of the profile page

(note: functionality for profile badges is not yet implemented on the back end and can be ignored from the wireframe)

Images

Layout	Image
Mobile Header
Desktop Header

What might break?

Nothing should break except my spirits

Relevant Issues

No response

Feature Request: Upgrade Nuxt/ Vue to 3.x

What are you wanting to be added?

Upgrading Nuxt/ Vue to latest 3.x versions. This is to gain the drastic performance benefits (lower ram footprint, faster load times, smaller install, and general higher Operations per second), the newer functionality, and etc.

What might break?

Well obviously quite a lot but I've migrated numerous Vue 2.x apps both personally and professionally to Vue 3.x

Relevant Issues

#90

Feature Request: Tell user to confirm email.

What are you wanting to be added?

Upon successfully signing up for an account, the user should be prompted to confirm their account via a banner or other text on the website. You could even make this banner persist until they confirm their account.

What might break?

Nothing probably, unless there are already banners.

Relevant Issues

No response

Feature Request: Add translation system

What are you wanting to be added?

We should add a translation system as early as possible, for easier integration later on. Probably will want to utilize this package, https://www.npmjs.com/package/@nuxtjs/i18n, as it looks really promising.

For acceptance, this should just move basic text snippets like: login, sign up, etc. to a translation file for English and have it render properly.

What might break?

Nothing should 🤞

Relevant Issues

N/A

Feature Request: Upgrade to `Nuxt Bridge`

What are you wanting to be added?

While Nuxt 3 is still in an unstable beta, the Nuxt team has released a bridge between versions 2 and 3. In order for us to be ready to use the latest technology once it's available, we should go ahead and upgrade to Nuxt Bridge. Upgrade steps can be found here: https://v3.nuxtjs.org/getting-started/bridge

What might break?

Hopefully nothing. According to their comparison chart, we should get some added benefits from this as well.

Relevant Issues

N/A

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: packageRules[0].matchPack, packageRules[0]: Each packageRule must contain at least one match* or exclude* selector. Rule: {"matchPack":["@nuxtjs/i18n","nuxt","vue","vite"],"enabled":false}

Task: UI to Allow Mods/Admins to Batch-Create Runs/Leaderboards

What are you wanting to be added?

As part of MVP, we need to allow mods to migrate existing leaderboards over to our site as pain-free as possible. For this, we should create a page/some UI to allow this, with error handling and such.

The business logic will be handled in leaderboardsgg/leaderboard-backend#56

What might break?

Nothing should break on the frontend. It should only mess up the backend.

Relevant Issues

leaderboardsgg/leaderboard-backend#56: backend logic to handle batch creation of runs/leaderboards

Feature Request: Connect the frontend with the backend for Login / Signup / Logout

What are you wanting to be added?

Right now, the frontend isn't connected to the backend.

I suggest using https://auth.nuxtjs.org/ for managing this as it allows us to connect with JWT for now and add Oauth2 later on with the same code base.

What might break?

Nothing.

Relevant Issues

No response

Task: Update base input to include binding for $listeners

What are you wanting to be added?

The input base component currently is set up just for v-model so other event binding cannot be done.

What might break?

When adding v-on="$listeners", v-model returns an input event as apposed to the proper data.

Relevant Issues

No response

Can I migrate the project from NPM to PNPM

What are you wanting to be added?

Move the project from being just NPM to using PNPM (like Yarn a faster manager ontop of NPM).

Yarn 1.x is great but Yarn 2.x+ has too many gotchas and things that make it harder to use over just standard NPM. PNPM remains being basically to the point of just being able to replace npm with pnpm without any hassle for people who've never used it, but getting the faster installs, smaller node modules files, better output, and various other benefits.

What might break?

A select few packages are a bit poorly implemented and can run into minor issues because of PNPMs hard linking to a cache. However if this is arises a simple one line to a .npmrc reverts it to a method which will not cause any conflict but still give many benefits.

Relevant Issues

No response

Add proper tests for pull requests

What

Add proper tests for the site to be run for each pull request

Acceptance

Tests should make sure that building and running the application works

Feature Request: Create User Profile Header

What are you wanting to be added?

Goal: Create the User Profile header component

Objectives:

• After navigating to /user/{id}, you should see the a profile header for the given user
• This component should be reactive and mobile first

Resources:

Mobile design	Desktop design

Things to know:

• Before we upgraded to Nuxt 3, we had a component for this. You can find the Nuxt 2 component here. All you should need to do is port it to the new syntax
• If #541, is not done yet, it's completely fine to have generic defaults in place of actual user details
• If you don't have access to the Figma, that can be found also in the #resources, ask about access to it in #general-dev and someone should be able to help you out

What might break?

N/A

Relevant Issues

#541 is kind of a blocker in terms of getting actual information about the user. Theoretically, the route should be setup the same, so these two issue should be able to be worked on simultaneously.

Feature Request: A user must be able to recover their password if they have forgotten it.

What are you wanting to be added?

Goal: Password recovery

It's inevitable. No matter what happens someone will forget their password, and we need to be able to support them setting a new one.

Objectives:

• Modify the current login modal, to add a Forgot my password option
  

• Clicking this new option should open a new modal of a similar design, with an email field, a username field, and a submit button

• The button should only be active when there is a valid email and a username in the inputs

• Clicking the button should hit the appropriate backend API to trigger sending a recovery email, with the use of a new composable (see the current API composable's for reference)

After receiving an email, with a link to /reset-password?code={code}.

• Upon clicking the link, the user should be navigated to the /reset-password page
• If there is no code param present in the request, abort the navigation altogether

During navigation:

• Hit the proper backend API to validate the code
• If the code is not valid, redirect the user to the homepage with a modal showing the reason why
• If the code is valid, finish the navigation to the page

After navigation:

• The page should have two inputs: password and passwordConfirmation (similar to the sign up modal), and a button with the text Change password
• The button should be disabled unless both inputs are filled and match
• Clicking the button should hit the proper backend API to reset the password, with the use of a new composable (see the current API composable's for reference)
• If the API response contains errors, the user should be shown a modal with the reason
• If the API response is successful, redirect the user to the homepage with a success modal and logout the current user (if any are logged in)

What might break?

Routing? In order to validate the reset code during navigation, this would seemingly be best to be done in a custom middleware. This bit is new to me, so I would highly recommend reading the docs on how this should be setup: https://nuxt.com/docs/guide/directory-structure/middleware

Relevant Issues

Parent Issue: #556
Backend Issue: leaderboardsgg/leaderboard-backend#144

Feature Request: Automagically update the API Client

What are you wanting to be added?

Goal: Automagically update the API Client when there is a new commit on the main branch of the backend repo

Objectives:

• Send an event message from the backend repo to the frontend repo, when there is a new commit on the main branch
• Consume the event on the frontend repo and trigger the generate:api script
• Commit the changes to the main branch on the frontend repo only if the tests pass

Possibly helpful reading

• https://blog.marcnuri.com/triggering-github-actions-across-different-repositories
• https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions
• https://docs.github.com/en/actions
• https://github.com/marketplace/actions/cross-repo-dispatch
• https://fabianmoronzirfas.me/tech/2019/02/06/cross-repo-github-action-triggering.html

What might break?

I can't see anything that would break assuming we make sure that our API composables are thoroughly tested. Doing that should prevent breaking backend changes from reaching the frontend, and eventually auto-deploying to our live site. This will also take some coordination from the backend team, to make sure that if there are breaking changes, that they're versioned accordingly.

Relevant Issues

No response

Bug: Fix PNPM Caching in CI

Contact Details

No response

What happened?

I noticed that the CI doesn't actually cache our Node packages. Looking at this PR's output:

This is my own fault, so I'll fix this. It's a tiny, easy change as well anyway. I should be able to simply follow these steps, listed in pnpm/action-setup's docs.

What did you expect to happen?

We should be caching our Node packages.

Step(s) to Reproduce

Simply get our CI to run. Easiest way is to make/push to a PR.

Were you on mobile when this happened?

No

What browsers are you seeing the problem on?

Other

Other Browser

N/A

Relevant log output

No response

Task: Fix Tailwind component style priorities.

What are you wanting to be added?

We need to have any Tailwind components using @apply to also be using @layer so that they are in the component layer and their styles can be easily overwritten when the component is used elsewhere in the code base.

Example:
Original Class

.input {
  @apply border border-gray-300 rounded px-3 py-2 focus:outline-none;
}

New Class

@layer components {
  .input {
    @apply border border-gray-300 rounded px-3 py-2 focus:outline-none;
  }
}

The current fix for this is using important: true in tailwind.config.js. This is very bad and we want this removed.
Here is a link to Tailwinds docs for @layer

What might break?

Currently using @layer causes most of the styles for the component to break. This may be an issue with how Tailwind is set up in the project and will need to be addressed.

Relevant Issues

No response