benlei / samsara-web Goto Github PK

Would be kind of nice to have it frozen so that when you scroll left/right/up/down, you know what you're really looking at.

It seems the general way to get it working is to overflow the table, then make the table header/column position fixed/sticky or something.

This would make certain things like just simply knowing where you are on a table more obvious.

Note that if this route is taken, we'll need to make sure the download png button undoes the fixed header (if it needs to be undone).

Some rambling thoughts around this:

1. https://github.com/pacocoursey/next-themes
2. Start everything INVERTED (in dark mode)
3. See https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript - but basically you seem to just need window.matchMedia('(prefers-color-scheme: dark)').matches. If not dark mode, remove the inverted classes.

Going to need to look into contexts to make it easier :

• https://reactjs.org/docs/context.html
• https://reactjs.org/docs/hooks-reference.html#usecontext

ALTERNATIVELY see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Can just do it all via CSS. This could be the 'better' option since semantic UI doesn't support inverted on most things. For example while the menu can be inverted, the dropdown menu can't.

Edit: Actually, will want a dark mode button. I was trying to do a little research about this, and there do exist people who have dark mode on their OS, but still prefer light mode for certain websites. Would likely want to just utilize localstorage to deal with persistence.

Currently if you look at the page results on Google, it's basically random garbo.

Since, well, she'll be a standard character.

Do after #45.

I originally shied away from a burger menu for mobile because it wasn't immediately available in the UI framework I was using. But should revisit it again.

Note that Semantic UI's official site uses a fixed navbar with a burger menu: https://semantic-ui.com/

Would it make more sense to use tiles for each character? What do the lines really tell users?

Can do what that one person does on the Genshin subreddit and just show tiles with a number instead.

Investigate if tiles are more intuitive (for both mobile and desktop users).

The way things are currently sorted... is it actually standard? For me it works on mobile, but are there better ways to design it?

Additionally the ascending/descending button, expand/collapse button, and hide one off buttons... are there better ways to deal with it?

GitHub pages needs to be fully public. I don't really want that. So for now, abandoning Jekyll.

https://github.com/cloudflare/next-on-pages

Show Future Banners

At the moment if a character has rerun for a future patch/banner, they won't show up in the summary. I originally set it up that way because I was thinking people probably care more about the "now".

I've been thinking for awhile lately that it probably doesn't matter, as long as I show approximately when they'll start running (like it was doing originally). Moreover when I use my own site I do constantly wonder "who's next again...?"

History Table as Homepage

I guess I'm curious if people would much rather see that than the summary pages. That was technically the original intention of the site, too.

Along with the fact that it shows all the details right away and doesn't leave me wondering what banner is next.

Automatic deploy only if there is new data

Right now we're kind of deploying frequently... not particularly ideal. Would be good if we only deploy when there are actual changes.

Misc changes

• I named some compute functions "computer"... should fix.
• Dark mode as default - personally I like dark mode.

https://nextjs.org/docs/testing

Leaning a bit more towards Playwright right now.

See for how this can be added to the github actions:
https://github.com/microsoft/playwright-github-action

This test should occur on every PR + main build.

It'd be nice to be able to click on (hover?) over a character's image and see what 4 stars were run with them, what other 5 star. Additionally would be nice to see the weapons too.

Additional things to do while working on this:

• Redesign the options page
• Remove search for mobile - can't remove it for desktop, as it makes the page look a lot more complete.
• Kill off "Name" sort
• Kill off sorting by total runs first patch - it makes no sense to me now that I'm looking at it. Just use a single 'total runs'.
• Kill off"expand", etc... given the few # of users of the site, and the fact that it's not exactly a popular-ish page, can likely just yoink it out.

Do after #42, #47

I'm not sure if this is really a 'problem' per se, but in my fantasy of a mind I'm thinking some people may be confused as to why certain characters aren't showing up on the page. Maybe by showing them faded, it can be an indicator that they exist, just that they don't count.

Alternatively instead of showing a faded char, perhaps a completely separate section below the original summary called "Not Applicable Characters/Weapons" with a little note saying that the characters haven't run long enough to apply to the stats.

https://genshin-impact.fandom.com/wiki/Category:Chronicled_Wishes

The first chronicled wish seems to only last as long as the first banner... is this going to be the same every patch? Will there be a 2nd half?

At the moment, probably best to just show 5 star pool and nothing else?

At the moment it's a bit non-intuitive to even myself.

For shortest leaderboard:
Just make it so that if they've never had a rerun, they should just be filtered out.

If they did have a rerun, just show the shortest out of reruns.

For longest leaderboard:
this can be a little different... can mostly keep as-is, but just make sure:

show longest wait between banners, OR longest wait so far.

https://www.mathsisfun.com/data/standard-deviation-formulas.html

https://www.youtube.com/watch?v=MRqtXL2WX2M

Would be nice to see the spread value.

I saw on /r/Genshin_Impact:

