Adding card tag

generator/data/card_data_example.js

             "fill | 3",
             "section | At higher levels",
             "text | +1d6 damage for each slot above 1st"
-        ]
+        ],
+        "tags": ["spell", "mage"]
     },
     {
         "count": 1,
             "text | You can take a <b>bonus action on each of your turns</b> in combat. This action can be used only to take the <b>Dash, Disengage, or Hide</b> action.",
             "fill | 2",
             "section | Fast hands (Thief 3rd)",
-            "text | You can also use the bonus action to make a Dexterity (<b>Sleight of Hand</b>) check, use your thieves' tools to <b>disarm a trap</b> or <b>open a lock</b>, or take the <b>Use an Object</b> action.",
-        ]
+            "text | You can also use the bonus action to make a Dexterity (<b>Sleight of Hand</b>) check, use your thieves' tools to <b>disarm a trap</b> or <b>open a lock</b>, or take the <b>Use an Object</b> action."
+        ],
+        "tags": ["feature", "rogue"]
     },
     {
         "count": 1,
             "description | Heavy | Unless you have the required strength, your speed is reduced by 10 feet.",
             "description | Stealth | You have disadvantage on Dexterity (Stealth) checks.",
             "fill | 3"
-        ]
+        ],
+        "tags": ["item", "armor"]
     },
     {
         "count": 1,
             "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
             "description | Thrown | You can throw the weapon to make a ranged attack with the given range.",
             "fill | 3"
-        ]
+        ],
+        "tags": ["item", "weapon"]
     },
     {
         "count": 1,
             "description | Finesse | Use your choice of Strength or Dexterity modifier for attack and damage.",
             "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
             "fill | 3"
-        ]
+        ],
+        "tags": ["item", "weapon", "magic"]
     },
     {
         "count": 1,
             "bullet | magic missile, 3rd level (3 charges)",
             "fill | 3",
             "boxes | 7 | 2.5"
-        ]
+        ],
+        "tags": ["item", "wondrous-item", "magic"]
     },
     {
         "count": 2,
             "text | When you drink this potion, you regain 2d4+2 hitpoints.",
             "text | Drinking or administering a potion takes 1 action.",
             "fill | 3"
-        ]
+        ],
+        "tags": ["item", "consumable"]
     },
     {
         "count": 1,
             "fill | 2",
             "section | Actions",
             "description | Scimitar | Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 5 (1d6 + 2) slashing damage"
-        ]
+        ],
+        "tags": ["creature", "humanoid"]
     }
-];
+]

generator/generate.html

                     </div>
                     <div class="form-group">
                         <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-sort-name">Sort by name</button>
+                            <button type="button" class="btn btn-primary btn-block" id="button-sort">Sort</button>
                         </div>
                         <div class="col-sm-6">
                             <button type="button" class="btn btn-primary btn-block" id="button-save" onclick="ui_save_file()">Save to file</button>
                     </div>
                     <div class="form-group">
                         <div class="col-sm-6">
-                            <button type="button" class="btn btn-primary btn-block" id="button-sort-icon">Sort by icon</button>
+                            <button type="button" class="btn btn-primary btn-block" id="button-filter">Map/Filter</button>
                         </div>
                         <div class="col-sm-6">
                             <button type="button" class="btn btn-success btn-block" id="button-generate">Generate</button>
                             <input type="number" id="card-count" class="form-control" placeholder="Count" data-property="count" value="1">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="card-tags" class="col-sm-2 control-label">Tags</label>
+                        <div class="col-sm-10">
+                            <input type="text" id="card-tags" class="form-control" placeholder="Tags">
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label for="card-icon" class="col-sm-2 control-label">Icon</label>
                         <div class="col-sm-10">
             </div>
         </div>
     </div>
-    <!-- Modal -->
+    <!-- Modal (Info)-->
     <div class="modal" id="help-modal" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content">
             </div>
         </div>
     </div>
+    <!-- Modal (Sort)-->
+    <div class="modal" id="sort-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Sort cards</h4>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        Enter the comparison function below.
+                        The comparison function is a block of javascript code.
+                        Return -1 if card_a should appear before card_b.
+                    </p>
+                    <textarea class="form-control" rows="10" id="sort-function" wrap="off">
+if (card_a.title < card_b.title) {
+    return -1;
+}
+else if (card_a.title > card_b.title) {
+    return 1;
+}
+else {
+    return 0;
+}
+                    </textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" id="sort-execute">Sort</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal (Filter)-->
+    <div class="modal" id="filter-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                    <h4 class="modal-title" id="myModalLabel">Filter/map cards</h4>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        Enter code below that will be executed for each card in the deck.
+                        Return false to remove the current card from the deck.
+                    </p>
+                    <textarea class="form-control" rows="10" id="filter-function" wrap="off">
+// Color all spell cards yellow
+if (card_has_tag(card, "spell")) {
+    card.color = "yellow";
+}
+
+// Remove all creature cards
+if (card_has_tag(card, "creature")) {
+    return false;
+}
+                    </textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" id="filter-execute">Filter</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>

