rpg-cards/generator/components/card-dndstats.html

<template id="card-dndstats">
    <style>
        :host {
            width: 100%;
        }
        table {
            width: 100%;
            border-spacing: 0;
        }

        th {
            text-align: center;
            padding: 0;
            /*width: 16.666%;*/
        }

        th.hidden, td.hidden {
            display: none;
        }

        td {
            text-align: center;
            padding: 0;
            color: black;
        }
    </style>

    <table>
        <tbody>
            <tr id="headers">
            </tr>
            <tr id="values">
            </tr>
        </tbody>
    </table>

</template>

<script>
    (function(window, document) {
        var elemName = 'card-dndstats';
        var mainDoc = document;
        var importDoc = document.currentScript.ownerDocument;

        // Definition of stats
        statNames = ["str", "dex", "con", "int", "wis", "cha"];
        function getStatMod (value) {
            var modValue = Math.floor((value - 10) / 2);
            if (modValue >= 0)  {
                return "+" + modValue;
            } else {
                return "" + modValue;
            }
        }
        function getStatString (value, mode) {
            switch (mode) {
                case "both": return "" + value + "&nbsp;(" + getStatMod(value) + ")";
                case "mod": return getStatMod(value);
                case "stat": return "" + value;
                default: return "" + value;
            }
        }

        function updateStats (element) {
            for (var i = 0; i < statNames.length; ++i) {
                updateStat(element, statNames[i]);
            }
        }
        function updateStat(element, name) {
            var value = element.stats[name];
            var root = element.shadowRoot;
            var td = root.getElementById(name + "-value");
            var th = root.getElementById(name + "-header");

            if (value === null) {
                td.className = "hidden";
                th.className = "hidden";
            } else {
                td.className = "";
                th.className = "";
                if (value !== "" && value >= 0) {
                    td.innerHTML = getStatString(value, element.mode);
                } else {
                    td.innerHTML = value;
                }
            }
        }

        var proto = Object.create(HTMLTableElement.prototype);
        Object.defineProperty(proto, "stats", {
            value: {str:0, dex:0, con:0, int:0, wis:0, cha:0},
            writable: true,
            configurable: false,
            enumerable: false
        });
        Object.defineProperty(proto, "mode", {
            value: "both",
            writable: true,
            configurable: false,
            enumerable: false
        });

        proto.createdCallback = function () {
            var template = importDoc.getElementById(elemName);
            var clone = mainDoc.importNode(template.content, true);
            var root = this.createShadowRoot();
            root.appendChild(clone);

            // Create all stat columns
            var tr1 = root.getElementById("headers");
            var tr2 = root.getElementById("values");
            for (var i = 0; i < statNames.length; ++i) {
                var stat = statNames[i];

                var header = document.createElement("th");
                header.innerHTML = stat.toUpperCase();
                header.id = stat + "-header";
                tr1.appendChild(header);

                var value = document.createElement("td");
                value.innerHTML = stat.toUpperCase();
                value.id = stat + "-value";
                tr2.appendChild(value);
            }

            // Update the initial content of the stats
            this.mode = this.getAttribute("mode") || "both";
            for (var i = 0; i < statNames.length; ++i) {
                var stat = statNames[i];
                this.stats[stat] = this.getAttribute(stat);
            }
            updateStats(this);
        }
        proto.attributeChangedCallback = function (name, oldValue, newValue) {
            if (name == "mode") {
                this.mode = newValue;
                updateStats(this);
            }
            for (var i = 0; i < statNames.length; ++i) {
                var stat = statNames[i];
                if (stat == name) {
                    this.stats[stat] = newValue;
                    updateStat(this, stat);
                    break;
                }
            }
        }

        mainDoc.registerElement(elemName, { prototype: proto });

    })(window, document);
</script>