Initial commit

README.md

@@ -2,3 +2,5 @@ rpg-cards
 =========
 
 RPG spell/item/monster card generator
+
+

generator/css/cards.css

@@ -0,0 +1,154 @@
+.bg-color {
+    background-color: #600a15;
+    color: white;
+}
+
+.card {
+    width:66mm;
+    min-width:66mm;
+    height:95mm;
+    border: 2mm solid;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+    font-size: 8pt;
+}
+
+.content-container {
+    padding:2mm;
+    padding-top:1mm;
+    border-radius: 2mm;
+    margin-top:0px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.card-back {
+    background-color: white;
+    border-radius: 4mm;
+    border-color: inherit;
+    margin: 2mm;
+    flex: 1;
+    display: flex;
+}
+
+.card-back-inner {
+    margin: 2mm;
+    border: 1mm solid;
+    border-color: inherit;
+    border-radius: 4mm;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.back-icon {
+    width: 30mm;
+    height: 30mm;
+    border: 4mm solid;
+    border-color: inherit;
+    border-radius: 4mm;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.title-icon {
+    width: 12mm;
+    height: 12mm;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-color: inherit;
+    border-color: inherit;
+}
+.title-icon-container {
+    position: absolute;
+    right: -1mm;
+    top: -1mm;
+    border: 1mm solid;
+    border-radius: 1mm;
+    background-color: inherit;
+    border-color: inherit;
+}
+
+.title {
+    height: 28px;
+    line-height: 23px;
+    padding-left: 2mm;
+    font-family: Lora, 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
+    font-variant: small-caps;
+    font-weight: bold;
+    font-size: 13pt;
+    background-color: inherit;
+    color: white;
+}
+.subtitle {
+    height: 18px;
+    line-height: 18px;
+    margin-bottom: 1mm;
+    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+    font-size: 10pt;
+    font-style: italic;
+}
+
+.property-line {
+    text-indent: -1em;
+    margin-left: 1em;
+}
+
+.property-name {
+    display: inline;
+}
+.property-text {
+    display: inline;
+}
+
+h3 {
+    border-bottom: 1px solid;
+    font-size: 10pt;
+    font-variant: small-caps;
+    font-weight: normal;
+    letter-spacing: 1px;
+    margin: 0;
+    margin-bottom: 0.3em;
+}
+
+p {
+    margin-top: 0.0em;
+    margin-bottom: 0.5em;
+}
+
+
+.fill-1 {flex:1;}
+.fill-2 {flex:2;}
+.fill-3 {flex:3;}
+.fill-4 {flex:4;}
+.fill-5 {flex:5;}
+.fill-6 {flex:6;}
+
+.description-line {
+    margin-bottom: 0.5em;
+}
+.description-name {
+    display: inline;
+}
+.description-text {
+    display: inline;
+}
+
+.ruler {
+    /*content: url(../img/ruler.svg);*/
+    width: 60mm;
+    height: 1.5mm;
+    margin-top: 0.5em;
+    margin-bottom: 0.2em;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-image: url(../img/ruler2.svg);
+}

generator/css/custom-colors.css

@@ -0,0 +1,113 @@
+/* arcane */
+.color-arcane {
+    background-color: #bb3d2f;
+    border-color: #bb3d2f;
+}
+.color-arcane .ruler {
+    background-color: #bb3d2f;
+}
+.color-arcane h3{
+    border-color: #bb3d2f;
+    color: #bb3d2f;
+}
+.color-arcane .card-back {
+    background: radial-gradient(ellipse at center, white 20%, #bb3d2f 120%);
+}
+.color-arcane .back-icon {
+    background-color: #bb3d2f;
+}
+
+/* cleric */
+.color-cleric {
+    background-color: #ae7b00;
+    border-color: #ae7b00;
+}
+.color-cleric .ruler {
+    background-color: #ae7b00;
+}
+.color-cleric h3{
+    border-color: #ae7b00;
+    color: #ae7b00;
+}
+.color-cleric .card-back {
+    background: radial-gradient(ellipse at center, white 20%, #ae7b00 120%);
+}
+.color-cleric .back-icon {
+    background-color: #ae7b00;
+}
+
+/* rogue */
+.color-rogue {
+    background-color: #802161;
+    border-color: #802161;
+}
+.color-rogue .ruler {
+    background-color: #802161;
+}
+.color-rogue h3{
+    border-color: #802161;
+    color: #802161;
+}
+.color-rogue .card-back {
+    background: radial-gradient(ellipse at center, white 20%, #802161 120%);
+}
+.color-rogue .back-icon {
+    background-color: #802161;
+}
+
+/* weapon */
+.color-weapon {
+    background-color: dimgray;
+    border-color: dimgray;
+}
+.color-weapon .ruler {
+    background-color: dimgray;
+}
+.color-weapon h3{
+    border-color: dimgray;
+    color: dimgray;
+}
+.color-weapon .card-back {
+    background: radial-gradient(ellipse at center, white 20%, dimgray 120%);
+}
+.color-weapon .back-icon {
+    background-color: dimgray;
+}
+
+/* armor */
+.color-armor {
+    background-color: dimgray;
+    border-color: dimgray;
+}
+.color-armor .ruler {
+    background-color: dimgray;
+}
+.color-armor h3{
+    border-color: dimgray;
+    color: dimgray;
+}
+.color-armor .card-back {
+    background: radial-gradient(ellipse at center, white 20%, dimgray 120%);
+}
+.color-armor .back-icon {
+    background-color: dimgray;
+}
+
+/* gear */
+.color-gear {
+    background-color: dimgray;
+    border-color: dimgray;
+}
+.color-gear .ruler {
+    background-color: dimgray;
+}
+.color-gear h3{
+    border-color: dimgray;
+    color: dimgray;
+}
+.color-gear .card-back {
+    background: radial-gradient(ellipse at center, white 20%, dimgray 120%);
+}
+.color-gear .back-icon {
+    background-color: dimgray;
+}

generator/css/custom-icons.css

@@ -0,0 +1,34 @@
+.icon-custom-armor-light { background-image: url(../img/leather-vest.png);}
+.icon-custom-armor-medium { background-image: url(../img/lamellar.png);}
+.icon-custom-armor-heavy { background-image: url(../img/breastplate.png);}
+.icon-custom-shield { background-image: url(../img/round-shield.png);}
+
+.icon-custom-potion { background-image: url(../img/drink-me.png);}
+.icon-custom-light { background-image: url(../img/candle-flame.png);}
+.icon-custom-flask { background-image: url(../img/fizzing-flask.png);}
+.icon-custom-vial { background-image: url(../img/chemical-drop.png);}
+.icon-custom-poison { background-image: url(../img/poison-bottle.png);}
+.icon-custom-trap { background-image: url(../img/wolf-trap.png);}
+.icon-custom-item { background-image: url(../img/knapsack.png);}
+.icon-custom-wand { background-image: url(../img/crystal-wand.png);}
+.icon-custom-swords { background-image: url(../img/crossed-swords.png);}
+.icon-custom-arrows { background-image: url(../img/target-arrows.png);}
+.icon-custom-swordarrow { background-image: url(../img/mixed-swords.png);}
+
+.icon-custom-spell { background-image: url(../img/white-book.png);}
+.icon-custom-spell-0 { background-image: url(../img/white-book-0.png);}
+.icon-custom-spell-1 { background-image: url(../img/white-book-1.png);}
+.icon-custom-spell-2 { background-image: url(../img/white-book-2.png);}
+.icon-custom-spell-3 { background-image: url(../img/white-book-3.png);}
+.icon-custom-spell-4 { background-image: url(../img/white-book-4.png);}
+.icon-custom-spell-5 { background-image: url(../img/white-book-5.png);}
+.icon-custom-spell-6 { background-image: url(../img/white-book-6.png);}
+.icon-custom-spell-7 { background-image: url(../img/white-book-7.png);}
+.icon-custom-spell-8 { background-image: url(../img/white-book-8.png);}
+.icon-custom-spell-9 { background-image: url(../img/white-book-9.png);}
+.icon-custom-spell-holy { background-image: url(../img/white-book-cd.png);}
+.icon-custom-spell-runes { background-image: url(../img/book-cover.png);}
+
+.icon-custom-class-arcane { background-image: url(../img/robe.png);}
+.icon-custom-class-cleric { background-image: url(../img/holy-symbol.png);}
+.icon-custom-class-rogue { background-image: url(../img/cloak-dagger.png);}

generator/css/page.css

@@ -0,0 +1,39 @@
+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;
+}
+
+@media print {
+  body, page[size="A4"] {
+    margin: 0;
+    box-shadow: 0;
+    background-color: white;
+  }
+}
+
+.input-button {
+    display:block;
+    height: 40px;
+    font-size: 24px;
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.input-data {
+    width: 100%;
+}

generator/data/card_data.js

@@ -0,0 +1 @@
+var card_data = [];

generator/data/card_data_example.js

@@ -0,0 +1,131 @@
+var card_data = [
+    {
+        "count": 1,
+        "color": "maroon",
+        "title": "Burning Hands",
+        "icon": "custom-spell-1",
+        "icon_back": "custom-class-arcane",
+        "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"
+        ]
+    },
+    {
+        "count": 1,
+        "color": "indigo",
+        "title": "Cunning Action",
+        "icon": "custom-spell",
+        "icon_back": "custom-class-rogue",
+        "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-3",
+            "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.",
+        ]
+    },
+    {
+        "count": 1,
+        "color": "dimgray",
+        "title": "Full Plate",
+        "icon": "custom-armor-heavy",
+        "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"
+        ]
+    },
+    {
+        "count": 1,
+        "color": "dimgray",
+        "title": "Dagger",
+        "icon": "custom-swordarrow",
+        "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"
+        ]
+    },
+    {
+        "count": 1,
+        "color": "dimgray",
+        "title": "Shortsword",
+        "icon": "custom-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"
+        ]
+    },
+    {
+        "count": 1,
+        "color": "dimgray",
+        "title": "Wand of Magic Missiles",
+        "icon": "custom-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:",
+            "text | - magic missile, 1st level (1 charge)",
+            "text | - magic missile, 2nd level (2 charges)",
+            "text | - magic missile, 3rd level (3 charges)",
+            "fill-3"
+        ]
+    },
+    {
+        "count": 2,
+        "color": "dimgray",
+        "title": "Potion of Healing",
+        "icon": "custom-potion",
+        "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"
+        ]
+    }
+];

