Option 1: Ignore negative values
It's true, you can't have negative numbers in your progress bars. However... Since your progress is basically 0 when you have negative boxes, you can also look for a function that leaves numbers greater or equal to 0 as they are, but turns all numbers less than 0 to 0. Here's one:
[math]((x)^(1/2))^2[/math]
What is this? It takes the square root of x, then squares the result. For 0 and any positive number that's the number itself.
For negative numbers: You traditionally can't take the square root (or any even root) of a negative number. It's a complex number. I'm not sure why, but Sally returns the square root of a negative number as 0.
So if you put 20 into the function above, you get 20.
If you put -20, you get 0.
Now here's a progress bar that utilises this function and puts your progress at 0 when you have negative boxes:
[progress="[math]((([inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box])-84)^(1/2))^2[/math]/126"][math]([inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box])-84[/math][item=Sinister Box]/1[item=Box Box Box][/progress]
-76
/1
I put the part that is read by humans as the negative number, but you can change that of course.
Note: Only individual boxes are counted just like in your example, if you want it to include BoxBoxes add [item=Box Box]*21 to the functions.
Option 2: Signed progress bar
[progress="[math](((([inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box])-84)^2)^(1/2))[/math]/252"][math](([inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box])-84)[/math][item=Sinister Box]/1[item=Box Box Box][/progress]
[style]
.expbar > div {
left: 50%;
}
.expbar > div:nth-child([math][math]((([inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box])-84))^(1/2)[/math]+1[/math]){
transform: translateX(-100%);
}
[/style]
-76/1
Explanation
If this is badly worded or wrong, please let me know and I'll fix it.
Traditionally, a progress bar looks like this.
[progress="count/goal"]some text[/progress]
count is how many of the item you have at the moment,
goal is your desired quantity.
The signed progress bar needs both BBCode and CSS, let's go through each step by step.
[progress="[math]((count)^2)^(1/2)[/math]/[math]goal*2[/math]][/progress]
count is now
[math]((count)^2)^(1/2)[/math].
This squares count and then takes the square root. Positive numbers will stay the same, negative numbers will lose their sign. Meaning 26 → 26, -26 → 26. This number determines the width of our progress bar. -26 to 0 takes up the same space as 0 to 26, so both of them should have the same positive width.
goal is now
[math]goal*2[/math].
The range of a traditional bar is, say, 0 to 10. Now we want to include -10 to 10, so we need to double our range.
Now comes the CSS bit.
[style]
.expbar > div {
left: 50%;
}
.expbar > div:nth-child(1){
transform: translateX(-100%);
}
[/style]
.expbar refers to the container of our progress bar. > div is the div inside it - the filled part that expands as we fill up our bar.
First we move the position of 0 in our progress bar's range. In a traditional progress bar with a goal of 10, the range is 0 to 10. We start with 0 on the left and end with 10 on the right. Our signed progress bar reaches from -10 to 10, so we have to move the 0 dead center. This is done by shifting the filled bar 50% to the left.
Now we have a bar that has 0 in the center and both negative and positive values are valid widths. Now there's only one thing missing: When we have a positive count, the bar should expand to the right. When we have a negative count, the bar should extend to the left.
How do we do this? We tell the filled bar to move left by its entire length when our count is negative. This is the purpose of "transform: translateX(-100%);".
How do we adress the filled bar? .expbar > div:nth-child(1)
If the number between the parantheses is a 1, we address the filled bar. If it is anything other than 1, we address a non-existent element so nothing changes. We only want to run the code when we have a negative count, so now we have to find a function that turns any negative count into a 1 and any positive count into something other than 1.
One such function is [math](count^(1/2))+1[/math]. It takes the square root of count and adds +1. Sally interpretes the square root of a negative number as 0, so for every negative number we get 0+1 = 1. For every positive number we get somehing other than 1, because no positive number has a square root of 0. For a count of 0 we also get 1 and the code is run. However since the filled bar has a width of 0px at a count of 0, the bar is moved by 0px so nothing will change.
: 0)
20
27%
