More features

developed on gh-pages by accident

generator/css/card-size.css

+/*
+    Full page printing CSS
+    ======================
+
+    Since we want precisely specify the card sizes, we must not allow the user to scale the content to fit a sheet of paper.
+    We must also make sure the browser does not add randomly sized margins to the page.
+
+    Instead, we use absolute sizes for all content, such that it fills a sheet of paper:
+    1) Remove all page margins (using the @page CSS rule). The borders of the document will be outside of the printable area,
+       however, we will cluster all content around the center, so that we won't crop anything.
+    2) Fill the document with <page> elements which have an absolute size equal to the full area of the paper.
+    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 {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    page-break-after: always;
+    padding: 0mm;
+}
+
+/* A4 paper area (minus epsilon for rounding) */
+page[size="A4"] {
+    width:  209mm; /* full: 210.0mm */
+    height: 295mm; /* full: 297.0mm */
+}
+
+/* US letter area (minus epsilon for rounding) */
+page[size="Letter"] {
+    width:  215mm; /* full: 215.9mm (8.5in) */
+    height: 278mm; /* full: 279.4mm (11.0in) */
+}
+
+/* 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;
+}
+
+/* Poker / Magic card size */
+.card-size-25x35 {
+    width:2.5in;
+    min-width:2.5in;
+    height:3.5in;
+}
+
+/* Poker / Magic card size */
+.card-size-35x50 {
+    width:3.5in;
+    min-width:3.5in;
+    height:5.0in;
+}
+
+/* Landscape big card */
+.card-size-75x50 {
+    width:7.5in;
+    min-width:7.5in;
+    height:5.0in;
+}
+
+.page[size="A4"] .card-size-full3x3 {
+    width:69mm;
+    height:98mm;
+}
+
+.page[size="Letter"] .card-size-full3x3 {
+    width:71mm;
+    height:92mm;
+}

generator/css/cards.css

 .card {
-    width:66mm;
-    min-width:66mm;
-    height:95mm;
     border: 2mm solid;
     border-radius: 4px;
+    box-sizing: border-box;
     position: relative;
     display: flex;
     flex-direction: column;
     background-color: inherit;
     color: white;
 }
