Add level progress bar to char profiles

jkisor commented 2 years ago

Issue https://github.com/amoeba/treestats.net/issues/101

References:

EXPERIENCE_BY_LEVEL values: here
Progress bar styling: [here](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()#gradient_with_multi-position_color_stops)

Small Progress Example:

Large Progress Example:

Max Level Example:

jkisor commented 2 years ago

Hello @amoeba, I'm a fan of Asheron's Call (and Treestats, of course) as well as a Ruby developer. Hope you don't mind me dropping in to contribute.

I tried my best to stick to the style/patterns already present. Happy to make adjustments at your direction, let me know. Thanks!

amoeba commented 2 years ago

Heya @jkisor, I do not mind you dropping in to contribute at all. Thanks for taking the time to contribute.

Your changes look great. I noticed one bug where your code wouldn't handle some of the characters on custom servers who allow characters above level 275 (like InfiniteAC), so I've tweaked that part in f967cbd44f7524237b25f3d0fa3963b6c5c4a605. It's a pretty reasonable thing not to account for -- I didn't for quite a while until recently.

I also thought it might look neater if it looked like how it does ingame,

So I fiddled around and tweaked your code to make it look like:

I hope that's okay.

Again, thank you so much for contributing this. And extra thanks for the details in your PR and also for including tests.

This repo is a mirror of the private repo I use to manage the full source in order to hide some of the workings of the client->server encryption I use so I have to close this PR as unmerged but I've preserved your commits so you'll get credit just the same. Thanks again.

amoeba commented 2 years ago

Closed as unmerged since this is a mirror but commits in this PR retained as in:

amoeba commented 2 years ago

Changes and my tweaks are now live on treestats.net.

jkisor commented 2 years ago

Well done! It looks great. 🎉

amoeba / treestats.net