wip

generator/components-test.html

@@ -39,15 +39,41 @@
         <card-contents>
             <card-subtitle>Medium beast</card-subtitle>
             <card-rule></card-rule>
+            <card-dndstats mode="both" str="13" dex="10" con="15" int="-" wis="-" cha="-"></card-dndstats>
+            <card-rule></card-rule>
             <card-property><h4>Armor class</h4><p>12 (natural armor)</p></card-property>
             <card-property><h4>Hit points</h4><p>7 (2d6)</p></card-property>
             <card-rule></card-rule>
+            <card-description><h4>Multiattack</h4><p>One bite and one claw.</p></card-description>
             <card-fill size="2"></card-fill>
+            <card-section>Actions</card-section>
+            <card-description><h4>Bite</h4><p>+4 to hit, 2d6+2 piercing damage.</p></card-description>
+            <card-description><h4>Claw</h4><p>+4 to hit, 1d8+2 piercing damage.</p></card-description>
         </card-contents>
         <card-title>
             <h1>Druid thingy</h1>
             <card-icon src="/icons/lorc/originals/svg/stag-head.svg"></card-icon>
         </card-title>
     </card-front>
+    &nbsp;
+    <card-front class="card-size-25x35" color="indigo">
+        <card-title size="12">
+            <h1>Wand of Magic Missile</h1>
+            <card-icon src="/icons/lorc/originals/svg/crystal-wand.svg"></card-icon>
+        </card-title>
+        <card-contents>
+            <card-subtitle>Wondrous item</card-subtitle>
+            <card-rule></card-rule>
+            <card-property><h4>Maximum charges</h4><p>7</p></card-property>
+            <card-property><h4>Recharge</h4><p>1d6+1</p></card-property>
+            <card-rule></card-rule>
+            <card-description><h4>Spells</h4><p>You can use your action to cast the following spells:</p></card-description>
+            <card-bullet>Magic missile</card-bullet>
+            <card-bullet>Magic missile</card-bullet>
+            <card-bullet>Magic missile</card-bullet>
+            <card-fill size="2"></card-fill>
+            <card-boxes size="2" count="7"></card-boxes>
+        </card-contents>
+    </card-front>
 </body>
 </html>

generator/components/card-dndstats.html

@@ -0,0 +1,151 @@
+<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;
+        }
+    </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>

generator/components/card-front.html

@@ -20,13 +20,13 @@
         }
 
         ::content > card-title:first-child {
-            margin-top: -3px;
-            margin-bottom: 3px;
+            margin-top: -2px;
+            margin-bottom: 4px;
         }
 
         ::content > card-title:last-child {
-            margin-top: 3px;
-            margin-bottom: -3px;
+            margin-top: 4px;
+            margin-bottom: -2px;
         }
     </style>
 

generator/components/card-title.html

@@ -16,7 +16,6 @@
 
         ::content > h1 {
             flex: 1;
-            font-size: 13pt;
             font-family: inherit;
             display: block;
             margin: 0;
@@ -28,14 +27,19 @@
             font-family: inherit;
             display: block;
             margin: 0;
+            margin-right: 2px;
         }
 
         ::content > card-icon {
-            height: 100%;
+            height: 28px;
         }
 
     </style>
 
+    <style id="font-size">
+        ::content > h1 {font-size: 13pt;}
+    </style>
+
     <content></content>
 
 </template>
@@ -47,11 +51,28 @@
         var importDoc = document.currentScript.ownerDocument;
 
         var proto = Object.create(HTMLElement.prototype);
+        Object.defineProperty(proto, "size", {
+            get: function () {
+                return "";
+            },
+            set: function (value) {
+                var root = this.shadowRoot;
+                var style = root.getElementById("font-size");
+                style.innerHTML = "::content > h1 {font-size: " + value + "pt;}";
+            }
+        });
         proto.createdCallback = function () {
             var template = importDoc.getElementById(elemName);
             var clone = mainDoc.importNode(template.content, true);
             var root = this.createShadowRoot();
             root.appendChild(clone);
+
+            this.size = this.getAttribute('size') || "13";
+        }
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
+            switch (name) {
+                case "size": this.size = newValue;
+            }
         }
 
         mainDoc.registerElement(elemName, { prototype: proto });

generator/components/card.html

@@ -12,6 +12,7 @@
     <link rel="import" href="./card-description.html">
     <link rel="import" href="./card-fill.html">
     <link rel="import" href="./card-section.html">
+    <link rel="import" href="./card-dndstats.html">
 </head>
 <body>