generator/js/cards.js

     return {
         count: 1,
         title: "New card",
-        contents: []
+        contents: [],
+        tags: []
     }
 }
 
+function card_init(card) {
+    card.title = card.title || "";
+    card.contents = card.contents || [];
+    card.tags = card.tags || [];
+}
+
+function card_has_tag(card, tag) {
+    var index = card.tags.indexOf(tag.toLowerCase());
+    return index > -1;
+}
+
 // ============================================================================
 // Card definition related functions
 // ============================================================================

generator/js/ui.js

 
 function ui_load_sample() {
     card_data = card_data_example;
+    ui_init_cards(card_data);
     ui_update_card_list();
 }
 
     $("#file-load-form")[0].reset();
 }
 
+function ui_init_cards(data) {
+    data.forEach(function (card) {
+        card_init(card);
+    });
+}
+
 function ui_add_cards(data) {
+    ui_init_cards(data);
     card_data = card_data.concat(data);
     ui_update_card_list();
 }
         $("#card-icon").val(card.icon);
         $("#card-icon-back").val(card.icon_back);
         $("#card-contents").val(card.contents.join("\n"));
+        $("#card-tags").val(card.tags.join(", "));
         $("#card-color").val(card.color).change();
     } else {
         $("#card-title").val("");
         $("#card-icon").val("");
         $("#card-icon-back").val("");
         $("#card-contents").val("");
+        $("#card-tags").val("");
         $("#card-color").val("").change();
     }
 
     }
 }
 
+function ui_change_card_tags() {
+    var value = $(this).val();
+
+    var card = ui_selected_card();
+    if (card) {
+        if (value.trim().length == 0) {
+            card.tags = [];
+        } else {
+            card.tags = value.split(",").map(function (val) {
+                return val.trim().toLowerCase();
+            });
+        }
+        ui_render_selected_card();
+    }
+}
+
 function ui_change_default_title_size() {
     card_options.default_title_size = $(this).val();
     ui_render_selected_card();
     ui_render_selected_card();
 }
 
-function ui_sort_by_name() {
-    card_data = mergeSort(card_data, function (a, b) {
-        if (a.title > b.title) {
-            return 1;
-        }
-        if (a.title < b.title) {
-            return -1;
-        }
-        return 0;
+function ui_sort() {
+    $("#sort-modal").modal('show');
+}
+
+function ui_sort_execute() {
+    $("#sort-modal").modal('hide');
+
+    var fn_code = $("#sort-function").val();
+    var fn = new Function("card_a", "card_b", fn_code);
+
+    card_data = card_data.sort(function (card_a, card_b) {
+        var result = fn(card_a, card_b);
+        return result;
     });
+
     ui_update_card_list();
 }
 
-function ui_sort_by_icon() {
-    card_data = mergeSort(card_data, function (a, b) {
-        if (a.icon > b.icon) {
-            return 1;
-        }
-        if (a.icon < b.icon) {
-            return -1;
-        }
-        return 0;
+function ui_filter() {
+    $("#filter-modal").modal('show');
+}
+
+function ui_filter_execute() {
+    $("#filter-modal").modal('hide');
+
+    var fn_code = $("#filter-function").val();
+    var fn = new Function("card", fn_code);
+
+    card_data = card_data.filter(function (card) {
+        var result = fn(card);
+        if (result === undefined) return true;
+        else return false;
     });
+
     ui_update_card_list();
 }
 
     $("#button-clear").click(ui_clear_all);
     $("#button-load-sample").click(ui_load_sample);
     //$("#button-save").click(ui_save_file);
-    $("#button-sort-name").click(ui_sort_by_name);
-    $("#button-sort-icon").click(ui_sort_by_icon);
+    $("#button-sort").click(ui_sort);
+    $("#button-filter").click(ui_filter);
     $("#button-add-card").click(ui_add_new_card);
     $("#button-duplicate-card").click(ui_duplicate_card);
     $("#button-delete-card").click(ui_delete_card);
     $("#card-icon-back").change(ui_change_card_property);
     $("#card-color").change(ui_change_card_color);
     $("#card-contents").change(ui_change_card_contents);
+    $("#card-tags").change(ui_change_card_tags);
 
     $("#page-size").change(ui_change_option);
     $("#page-rows").change(ui_change_option);
     $("#small-icons").change(ui_change_default_icon_size);
 
     $(".icon-select-button").click(ui_select_icon);
+
+    $("#sort-execute").click(ui_sort_execute);
+    $("#filter-execute").click(ui_filter_execute);
     
     ui_update_card_list();
 });