wip

.gitignore

@@ -1,2 +1,5 @@
 /resources/game-icons.net
 /node_modules
+/generator/js/*.map
+/generator/js/*.d.ts
+/generator/js/*.js

generator/generate.html

@@ -14,12 +14,8 @@
     <!-- Library: Color picker -->
     <link href="lib/colorpicker/css/bootstrap-colorselector.css" rel="stylesheet" />
     <script type="text/javascript" src="lib/colorpicker/js/bootstrap-colorselector.js" charset="utf-8"></script>
-    <!-- Data -->
-    <script type="text/javascript" src="data/card_data_example.js"></script>
     <!-- Javascript -->
-    <script type="text/javascript" src="js/cards.js"></script>
-    <script type="text/javascript" src="js/colors.js"></script>
-    <script type="text/javascript" src="js/icons.js"></script>
+    <script type="text/javascript" src="js/card.js"></script>
     <script type="text/javascript" defer src="js/ui.js"></script>
     <!-- CSS -->
     <link href="css/ui.css" rel="stylesheet" />

generator/js/card.ts

@@ -1,4 +1,4 @@
-module rpgcards {
+module RpgCards {
 
     function normalizeTag(tag: string): string {
         return tag.trim().toLowerCase();
@@ -53,6 +53,8 @@ module rpgcards {
         contents: string[];
         tags: string[];
 
+        userData: any;
+
         constructor() {
             this.count = 1;
             this.title = "New card";
@@ -65,6 +67,7 @@ module rpgcards {
             this.icon_back = null;
             this.contents = [];
             this.tags = [];
+            this.userData = null;
         }
 
         static fromJSON(json: any): Card {
@@ -100,7 +103,9 @@ module rpgcards {
         }
 
         public duplicate(): Card {
-            return Card.fromJSON(this.toJSON());
+            var result = Card.fromJSON(this.toJSON());
+            result.title += " (Copy)";
+            return result;
         }
 
         public hasTag(tag: string): boolean {
@@ -141,6 +146,79 @@ module rpgcards {
         }
     };
 
+    interface CardAction {
+        fn: string;
+        card: Card;
+        ref: Card;
+    }
+
+    export class CardDeck {
+        cards: Card[];
+        private _actions: CardAction[];
+
+        constructor() {
+            this.cards = [];
+            this._actions = [];
+        }
+
+        public toJSON(): any {
+            return this.cards.map((card) => card.toJSON());
+        }
+
+        public static fromJSON(data: any): CardDeck {
+            if (Array.isArray(data)) {
+                var result = new CardDeck;
+                for (var i = 0; i < data.length; ++i) {
+                    result.cards.push(Card.fromJSON(data[i]));
+                }
+                return result;
+            } else {
+                throw new Error("Invalid data");
+            }
+        }
+
+        public addCards(cards: Card[]): void {
+            cards.forEach((card) => {
+                this._actions.push({fn:"add", card: card, ref: null});
+            });
+        }
+
+        public addNewCard(): Card {
+            var newCard = new Card();
+            this._actions.push({ fn: "add", card: newCard, ref: null });
+            return newCard;
+        }
+
+        public duplicateCard(card: Card): Card {
+            var newCard = card.duplicate();
+            this._actions.push({ fn: "add", card: new Card(), ref: card });
+            return newCard;
+        }
+
+        public deleteCard(card: Card): void {
+            this._actions.push({ fn: "del", card: card, ref: null });
+        }
+
+        public commit() {
+            for (var i = 0; i < this._actions.length; ++i) {
+                var action = this._actions[i];
+                if (action.fn === "add") {
+                    var index = this.cards.indexOf(action.ref);
+                    if (index > -1) {
+                        this.cards.splice(index + 1, 0, action.card);
+                    } else {
+                        this.cards.push(action.card);
+                    }
+                } else if (action.fn === "del") {
+                    var index = this.cards.indexOf(action.card);
+                    if (index > -1) {
+                        this.cards.splice(index, 1);
+                    }
+                }
+            }
+        }
+    }
+
     type ContentGeneratorFunction = (params: string[], card: Card, options: Options, ind: string, ind0: string) => string;
     type CardGeneratorFunction = (card: Card, options: Options, ind: string, ind0: string) => string;
 
@@ -238,7 +316,7 @@ module rpgcards {
         private  _contents(contents: string[], card: Card, options: Options, ind: string, ind0: string): string {
             var result = "";
             result += ind + '<card-contents>\n';
-            result += contents.map(function (value) {
+            result += contents.map((value) => {
                 var parts = splitParams(value);
                 var name = parts[0];
                 var params = parts.splice(1);
@@ -452,7 +530,7 @@ module rpgcards {
             Adds new pages if necessary.
         */
         public addCards(card: T, count: number): void {
-            for (let i = 0; i < count; ++i) {
+            for (var i = 0; i < count; ++i) {
                 this.addCard(card);
             }
         }
@@ -508,7 +586,7 @@ module rpgcards {
             var empty = generator.card_empty(options, this.indent);
 
             // Fill pages with cards
-            for (let i = 0; i < cards.length; ++i) {
+            for (var i = 0; i < cards.length; ++i) {
                 var card = cards[i];
                 var front = generator.card_front(card, options, this.indent);
                 var back = generator.card_back(card, options, this.indent);
@@ -532,7 +610,7 @@ module rpgcards {
             var empty = generator.card_empty(options, this.indent);
 
             // Fill pages with cards
-            for (let i = 0; i < cards.length; ++i) {
+            for (var i = 0; i < cards.length; ++i) {
                 var card = cards[i];
                 var front = generator.card_front(card, options, this.indent);
                 pages.addCards(front, card.count);
@@ -549,7 +627,7 @@ module rpgcards {
             var empty = generator.card_empty(options, this.indent);
 
             // Fill pages with cards (two at a time)
-            for (let i = 0; i < cards.length; ++i) {
+            for (var i = 0; i < cards.length; ++i) {
                 var card = cards[i];
                 var front = generator.card_front(card, options, this.indent);
                 var back = generator.card_back(card, options, this.indent);

generator/js/cards.js

@@ -1,420 +0,0 @@
-// ============================================================================
-// Card definition related functions
-// ============================================================================
-function card_default_options() {
-    return {
-        foreground_color: "white",
-        background_color: "white",
-        default_color: "black",
-        default_icon: "ace",
-        default_title_size: "13",
-        page_size: "A4",
-        page_rows: 3,
-        page_columns: 3,
-        card_arrangement: "doublesided",
-        card_size: "25x35",
-        card_count: null,
-        icon_inline: true
-    }
-}
-
-function card_default_data() {
-    return {
-        count: 1,
-        title: "New card",
-        contents: [],
-        tags: []
-    }
-}
-
-function card_init(card) {
-    card.title = card.title || "";
-    card.contents = card.contents || [];
-    card.tags = card.tags || [];
-}
-
-function card_has_tag(card, tag) {
-    tag = tag.trim().toLowerCase();
-    var index = card.tags.indexOf(tag);
-    return index > -1;
-}
-
-function card_add_tag(card, tag) {
-    tag = tag.trim().toLowerCase();
-    var index = card.tags.indexOf(tag);
-    if (index == -1) {
-        card.tags.push(tag);
-    }
-}
-
-function card_remove_tag(card, tag) {
-    tag = tag.trim().toLowerCase();
-    card.tags = card.tags.filter(function (t) {
-        return tag != t;
-    });
-}
-
-// ============================================================================
-// Card definition related functions
-// ============================================================================
-
-function card_data_color_front(card_data, options) {
-    return card_data.color_front || card_data.color || options.default_color || "black";
-}
-
-function card_data_color_back(card_data, options) {
-    return card_data.color_back || card_data.color || options.default_color || "black";
-}
-
-function card_data_icon_front(card_data, options) {
-    return card_data.icon_front || card_data.icon || options.default_icon || "ace";
-}
-
-function card_data_icon_back(card_data, options) {
-    return card_data.icon_back || card_data.icon || options.default_icon || "ace";
-}
-
-function card_data_split_params(value) {
-    return value.split("|").map(function (str) { return str.trim(); });
-}
-
-// ============================================================================
-// Card element generating functions
-// ============================================================================
-
-function card_element_title(card_data, options) {
-    var title = card_data.title || "";
-    var title_size = card_data.title_size || options.default_title_size || '13';
-    var icon = card_data_icon_front(card_data, options) + ".svg";
-
-    var result = "";
-    result += '<card-title size="' + title_size + '">';
-    result += '   <h1>' + title + '</h1>';
-    result += '   <h2>' + "" + '</h2>';
-    result += '   <card-icon src="/icons/' + icon + '"></card-icon>';
-    result += '</card-title>';
-    return result;
-
-    return '<div class="card-title card-title-' + title_size + '">' + title + '</div>';
-}
-
-function card_element_subtitle(params, card_data, options) {
-    var text = params[0] || "";
-    return '<card-subtitle>' + text + '</card-subtitle>';
-}
-
-function card_element_ruler(params, card_data, options) {
-    return '<card-rule></card-rule>';
-}
-
-function card_element_boxes(params, card_data, options) {
-    var count = params[0] || 1;
-    var size = params[1] || 3;
-    return '<card-boxes size="' + size + '" count="' + count + '"></card-boxes>';
-}
-
-function card_element_property(params, card_data, options) {
-    var header = params[0] || "";
-    var text = params[1] || "";
-    var result = "";
-    result += '<card-property>';
-    result += '   <h4>' + header + '</h4>';
-    result += '   <p>' + text + '</p>';
-    result += '</card-property>';
-    return result;
-}
-
-function card_element_description(params, card_data, options) {
-    var header = params[0] || "";
-    var text = params[1] || "";
-    var result = "";
-    result += '<card-description>';
-    result += '   <h4>' + header + '</h4>';
-    result += '   <p>' + text + '</p>';
-    result += '</card-description>';
-    return result;
-}
-
-function card_element_text(params, card_data, options) {
-    var text = params[0] || "";
-    var result = "";
-    result += '<card-description>';
-    result += '   <p>' + text + '</p>';
-    result += '</card-description>';
-    return result;
-}
-
-function card_element_dndstats(params, card_data, options) {
-    var result = "";
-    result += '<card-dndstats';
-    result += ' str="' + (parseInt(params[0], 10) || "") + '"';
-    result += ' dex="' + (parseInt(params[1], 10) || "") + '"';
-    result += ' con="' + (parseInt(params[2], 10) || "") + '"';
-    result += ' int="' + (parseInt(params[3], 10) || "") + '"';
-    result += ' wis="' + (parseInt(params[4], 10) || "") + '"';
-    result += ' cha="' + (parseInt(params[5], 10) || "") + '"';
-    result += '></card-dndstats>';
-    return result;
-}
-
-function card_element_bullet(params, card_data, options) {
-    var text = params[0] || "";
-    return '<card-bullet>' + text + '</card-bullet>';
-}
-
-function card_element_section(params, card_data, options) {
-    var text = params[0] || "";
-    return '<card-section>' + text + '</card-section>';
-}
-
-function card_element_fill(params, card_data, options) {
-    var size = params[0] || "1";
-    return '<card-fill size="' + size + '"></card-fill>';
-}
-
-function card_element_unknown(params, card_data, options) {
-    var text = params.join('|');
-    return '<card-description><p>' + text + '</p></card-description>';
-}
-
-function card_element_empty(params, card_data, options) {
-    return '';
-}
-
-var card_element_generators = {
-    subtitle: card_element_subtitle,
-    property: card_element_property,
-    rule: card_element_ruler,
-    ruler: card_element_ruler,
-    boxes: card_element_boxes,
-    description: card_element_description,
-    dndstats: card_element_dndstats,
-    text: card_element_text,
-    bullet: card_element_bullet,
-    fill: card_element_fill,
-    section: card_element_section,
-    disabled: card_element_empty
-};
-
-// ============================================================================
-// Card generating functions
-// ============================================================================
-
-function card_generate_contents(contents, card_data, options) {
-    var result = "";
-    result += '<card-contents>';
-    result += contents.map(function (value) {
-        var parts = card_data_split_params(value);
-        var element_name = parts[0];
-        var element_params = parts.splice(1);
-        var element_generator = card_element_generators[element_name];
-        if (element_generator) {
-            return element_generator(element_params, card_data, options);
-        } else if (element_name.length > 0) {
-            return card_element_unknown(element_params, card_data, options);
-        }
-    }).join("\n");
-    result += '</card-contents>';
-    return result;
-}
-
-function card_repeat(card, count) {
-    var result = [];
-    for (var i = 0; i < count; ++i) {
-        result.push(card);
-    }
-    return result;
-}
-
-function card_generate_front(data, options) {
-    var color = card_data_color_front(data, options);
-
-    var result = "";
-    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
-    result += card_element_title(data, options);
-    result += card_generate_contents(data.contents, data, options);
-    result += '</rpg-card>';
-    return result;
-}
-
-function card_generate_back(data, options) {
-    var color = card_data_color_back(data, options)
-    var icon = card_data_icon_back(data, options) + ".svg";
-
-    var result = "";
-    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
-    result += '   <card-back>';
-    result += '       <card-icon src="/icons/' + icon + '"></card-icon>';
-    result += '   </card-back>';
-    result += '</rpg-card>';
-    return result;
-}
-
-function card_generate_empty(count, options) {
-    var style_color = card_generate_color_style("white");
-
-    var result = "";
-    result += '<rpg-card color="' + color + '" size="' + options.card_size + '">';
-    result += '</rpg-card>';
-    return card_repeat(result, count);
-}
-
-// ============================================================================
-// Functions that generate pages of cards
-// ============================================================================
-
-function card_pages_split(data, rows, cols) {
-    var cards_per_page = rows * cols;
-    var result = [];
-    for (var i = 0; i < data.length; i += cards_per_page) {
-        var page = data.slice(i, i + cards_per_page);
-        result.push(page);
-    }
-    return result;
-}
-
-function card_pages_merge(front_pages, back_pages) {
-    var result = [];
-    for (var i = 0; i < front_pages.length; ++i) {
-        result.push(front_pages[i]);
-        result.push(back_pages[i]);
-    }
-    return result;
-}
-
-function cards_pages_flip_left_right(cards, rows, cols) {
-    var result = [];
-    for (var r = 0; r < rows; ++r) {
-        for (var c = 0; c < cols; ++c) {
-            var i = r*cols + (cols-1-c);
-            result.push(cards[i]);
-        }
-    }
-    return result;
-}
-
-function card_pages_add_padding(cards, options) {
-    var cards_per_page = options.page_rows * options.page_columns;
-    var last_page_cards = cards.length % cards_per_page;
-    if (last_page_cards !== 0) {
-        return cards.concat(card_generate_empty(cards_per_page - last_page_cards, options));
-    } else {
-        return cards;
-    }
-}
-
-function card_pages_interleave_cards(front_cards, back_cards, options) {
-    var result = [];
-    var i = 0;
-    while (i < front_cards.length) {
-        result.push(front_cards[i]);
-        result.push(back_cards[i]);
-        if (options.page_columns > 2) {
-            result.push(card_generate_empty(options.page_columns - 2, options));
-        }
-        ++i;
-    }
-    return result;
-}
-
-function card_pages_wrap(pages, options) {
-    var size = options.page_size || "A4";
-
-    var result = "";
-    for (var i = 0; i < pages.length; ++i) {
-        var style = "";
-        if ((options.card_arrangement == "doublesided") &&  (i % 2 == 1)) {
-            style += 'style="background-color:' + options.background_color + '"';
-        } else {
-            style += 'style="background-color:' + options.foreground_color + '"';
-        }
-        result += '<page class="page page-preview" size="' + size + '" ' + style + '>\n';
-        result += pages[i].join("\n");
-        result += '</page>\n';
-    }
-    return result;
-}
-
-function card_pages_generate_style(options) {
-    var size = "a4";
-    switch (options.page_size) {
-        case "A3": size = "A3 portrait"; break;
-        case "A4": size = "210mm 297mm"; break;
-        case "A5": size = "A5 portrait"; break;
-        case "Letter": size = "letter portrait"; break;
-        case "25x35": size = "2.5in 3.5in"; break;
-        default: size = "auto";
-    }
-
-    var result = "";
-    result += "<style>\n";
-    result += "@page {\n";
-    result += "    margin: 0;\n";
-    result += "    size:" + size + ";\n";
-    result += "    -webkit-print-color-adjust: exact;\n";
-    result += "}\n";
-    result += "</style>\n";
-    return result;
-}
-
-function card_pages_generate_html(card_data, options) {
-    options = options || card_default_options();
-    var rows = options.page_rows || 3;
-    var cols = options.page_columns || 3;
-
-    // Generate the HTML for each card
-    var front_cards = [];
-    var back_cards = [];
-    card_data.forEach(function (data) {
-        var count = options.card_count || data.count || 1;
-        var front = card_generate_front(data, options);
-        var back = card_generate_back(data, options);
-        front_cards = front_cards.concat(card_repeat(front, count));
-        back_cards = back_cards.concat(card_repeat(back, count));
-    });
-
-    var pages = [];
-    if (options.card_arrangement == "doublesided") {
-        // Add padding cards so that the last page is full of cards
-        front_cards = card_pages_add_padding(front_cards, options);
-        back_cards = card_pages_add_padding(back_cards, options);
-
-        // Split cards to pages
-        var front_pages = card_pages_split(front_cards, rows, cols);
-        var back_pages = card_pages_split(back_cards, rows, cols);
-
-        // Shuffle back cards so that they line up with their corresponding front cards
-        back_pages = back_pages.map(function (page) {
-            return cards_pages_flip_left_right(page, rows, cols);
-        });
-
-        // Interleave front and back pages so that we can print double-sided
-        pages = card_pages_merge(front_pages, back_pages);
-    } else if (options.card_arrangement == "front_only") {
-        var cards = card_pages_add_padding(front_cards, options);
-        pages = card_pages_split(cards, rows, cols);
-    } else if (options.card_arrangement == "side_by_side") {
-        var cards = card_pages_interleave_cards(front_cards, back_cards, options);
-        cards = card_pages_add_padding(cards, options);
-        pages = card_pages_split(cards, rows, cols);
-    }
-
-    // Wrap all pages in a <page> element and add CSS for the page size
-    var result = "";
-    result += card_pages_generate_style(options);
-    result += card_pages_wrap(pages, options);
-
-    return result;
-}
-
-function card_pages_insert_into(card_data, container) {
-
-    // Clear the previous content of the document
-    while (container.hasChildNodes()) {
-        container.removeChild(container.lastChild);
-    }
-
-    // Insert the HTML
-    var html = card_pages_generate_html(card_data);
-    container.innerHTML = html;
-}

generator/js/colors.js

@@ -1,158 +0,0 @@
-var css_color_names = [
-    "Black",
-    "Navy",
-    "DarkBlue",
-    "MediumBlue",
-    "Blue",
-    "DarkGreen",
-    "Green",
-    "Teal",
-    "DarkCyan",
-    "DeepSkyBlue",
-    "DarkTurquoise",
-    "MediumSpringGreen",
-    "Lime",
-    "SpringGreen",
-    "Aqua",
-    "Cyan",
-    "MidnightBlue",
-    "DodgerBlue",
-    "LightSeaGreen",
-    "ForestGreen",
-    "SeaGreen",
-    "DarkSlateGray",
-    "LimeGreen",
-    "MediumSeaGreen",
-    "Turquoise",
-    "RoyalBlue",
-    "SteelBlue",
-    "DarkSlateBlue",
-    "MediumTurquoise",
-    "Indigo",
-    "DarkOliveGreen",
-    "CadetBlue",
-    "CornflowerBlue",
-    "MediumAquaMarine",
-    "DimGray",
-    "SlateBlue",
-    "OliveDrab",
-    "SlateGray",
-    "LightSlateGray",
-    "MediumSlateBlue",
-    "LawnGreen",
-    "Chartreuse",
-    "Aquamarine",
-    "Maroon",
-    "Purple",
-    "Olive",
-    "Gray",
-    "SkyBlue",
-    "LightSkyBlue",
-    "BlueViolet",
-    "DarkRed",
-    "DarkMagenta",
-    "SaddleBrown",
-    "DarkSeaGreen",
-    "LightGreen",
-    "MediumPurple",
-    "DarkViolet",
-    "PaleGreen",
-    "DarkOrchid",
-    "YellowGreen",
-    "Sienna",
-    "Brown",
-    "DarkGray",
-    "LightBlue",
-    "GreenYellow",
-    "PaleTurquoise",
-    "LightSteelBlue",
-    "PowderBlue",
-    "FireBrick",
-    "DarkGoldenRod",
-    "MediumOrchid",
-    "RosyBrown",
-    "DarkKhaki",
-    "Silver",
-    "MediumVioletRed",
-    "IndianRed",
-    "Peru",
-    "Chocolate",
-    "Tan",
-    "LightGray",
-    "Thistle",
-    "Orchid",
-    "GoldenRod",
-    "PaleVioletRed",
-    "Crimson",
-    "Gainsboro",
-    "Plum",
-    "BurlyWood",
-    "LightCyan",
-    "Lavender",
-    "DarkSalmon",
-    "Violet",
-    "PaleGoldenRod",
-    "LightCoral",
-    "Khaki",
-    "AliceBlue",
-    "HoneyDew",
-    "Azure",
-    "SandyBrown",
-    "Wheat",
-    "Beige",
-    "WhiteSmoke",
-    "MintCream",
-    "GhostWhite",
-    "Salmon",
-    "AntiqueWhite",
-    "Linen",
-    "LightGoldenRodYellow",
-    "OldLace",
-    "Red",
-    "Fuchsia",
-    "Magenta",
-    "DeepPink",
-    "OrangeRed",
-    "Tomato",
-    "HotPink",
-    "Coral",
-    "DarkOrange",
-    "LightSalmon",
-    "Orange",
-    "LightPink",
-    "Pink",
-    "Gold",
-    "PeachPuff",
-    "NavajoWhite",
-    "Moccasin",
-    "Bisque",
-    "MistyRose",
-    "BlanchedAlmond",
-    "PapayaWhip",
-    "LavenderBlush",
-    "SeaShell",
-    "Cornsilk",
-    "LemonChiffon",
-    "FloralWhite",
-    "Snow",
-    "Yellow",
-    "LightYellow",
-    "Ivory",
-    "White"
-];
-
-
-var card_colors = {
-    "": "",
-    "dimgray": "dimgray",
-    "black": "black",
-    "darkgoldenrod": "darkgoldenrod",
-    "saddlebrown": "saddlebrown",
-    "indianred": "indianred",
-    "maroon": "maroon",
-    "indigo": "indigo",
-    "darkblue": "darkblue",
-    "royalblue": "royalblue",
-    "darkgreen": "darkgreen",
-    "#666633": "#666633"
-}

generator/js/colors.ts

@@ -0,0 +1,163 @@
+
+module RpgCardsUI {
+
+    export var css_color_names = [
+        "Black",
+        "Navy",
+        "DarkBlue",
+        "MediumBlue",
+        "Blue",
+        "DarkGreen",
+        "Green",
+        "Teal",
+        "DarkCyan",
+        "DeepSkyBlue",
+        "DarkTurquoise",
+        "MediumSpringGreen",
+        "Lime",
+        "SpringGreen",
+        "Aqua",
+        "Cyan",
+        "MidnightBlue",
+        "DodgerBlue",
+        "LightSeaGreen",
+        "ForestGreen",
+        "SeaGreen",
+        "DarkSlateGray",
+        "LimeGreen",
+        "MediumSeaGreen",
+        "Turquoise",
+        "RoyalBlue",
+        "SteelBlue",
+        "DarkSlateBlue",
+        "MediumTurquoise",
+        "Indigo",
+        "DarkOliveGreen",
+        "CadetBlue",
+        "CornflowerBlue",
+        "MediumAquaMarine",
+        "DimGray",
+        "SlateBlue",
+        "OliveDrab",
+        "SlateGray",
+        "LightSlateGray",
+        "MediumSlateBlue",
+        "LawnGreen",
+        "Chartreuse",
+        "Aquamarine",
+        "Maroon",
+        "Purple",
+        "Olive",
+        "Gray",
+        "SkyBlue",
+        "LightSkyBlue",
+        "BlueViolet",
+        "DarkRed",
+        "DarkMagenta",
+        "SaddleBrown",
+        "DarkSeaGreen",
+        "LightGreen",
+        "MediumPurple",
+        "DarkViolet",
+        "PaleGreen",
+        "DarkOrchid",
+        "YellowGreen",
+        "Sienna",
+        "Brown",
+        "DarkGray",
+        "LightBlue",
+        "GreenYellow",
+        "PaleTurquoise",
+        "LightSteelBlue",
+        "PowderBlue",
+        "FireBrick",
+        "DarkGoldenRod",
+        "MediumOrchid",
+        "RosyBrown",
+        "DarkKhaki",
+        "Silver",
+        "MediumVioletRed",
+        "IndianRed",
+        "Peru",
+        "Chocolate",
+        "Tan",
+        "LightGray",
+        "Thistle",
+        "Orchid",
+        "GoldenRod",
+        "PaleVioletRed",
+        "Crimson",
+        "Gainsboro",
+        "Plum",
+        "BurlyWood",
+        "LightCyan",
+        "Lavender",
+        "DarkSalmon",
+        "Violet",
+        "PaleGoldenRod",
+        "LightCoral",
+        "Khaki",
+        "AliceBlue",
+        "HoneyDew",
+        "Azure",
+        "SandyBrown",
+        "Wheat",
+        "Beige",
+        "WhiteSmoke",
+        "MintCream",
+        "GhostWhite",
+        "Salmon",
+        "AntiqueWhite",
+        "Linen",
+        "LightGoldenRodYellow",
+        "OldLace",
+        "Red",
+        "Fuchsia",
+        "Magenta",
+        "DeepPink",
+        "OrangeRed",
+        "Tomato",
+        "HotPink",
+        "Coral",
+        "DarkOrange",
+        "LightSalmon",
+        "Orange",
+        "LightPink",
+        "Pink",
+        "Gold",
+        "PeachPuff",
+        "NavajoWhite",
+        "Moccasin",
+        "Bisque",
+        "MistyRose",
+        "BlanchedAlmond",
+        "PapayaWhip",
+        "LavenderBlush",
+        "SeaShell",
+        "Cornsilk",
+        "LemonChiffon",
+        "FloralWhite",
+        "Snow",
+        "Yellow",
+        "LightYellow",
+        "Ivory",
+        "White"
+    ];
+
+
+    export var card_colors = {
+        "": "",
+        "dimgray": "dimgray",
+        "black": "black",
+        "darkgoldenrod": "darkgoldenrod",
+        "saddlebrown": "saddlebrown",
+        "indianred": "indianred",
+        "maroon": "maroon",
+        "indigo": "indigo",
+        "darkblue": "darkblue",
+        "royalblue": "royalblue",
+        "darkgreen": "darkgreen",
+        "#666633": "#666633"
+    }
+
+}

generator/js/example_data.ts

@@ -0,0 +1,166 @@
+module RpgCardsUI {
+
+    export var card_data_example = [
+        {
+            "count": 1,
+            "color": "maroon",
+            "title": "Burning Hands",
+            "icon": "book-cover",
+            "icon_back": "robe",
+            "contents": [
+                "subtitle | 1st level evocation",
+                "rule",
+                "property | Casting time | 1 action",
+                "property | Range | Self (15ft cone)",
+                "property | Components | V,S",
+                "rule",
+                "fill | 2",
+                "text | 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.",
+                "text | The fire ignites any flammable objects in the area that aren't being worn or carried.",
+                "fill | 3",
+                "section | At higher levels",
+                "text | +1d6 damage for each slot above 1st"
+            ],
+            "tags": ["spell", "mage"]
+        },
+        {
+            "count": 1,
+            "color": "indigo",
+            "title": "Cunning Action",
+            "icon": "white-book",
+            "icon_back": "cloak-dagger",
+            "contents": [
+                "subtitle | Rogue feature",
+                "rule",
+                "fill | 2",
+                "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."
+            ],
+            "tags": ["feature", "rogue"]
+        },
+        {
+            "count": 1,
+            "color": "dimgray",
+            "title": "Full Plate",
+            "icon": "breastplate",
+            "contents": [
+                "subtitle | Heavy armor (1500gp)",
+                "rule",
+                "property | AC | 18",
+                "property | Strength required | 15",
+                "property | Stealth | Disadvantage",
+                "rule",
+                "fill | 2",
+                "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,
+            "color": "dimgray",
+            "title": "Dagger",
+            "icon": "mixed-swords",
+            "contents": [
+                "subtitle | Simple melee weapon (2gp)",
+                "rule",
+                "property | Damage | 1d4 piercing",
+                "property | Modifier | Strength or Dexterity",
+                "property | Properties | Light, Finesse, Thrown (20/60)",
+                "rule",
+                "fill | 2",
+                "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.",
+                "description | Thrown | You can throw the weapon to make a ranged attack with the given range.",
+                "fill | 3"
+            ],
+            "tags": ["item", "weapon"]
+        },
+        {
+            "count": 1,
+            "color": "dimgray",
+            "title": "Shortsword of Very Long Names",
+            "title_size": "10",
+            "icon": "crossed-swords",
+            "contents": [
+                "subtitle | Simple melee weapon (10gp)",
+                "rule",
+                "property | Damage | 1d6 piercing",
+                "property | Modifier | Strength or Dexterity",
+                "property | Properties | Light, Finesse",
+                "rule",
+                "fill | 2",
+                "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,
+            "color": "dimgray",
+            "title": "Wand of Magic Missiles",
+            "icon": "crystal-wand",
+            "contents": [
+                "subtitle | Wondrous item",
+                "rule",
+                "property | Maximum charges | 7",
+                "property | Recharge | 1d6+1 each day",
+                "property | Depletion | If you expend the last charge, roll a d20. On a 1, the item is destroyed.",
+                "rule",
+                "fill | 2",
+                "description | Spells | You can use your action to cast the following spells:",
+                "bullet | magic missile, 1st level (1 charge)",
+                "bullet | magic missile, 2nd level (2 charges)",
+                "bullet | magic missile, 3rd level (3 charges)",
+                "fill | 3",
+                "boxes | 7 | 2.5"
+            ],
+            "tags": ["item", "wondrous-item", "magic"]
+        },
+        {
+            "count": 2,
+            "color": "dimgray",
+            "title": "Potion of Healing",
+            "icon": "drink-me",
+            "contents": [
+                "subtitle | Potion (50gp)",
+                "rule",
+                "property | Use time | 1 action",
+                "property | Hit points restored | 2d4+2",
+                "rule",
+                "fill | 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,
+            "color": "black",
+            "title": "Goblin",
+            "icon": "imp-laugh",
+            "contents": [
+                "subtitle | Small humanoid (goblinoid)",
+                "rule",
+                "property | Armor class | 15 (leather armor, shield)",
+                "property | Hit points | 7 (2d6)",
+                "rule",
+                "dndstats | 8 | 14 | 10 | 10 | 8 | 8",
+                "rule",
+                "property | Skills | Stealth +6",
+                "property | Challenge | 1/4 (50 XP)",
+                "rule",
+                "description | Nimble escape | Disengage or Hide as bonus action",
+                "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/js/output.js

@@ -1,22 +0,0 @@
-function receiveMessage(event) {
-    var html = event.data;
-    insertCards(html);
-}
-
-function insertCards(html) {
-    // Remove all previous content
-    while (document.body.hasChildNodes()) {
-        document.body.removeChild(document.body.lastChild);
-    }
-
-    // Create a div that holds all the received HTML
-    var div = document.createElement("div");
-    div.setAttribute("class", "output-container");
-    div.id = "output-container";
-    div.innerHTML = html;
-
-    // Add the new div to the document
-    document.body.appendChild(div);
-}
-
-window.addEventListener("message", receiveMessage, false);

generator/js/ui.js

@@ -1,482 +0,0 @@
-// Ugly global variable holding the current card deck
-var card_data = [];
-var card_options = card_default_options();
-
-function mergeSort(arr, compare) {
-    if (arr.length < 2)
-        return arr;
-
-    var middle = parseInt(arr.length / 2);
-    var left = arr.slice(0, middle);
-    var right = arr.slice(middle, arr.length);
-
-    return merge(mergeSort(left, compare), mergeSort(right, compare), compare);
-}
-
-function merge(left, right, compare) {
-    var result = [];
-
-    while (left.length && right.length) {
-        if (compare(left[0], right[0]) <= 0) {
-            result.push(left.shift());
-        } else {
-            result.push(right.shift());
-        }
-    }
-
-    while (left.length)
-        result.push(left.shift());
-
-    while (right.length)
-        result.push(right.shift());
-
-    return result;
-}
-
-var ui_generate_modal_shown = false;
-function ui_generate() {
-    if (card_data.length == 0) {
-        alert("Your deck is empty. Please define some cards first, or load the sample deck.");
-        return;
-    }
-
-    // Generate output HTML
-    var card_html = card_pages_generate_html(card_data, card_options);
-
-    // Open a new window for the output
-    // Use a separate window to avoid CSS conflicts
-    var tab = window.open("output.html", 'rpg-cards-output');
-
-    if (ui_generate_modal_shown == false) {
-        $("#print-modal").modal('show');
-        ui_generate_modal_shown = true;
-    }
-
-    // Send the generated HTML to the new window
-    // Use a delay to give the new window time to set up a message listener
-    setTimeout(function () { tab.postMessage(card_html, '*') }, 500);
-}
-
-function ui_load_sample() {
-    card_data = card_data_example;
-    ui_init_cards(card_data);
-    ui_update_card_list();
-}
-
-function ui_clear_all() {
-    card_data = [];
-    ui_update_card_list();
-}
-
-function ui_load_files(evt) {
-    // ui_clear_all();
-
-    var files = evt.target.files;
-
-    for (var i = 0, f; f = files[i]; i++) {
-        var reader = new FileReader();
-
-        reader.onload = function (reader) {
-            var data = JSON.parse(this.result);
-            ui_add_cards(data);
-        };
-
-        reader.readAsText(f);
-    }
-
-    // Reset file input
-    $("#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();
-}
-
-function ui_add_new_card() {
-    card_data.push(card_default_data());
-    ui_update_card_list();
-    ui_select_card_by_index(card_data.length - 1);
-}
-
-function ui_duplicate_card() {
-    if (card_data.length > 0) {
-        var old_card = ui_selected_card();
-        var new_card = $.extend({}, old_card);
-        card_data.push(new_card);
-        new_card.title = new_card.title + " (Copy)";
-    } else {
-        card_data.push(card_default_data());
-    }
-    ui_update_card_list();
-    ui_select_card_by_index(card_data.length - 1);
-}
-
-function ui_select_card_by_index(index) {
-    $("#selected-card").val(index);
-    ui_update_selected_card();
-}
-
-function ui_selected_card_index() {
-    return parseInt($("#selected-card").val(), 10);
-}
-
-function ui_selected_card() {
-    return card_data[ui_selected_card_index()];
-}
-
-function ui_delete_card() {
-    var index = ui_selected_card_index();
-    card_data.splice(index, 1);
-    ui_update_card_list();
-    ui_select_card_by_index(Math.min(index, card_data.length - 1));
-}
-
-function ui_update_card_list() {
-    $("#total_card_count").text("Deck contains " + card_data.length + " unique cards.");
-
-    $('#selected-card').empty();
-    for (var i = 0; i < card_data.length; ++i) {
-        var card = card_data[i];
-        $('#selected-card')
-            .append($("<option></option>")
-            .attr("value", i)
-            .text(card.title));
-    }
-
-    ui_update_selected_card();
-}
-
-function ui_save_file() {
-    var str = JSON.stringify(card_data, null, "  ");
-    var parts = [str];
-    var blob = new Blob(parts, { type: 'application/json' });
-    var url = URL.createObjectURL(blob);
-
-    var a = $("#file-save-link")[0];
-    a.href = url;
-    a.download = "rpg_cards.json";
-    a.click();
-
-    setTimeout(function () { URL.revokeObjectURL(url); }, 500);
-}
-
-function ui_update_selected_card() {
-    var card = ui_selected_card();
-    if (card) {
-        $("#card-title").val(card.title);
-        $("#card-title-size").val(card.title_size);
-        $("#card-count").val(card.count);
-        $("#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-title-size").val("");
-        $("#card-count").val(1);
-        $("#card-icon").val("");
-        $("#card-icon-back").val("");
-        $("#card-contents").val("");
-        $("#card-tags").val("");
-        $("#card-color").val("").change();
-    }
-
-    ui_render_selected_card();
-}
-
-function ui_render_selected_card() {
-    var card = ui_selected_card();
-    $('#preview-container').empty();
-    if (card) {
-        var front = card_generate_front(card, card_options);
-        var back = card_generate_back(card, card_options);
-        $('#preview-container').html(front + "\n" + back);
-    }
-}
-
-function ui_open_help() {
-    $("#help-modal").modal('show');
-}
-
-function ui_select_icon() {
-    window.open("http://game-icons.net/", "_blank");
-}
-
-function ui_setup_color_selector() {
-    // Insert colors
-    $.each(card_colors, function (name, val) {
-        $(".colorselector-data")
-            .append($("<option></option>")
-            .attr("value", name)
-            .attr("data-color", val)
-            .text(name));
-    });
-    
-    // Callbacks for when the user picks a color
-    $('#default_color_selector').colorselector({
-        callback: function (value, color, title) {
-            $("#default-color").val(title);
-            ui_set_default_color(title);
-        }
-    });
-    $('#card_color_selector').colorselector({
-        callback: function (value, color, title) {
-            $("#card-color").val(title);
-            ui_set_card_color(value);
-        }
-    });
-    $('#foreground_color_selector').colorselector({
-        callback: function (value, color, title) {
-            $("#foreground-color").val(title);
-            ui_set_foreground_color(value);
-        }
-    });
-    $('#background_color_selector').colorselector({
-        callback: function (value, color, title) {
-            $("#background-color").val(title);
-            ui_set_background_color(value);
-        }
-    });
-
-    // Styling
-    $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
-}
-
-function ui_set_default_color(color) {
-    card_options.default_color = color;
-    ui_render_selected_card();
-}
-
-function ui_set_foreground_color(color) {
-    card_options.foreground_color = color;
-}
-
-function ui_set_background_color(color) {
-    card_options.background_color = color;
-}
-
-function ui_change_option() {
-    var property = $(this).attr("data-option");
-    var value = $(this).val();
-    card_options[property] = value;
-    ui_render_selected_card();
-
-}
-
-function ui_change_card_title() {
-    var title = $("#card-title").val();
-    var card = ui_selected_card();
-    if (card) {
-        card.title = title;
-        $("#selected-card option:selected").text(title);
-        ui_render_selected_card();
-    }
-}
-
-function ui_change_card_property() {
-    var property = $(this).attr("data-property");
-    var value = $(this).val();
-    var card = ui_selected_card();
-    if (card) {
-        card[property] = value;
-        ui_render_selected_card();
-    }
-}
-
-function ui_set_card_color(value) {
-    var card = ui_selected_card();
-    if (card) {
-        card.color = value;
-        ui_render_selected_card();
-    }
-}
-
-function ui_update_card_color_selector(color, input, selector) {
-    if ($(selector + " option[value='" + color + "']").length > 0) {
-        // Update the color selector to the entered value
-        $(selector).colorselector("setValue", color);
-    } else {
-        // Unknown color - select a neutral color and reset the text value
-        $(selector).colorselector("setValue", "");
-        input.val(color);
-    }
-}
-
-function ui_change_card_color() {
-    var input = $(this);
-    var color = input.val();
-
-    ui_update_card_color_selector(color, input, "#card_color_selector");
-    ui_set_card_color(color);
-}
-
-function ui_change_default_color() {
-    var input = $(this);
-    var color = input.val();
-
-    ui_update_card_color_selector(color, input, "#default_color_selector");
-    ui_set_default_color(color);
-}
-
-function ui_change_default_icon() {
-    var value = $(this).val();
-    card_options.default_icon = value;
-    ui_render_selected_card();
-}
-
-function ui_change_card_contents() {
-    var value = $(this).val();
-
-    var card = ui_selected_card();
-    if (card) {
-        card.contents = value.split("\n");
-        ui_render_selected_card();
-    }
-}
-
-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();
-}
-
-function ui_change_default_icon_size() {
-    card_options.icon_inline = $(this).is(':checked');
-    ui_render_selected_card();
-}
-
-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_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 result;
-    });
-
-    ui_update_card_list();
-}
-
-function ui_apply_default_color() {
-    for (var i = 0; i < card_data.length; ++i) {
-        card_data[i].color = card_options.default_color;
-    }
-    ui_render_selected_card();
-}
-
-function ui_apply_default_icon() {
-    for (var i = 0; i < card_data.length; ++i) {
-        card_data[i].icon = card_options.default_icon;
-    }
-    ui_render_selected_card();
-}
-
-function ui_apply_default_icon_back() {
-    for (var i = 0; i < card_data.length; ++i) {
-        card_data[i].icon_back = card_options.default_icon;
-    }
-    ui_render_selected_card();
-}
-
-$(document).ready(function () {
-    ui_setup_color_selector();
-    $('.icon-list').typeahead({source:icon_names});
-
-    $("#button-generate").click(ui_generate);
-    $("#button-load").click(function () { $("#file-load").click(); });
-    $("#file-load").change(ui_load_files);
-    $("#button-clear").click(ui_clear_all);
-    $("#button-load-sample").click(ui_load_sample);
-    //$("#button-save").click(ui_save_file);
-    $("#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);
-    $("#button-help").click(ui_open_help);
-    $("#button-apply-color").click(ui_apply_default_color);
-    $("#button-apply-icon").click(ui_apply_default_icon);
-    $("#button-apply-icon-back").click(ui_apply_default_icon_back);
-
-    $("#selected-card").change(ui_update_selected_card);
-
-    $("#card-title").change(ui_change_card_title);
-    $("#card-title-size").change(ui_change_card_property);
-    $("#card-icon").change(ui_change_card_property);
-    $("#card-count").change(ui_change_card_property);
-    $("#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);
-    $("#page-columns").change(ui_change_option);
-    $("#card-arrangement").change(ui_change_option);
-    $("#card-size").change(ui_change_option);
-    $("#background-color").change(ui_change_option);
-
-    $("#default-color").change(ui_change_default_color);
-    $("#default-icon").change(ui_change_default_icon);
-    $("#default-title-size").change(ui_change_default_title_size);
-    $("#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();
-});
-
-
-

generator/js/ui.ts

@@ -0,0 +1,524 @@
+/// <reference path="./card.ts" />
+/// <reference path="./colors.ts" />
+/// <reference path="./icons.ts" />
+/// <reference path="./example_data.ts" />
+/// <reference path="./jquery.d.ts" />
+
+module RpgCardsUI {
+
+    var deck: RpgCards.CardDeck = null;
+    var options: RpgCards.Options = null;
+    var cardGenerator: RpgCards.CardHtmlGenerator = null;
+    var pageGenerator: RpgCards.PageHtmlGenerator = null;
+
+    // ============================================================================
+    // Seleted card
+    // ============================================================================
+
+    function selected_card_index(): number {
+        return parseInt($("#selected-card").val(), 10);
+    }
+
+    function selected_card(): RpgCards.Card {
+        var index = selected_card_index();
+        if (deck.cards.length > index) {
+            return deck.cards[index];
+        } else {
+            return null;
+        }
+    }
+
+    function select_card_by_index(index: number) {
+        if (index > -1) {
+            $("#selected-card").val("" + index);
+        } else {
+            $("#selected-card").val("0");
+        }
+        update_selected_card();
+    }
+
+    function select_card_by_card(card: RpgCards.Card) {
+        var index = deck.cards.indexOf(card);
+        select_card_by_index(index);
+    }
+
+    // ============================================================================
+    // Rendering
+    // ============================================================================
+
+    function render_selected_card() {
+        var card = selected_card();
+        $('#preview-container').empty();
+        if (card) {
+            var front = cardGenerator.card_front(card, options, "  ");
+            var back = cardGenerator.card_back(card, options, "  ");
+            $('#preview-container').html(front + "\n" + back);
+        }
+    }
+
+    function update_selected_card() {
+        var card = selected_card();
+        if (card) {
+            $("#card-title").val(card.title);
+            $("#card-title-size").val(card.title_size);
+            $("#card-count").val(""+card.count);
+            $("#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-title-size").val("");
+            $("#card-count").val("1");
+            $("#card-icon").val("");
+            $("#card-icon-back").val("");
+            $("#card-contents").val("");
+            $("#card-tags").val("");
+            $("#card-color").val("").change();
+        }
+
+        render_selected_card();
+    }
+
+    function update_card_list() {
+        deck.commit();
+        $("#total_card_count").text("Deck contains " + deck.cards.length + " unique cards.");
+
+        $('#selected-card').empty();
+        for (var i = 0; i < deck.cards.length; ++i) {
+            var card = deck.cards[i];
+            $('#selected-card')
+                .append($("<option></option>")
+                .attr("value", i)
+                .text(card.title));
+        }
+
+        update_selected_card();
+    }
+
+    // ============================================================================
+    // Color picker
+    // ============================================================================
+
+    function setup_color_selector() {
+        // Insert colors
+        $.each(card_colors, function (name, val) {
+            $(".colorselector-data")
+                .append($("<option></option>")
+                .attr("value", name)
+                .attr("data-color", val)
+                .text(name));
+        });
+    
+        // Callbacks for when the user picks a color
+        (<any>$('#default_color_selector')).colorselector({
+            callback: function (value, color, title) {
+                $("#default-color").val(title);
+                set_default_color(title);
+            }
+        });
+        (<any>$('#card_color_selector')).colorselector({
+            callback: function (value, color, title) {
+                $("#card-color").val(title);
+                set_card_color(value);
+            }
+        });
+        (<any>$('#foreground_color_selector')).colorselector({
+            callback: function (value, color, title) {
+                $("#foreground-color").val(title);
+                set_foreground_color(value);
+            }
+        });
+        (<any>$('#background_color_selector')).colorselector({
+            callback: function (value, color, title) {
+                $("#background-color").val(title);
+                set_background_color(value);
+            }
+        });
+
+        // Styling
+        $(".dropdown-colorselector").addClass("input-group-addon color-input-addon");
+    }
+
+    function set_card_color(value) {
+        var card = selected_card();
+        if (card) {
+            card.color = value;
+            render_selected_card();
+        }
+    }
+
+    function set_default_color(color) {
+        options.default_color = color;
+        render_selected_card();
+    }
+
+    function set_foreground_color(color) {
+        options.foreground_color = color;
+    }
+
+    function set_background_color(color) {
+        options.background_color = color;
+    }
+
+    function update_card_color_selector(color, input, selector) {
+        if ($(selector + " option[value='" + color + "']").length > 0) {
+            // Update the color selector to the entered value
+            (<any>$(selector)).colorselector("setValue", color);
+        } else {
+            // Unknown color - select a neutral color and reset the text value
+            (<any>$(selector)).colorselector("setValue", "");
+            input.val(color);
+        }
+    }
+
+    // ============================================================================
+    // Card values
+    // ============================================================================
+
+    function on_change_card_title() {
+        var title = $("#card-title").val();
+        var card = selected_card();
+        if (card) {
+            card.title = title;
+            $("#selected-card option:selected").text(title);
+            render_selected_card();
+        }
+    }
+
+    function on_change_card_color() {
+        var input = $(this);
+        var color = input.val();
+
+        update_card_color_selector(color, input, "#card_color_selector");
+        set_card_color(color);
+    }
+
+    function on_change_card_property() {
+        var property = $(this).attr("data-property");
+        var value = $(this).val();
+        var card = selected_card();
+        if (card) {
+            card[property] = value;
+            render_selected_card();
+        }
+    }
+
+    function on_change_card_contents() {
+        var value = $(this).val();
+
+        var card = selected_card();
+        if (card) {
+            card.contents = value.split("\n");
+            render_selected_card();
+        }
+    }
+
+    function on_change_card_tags() {
+        var value = $(this).val();
+
+        var card = selected_card();
+        if (card) {
+            if (value.trim().length == 0) {
+                card.tags = [];
+            } else {
+                card.tags = value.split(",").map(function (val) {
+                    return val.trim().toLowerCase();
+                });
+            }
+            render_selected_card();
+        }
+    }
+
+    // ============================================================================
+    // Global default values
+    // ============================================================================
+
+    function on_change_option() {
+        var property = $(this).attr("data-option");
+        var value = $(this).val();
+        options[property] = value;
+        render_selected_card();
+    }
+
+    function on_change_default_color() {
+        var input = $(this);
+        var color = input.val();
+        update_card_color_selector(color, input, "#default_color_selector");
+        set_default_color(color);
+    }
+
+    function on_change_default_icon() {
+        var value = $(this).val();
+        options.default_icon = value;
+        render_selected_card();
+    }
+
+    function on_change_default_title_size() {
+        options.default_title_size = $(this).val();
+        render_selected_card();
+    }
+
+    function on_change_default_icon_size() {
+        options.icon_inline = $(this).is(':checked');
+        render_selected_card();
+    }
+
+    // ============================================================================
+    // Map/Filter
+    // ============================================================================
+
+    function apply_default_color() {
+        deck.cards.forEach((card) => {
+            card.color = options.default_color;
+        });
+        render_selected_card();
+    }
+
+    function apply_default_icon() {
+        deck.cards.forEach((card) => {
+            card.icon = options.default_icon;
+        });
+        render_selected_card();
+    }
+
+    function apply_default_icon_back() {
+        deck.cards.forEach((card) => {
+            card.icon_back = options.default_icon;
+        });
+        render_selected_card();
+    }
+
+
+    function sort() {
+        showModal("#sort-modal");
+    }
+
+    function sort_execute() {
+        hideModal("#sort-modal");
+
+        var fn_code = $("#sort-function").val();
+        var fn = new Function("card_a", "card_b", fn_code);
+
+        deck.cards = deck.cards.sort(function (card_a, card_b) {
+            var result = fn(card_a, card_b);
+            return result;
+        });
+
+        update_card_list();
+    }
+
+    function filter() {
+        showModal("#filter-modal");
+    }
+
+    function filter_execute() {
+        hideModal("#filter-modal");
+
+        var fn_code = $("#filter-function").val();
+        var fn = new Function("card", fn_code);
+
+        deck.cards = deck.cards.filter(function (card) {
+            var result = fn(card);
+            if (result === undefined) return true;
+            else return result;
+        });
+
+        update_card_list();
+    }
+
+    // ============================================================================
+    // Modals
+    // ============================================================================
+
+    function showModal(id: string) {
+        (<any>$(id)).modal('show');
+    }
+
+    function hideModal(id: string) {
+        (<any>$(id)).modal('hide');
+    }
+
+
+    // ============================================================================
+    // I/O
+    // ============================================================================
+
+    function save_file() {
+        var str = JSON.stringify(deck.toJSON(), null, "  ");
+        var parts = [str];
+        var blob = new Blob(parts, { type: 'application/json' });
+        var url = URL.createObjectURL(blob);
+
+        var a = <HTMLLinkElement>$("#file-save-link")[0];
+        a.href = url;
+        (<any>a).download = "rpg_cards.json";
+        a.click();
+
+        setTimeout(function () { URL.revokeObjectURL(url); }, 1000);
+    }
+
+    function load_sample() {
+        deck = RpgCards.CardDeck.fromJSON(card_data_example);
+        update_card_list();
+    }
+
+    function clear_all() {
+        deck = new RpgCards.CardDeck();
+        update_card_list();
+    }
+
+    function ui_load_files(evt) {
+        // ui_clear_all();
+
+        var files = evt.target.files;
+
+        for (var i = 0, f; f = files[i]; i++) {
+            var reader = new FileReader();
+
+            reader.onload = function (reader) {
+                var data = JSON.parse(this.result);
+                var deck = RpgCards.CardDeck.fromJSON(data);
+                add_cards(deck.cards);
+            };
+
+            reader.readAsText(f);
+        }
+
+        // Reset file input
+        (<any>$("#file-load-form")[0]).reset();
+    }
+
+    function add_cards(cards: RpgCards.Card[]) {
+        deck.addCards(cards);
+        update_card_list();
+    }
+
+    function add_new_card() {
+        deck.addNewCard();
+        update_card_list();
+        select_card_by_index(deck.cards.length - 1);
+    }
+
+    function duplicate_card() {
+        if (deck.cards.length > 0) {
+            var old_card = selected_card();
+            var new_card = deck.duplicateCard(old_card);
+        } else {
+            deck.addNewCard();
+        }
+        update_card_list();
+        select_card_by_index(deck.cards.length - 1);
+    }
+
+    function delete_card() {
+        var index = selected_card_index();
+        var card = selected_card();
+        deck.deleteCard(card);
+        update_card_list();
+        select_card_by_index(Math.min(index, deck.cards.length - 1));
+    }
+
+    // ============================================================================
+    // Menu
+    // ============================================================================
+
+    function open_help() {
+        showModal("#help-modal");
+    }
+
+    function select_icon() {
+        window.open("http://game-icons.net/", "_blank");
+    }
+
+    var generate_modal_shown = false;
+    function generate() {
+        if (deck.cards.length === 0) {
+            alert("Your deck is empty. Please define some cards first, or load the sample deck.");
+            return;
+        }
+
+        // Generate output HTML
+        var card_html = pageGenerator.generateHtml(deck.cards, options);
+
+        // Open a new window for the output
+        // Use a separate window to avoid CSS conflicts
+        var tab = window.open("output.html", 'rpg-cards-output');
+
+        if (generate_modal_shown == false) {
+            showModal("#print-modal");
+            generate_modal_shown = true;
+        }
+
+        // Send the generated HTML to the new window
+        // Use a delay to give the new window time to set up a message listener
+        setTimeout(function () { tab.postMessage(card_html, '*') }, 500);
+    }
+    
+    // ============================================================================
+    // Initialization
+    // ============================================================================
+
+    function init() {
+        deck = new RpgCards.CardDeck();
+        options = new RpgCards.Options();
+        cardGenerator = new RpgCards.CardHtmlGenerator;
+        pageGenerator = new RpgCards.PageHtmlGenerator;
+
+        setup_color_selector();
+        (<any>$('.icon-list')).typeahead({ source: icon_names });
+
+
+        // Menu
+        $("#sort-execute").click(sort_execute);
+        $("#filter-execute").click(filter_execute);
+        $("#button-generate").click(generate);
+        $("#button-load").click(function () { $("#file-load").click(); });
+        $("#file-load").change(ui_load_files);
+        $("#button-clear").click(clear_all);
+        $("#button-load-sample").click(load_sample);
+        $("#button-save").click(save_file);
+        $("#button-sort").click(sort);
+        $("#button-filter").click(filter);
+        $("#button-add-card").click(add_new_card);
+        $("#button-duplicate-card").click(duplicate_card);
+        $("#button-delete-card").click(delete_card);
+        $("#button-help").click(open_help);
+        $("#button-apply-color").click(apply_default_color);
+        $("#button-apply-icon").click(apply_default_icon);
+        $("#button-apply-icon-back").click(apply_default_icon_back);
+
+        $("#selected-card").change(update_selected_card);
+
+        $("#card-title").change(on_change_card_title);
+        $("#card-title-size").change(on_change_card_property);
+        $("#card-icon").change(on_change_card_property);
+        $("#card-count").change(on_change_card_property);
+        $("#card-icon-back").change(on_change_card_property);
+        $("#card-color").change(on_change_card_color);
+        $("#card-contents").change(on_change_card_contents);
+        $("#card-tags").change(on_change_card_tags);
+
+        // Global options
+        $("#page-size").change(on_change_option);
+        $("#page-rows").change(on_change_option);
+        $("#page-columns").change(on_change_option);
+        $("#card-arrangement").change(on_change_option);
+        $("#card-size").change(on_change_option);
+        $("#background-color").change(on_change_option);
+        $("#default-color").change(on_change_default_color);
+        $("#default-icon").change(on_change_default_icon);
+        $("#default-title-size").change(on_change_default_title_size);
+        $("#small-icons").change(on_change_default_icon_size);
+
+        $(".icon-select-button").click(select_icon);
+
+        update_card_list();
+    }
+
+
+    $(document).ready(function () {
+        init();
+    });
+}

make.bat

@@ -0,0 +1,7 @@
+@ECHO building card.js
+@CALL node node_modules/typescript/bin/tsc generator/js/card.ts -t ES6 -sourcemap -d --out generator/js/card.js
+
+@ECHO building ui.js
+@CALL node node_modules/typescript/bin/tsc generator/js/ui.ts -t ES6 -sourcemap -d --out generator/js/ui.js
+
+@PAUSE