Update generator

generator/css/card-size.css

@@ -12,11 +12,6 @@
     3) Fill each page with cards, arranged around the center of the page.
 */
 
-/* Remove page margins */
-@page {
-    margin: 0;
-    padding: 0;
-}
 
 /* Center all content within a page */
 .page {
@@ -26,37 +21,36 @@
     flex-direction: row;
     flex-wrap: wrap;
     page-break-after: always;
-    padding: 0mm;
+    padding: 0;
 }
 
-/* A4 paper area (minus epsilon for rounding) */
+/* A4 paper area */
+/* Chrome has problems with page sizes given in metric units. Make the paper area slightly smaller to work around this. */
 page[size="A4"] {
-    width:  209mm; /* full: 210.0mm */
-    height: 295mm; /* full: 297.0mm */
+    width:  210mm; /* full: 210.0mm */
+    height: 296mm; /* full: 297.0mm */
 }
 
-/* US letter area (minus epsilon for rounding) */
+/* US letter area */
 page[size="Letter"] {
-    width:  215mm; /* full: 215.9mm (8.5in) */
-    height: 278mm; /* full: 279.4mm (11.0in) */
+    width:  8.5in;
+    height: 11.0in;
 }
 
 page[size="25x35"] {
-    width: 63.6mm;
-    height: 89.0mm;
+    width: 2.5in;
+    height: 3.5in;
 }
 
 /* Default card size */
 .card {
     width:2.5in;
-    min-width:2.5in;
     height:3.5in;
 }
 
 /* Bridge card size */
 .card-size-225x35 {
     width:2.25in;
-    min-width:2.25in;
     height:3.5in;
 }
 .card-size-225x35 .card-back-icon {
@@ -67,7 +61,6 @@ page[size="25x35"] {
 /* Poker / Magic card size */
 .card-size-25x35 {
     width:2.5in;
-    min-width:2.5in;
     height:3.5in;
 }
 .card-size-25x35 .card-back-icon {
@@ -89,7 +82,6 @@ page[size="25x35"] {
 /* Landscape big card */
 .card-size-75x50 {
     width:7.5in;
-    min-width:7.5in;
     height:5.0in;
 }
 .card-size-75x50 .card-back-icon {
@@ -97,6 +89,7 @@ page[size="25x35"] {
     height: 2in;
 }
 
+/* Card sizes that fill out the entire sheet of paper (minimal margins) */
 .page[size="A4"] .card-size-full3x3 {
     width:69mm;
     height:98mm;

generator/css/cards.css

@@ -26,7 +26,7 @@
     background-color: white;
     border-radius: 4mm;
     border-color: inherit;
-    margin: 1mm;
+    margin: 3mm;
     flex: 1;
     display: flex;
 }
@@ -193,6 +193,13 @@
     margin-bottom: 0.3em;
 }
 
+.card-box {
+    display: inline;
+    height: 10mm;
+    width: 10mm;
+    margin-right: 0.3em;
+}
+
 .card-bullet-line {
     font-size: inherit;
     color: black;

generator/css/output.css

@@ -18,11 +18,15 @@ body {
 @media print {
   .page-preview {
     margin: 0;
+    padding: 0;
+    border: 0;
     box-shadow: 0;
     background-color: white;
   }
   .page-background {
     margin: 0;
+    padding: 0;
+    border: 0;
     box-shadow: 0;
     /* Set the background to gray to visualize the page size in the print preview */
     background-color: gray;

generator/data/card_data_example.js

@@ -109,7 +109,8 @@ var card_data_example = [
             "bullet | magic missile, 1st level (1 charge)",
             "bullet | magic missile, 2nd level (2 charges)",
             "bullet | magic missile, 3rd level (3 charges)",
-            "fill | 3"
+            "fill | 3",
+            "boxes | 7 | 2.5"
         ]
     },
     {

generator/generate.html

@@ -82,12 +82,12 @@
                             <button type="button" class="btn btn-success btn-block" id="button-generate">Generate</button>
                         </div>
                     </div>
-                    <span class="help-block">Generated cards open in a new tab or window.</span>
+                    <!--<span class="help-block">Generated cards open in a new tab or window.</span>-->
                 </form>
-                <h3>Sizes</h3>
+                <h3>Page settings</h3>
                 <form role="form" class="form-horizontal">
                     <div class="form-group">
-                        <label for="page-size" class="col-sm-4 control-label">Page</label>
+                        <label for="page-size" class="col-sm-4 control-label">Page Size</label>
                         <div class="col-sm-8">
                             <select class="form-control" id="page-size" data-option="page_size">
                                 <option value="A4" selected>A4</option>
@@ -97,7 +97,7 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="card-size" class="col-sm-4 control-label">Card</label>
+                        <label for="card-size" class="col-sm-4 control-label">Card Size</label>
                         <div class="col-sm-8">
                             <select class="form-control" id="card-size" data-option="card_size">
                                 <option value="225x35">2.25&quot; x 3.5&quot; (Bridge)</option>
@@ -129,6 +129,24 @@
                             </select>
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="foreground-color" class="col-sm-4 control-label">Front color</label>
+                        <div class="col-sm-8">
+                            <div class="input-group">
+                                <select id="foreground_color_selector" class="colorselector-data"></select>
+                                <input type="text" id="foreground-color" class="form-control" placeholder="Front page color" data-property="color" value="white">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="background-color" class="col-sm-4 control-label">Back color</label>
+                        <div class="col-sm-8">
+                            <div class="input-group">
+                                <select id="background_color_selector" class="colorselector-data"></select>
+                                <input type="text" id="background-color" class="form-control" placeholder="Back page color" data-property="color" value="white">
+                            </div>
+                        </div>
+                    </div>
                 </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">
@@ -304,13 +322,15 @@
                 </div>
                 <div class="modal-body">
                     <ul>
-                        <li>The generated cards open in a new tab or window. If you don't see any new tab or window, check your popup blocker.</li>
-                        <li>Make sure to use the correct paper size (same as in the editor).</li>
+                        <li>The generated cards open in a new tab or window. If you don't see any new tab or window, check your popup and script blockers. If that does not help, try disabling all addons.</li>
+                        <li>Make sure your printer uses the correct paper size (same as in the editor).</li>
                         <li>Enable double sided printing (flip on long edge).</li>
-                        <li>Do not scale the document to fit the page.</li>
+                        <li>Do not scale the document to fit the page. Print at original size.</li>
                         <li>
                             Some printers are not very precise (pages print slightly shifted or rotated) and the cards will not line up with the card backs.
-                            If this is the case, there's nothing you can do. Try a different printer or print single-sided.
+                            If this is the case, there's not much you can do.
+                            Try making the page background the same color as the cards, so that you won't get any white edges on the card.
+                            If that does not help, try a different printer or print single-sided.
                         </li>
                     </ul>
                 </div>

generator/js/cards.js

@@ -3,6 +3,8 @@
 // ============================================================================
 function card_default_options() {
     return {
+        foreground_color: "white",
+        background_color: "white",
         default_color: "black",
         default_icon: "ace",
         default_title_size: "13",
@@ -11,6 +13,7 @@ function card_default_options() {
         page_columns: 3,
         card_arrangement: "doublesided",
         card_size: "25x35",
+        card_count: null,
         icon_inline: true
     }
 }
@@ -89,6 +92,25 @@ function card_element_ruler(params, card_data, options) {
     return result;
 }
 
+function card_element_boxes(params, card_data, options) {
+    var color = card_data_color_front(card_data, options);
+    var fill = ' fill="none"';
+    var stroke = ' stroke="' + color + '"';
+    var count = params[0] || 1;
+    var size = params[1] || 3;
+    var style = 'style="width:' + size + 'em;height:' + size + 'em"';
+
+    var result = "";
+    result += '<div class="card-element card-description-line">';
+    for (var i = 0; i < count; ++i) {
+        result += '<svg class="card-box" height="100" width="100" viewbox="0 0 100 100" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg" ' + style + '>';
+        result += '    <rect x="5" y="5" width="90" height="90" ' + fill + stroke + ' style="stroke-width:10">';
+        result += '</svg>';
+    }
+    result += '</div>';
+    return result;
+}
+
 function card_element_property(params, card_data, options) {
     var result = "";
     result += '<div class="card-element card-property-line">';
@@ -147,6 +169,7 @@ var card_element_generators = {
     property: card_element_property,
     rule: card_element_ruler,
     ruler: card_element_ruler,
+    boxes: card_element_boxes,
     description: card_element_description,
     text: card_element_text,
     bullet: card_element_bullet,
@@ -300,7 +323,9 @@ function card_pages_wrap(pages, options) {
     for (var i = 0; i < pages.length; ++i) {
         var style = "";
         if ((options.card_arrangement == "doublesided") &&  (i % 2 == 1)) {
-            style += 'style="background-color:'+options.default_color+'"';
+            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");
@@ -309,6 +334,28 @@ function card_pages_wrap(pages, options) {
     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;
@@ -318,7 +365,7 @@ function card_pages_generate_html(card_data, options) {
     var front_cards = [];
     var back_cards = [];
     card_data.forEach(function (data) {
-        var count = data.count || 1;
+        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));
@@ -351,8 +398,12 @@ function card_pages_generate_html(card_data, options) {
         pages = card_pages_split(cards, rows, cols);
     }
 
-    // Wrap all pages in a <page> element
-    return card_pages_wrap(pages, options);
+    // 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) {

generator/js/ui.js

@@ -35,6 +35,11 @@ function merge(left, right, compare) {
 
 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);
 
@@ -49,7 +54,7 @@ function ui_generate() {
 
     // 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, '*') }, 100);
+    setTimeout(function () { tab.postMessage(card_html, '*') }, 500);
 }
 
 function ui_load_sample() {
@@ -209,6 +214,18 @@ function ui_setup_color_selector() {
             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");
@@ -219,6 +236,14 @@ function ui_set_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();
@@ -390,6 +415,7 @@ $(document).ready(function () {
     $("#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);