kopparhavet/templates/roll-dialog.html

<div id="{{id}}" class="roll-dialog">
    {{#if skillName}}
    <h1 style="text-align: center;">{{localize skillName}} ({{skillValue}})</h1>
    {{else}}
    <h1 style="text-align: center;">{{name}}</h1>
    {{/if}}
    <div class="flexrow" style="margin-bottom: 10px;">
        <label style="margin: auto;">{{localize "ROLL.OPENCLOSE"}}</label>
        <input type="button" name="openclosed" min="0" value="{{startopen}}" style="min-height: 30px; min-width: 45px;" />
        <label name="notopenedorclosed" style="margin: auto; display: inline-block;">&nbsp;</label>
        <label name="closed" style="margin: auto; display: none; text-align: center;">{{localize "ROLL.CLOSED"}}</label>
        <label name="opened" style="margin: auto; display: none; text-align: center;">{{localize "ROLL.OPENED"}}</label>
    </div>
</div>

<script>
    (function() {
        const scope = document.getElementById("{{{id}}}");
        const input = scope.querySelector(`[name="openclosed"`);
        const closed = scope.querySelector(`[name="closed"`);
        const opened = scope.querySelector(`[name="opened"`);
        const none = scope.querySelector(`[name="notopenedorclosed"`);

        input.addEventListener("click", (event) => {
            event.target.value++;

            if(event.target.value > 0) {
                closed.style.display = "none"
                none.style.display = "none"
                opened.style.display = "inline-block"
            } else if(event.target.value < 0) {
                opened.style.display = "none"
                none.style.display = "none"
                closed.style.display = "inline-block"
            } else {
                opened.style.display = "none"
                closed.style.display = "none"
                none.style.display = "inline-block"
            }
        });
        input.addEventListener("contextmenu", (event) => {
            event.target.value--;

            if(event.target.value > 0) {
                closed.style.display = "none"
                none.style.display = "none"
                opened.style.display = "inline-block"
            } else if(event.target.value < 0) {
                opened.style.display = "none"
                none.style.display = "none"
                closed.style.display = "inline-block"
            } else {
                opened.style.display = "none"
                closed.style.display = "none"
                none.style.display = "inline-block"
            }
        });
    })();
</script>