generator/generate.html

@@ -0,0 +1,54 @@
+<html>
+<head>
+    <title>D&D cards</title>
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="css/page.css">
+    <link rel="stylesheet" type="text/css" href="css/cards.css">
+    <link rel="stylesheet" type="text/css" href="css/icons.css">
+    <link rel="stylesheet" type="text/css" href="css/custom-icons.css">
+    <link rel="stylesheet" type="text/css" href="css/colors.css">
+    <link rel="stylesheet" type="text/css" href="css/custom-colors.css">
+    <!-- Data -->
+    <script type="text/javascript" src="data/card_data.js"></script>
+    <script type="text/javascript" src="data/card_data_example.js"></script>
+    <!-- Javascript -->
+    <script type="text/javascript" defer src="js/cards.js"></script>
+    <script type="text/javascript" defer src="js/control.js"></script>
+    <!-- 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>
+    <div class="container">
+        <h1>Disclaimer</h1>
+        <p>
+            All material related to <a href="http://dnd.wizards.com/">Dungeons and Dragons</a> 5th edition is copyright by <a href="http://company.wizards.com/">Wizards of the Coast</a>.
+            This site uses information freely available from their basic rules that can be found <a href="http://dnd.wizards.com/articles/features/basicrules?x=dnd/basicrules">here</a>.
+            This probably does not mean you can freely distribute any material derived from there -
+            if you are Wizards of the Coast and have concerns issues with this project, contact me <a href="mailto:robin@dbservice.com">here</a>.
+        </p>
+        <p>
+            All icons are from <a href="game-icons.net">game-icons.net</a>,
+            an awesome project providing free icons for games.
+            Parts of the CSS are copied from <a href="http://valloric.github.io/statblock5e/">statblock5e</a>,
+            a project that tries to re-create pixel-precise monster stat blocks from the monster manual.
+        </p>
+        <p>
+            Click on the button below to transform the huge wall of text at the bottom into beautiful(?) spell and item cards.
+            The cards are generated via Javascript in HTML, the card layout is such that 3x3 cards fill out an A4 page.
+            In theory, you should be able to print the whole page (double-sided printing, flip on long edge) and get double-sided cards.
+            However, I am no CSS expert, so the layout might be a bit off.
+        </p>
+        <p>
+            It should be reasonably simple to understand the JSON format I have used from the below examples, so that you can design your own cards.
+            Just don't forget to save your JSON file externally.
+            You can download the whole project for offline use <a href="cards.zip">here</a>
+            (note that it uses <a href="https://www.google.com/fonts">google fonts</a>, so unless you are online, the fonts will be different).
+        </p>
+        <button type="button" class="input-button">Generate</button>
+        <textarea rows="40" cols="120" class="input-data">
+            
+        </textarea>
+    </div>
+</body>
+</html>