Title font size, modal print info dialog

generator/css/cards.css

@@ -99,23 +99,34 @@
     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

@@ -2,6 +2,12 @@
   background: rgb(204,204,204); 
 }
 
+body {
+    display: flex;
+    justify-content:center;
+    align-content:center;
+}
+
 .page-preview {
     background: white;
     margin: 0 auto;
@@ -21,4 +27,4 @@
     /* Set the background to gray to visualize the page size in the print preview */
     background-color: gray;
   }
-}
+}

generator/data/card_data_example.js

@@ -77,7 +77,7 @@ var card_data_example = [
         "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

@@ -153,10 +153,13 @@
                         <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>
@@ -211,10 +214,25 @@
                             <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">
@@ -224,7 +242,7 @@
                                 <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>
@@ -235,7 +253,7 @@
                                 <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>
@@ -244,7 +262,7 @@
                         <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>
@@ -263,5 +281,31 @@
             </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

@@ -5,7 +5,7 @@ function card_default_options() {
     return {
         default_color: "black",
         default_icon: "ace",
-        default_title_size: "normal",
+        default_title_size: "13",
         page_size: "A4",
         page_rows: 3,
         page_columns: 3,

generator/js/ui.js

@@ -33,6 +33,7 @@ function merge(left, right, compare) {
     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);
@@ -41,6 +42,11 @@ function ui_generate() {
     // 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);
@@ -148,6 +154,7 @@ 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);
@@ -368,6 +375,7 @@ $(document).ready(function () {
     $("#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);