4* pity count tracking based on 5* pull pity

[tiffanynwyeung]

Bug Description

I noticed that getPullNumber is tracking 4 wishes based on the 5 pity count, not the 4 pity count https://github.com/Luzefiru/wuwatracker/blob/a68aef026d917febaf7033172348fe80c0e25849/src/lib/getPullNumber.ts#L19 The code doesn't seem to make sense in this case as the if statement check is functionally useless as it returns the same subtraction two lines below it, which suggests that it wasn't originally intended to subtract based on 5 pity.

Given that the current UI is displaying 4 pity based on the last 5 pulled, I think that causes confusion especially if you filter only for 4* wishes like this:

Proposed Solution

I propose importing in an additional param previousFourStarPullNumber to track 4* pity up to 10 and adjusting the if check such that getPullNumber returns the following:

return isFourStar ? pullNumber - previousFourStarPullNumber : pullNumber - previousFiveStarPullNumber

(thanks for this project btw, it looks pretty cool and i'm otherwise enjoying using it for wuwa)

[Luzefiru]

Thanks for your bug reports @tiffanynwyeung! They've been a huge help. 🙏

We intended 4-stars to be tracked with 5-stars, but it seems that the overall sentiment is that people want to see the 4-star pity as its own.

I propose importing in an additional param previousFourStarPullNumber to track 4* pity up to 10 and adjusting the if check

This is a good solution, our original implementation in fact, before we pivoted our design choice! If you'd like to work on it, feel free to make a PR and review & approve it promptly.

Additional Suggestion from Other Users

DEViantUA pointed this as well and shared their way of displaying the badge color of the pity accordingly. Here's their Python code to do it:

async def get_color_four_section(value):
    if 1 <= value <= 4:
        return {"hex": "#7FFFD4", "rgba": "rgba(127, 255, 212, 1)"}
    elif 5 <= value <= 7:
        return {"hex": "#FFA500", "rgba": "rgba(255, 165, 0, 1)"}
    elif 8 <= value <= 10:
        return {"hex": "#8A2BE2", "rgba": "rgba(138, 43, 226, 1)"}

async def get_color_five_section(value):
    if 1 <= value <= 16:
        return {"hex": "#7FFFD4", "rgba": "rgba(127, 255, 212, 1)"}
    elif 17 <= value <= 32:
        return {"hex": "#FFA500", "rgba": "rgba(255, 165, 0, 1)"}
    elif 33 <= value <= 48:
        return {"hex": "#8A2BE2", "rgba": "rgba(138, 43, 226, 1)"}
    elif 49 <= value <= 64:
        return {"hex": "#4682B4", "rgba": "rgba(70, 130, 180, 1)"}
    elif 65 <= value <= 80:
        return {"hex": "#FF4500", "rgba": "rgba(255, 69, 0, 1)"}