-.card-title-big {
-    font-size: 6mm;
-    line-height: 6mm;
+.card-title-16 {
+    font-size: 16pt;
+    line-height: 6.5mm;
 }
-.card-title-normal {
-    font-size: 5mm;
-    line-height: 6mm;
+.card-title-15 {
+    font-size: 15pt;
+    line-height: 6.5mm;
 }
-.card-title-small {
-    font-size: 4mm;
+.card-title-14 {
+    font-size: 14pt;
     line-height: 6.5mm;
 }
-.card-title-tiny {
-    font-size: 3.5mm;
-    line-height: 6.75mm;
+.card-title-13 {
+    font-size: 13pt;
+    line-height: 7mm;
+}
+.card-title-12 {
+    font-size: 12pt;
+    line-height: 7mm;
+}
+.card-title-11 {
+    font-size: 11pt;
+    line-height: 7.5mm;
+}
+.card-title-10 {
+    font-size: 10pt;
+    line-height: 7.5mm;
 }
-
 .card-subtitle {
     height: 18px;
     line-height: 18px;

generator/css/output.css

+.page-background {
+  background: rgb(204,204,204); 
+}
+
+body {
+    display: flex;
+    justify-content:center;
+    align-content:center;
+}
+
+.page-preview {
+    background: white;
+    margin: 0 auto;
+    margin-bottom: 16px;
+    box-shadow: 0 0 8px rgba(0,0,0,0.5);
+}
+
+@media print {
+  .page-preview {
+    margin: 0;
+    box-shadow: 0;
+    background-color: white;
+  }
+  .page-background {
+    margin: 0;
+    box-shadow: 0;
+    /* Set the background to gray to visualize the page size in the print preview */
+    background-color: gray;
+  }
+}

generator/css/page.css

-body {
-  background: rgb(204,204,204); 
-}
-
-page[size="A4"] {
-    background: white;
-    width: 210mm;
-    height: 297mm;
-    display: block;
-    margin: 0 auto;
-    margin-bottom: 16px;
-    box-shadow: 0 0 8px rgba(0,0,0,0.5);
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    page-break-after: always;
-}
-
-#output-frame {
-    border: 0;
-    width: 100%;
-}
-
-@media print {
-  body, page[size="A4"] {
-    margin: 0;
-    box-shadow: 0;
-    background-color: white;
-  }
-  #input-container {
-      display: none;
-  }
-  #output-container {
-      margin: 0;
-      padding: 0;
-  }
-}
-
-.input-button {
-    display:block;
-    height: 40px;
-    font-size: 24px;
-    width: 100%;
-    margin-bottom: 10px;
-}
-
-.input-data {
-    width: 100%;
-}

generator/data/card_data_example.js

         "count": 1,
         "color": "dimgray",
         "title": "Shortsword of Very Long Names",
-        "title_size": "tiny",
+        "title_size": "10",
         "icon": "crossed-swords",
         "contents": [
             "subtitle | Simple melee weapon (10gp)",

generator/generate.html

-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <title>RPG cards</title>
     <!-- CSS -->
     <link href="css/ui.css" rel="stylesheet" />
     <link href="css/cards.css" rel="stylesheet" />
+    <link href="css/card-size.css" rel="stylesheet" />
     <link href="css/icons.css" rel="stylesheet" />
     <link href="css/custom-icons.css" rel="stylesheet" />
     <!-- Fonts -->
                     </div>
                     <span class="help-block">Generated cards open in a new tab or window.</span>
                 </form>
+                <h3>Sizes</h3>
+                <form role="form" class="form-horizontal">
+                    <div class="form-group">
+                        <label for="page-size" class="col-sm-4 control-label">Page</label>
+                        <div class="col-sm-8">
+                            <select class="form-control" id="page-size" data-option="page_size">
+                                <option value="A4" selected>A4</option>
+                                <option value="Letter">US letter</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="card-size" class="col-sm-4 control-label">Card</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>
+                                <option value="25x35" selected>2.5&quot; x 3.5&quot; (Poker)</option>
+                                <option value="35x50">3.5&quot; x 5.0&quot;</option>
+                                <option value="75x50">7.5&quot; x 5.0&quot;</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="card-size" class="col-sm-4 control-label">Cards/page</label>
+                        <div class="col-sm-3">
+                            <input type="text" id="page-rows" class="form-control" data-option="page_rows" value="3">
+                        </div>
+                        <div class="col-sm-2">
+                            <p class="form-control-static">x</p>
+                        </div>
+                        <div class="col-sm-3">
+                            <input type="text" id="page-columns" class="form-control" data-option="page_columns" value="3">
+                        </div>
+                    </div>
+                </form>
                 <h3>Default values</h3>
                 <form role="form" class="form-horizontal">
                     <div class="form-group">
                         <label for="default-title-size" class="col-sm-2 control-label">Title</label>
                         <div class="col-sm-10">
                             <select class="form-control" id="default-title-size">
-                                <option value="big">big font</option>
-                                <option value="normal" selected>normal font</option>
-                                <option value="small">small font</option>
-                                <option value="tiny">tiny font</option>
+                                <option value="16">16pt font</option>
+                                <option value="15">15pt font</option>
+                                <option value="14">14pt font</option>
+                                <option value="13" selected>13pt font</option>
+                                <option value="12">12pt font</option>
+                                <option value="11">11pt font</option>
+                                <option value="10">10pt font</option>
                             </select>
                         </div>
                     </div>
                             <input type="text" id="card-title" class="form-control" placeholder="Title">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="card-title-size" class="col-sm-2 control-label">Title</label>
+                        <div class="col-sm-10">
+                            <select class="form-control" id="card-title-size" data-property="title_size">
+                                <option value="" selected>default font</option>
+                                <option value="16">16pt font</option>
+                                <option value="15">15pt font</option>
+                                <option value="14">14pt font</option>
+                                <option value="13">13pt font</option>
+                                <option value="12">12pt font</option>
+                                <option value="11">11pt font</option>
+                                <option value="10">10pt font</option>
+                            </select>
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label for="card-count" class="col-sm-2 control-label">Count</label>
                         <div class="col-sm-10">
-                            <input type="number" id="card-count" class="form-control" placeholder="Count" data-property="count">
+                            <input type="number" id="card-count" class="form-control" placeholder="Count" data-property="count" value="1">
                         </div>
                     </div>
                     <div class="form-group">
                                 <span class="input-group-btn">
                                     <button class="btn btn-default icon-select-button" type="button">Search</button>
                                 </span>
-                                <input type="text" id="card-icon" class="form-control icon-list" placeholder="Icon name (default icon if empty)" data-property="icon">
+                                <input type="text" id="card-icon" class="form-control icon-list" placeholder="Default icon" data-property="icon">
                             </div>
                         </div>
                     </div>
                                 <span class="input-group-btn">
                                     <button class="btn btn-default icon-select-button" type="button">Search</button>
                                 </span>
-                                <input type="text" id="card-icon-back" class="form-control icon-list" placeholder="Icon name (same as front if empty)" data-property="icon_back">
+                                <input type="text" id="card-icon-back" class="form-control icon-list" placeholder="Same as front" data-property="icon_back">
                             </div>
                         </div>
                     </div>
                         <div class="col-sm-10">
                             <div class="input-group">
                                 <select id="card_color_selector" class="colorselector-data"></select>
-                                <input type="text" id="card-color" class="form-control" placeholder="Card color (default color if empty)" data-property="color">
+                                <input type="text" id="card-color" class="form-control" placeholder="Default color" data-property="color">
                             </div>
                         </div>
                     </div>
             </div>
         </div>
     </div>
+    <!-- Modal -->
+    <div class="modal" id="print-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <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">Printing generated cards</h4>
+                </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>Enable double sided printing (flip on long edge).</li>
+                        <li>Do not scale the document to fit the page.</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.
+                        </li>
+                    </ul>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Ok, got it</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>

generator/js/cards.js

     return {
         default_color: "black",
         default_icon: "ace",
-        default_title_size: "normal",
+        default_title_size: "13",
         page_size: "A4",
         page_rows: 3,
         page_columns: 3,
+        card_size: "25x35",
         icon_inline: true
     }
 }
     var style_color = card_generate_color_style(color, options);
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
     result += card_element_icon(data, options);
     result += card_element_title(data, options);
     result += card_generate_contents(data.contents, data, options);
     var icon = card_data_icon_back(data, options);
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
     result += '  <div class="card-back" ' + style_gradient + '>';
     result += '    <div class="card-back-inner">';
     result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
     var style_color = card_generate_color_style("white");
 
     var result = "";
-    result += '<div class="card" ' + style_color + '>';
+    result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
     result += '</div>';
 
     return card_repeat(result, count);
     return result;
 }
 
-function card_pages_add_padding(cards, rows, cols) {
-    var cards_per_page = rows * cols;
+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));
+        return cards.concat(card_generate_empty(cards_per_page - last_page_cards, options));
     } else {
         return cards;
     }
 
     var result = "";
     for (var i = 0; i < pages.length; ++i) {
-        result += '<page size="' + size + '">\n';
+        result += '<page class="page page-preview" size="' + size + '">\n';
         result += pages[i].join("\n");
         result += '</page>\n';
     }
     });
 
     // Add padding cards so that the last page is full of cards
