added 2.6x5.4 cards for monsters

generator/css/card-size.css

@@ -79,6 +79,17 @@ page[size="25x35"] {
     height: 1.5in;
 }
 
+/* Monster card size */
+.card-size-36x54 {
+    width:3.6in;
+    min-width:3.6in;
+    height:5.4in;
+}
+.card-size-36x54 .card-back-icon {
+    width: 1.5in;
+    height: 1.5in;
+}
+
 /* Landscape big card */
 .card-size-75x50 {
     width:7.5in;
@@ -98,4 +109,4 @@ page[size="25x35"] {
 .page[size="Letter"] .card-size-full3x3 {
     width:71mm;
     height:92mm;
-}
+}

generator/css/cards.css

@@ -17,7 +17,7 @@
     padding:2mm;
     padding-top:1mm;
     border-radius: 2mm;
-    margin-top:0px;
+    margin-top:2mm;
     background-color: white;
     border-color: inherit;
     display: flex;
@@ -27,10 +27,9 @@
 }
 
 .card-back {
-/*     background-color: white; */
+     background-color: white;
     border-radius: 4mm;
     border-color: inherit;
-    margin: 3mm;
     flex: 1;
     display: flex;
 }
@@ -77,21 +76,23 @@
 }
 
 .card-title-inlineicon {
-    width: 7mm;
-    height: 7mm;
+    width: 8mm;
+    height: 8mm;
     background-repeat: no-repeat;
     background-size: contain;
     background-color: inherit;
     border-color: inherit;
+    display: inline-block;
+    font-size: 12pt;
+    text-align: center;
 }
 .card-title-inlineicon-container {
     position: absolute;
-    right: -1mm;
-    top: -1mm;
-    border: 1mm solid;
-    border-radius: 1mm;
-    background-color: inherit;
-    border-color: inherit;
+    right: 1mm;
+    color: white;
+    font-weight: bold;
+    font-size: 12pt;
+    line-height: 8mm;
 }
 
 .card-title {
@@ -113,7 +114,7 @@
 }
 .card-title-14 {
     font-size: 14pt;
-    line-height: 6.5mm;
+    line-height: 8mm;
 }
 .card-title-13 {
     font-size: 13pt;
@@ -139,6 +140,11 @@
     font-size: 10pt;
     font-style: italic;
 }
+.card-challenge {
+    position: absolute;
+    right: 2mm;
+    display: inline;
+}
 .card-picture {
     height: 80px;
     line-height: 18px;
@@ -259,4 +265,11 @@
     margin-bottom: 0;
     margin-top: 0;
     font-size: inherit;
-}
+}
+
+img.inline-logo {
+    height: 6mm;
+    margin-left: 3px;
+    margin-right: 1px;
+}
+

generator/data/card_data_example.js

