Add options

generator/css/cards.css

@@ -78,14 +78,32 @@
     border-color: inherit;
 }
 
+.title-inlineicon {
+    width: 7mm;
+    height: 7mm;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-color: inherit;
+    border-color: inherit;
+}
+.title-inlineicon-container {
+    position: absolute;
+    right: -1mm;
+    top: -1mm;
+    border: 1mm solid;
+    border-radius: 1mm;
+    background-color: inherit;
+    border-color: inherit;
+}
+
 .title {
-    height: 28px;
-    line-height: 23px;
+    height: 8mm;
+    line-height: 6mm;
     padding-left: 2mm;
     font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
     font-variant: small-caps;
     font-weight: bold;
-    font-size: 13pt;
+    font-size: 14pt;
     background-color: inherit;
     color: white;
 }

generator/data/card_data_example.js

@@ -2,7 +2,7 @@ var card_data = [
     {
         "count": 1,
         "color": "maroon",
-        "title": "Burning Hands",
+        "title": "Protection from Energy",
         "icon": "custom-spell-1",
         "icon_back": "custom-class-arcane",
         "contents": [

generator/js/cards.js

@@ -1,51 +1,68 @@
+// ============================================================================
+// Card definition related functions
+// ============================================================================
+function card_default_options() {
+    return {
+        default_color: "black",
+        default_icon: "ace",
+        page_size: "A4",
+        page_rows: 3,
+        page_columns: 3,
+        icon_inline: true
+    }
+}
+
 // ============================================================================
 // Card definition related functions
 // ============================================================================
 
-function card_data_color_front(card_data) {
-    return card_data.color_front || card_data.color || "black";
+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) {
-    return card_data.color_back || card_data.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) {
-    return card_data.icon_front || card_data.icon || "ace";
+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) {
-    return card_data.icon_back || card_data.icon || "ace";
+function card_data_icon_back(card_data, options) {
+    return card_data.icon_back || card_data.icon || options.default_icon || "ace";
 }
 
 // ============================================================================
 // Card element generating functions
 // ============================================================================
 
-function card_element_title(card_data) {
+function card_element_title(card_data, options) {
     var title = card_data.title || "";
     return '<div class="title">' + title + '</div>';
 }
 
-function card_element_icon(card_data) {
-    var icon = card_data_icon_front(card_data);
-    var result = "";
-    if (icon) {
-        result += '<div class="title-icon-container">';
-        result += '    <div class="title-icon icon-' + icon + '">';
-        result += '    </div>';
-        result += '</div>';
+function card_element_icon(card_data, options) {
+    var icon = card_data_icon_front(card_data, options);
+    var classname = "icon";
+    if (options.icon_inline) {
+        classname = "inlineicon";
     }
+
+    var result = "";
+    result += '<div class="title-'+classname+'-container">';
+    result += '    <div class="title-' + classname + ' icon-' + icon + '">';
+    result += '    </div>';
+    result += '</div>';
     return result;
 }
 
-function card_element_subtitle(params, card_data) {
+function card_element_subtitle(params, card_data, options) {
     var subtitle = params[0] || "";
     return '<div class="subtitle">' + subtitle + '</div>';
 }
 
-function card_element_ruler(params, card_data) {
-    var color = card_data_color_front(card_data);
+function card_element_ruler(params, card_data, options) {
+    var color = card_data_color_front(card_data, options);
     var fill = 'fill="' + color + '"';
     var stroke = 'stroke="' + color + '"';
 
@@ -56,7 +73,7 @@ function card_element_ruler(params, card_data) {
     return result;
 }
 
-function card_element_property(params, card_data) {
+function card_element_property(params, card_data, options) {
     var result = "";
     result += '<div class="property-line">';
     result += '   <h4 class="property-name">' + params[0] + '</h4>';
@@ -65,7 +82,7 @@ function card_element_property(params, card_data) {
     return result;
 }
 
-function card_element_description(params, card_data) {
+function card_element_description(params, card_data, options) {
     var result = "";
     result += '<div class="description-line">';
     result += '   <h4 class="description-name">' + params[0] + '</h4>';
@@ -74,7 +91,7 @@ function card_element_description(params, card_data) {
     return result;
 }
 
-function card_element_text(params, card_data) {
+function card_element_text(params, card_data, options) {
     var result = "";
     result += '<div class="description-line">';
     result += '   <p class="description-text">' + params[0] + '</p>';
@@ -82,19 +99,19 @@ function card_element_text(params, card_data) {
     return result;
 }
 
-function card_element_section(params, card_data) {
-    var color = card_data.color_front || card_data.color;
+function card_element_section(params, card_data, options) {
+    var color = card_data_color_front(card_data, options);
     var section = params[0] || "";
     return '<h3 style="color:' + color + '">' + section + '</h3>';
 }
 
-function card_element_fill(params, card_data) {
+function card_element_fill(params, card_data, options) {
     var flex = params[0] || "1";
     return '<div class="fill" style="flex:' + flex + '"></div>';
 }
 
-function card_element_unknown(params, card_data) {
-    return '<div>' + params.join('<br />') + '</div>';
+function card_element_unknown(params, card_data, options) {
+    return '<div>Unknown element: ' + params.join('<br />') + '</div>';
 }
 
 var card_element_generators = {
@@ -111,7 +128,7 @@ var card_element_generators = {
 // Card generating functions
 // ============================================================================
 
-function card_generate_contents(contents, card_data) {
+function card_generate_contents(contents, card_data, options) {
     var result = "";
     result += '<div class="content-container">';
     result += contents.map(function (value) {
@@ -120,9 +137,9 @@ function card_generate_contents(contents, card_data) {
         var element_params = parts.splice(1);
         var element_generator = card_element_generators[element_name];
         if (element_generator) {
-            return element_generator(element_params, card_data);
+            return element_generator(element_params, card_data, options);
         } else {
-            return card_element_unknown(element_params, card_data);
+            return card_element_unknown(element_params, card_data, options);
         }
     }).join("\n");
     result += '</div>';
@@ -137,34 +154,34 @@ function card_repeat(card, count) {
     return result;
 }
 
-function card_generate_color_style(color) {
+function card_generate_color_style(color, options) {
     return 'style="color:' + color + '; border-color:' + color + '; background-color:' + color + '"';
 }
 
-function card_generate_color_gradient_style(color) {
+function card_generate_color_gradient_style(color, options) {
     return 'style="background: radial-gradient(ellipse at center, white 20%, ' + color + ' 120%)"';
 }
 
-function card_generate_front(data) {
-    var color = card_data_color_front(data);
-    var style_color = card_generate_color_style(color);
+function card_generate_front(data, options) {
+    var color = card_data_color_front(data, options);
+    var style_color = card_generate_color_style(color, options);
     var count = data.count || 1;
 
     var result = "";
     result += '<div class="card" ' + style_color + '>';
-    result += card_element_icon(data);
-    result += card_element_title(data);
-    result += card_generate_contents(data.contents, data);
+    result += card_element_icon(data, options);
+    result += card_element_title(data, options);
+    result += card_generate_contents(data.contents, data, options);
     result += '</div>';
 
     return card_repeat(result, count);
 }
 
-function card_generate_back(data) {
-    var color = card_data_color_back(data)
-    var style_color = card_generate_color_style(color);
-    var style_gradient = card_generate_color_gradient_style(color);
-    var icon = card_data_icon_back(data);
+function card_generate_back(data, options) {
+    var color = card_data_color_back(data, options)
+    var style_color = card_generate_color_style(color, options);
+    var style_gradient = card_generate_color_gradient_style(color, options);
+    var icon = card_data_icon_back(data, options);
     var count = data.count || 1;
 
     var result = "";
@@ -179,7 +196,7 @@ function card_generate_back(data) {
     return card_repeat(result, count);
 }
 
-function card_generate_empty(count) {
+function card_generate_empty(count, options) {
     var style_color = card_generate_color_style("white");
 
     var result = "";
@@ -233,8 +250,8 @@ function card_pages_add_padding(cards, rows, cols) {
     }
 }
 
-function card_pages_wrap(pages) {
-    var size = "A4";
+function card_pages_wrap(pages, options) {
+    var size = options.page_size || "A4";
 
     var result = "";
     for (var i = 0; i < pages.length; ++i) {
@@ -245,16 +262,17 @@ function card_pages_wrap(pages) {
     return result;
 }
 
-function card_pages_generate_html(card_data) {
-    var rows = 3;
-    var cols = 3;
+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) {
-        front_cards = front_cards.concat(card_generate_front(data));
-        back_cards = back_cards.concat(card_generate_back(data));
+        front_cards = front_cards.concat(card_generate_front(data, options));
+        back_cards = back_cards.concat(card_generate_back(data, options));
     });
 
     // Add padding cards so that the last page is full of cards
@@ -274,7 +292,7 @@ function card_pages_generate_html(card_data) {
     var pages = card_pages_merge(front_pages, back_pages);
 
     // Wrap all pages in a <page> element
-    return card_pages_wrap(pages);
+    return card_pages_wrap(pages, options);
 }
 
 function card_pages_insert_into(card_data, container) {