-    front_cards = card_pages_add_padding(front_cards, rows, cols);
-    back_cards = card_pages_add_padding(back_cards, rows, cols);
+    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);

generator/js/ui.js

     return result;
 }
 
+var ui_generate_modal_shown = false;
 function ui_generate() {
     // Generate output HTML
     var card_html = card_pages_generate_html(card_data, card_options);
     // 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, '*') }, 100);
     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);
     ui_render_selected_card();
 }
 
+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();
     $("#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);
 
+    $("#page-size").change(ui_change_option);
+    $("#page-rows").change(ui_change_option);
+    $("#page-columns").change(ui_change_option);
+    $("#card-size").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);

generator/output.html

     <!-- Javascript -->
     <script type="text/javascript" src="js/output.js"></script>
     <!-- CSS -->
-    <link rel=" stylesheet" type="text/css" href="css/page.css">
+    <link rel=" stylesheet" type="text/css" href="css/output.css">
     <link rel="stylesheet" type="text/css" href="css/cards.css">
+    <link rel="stylesheet" type="text/css" href="css/card-size.css">
     <link rel="stylesheet" type="text/css" href="css/icons.css">
     <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
     <!-- Fonts -->
     <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Lora:700' rel='stylesheet' type='text/css'>
 </head>
-<body>
+<body class="page-background">
 </body>
 </html>