Suggestion for Rank progress bar to show specific progress from one level to the next (explained further)

[comicallybad]

I wouldn't say this is much of an issue, rather a suggestion, considering the use case of the progression bar:

The progress bar, at high XP amounts always shows 90-100% complete. Even with lower XP levels, users never "fully reset" to 0% progress. User progress will ALWAYS start partially or most of the way through progression.

This is why I suggest calculating progress STRICTLY from one level to the next, not overall XP to level up XP.

EX in current state: When a user has 203K XP / 208K XP for their next level up, the progress bar will calculate to show near 100% complete as: 208K-203K = 5K XP from level up. If the progress bar max is 208K XP, 5K XP would only be ≈ 2.4% progress remaining.

How could this be fixed? Instead of calculating the progress bar only using: .setCurrentXP(), and .setRequiredXP(). It should be calculated using: .setPreviousRequiredXP(), .setCurrentXP(), and .setRequiredXP().

I recommend this as; even at low XP requirements, for example the images supplied on the ReadME.md: Level 2 requires: 500 XP, and say level 3 requires 800 XP. The progress bar, after reaching level 2, shows 5/8 progressed, as the user is 500 XP out of 800 XP required. In the case .setRequiredXP() is a large number; 208K XP, even requiring 10K XP to level up, the card shows ≈ 100% progressed.

If canvacord took .setPreviousRequiredXP(), .setCurrentXP(), and .setRequiredXP(), the user could see specific progress from current, to next level.

An example of this in use: Level 2 = 500 XP, Level 3 = 800 XP, if user reaches 500 XP, they are 0/300 XP required for level 3. Calculating the progress "level to level", in the previous example, could be done as follows: progressionBarMax = .getRequiredXP() - .getPreviousRequiredXP() XP actually required from level to level progressionBarCurrent = .getCurrentXP() - .getPreviousRequiredXP() XP actually achieved towards next level

For most scenarios: the goal is to see progression from "level to level." The current progression bar doesn't show "level to level" progression, rather "distance from required XP."

An example of current progression bar vs suggested: Suggested: User has 500XP, they're 300 XP from an 800 XP level up. Calculating "level to level," this makes them 3/8 progressed. Currently: User has 500XP, they're 300 XP from an 800 XP level up, instead of being 3/8 progressed, they are 5/8 progressed.

TLDR; The progress bar is a never ending, never "resetting" to 0% progression. It will ALWAYS show part way/most of the way completed to next level. For the use case of a progression bar like this, it should show progression level to level. Once leveled up: The progressionBarMax needs to be the difference of: required XP - previous required XP. The progressionBarCurrent needs to be the difference of current XP - previous required XP.

[twlite]

Progress bar width is calculated here:

https://github.com/archaeopteryx1/canvacord/blob/9dc6401bc0f1f38ec498ee2ff3f5a07f91e8b569/src/Rank.js#L624-L634

[twlite]

Plus if you want the progress bar to reset, ypu have to provide appropriate value since it isnt canvacord's job to manage your xp system. It takes whatever you've provided and constructs an img. You need to implement xp system based on your level on your side. For example, setting the xp back to 0 on level up. We will not take care of that since we are not focusing on a particular api but more of the universal api.

[comicallybad]

So the XP system you have created resets your total XP back to 0 every single level up..? I guess I can just fork the project and make the changes, but just like MEE6, you do not "reset back to 0 XP." You continue on, but can actually have a rank card that displays your progress to next rank correctly.. If a user is always reset back to 0 XP, then there is no "XP gain."