Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Zero Dot won't set everything to zero, and instead fills the full set.

October 19 (9 months ago)
Chris Jones
Pro
Sheet Author

Hello, 

I'm building out a character sheet that uses a series of dots for skills, attributes, and a few other elements. I've used a variance of this base sheet before and everything's been fine, however on my new version, I have one attribute that won't behave - everything else continues to work as normal, so I'm baffled as to what's gone wrong with it. Normal skills etc range from 0-5 and you can set them to zero by hitting the x - so far, so straightforward:

I've added a new trait that runs to 9 and made the standard changes to the HTML and CSS to get it working, and when I'm editing dots 1-9, it's perfect, however, when I attempt to reset it zero (a very important requirement for this attribute), it makes it appear as though all 9 dots are selected (if you roll it, it rolls zero dice, so the trait is working, but the sheet itself looks misleading).

ddd

            <div class="dots curse-dots">
                <input type="hidden" name="attr_curse" class="dot" value="0" />
                <button type="action" name="act_curse_0" class="dot zero-dot">
                 <span class="checked">x</span>
                </button>
                <button type="action" name="act_curse_1" class="dot">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_2" class="dot gt-1">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_3" class="dot gt-1 gt-2">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_4" class="dot gt-1 gt-2 gt-3">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_5" class="dot gt-1 gt-2 gt-3 gt-4">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_6" class="dot gt-1 gt-2 gt-3 gt-4 gt-5">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_7" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_8" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7">
                    <span class="checked"></span>
                </button>
                <button type="action" name="act_curse_9" class="dot gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8">
                    <span class="checked"></span>
                </button>
  const characteristicValues = ["0","1","2","3","4","5","6","7","8","9"];

and this is the CSS:

/* Style the dots */
.dots {
    display: flex;
    align-items: center;
}
/* Configure the button styling to make it look like a radio button. */
button.dot {
  padding: 0;
  border: solid 1px #a8a8a8;
  cursor: pointer;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
button.dot > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: buttontext;
}
button.zero-dot > span {
    width: auto;
    height: auto;
    background: none;
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.dot[value="0"] ~ button.gt-0 > span.checked {
  display: none;
}
input.dot[value="1"] ~ button.gt-1 > span.checked {
  display: none;
}
input.dot[value="2"] ~ button.gt-2 > span.checked {
  display: none;
}
input.dot[value="3"] ~ button.gt-3 > span.checked {
  display: none;
}
input.dot[value="4"] ~ button.gt-4 > span.checked {
  display: none;
}
input.dot[value="5"] ~ button.gt-5 > span.checked {
  display: none;
}
input.dot[value="6"] ~ button.gt-6 > span.checked {
  display: none;
}
input.dot[value="7"] ~ button.gt-7 > span.checked {
  display: none;
}
input.dot[value="8"] ~ button.gt-8 > span.checked {
  display: none;
}
input.dot[value="9"] ~ button.gt-9 > span.checked {
  display: none;
}


Anyway, I'm a little confused why my longstanding attributes work and appear correctly, but this new one doesn't - any ideas?


October 19 (9 months ago)
GiGs
Pro
Sheet Author
API Scripter

Is this your problem? This:

const characteristicValues = ["0","1","2","3","4","5","6","7","8","9"];

is not htnl - it needs to be in your script block, and then you need to do something with it.

October 20 (9 months ago)
Chris Jones
Pro
Sheet Author

All of that is in the script worker - this is the expanded version:

<script type="text/worker">

  const characteristicValues = ["0","1","2","3","4","5","6","7","8","9"];
  
  const characteristicNames = [
      "curse"
      ];
  
  characteristicNames.forEach(function(name) {
      characteristicValues.forEach(function(value) {
        on(`clicked:${name}_${value}`, function() {
          setAttrs({
            [name]: value
          });
        });
      });
  });
  
  
</script>
October 23 (9 months ago)
Chris Jones
Pro
Sheet Author

Don't suppose anyone else had any thoughts on this? I can't see why some traits work fine, but this last one's Zero button doesn't do what it's supposed to do...

October 23 (9 months ago)

Edited October 23 (9 months ago)
vÍnce
Pro
Sheet Author

I believe all you need to do is add the "gt-0" class to all the buttons after the reset button.

<div class="dots curse-dots">
<input type="hidden" name="attr_curse" class="dot" value="0">
<button type="action" name="act_curse_0" class="dot zero-dot">
<span class="checked">x</span>
</button>
<button type="action" name="act_curse_1" class="dot gt-0">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_2" class="dot gt-0 gt-1">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_3" class="dot gt-0 gt-1 gt-2">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_4" class="dot gt-0 gt-1 gt-2 gt-3">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_5" class="dot gt-0 gt-1 gt-2 gt-3 gt-4">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_6" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_7" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_8" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7">
<span class="checked"></span>
</button>
<button type="action" name="act_curse_9" class="dot gt-0 gt-1 gt-2 gt-3 gt-4 gt-5 gt-6 gt-7 gt-8">
<span class="checked"></span>
</button>
</div>


October 23 (9 months ago)
Chris Jones
Pro
Sheet Author

You legend - that fixed it perfectly. Thanks for the help :)


October 23 (9 months ago)
vÍnce
Pro
Sheet Author

+1
I'm just surfing in the wake of GiGs and Scott.  ;-)