I want to create a character sheet whereby scores are expressed by ticking radio buttons. I need all the buttons to be checked to the left of the one I clicked last. I am also using a grid layout, meaning that I cannot use the example in the roll20 CSS wizardry example as each button is contained in its own <div> which is referenced to the CSS grid to insure its exact placement on the character sheet. I have come up with the following html/CSS code: <div class="wrapper body">
<div class="h14">
<input type="text" name="attr_combat" class="dot" value="1"/>
<button type="action" name="act_combat_1" class="dot">
<span class="checked"></span>
</button>
</div>
<div class="i14">
<input type="text" name="attr_combat" class="dot" value="2"/>
<button type="action" name="act_combat_2" class="dot">
<span class="checked hide1"></span>
</button>
</div>
<div class="j14">
<input type="text" name="attr_combat" class="dot" value="3"/>
<button type="action" name="act_combat_3" class="dot">
<span class="checked hide1 hide2"></span>
</button>
</div>
<div class="k14">
<input type="text" name="attr_combat" class="dot" value="4"/>
<button type="action" name="act_combat_4" class="dot">
<span class="checked hide1 hide2 hide3"></span>
</button>
</div>
<div class="l14">
<input type="text" name="attr_combat" class="dot" value="5"/>
<button type="action" name="act_combat_5" class="dot">
<span class="checked hide1 hide2 hide3 hide4"></span>
</button>
</div>
<script type="text/worker">
const toggleList = ["1","2","3","4","5"];
toggleList.forEach(function(button) {
on(`clicked:combat_${button}`, function() {
setAttrs({["combat"]:`${button}`});
});
});
</script>
</div> button.sheet-dot {
padding: 0;
border: solid 1px #a8a8a8;
cursor: pointer;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
.sheet-checked{
width: 6px;
height: 6px;
border-radius: 50%;
background: buttontext;
}
/* Hide the "checked" section of the radio if the hidden attribute value is greater than the button value */
input.sheet-dot[value="1"] ~ button.sheet-dot > span.sheet-hide1 {
display: none;
}
input.sheet-dot[value="2"] ~ button.sheet-dot > span.sheet-hide2 {
display: none;
}
input.sheet-dot[value="3"] ~ button.sheet-dot > span.sheet-hide3 {
display: none;
}
input.sheet-dot[value="4"] ~ button.sheet-dot > span.sheet-hide4 {
display: none;
}
.sheet-wrapper {
display: grid;
grid-template-columns: repeat(39, 25px);
grid-template-rows: repeat(61, 25px);
grid-gap: 2px;
align-items: center;
vertical-align: middle;
background-color: #fff;
color: #444;
}
.sheet-body {
font-size: 15px;
}
.sheet-h14{
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 13;
grid-row-end: 14;
padding: 2px;
margin: 0px;
text-align:center;
}
.sheet-i14{
grid-column-start: 8;
grid-column-end: 9;
grid-row-start: 13;
grid-row-end: 14;
padding: 2px;
margin: 0px;
text-align:center;
}
.sheet-j14{
grid-column-start: 9;
grid-column-end: 10;
grid-row-start: 13;
grid-row-end: 14;
padding: 2px;
margin: 0px;
text-align:center;
}
.sheet-k14{
grid-column-start: 10;
grid-column-end: 11;
grid-row-start: 13;
grid-row-end: 14;
padding: 2px;
margin: 0px;
text-align:center;
}
.sheet-l14{
grid-column-start: 11;
grid-column-end: 12;
grid-row-start: 13;
grid-row-end: 14;
padding: 2px;
margin: 0px;
text-align:center;
} The script is working in the sense that it store the right value in the attr_combat but for the life of me I do not understand why it does not make disappear the ticked box to the right ? Any help would be appreciated.