@@ -1,163 +1,125 @@
 var card_data_example = [
-    {
-        "count": 1,
-        "color": "maroon",
-        "title": "Burning Hands",
-        "icon": "white-book-1",
-        "icon_back": "robe",
-        "contents": [
-            "subtitle | 1st level evocation",
-            "rule",
-            "property | Casting time | 1 action",
-            "property | Range | Self (15ft cone)",
-            "property | Components | V,S",
-            "rule",
-            "fill | 2",
-            "text | Each creature in a 15-foot cone must make a Dexterity saving throw. A creature takes <b>3d6 fire damage</b> on a failed save, or half as much damage on a successful one.",
-            "text | The fire ignites any flammable objects in the area that aren't being worn or carried.",
-            "fill | 3",
-            "section | At higher levels",
-            "text | +1d6 damage for each slot above 1st"
-        ],
-        "tags": ["spell", "mage"]
-    },
-    {
-        "count": 1,
-        "color": "indigo",
-        "title": "Cunning Action",
-        "icon": "white-book",
-        "icon_back": "cloak-dagger",
-        "contents": [
-            "subtitle | Rogue feature",
-            "rule",
-            "fill | 2",
-            "text | You can take a <b>bonus action on each of your turns</b> in combat. This action can be used only to take the <b>Dash, Disengage, or Hide</b> action.",
-            "fill | 2",
-            "section | Fast hands (Thief 3rd)",
-            "text | You can also use the bonus action to make a Dexterity (<b>Sleight of Hand</b>) check, use your thieves' tools to <b>disarm a trap</b> or <b>open a lock</b>, or take the <b>Use an Object</b> action."
-        ],
-        "tags": ["feature", "rogue"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Full Plate",
-        "icon": "breastplate",
-        "contents": [
-            "subtitle | Heavy armor (1500gp)",
-            "rule",
-            "property | AC | 18",
-            "property | Strength required | 15",
-            "property | Stealth | Disadvantage",
-            "rule",
-            "fill | 2",
-            "description | Heavy | Unless you have the required strength, your speed is reduced by 10 feet.",
-            "description | Stealth | You have disadvantage on Dexterity (Stealth) checks.",
-            "fill | 3"
-        ],
-        "tags": ["item", "armor"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Dagger",
-        "icon": "mixed-swords",
-        "contents": [
-            "subtitle | Simple melee weapon (2gp)",
-            "rule",
-            "property | Damage | 1d4 piercing",
-            "property | Modifier | Strength or Dexterity",
-            "property | Properties | Light, Finesse, Thrown (20/60)",
-            "rule",
-            "fill | 2",
-            "description | Finesse | Use your choice of Strength or Dexterity modifier for attack and damage.",
-            "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
-            "description | Thrown | You can throw the weapon to make a ranged attack with the given range.",
-            "fill | 3"
-        ],
-        "tags": ["item", "weapon"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Shortsword of Very Long Names",
-        "title_size": "10",
-        "icon": "crossed-swords",
-        "contents": [
-            "subtitle | Simple melee weapon (10gp)",
-            "rule",
-            "property | Damage | 1d6 piercing",
-            "property | Modifier | Strength or Dexterity",
-            "property | Properties | Light, Finesse",
-            "rule",
-            "fill | 2",
-            "description | Finesse | Use your choice of Strength or Dexterity modifier for attack and damage.",
-            "description | Light | When you attack while dual wielding light weapons, you may use a bonus action to attack with your off hand.",
-            "fill | 3"
-        ],
-        "tags": ["item", "weapon", "magic"]
-    },
-    {
-        "count": 1,
-        "color": "dimgray",
-        "title": "Wand of Magic Missiles",
-        "icon": "crystal-wand",
-        "contents": [
-            "subtitle | Wondrous item",
-            "rule",
-            "property | Maximum charges | 7",
-            "property | Recharge | 1d6+1 each day",
-            "property | Depletion | If you expend the last charge, roll a d20. On a 1, the item is destroyed.",
-            "rule",
-            "fill | 2",
-            "description | Spells | You can use your action to cast the following spells:",
-            "bullet | magic missile, 1st level (1 charge)",
-            "bullet | magic missile, 2nd level (2 charges)",
-            "bullet | magic missile, 3rd level (3 charges)",
-            "fill | 3",
-            "boxes | 7 | 2.5"
-        ],
-        "tags": ["item", "wondrous-item", "magic"]
-    },
-    {
-        "count": 2,
-        "color": "dimgray",
-        "title": "Potion of Healing",
-        "icon": "drink-me",
-        "contents": [
-            "subtitle | Potion (50gp)",
-            "rule",
-            "property | Use time | 1 action",
-            "property | Hit points restored | 2d4+2",
-            "rule",
-            "fill | 2",
-            "text | When you drink this potion, you regain 2d4+2 hitpoints.",
-            "text | Drinking or administering a potion takes 1 action.",
-            "fill | 3"
-        ],
-        "tags": ["item", "consumable"]
-    },
-    {
-        "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"
-        ],
-        "tags": ["creature", "humanoid"]
-    }
-]
+  {
+    "count": 1,
+    "title": "Bugbear",
+    "contents": [
+      "subtitle | M, humanoid (goblinoid), chaotic evil | 1",
+      "fill",
+      "rule",
+      "fill",
+      "dndstats | 15 | 14 | 13 | 8 | 11 | 9",
+      "fill",
+      "rule",
+      "fill",
+      "property | Skills | Stealth: +6, Survival: +2 ",
+      "property | Senses | Darkvision 60 ft., passive perception 10",
+      "property | Languages | Common, goblin",
+      "fill",
+      "section | Abilities",
+      "description | Brute| A melee weapon deals one extra die of its damage when the bugbear hits with it (included in the attack).",
+      "description | Surprise Attack | If the bugbear surprises a creature and hitsection | Actionss it with an attack during the first round of combat, the target takes an extra 7 (2d6) damage from the attack.",
+      "fill",
+      "section | Actions",
+      "description | Morningstar | Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 11 (2d8 + 2) piercing damage.",
+      "description | Javelin | Melee or Ranged Weapon Attack: +4 to hit, reach 5 ft. or range 30/120 ft., one target. Hit: 9 (2d6 + 2) piercing damage in melee or 5 (1d6 + 2) piercing damage at range.",
+      "",
+      ""
+    ],
+    "tags": [],
+    "color": "",
+    "title_size": "14",
+    "background_image": "https://media-waterdeep.cursecdn.com/avatars/thumbnails/0/221/1000/1000/636252765234633232.jpeg",
+    "icon": "",
+    "stats": "30|27|16"
+  },
+  {
+    "count": "1",
+    "title": "Goblin",
+    "contents": [
+      "subtitle | S, humanoid (goblinoid), neutral evil | 1/4",
+      "fill",
+      "rule",
+      "fill",
+      "dndstats | 8 | 14 | 10 | 10 | 8 | 8",
+      "fill",
+      "rule",
+      "fill",
+      "property | Skills | Stealth: +6",
+      "property | Senses |  Darkvision 60 ft., passive perception 9",
+      "property | Languages | Common, goblin",
+      "fill",
+      "section | Abilities",
+      "description | Nimble Escape | The goblin can take the Disengage or Hide action as a bonus action on each of its turns.",
+      "fill",
+      "section | Actions",
+      "description | Scimitar | Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 5 (1d6 + 2) slashing damage.",
+      "description | Shortbow | Ranged Weapon Attack: +4 to hit, range 80/320 ft., one target. Hit: 5 (1d6 + 2) piercing damage."
+    ],
+    "tags": [],
+    "color": "SeaGreen",
+    "title_size": "14",
+    "background_image": "https://media-waterdeep.cursecdn.com/avatars/thumbnails/0/351/1000/1000/636252777818652432.jpeg",
+    "stats": "30|7|15"
+  },
+  {
+    "count": "1",
+    "title": "Owlbear",
+    "contents": [
+      "subtitle | L, monstrosity , unaligned | 3",
+      "fill",
+      "rule",
+      "fill",
+      "dndstats | 20 | 12 | 17 | 3 | 12 | 7",
+      "fill",
+      "rule",
+      "fill",
+      "property | Skills | Perception +3",
+      "property | Senses | Darkvision 60 ft., passive perception 13",
+      "property | Languages | None",
+      "fill",
+      "section | Abilities",
+      "description | Keen Sight and Smell | The owlbear has advantage on Wisdom (Perception) checks that rely on sight or smell.",
+      "fill",
+      "section | Actions",
+      "",
+      "",
+      "description | Multiattack | The owlbear makes two attacks: one with its beak and one with its claws.",
+      "description | Beak | Melee Weapon Attack: +7 to hit, reach 5 ft., one creature. Hit: 10 (1d10 + 5) piercing damage.",
+      "description | Claws | Melee Weapon Attack: +7 to hit, reach 5 ft., one target. Hit: 14 (2d8 + 5) slashing damage.",
+      ""
+    ],
+    "tags": [],
+    "color": "Brown",
+    "title_size": "14",
+    "background_image": "https://media-waterdeep.cursecdn.com/avatars/thumbnails/0/315/1000/1000/636252772225295187.jpeg",
+    "stats": "40|59|13"
+  },
+  {
+    "count": "1",
+    "title": "Hobgoblin",
+    "contents": [
+      "subtitle | M, humanoid (goblinoid), lawful evil | 1/2",
+      "fill",
+      "rule",
+      "fill",
+      "dndstats | 13 | 12 | 12 | 10 | 10 | 9",
+      "fill",
+      "rule",
+      "fill",
+      "property | Senses | Darkvision 60 ft., passive perception 10",
+      "property | Languages | Common, goblin",
+      "fill",
+      "section | Abilities",
+      "description | Martial Advantage | Once per turn, the hobgoblin can deal an extra 7 (2d6) damage to a creature it hits with a weapon attack if that creature is within 5 ft. of an ally of the hobgoblin that isn't incapacitated.",
+      "fill",
+      "section | Actions",
+      "description | Longsword | Melee Weapon Attack: +3 to hit, reach 5 ft., one target. Hit: 5 (1d8 + 1) slashing damage, or 6 (1d10 + 1) slashing damage if used with two hands.",
+      "description | Longbow | Ranged Weapon Attack: +3 to hit, range 150/600 ft., one target. Hit: 5 (1d8 + 1) piercing damage."
+    ],
+    "tags": [],
+    "color": "Teal",
+    "title_size": "14",
+    "background_image": "https://media-waterdeep.cursecdn.com/avatars/thumbnails/0/389/1000/1000/636252781431932597.jpeg",
+    "stats": "30|11|18"
+  }
+]

generator/generate.html

@@ -101,8 +101,9 @@
                         <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="25x35">2.5&quot; x 3.5&quot; (Poker)</option>
                                 <option value="35x50">3.5&quot; x 5.0&quot;</option>
+                                <option value="36x54" selected>3.6&quot; x 5.4&quot; (Monster)</option>
                                 <option value="75x50">7.5&quot; x 5.0&quot;</option>
                             </select>
                         </div>
@@ -282,6 +283,12 @@
                             <input type="text" id="card-tags" class="form-control" placeholder="Tags">
                         </div>
                     </div>
+                    <div class="form-group">
+                        <label for="card-stats" class="col-sm-2 control-label">Stats</label>
+                        <div class="col-sm-10">
+                            <input type="text" id="card-stats" class="form-control" placeholder="SPD|HP|AC" data-property="stats">
+                        </div>
+                    </div>
                     <div class="form-group">
                         <label for="card-icon" class="col-sm-2 control-label">Icon</label>
                         <div class="col-sm-10">
@@ -376,7 +383,7 @@
                         <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: 
+                            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.
@@ -464,4 +471,4 @@ if (card_has_tag(card, "creature")) {
         </div>
     </div>
 </body>
-</html>
+</html>

generator/js/cards.js

@@ -7,12 +7,12 @@ function card_default_options() {
         background_color: "white",
         default_color: "black",
         default_icon: "ace",
-        default_title_size: "13",
+        default_title_size: "16",
         page_size: "A4",
-        page_rows: 3,
-        page_columns: 3,
+        page_rows: 2,
+        page_columns: 2,
         card_arrangement: "doublesided",
-        card_size: "25x35",
+        card_size: "36x54",
         card_count: null,
         icon_inline: true,
         rounded_corners: true
@@ -32,6 +32,7 @@ function card_init(card) {
     card.title = card.title || "";
     card.contents = card.contents || [];
     card.tags = card.tags || [];
+    card.stats = card.stats || "";
 }
 
 function card_has_tag(card, tag) {
@@ -96,17 +97,56 @@ function card_element_icon(card_data, options) {
         classname = "inlineicon";
     }
 
+    var stats = card_data.stats?card_data_split_params(card_data.stats):[];
     var result = "";
     result += '<div class="card-title-' + classname + '-container">';
-    result += '    <div class="card-title-' + classname + ' icon-' + icon + '">';
-    result += '    </div>';
+    result += '<img class="inline-logo" src="img/footprint.png">' + (stats[0]||"?");
+    result += '<img class="inline-logo" src="img/hearts.png">' + (stats[1]||"?");
+    result += '<img class="inline-logo" src="img/shield.png">' + (stats[2]||"?");
     result += '</div>';
     return result;
 }
 
+var cr2xp = {
+	"1/8": "25",
+	"1/4": "50",
+	"1/2": "100",
+	"1": "200",
+	"2": "450",
+	"3": "700",
+	"4": "1,100",
+	"5": "1,800",
+	"6": "2,300",
+	"7": "2,900",
+	"8": "3,900",
+	"9": "5,000",
+	"10": "5,900",
+	"11": "7,200",
+	"12": "8,400",
+	"13": "10,000",
+	"14": "11,500",
+	"15": "13,000",
+	"16": "15,000",
+	"17": "18,000",
+	"18": "20,000",
+	"19": "22,000",
+	"20": "25,000",
+	"21": "33,000",
+	"22": "41,000",
+	"23": "50,000",
+	"24": "62,000",
+	"25": "75,000",
+	"26": "90,000",
+	"27": "105,000",
+	"28": "120,000",
+	"29": "135,000",
+	"30": "155,000"
+}
+
 function card_element_subtitle(params, card_data, options) {
     var subtitle = params[0] || "";
-    return '<div class="card-element card-subtitle">' + subtitle + '</div>';
+    var cr = params[1] || "";
+    return '<div class="card-element card-subtitle">' + subtitle + (cr!=""?'<div class="card-element card-challenge">CR '+cr+' ('+cr2xp[cr]+' XP)</div>':'') + '</div>';
 }
 
 function card_element_inline_icon(params, card_data, options) {
@@ -347,7 +387,7 @@ function card_generate_back(data, options) {
 	{
 		background_style = 'style = "background-image: url(&quot;' + url + '&quot;); background-size: contain; background-position: center; background-repeat: no-repeat;"';
 	}
-	else 
+	else
 	{
 		background_style = card_generate_color_gradient_style(color, options);
     }

generator/js/ui.js

@@ -183,6 +183,7 @@ function ui_update_selected_card() {
 		$("#card-background").val(card.background_image);
         $("#card-contents").val(card.contents.join("\n"));
         $("#card-tags").val(card.tags.join(", "));
+        $("#card-stats").val(card.stats);
         $("#card-color").val(card.color).change();
     } else {
         $("#card-title").val("");
@@ -192,7 +193,7 @@ function ui_update_selected_card() {
         $("#card-icon-back").val("");
 		$("#card-background").val("");
         $("#card-contents").val("");
-        $("#card-tags").val("");
+        $("#card-stats").val("");
         $("#card-color").val("").change();
     }
 
@@ -227,7 +228,7 @@ function ui_setup_color_selector() {
             .attr("data-color", val)
             .text(name));
     });
-    
+
     // Callbacks for when the user picks a color
     $('#default_color_selector').colorselector({
         callback: function (value, color, title) {
@@ -522,6 +523,7 @@ $(document).ready(function () {
 	$("#card-color").change(ui_change_card_color);
     $("#card-contents").change(ui_change_card_contents);
     $("#card-tags").change(ui_change_card_tags);
+    $("#card-stats").change(ui_change_card_property);
 
     $("#card-contents").keyup(ui_change_card_contents_keyup);