Update generator

generator/css/cards.css

@@ -158,10 +158,13 @@
     font-weight: normal;
     letter-spacing: 1px;
     margin: 0;
-    margin-bottom: -0.2em;
     border-color: inherit;
 }
 
+.card-section + .card-element {
+    margin-top: 0.3em;
+}
+
 .card-p {
 
 }
@@ -200,6 +203,21 @@
     margin-right: 0.3em;
 }
 
+.card-stats {
+    width: 100%
+}
+
+.card-stats-header {
+    text-align: center;
+    padding: 0;
+    width: 16.6%;
+}
+
+.card-stats-cell {
+    text-align: center;
+    padding: 0;
+}
+
 .card-bullet-line {
     font-size: inherit;
     color: black;

generator/css/class-icons.css

@@ -0,0 +1,12 @@
+.icon-class-barbarian { background-image: url(../img/classes/barbarian.png);}
+.icon-class-bard { background-image: url(../img/classes/bard.png);}
+.icon-class-cleric { background-image: url(../img/classes/cleric.png);}
+.icon-class-druid { background-image: url(../img/classes/druid.png);}
+.icon-class-fighter { background-image: url(../img/classes/fighter.png);}
+.icon-class-monk { background-image: url(../img/classes/monk.png);}
+.icon-class-paladin { background-image: url(../img/classes/paladin.png);}
+.icon-class-ranger { background-image: url(../img/classes/ranger.png);}
+.icon-class-rogue { background-image: url(../img/classes/rogue.png);}
+.icon-class-sorcerer { background-image: url(../img/classes/sorcerer.png);}
+.icon-class-warlock { background-image: url(../img/classes/warlock.png);}
+.icon-class-wizard { background-image: url(../img/classes/wizard.png);}

generator/data/card_data_example.js

@@ -129,5 +129,27 @@ var card_data_example = [
             "text | Drinking or administering a potion takes 1 action.",
             "fill | 3"
         ]
+    },
+    {
+        "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"
+        ]
     }
 ];

generator/generate.html

@@ -26,6 +26,7 @@
     <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/class-icons.css" rel="stylesheet" />
     <link href="css/custom-icons.css" rel="stylesheet" />
     <!-- Fonts -->
     <link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
@@ -37,9 +38,8 @@
         <div class="row">
             <div class="alert alert-warning alert-dismissible" role="alert">
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-                <strong>Warning!</strong>
-                Some RPG systems are protected by copyright.
-                Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.
+                <strong>Note</strong>
+                Click on "Open help" to display some information about how to use this generator and what to do if you have a feature request or found a bug.
             </div>
         </div>
         <div class="row">
@@ -313,7 +313,7 @@
         </div>
     </div>
     <!-- Modal -->
-    <div class="modal" id="print-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal" id="print-modal" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
@@ -340,5 +340,42 @@
             </div>
         </div>
     </div>
+    <!-- Modal -->
+    <div class="modal" id="help-modal" tabindex="-1" role="dialog">
+        <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">RGP card generator</h4>
+                </div>
+                <div class="modal-body">
+                    <ul>
+                        <li>Some RPG systems are protected by copyright. Even if some spell/item data is freely available, it does not mean you may redistribute cards containing such data.</li>
+                        <li>If you find a bug or have a feature request, post them at the <a href="https://github.com/crobi/rpg-cards/issues">Github project site</a>.</li>
+                        <li>
+                            The user interface consists of three columns: 
+                            <img alt="help" src="img/help/help.png" style="max-width:95%; display:block; padding: 5px; margin: 10px 0 10px 0; border: 1px solid #ebebeb; box-shadow: 0 0 5px #ebebeb;"/>
+                            The left column contains the menu and global settings.
+                            In the middle menu, you can select and edit individual cards.
+                            The right column contains a preview of the selected card.
+                        </li>
+                        <li>
+                            To use the generator, either load the sample card deck ("Load sample"),
+                            load a card deck from a file ("Load from file"),
+                            or manually add some cards.
+                            When you're done, click on "Generate" to generate a document with all your cards, which can then be printed.
+                        </li>
+                        <li>
+                            To learn about what features are available to define a card, inspect the sample deck or
+                            read some basic documentation at the <a href="http://crobi.github.io/rpg-cards/">project site</a>.
+                        </li>
+                    </ul>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </html>

generator/js/cards.js

@@ -137,6 +137,43 @@ function card_element_text(params, card_data, options) {
     return result;
 }
 
+function card_element_dndstats(params, card_data, options) {
+    var stats = [10, 10, 10, 10, 10, 10];
+    var mods = [0,0,0,0,0,0];
+    for (var i = 0; i < 6; ++i) {
+        stats[i] = parseInt(params[i], 10) || 0;
+        var mod = Math.floor(((stats[i] - 10) / 2));
+        if (mod >= 0) {
+            mod = "+" + mod;
+        } else {
+            mod = "" + mod;
+        }
+        mods[i] = "&nbsp;(" + mod + ")";
+    }
+
+    var result = "";
+    result += '<table class="card-stats">';
+    result += '    <tbody><tr>';
+    result += '      <th class="card-stats-header">STR</th>';
+    result += '      <th class="card-stats-header">DEX</th>';
+    result += '      <th class="card-stats-header">CON</th>';
+    result += '      <th class="card-stats-header">INT</th>';
+    result += '      <th class="card-stats-header">WIS</th>';
+    result += '      <th class="card-stats-header">CHA</th>';
+    result += '    </tr>';
+    result += '    <tr>';
+    result += '      <td class="card-stats-cell">' + stats[0] + mods[0] + '</td>';
+    result += '      <td class="card-stats-cell">' + stats[1] + mods[1] + '</td>';
+    result += '      <td class="card-stats-cell">' + stats[2] + mods[2] + '</td>';
+    result += '      <td class="card-stats-cell">' + stats[3] + mods[3] + '</td>';
+    result += '      <td class="card-stats-cell">' + stats[4] + mods[4] + '</td>';
+    result += '      <td class="card-stats-cell">' + stats[5] + mods[5] + '</td>';
+    result += '    </tr>';
+    result += '  </tbody>';
+    result += '</table>';
+    return result;
+}
+
 function card_element_bullet(params, card_data, options) {
     var result = "";
     result += '<ul class="card-element card-bullet-line">';
@@ -171,6 +208,7 @@ var card_element_generators = {
     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,

generator/js/icons.js

@@ -1316,4 +1316,21 @@ var icon_names = [
     "zeus-sword",
     "zigzag-leaf",
     "zigzag-tune"
-];
+];
+
+var class_icon_names = [
+	"class-barbarian",
+	"class-bard",
+	"class-cleric",
+	"class-druid",
+	"class-fighter",
+	"class-monk",
+	"class-paladin",
+	"class-ranger",
+	"class-rogue",
+	"class-sorcerer",
+	"class-warlock",
+	"class-wizard"
+];
+
+icon_names = icon_names.concat(class_icon_names);

generator/js/ui.js

@@ -184,7 +184,7 @@ function ui_render_selected_card() {
 }
 
 function ui_open_help() {
-    window.open("http://crobi.github.io/rpg-cards/", "_blank");
+    $("#help-modal").modal('show');
 }
 
 function ui_select_icon() {