wip

generator/components-test.html

     <link rel="import" href="components/card.html">
     <style type="text/css">
 
+        rpg-card {
+            margin: 4px;
+        }
+
         body {
             display: flex;
             flex-direction: column;
                 <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
             </card-contents>
         </rpg-card>
+        <rpg-card class="card-size-25x35" color="maroon">
+            <card-title>
+                <h1>Burning Hands</h1>
+            </card-title>
+            <card-contents>
+                <card-subtitle>1st level evocation</card-subtitle>
+                <card-rule></card-rule>
+                <card-fill size="1"></card-fill>
+                <card-description>
+                    <h4>Mechanics</h4>
+                    <p>Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.</p>
+                </card-description>
+                <card-description>
+                    <h4>Ignite</h4>
+                    <p>The fire ignites any flammable objects in the area that aren't being worn or carried.</p>
+                </card-description>
+                <card-fill size="2"></card-fill>
+                <card-section>At higher levels</card-section>
+                <card-description><p>+1d6 damage for each slot above 1st</p></card-description>
+            </card-contents>
+            <card-title>
+                <card-icon src="/icons/gears.svg" style="float: left"></card-icon>
+                <h1 style="text-align: center;">Evocation 1</h1>
+                <card-icon src="/icons/stopwatch.svg"></card-icon>
+            </card-title>
+        </rpg-card>
         <rpg-card class="card-size-25x35" color="saddlebrown">
             <card-title>
                 <h1>Brown bear</h1>

generator/generate.html

     <script type="text/javascript" defer src="js/ui.js"></script>
     <!-- CSS -->
     <link href="css/ui.css" rel="stylesheet" />
-    <link href="css/card-size.css" rel="stylesheet" />
     <!-- Components -->
     <link rel="import" href="components/card.html">
 </head>
                     </p>
                     <textarea class="form-control" rows="10" id="filter-function" wrap="off">
 // Color all spell cards yellow
-if (card_has_tag(card, "spell")) {
+if (card.hasTag("spell")) {
     card.color = "yellow";
 }
 
 // Remove all creature cards
-if (card_has_tag(card, "creature")) {
-    return false;
+if (card.hasTag("creature")) {
+    deck.deleteCard(card);
+}
+
+// Duplicate all consumable item cards
+if (card.hasTag("item") && card.hasTag("consumable")) {
+    var newCard = deck.duplicateCard(card);
+    newCard.color = "pink";
 }
                     </textarea>
                 </div>

generator/js/ui.ts

         if (card) {
             $("#card-title").val(card.title);
             $("#card-title-size").val(card.title_size);
+            $("#card-title-icon-text").val(card.title_icon_text);
             $("#card-count").val(""+card.count);
             $("#card-icon").val(card.icon);
             $("#card-icon-back").val(card.icon_back);
         } else {
             $("#card-title").val("");
             $("#card-title-size").val("");
+            $("#card-title-icon-text").val("");
             $("#card-count").val("1");
             $("#card-icon").val("");
             $("#card-icon-back").val("");
         hideModal("#filter-modal");
 
         var fn_code = $("#filter-function").val();
-        var fn = new Function("card", fn_code);
+        var fn = new Function("card", "deck", fn_code);
 
-        deck.cards = deck.cards.filter(function (card) {
-            var result = fn(card);
-            if (result === undefined) return true;
-            else return result;
+        deck.cards.forEach((card) => {
+            fn(card, deck);
         });
+        deck.commit();
 
         update_card_list();
     }