I’ve seen a few different progress bar scripts and tools, but what I haven’t seen is a progress bar showing your levels as an average (or otherwise) of the colors of each SRS stage of each item. What I mean by this, is something like this:
I just screenshotted my items page on the WK statistics website and did some editing on it to get some solid ‘bars’ for each level, with level 1 on the left and level 60 on the right. It’d be cool if there was something like this, but more cleaned up, which shows each level and how ‘completed’ it is. If this already exists please tell me.
That’s pretty close to what I want, thanks! It’s not quite exactly what I want since I want something that’s on the dashboard and shows unlearned stuff too, but it satisfies the same hunger for stats!
Hmmm… I really like both of those settings, but I’m curious how it’d look of each level was a solid block of the average colours of each item It may look terrible though so you don’t have to implement it if it does
Honestly, I don’t know how to average colors in a good way, so unless someone has a good method for doing it I won’t, but if someone does I’m willing to try it out
Maybe you could calculate an average SRS stage based on the items first, then create a gradient between each pair of adjacent SRS stages and assign the color based on that gradient.
So say you’d have mostly burn items (stage 9) and a few enlightened items (stage 8) on a level, your average SRS stage would be something like 8.8 or so, so you’d use the Enlightened to Burn gradient and take the color at 80% into that gradient.
You might need to check if the gradients blend well, otherwise you could instead assign white to 0.5, which would cause the colors to fade to white between SRS stages before fading back to the SRS stage color.
I’ve got to get to bed and my knowhow for this stuff is incredibly lacking, but this is my (very) rough idea of how to do it:
const color = {
'-1': '#aaa',
// Changed 0 to be 6 characters long so it works
0: '#aaaaaa',
1: '#dd0093',
2: '#dd0093',
3: '#dd0093',
4: '#dd0093',
5: '#882d9e',
6: '#882d9e',
7: '#294ddb',
8: '#0093dd',
// Changing burns into a hex to match the others
9: '#dfaa0b',
}
// levelItems is an array containing the SRS level of each item (this data is probably not stored as an array but idk how WK handles this data)
const levelItems = [];
let itemValues = [0,0,0];
let averageColor = "#";
// For each level, a mean average is taken of each item's color
for (let i = 0; i < levelItems.length; i++){
// The original idea was to take the hex values as a string, chop them up into red, green, and blue, and then average those individually before recombining them.
// Apparently parseInt() can be used to convert hexadecimal to decimal. I have no clue about the efficacy of this since I don't even know how to run JS code
for (let j = 0; j < 3; j++){
// idk the best way to convert to a string in JS, google said String()
itemValues[j] += parseInt((("0x0" + String(color[levelItems[i]].slice((2*j + 1), (2*j + 2)))), 10));
}
}
// Divide by the total to get the means for RGB
itemValues /= levelItems.length;
// Convert back into hex
for (let j = 0; j < 3; j++){
averageColor += itemValues[j].toString(16);
}
// Can you just straight up do += on a string? idk either way you stitch it all back up and hopefully you should have an average hex color. Maybe. Probably not, this probably doesn't work.
Also yes the line starting with itemValues[j] is very ugly.
This does work in a sense, but you don’t really get the result you want when you do it this way (color is tricky)
Don’t worry, the whole script is kinda messy since I just threw it together as quickly as I could
I tried out some different options. These all show the same data
60: My actual bar for level 60
59: @BIsTheAnswer’s idea. I like this
58: Just testing a gradient between all of the colors of 60
57: @Wantitled’s idea of averaging hex components. Sadly this doesn’t work very well
56: Chained weighted interpolation between color pairs (I had a function in the Heatmap to interpolate between two colors)
While you’re testing… how about option 6: display the divs for the different stages on top of each other with opacity set to nr of items / total level items. Let the screen do the color mixing.
Hmmm, I’m wondering if that’s heavily reliant on the order of the divs. Probably would require the most opaque div at the bottom.
edit: hihi mine all turn to grey goop. Order of divs definitely matters for the result.
I basically gave the bars div the burn background (although I lightened it to prevent everything from turning gold and tan) and removed the burn segment from the original flex stack (which makes the otherwise small sections bigger for me), and that flex stack then has its opacity reduced by 5/6 of the burn ratio. I have no idea if this looks half decent for other distributions. Presumably if you have a small amount of burns in a level, you’d want it to be more visible that you have at least those many burns. In this setup it wouldn’t be very visible.
It’s very pastel. But I kinda like it.
@BIsTheAnswer 's gradient idea is really good, and it’s the closest to my original thought I think The only issue I see with it is that it won’t reflect the colours of items not close to the average, but then, you don’t really want to be mixing in yellows into your purple because then you’ll end up with my color.
56 is really nice too, even 58 could have some uses if you applied it to all your items. I don’t know what you’d use such a gradient for, but it’d be cool.
- day! 
It may look terrible though so you don’t have to implement it if it does