This looks like a pretty interesting concept to implement (https://www.reddit.com/r/Genshin_Impact/comments/zx8zgu/how_long_since_last_banner_4_5_stars/).

Things to consider/try out:

• Can try to add that info right below the character's name, but would have to consider how that changes the table.
• Can try to add it below the existing table, as a summary (hell, maybe for mobile folks this is what they see first).
• or, can just have a completely separate page for all of this (kind of preferring this more for less page clutter)

I also was considering swapping out the existing home page for this instead. Possibly an OK idea since I would assume that most people really only care about what char hasn't been rerun the longest.

There are other interesting information that should be available on the page, such as:

1. Total Reruns
2. Avg # of banners between banners
3. Avg # of months between banners
4. Avg # of patches between patches

additional filter outside of char name: filter by # of runs they have so far. e.g. allow to choose an operator (">, >=, ==, <, <=") -- Thinking about it more... I'm not seeing the value of it. So scrapping this line item.

I think it's currently in a state where it's probably fine to store it on browser in case people like viewing things a certain way.

Note that this should be done with #47 in consideration.

Right now mouse can't drag to scroll. Would be a nice QoL to add the capability.

Make sure you can also manually trigger it.

This should pull in the data-tools to do what is necessary.

it'll help differentiate the two better

Currently if a bad change were to be pushed out, it'd go through cloudflare pages just fine - especially bad changes that do not cause the build command to fail.

After #19 is finished, should look into a separate process:

1. Every main build should trigger build the app for testing purposes
2. If it passes, can utilize cloudflare pages action to deploy: https://github.com/cloudflare/pages-action

Would be kinda meme-y to display which character/weapon holds the crown for waiting the longest & shortest for a rerun.

Extra notes: Perhaps for mobile, should show only 3 sort options + an expand/more link/button that shows the rest.

Look into using html5lib for parsing the pages.

Save the data as a JSON or something.

It's not showing up on google right.

These features seems to be more or less completely unused, even though there's dedicated tabs for it. While I think introducing niche tools was originally a good idea, it's not what interests people to visit the site. So best do away with it and focus on what this site is all about: character/weapon reruns.

Make sure to also yank out the GitHub Action bits of it.

On the bright side, it's one less scraper to maintain.

https://react.semantic-ui.com

for now, don't try to persist banner sort settings (probably unnecessary).

Perhaps would be interesting to see if there's a way to get row/column highlighting... although it'd be kinda useless without ability to freeze the table header. Which at the moment doesn't seem possible with semantic ui.

maybe drop semantic ui and go for https://mui.com/material-ui/react-table/

I'm thinking that instead of having a sort by metrics page, perhaps I can split each metric up to its own page. In other words have a dedicated page for since last run, a dedicated page for longest wait leaderboard, so on and so forth.

In my mind at least, this will make pages look a lot more simple, and can make it so that certain pages can be bookmarked/shareable.

Do this after #42, though.

Note: If I wanna keep the metrics selection still, a hybrid solution would be to keep it + separate the metric pages, but utilize the route history API to every time the metric is changed.

It'd be useful to know if this feature is being utilized at all by anyone. If not, it'd be another feature that can be put on the chopping block.

It's a bit of a PITA to manage so many different files that barely vary - would be good to consolidate using static paths.

https://nextjs.org/learn-pages-router/basics/dynamic-routes/implement-getstaticpaths

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths

Would make it more obvious that you can scroll horizontally.

https://genshin-impact.fandom.com/wiki/Reset

The daily reset occurs at 04:00 (4 AM), based on your server's time zone. The weekly reset occurs each Monday, also at 04:00 (4 AM).

Asia: GMT+8
Europe: GMT+1
America: GMT-5

of course, America should be assumed first.

maybe can add it above/below the light/dark mode switch

another thing to note: the fandom banner names are in GMT+8 timezone

It's been close to a month since I've added Google Analytics, and I think it's been insightful.

A few takeaways:

• Summary page is most visited simply because it's the homepage.
• The Artifact rotation & 24h resin timer pages are basically unused. It's either poorly made, or something that is completely unused/unnoticed. Personally I've used my own tool, but even I have to admit that its feature/function is very niche.
• The other summary/history pages do peak some interest.
• Surprise/not surprise, mobile users use my site. Definitely will have to make sure site is more mobile friendly.

This can't take into consideration people who have Adblock, but I kind of doubt it affects the overall stats in any significant way.

I've already made a few tickets on this, and will make a few more after I post this. I think for v2 I'll focus on improving/changing the UI more, as well as deprecating features that are, effectively, unused. It may be beneficial to add a few different pages related to statistics, though.

One feature I can't tell if it's even being used is the download as a PNG button. Would be nice to know if that's even being used...

Example:

1. Have fixed days at 28
2. Set current active rotation to 12
3. Reduced fixed days to 7.
4. Notice that the current active rotation is now 7 (as expected).
5. Increase fixed days back to 28.
6. Notice that the current active rotation is NOT 7 anymore (which it should be).

I kind of played around this before, and want to go back to it now.

But it basically depends on the type of metric being sorted.

In short:

• relative should sort by earliest first
• runs, longest wait, and average should be by highest count first
• shortest wait should be by lowest first

do after #47

One redditor recommended this https://www.reddit.com/r/GenshinImpactTips/comments/zx1f2c/33_character_and_weapon_banner_history/j204phq/

Since the logo is green, can use green as the "trim" of the site.

https://react.semantic-ui.com/modules/search/

Should probably kill off the regex search stuff.