okos
/
rpg-cards


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="description" content="Rpg-cards : RPG spell/item/monster card generator">

    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">

    <title>Rpg-cards</title>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a id="forkme_banner" href="https://github.com/crobi/rpg-cards">View on GitHub</a>

          <h1 id="project_title">Rpg-cards</h1>
          <h2 id="project_tagline">RPG spell/item/monster card generator</h2>

            <section id="downloads">
              <a class="zip_download_link" href="https://github.com/crobi/rpg-cards/zipball/master">Download this project as a .zip file</a>
              <a class="tar_download_link" href="https://github.com/crobi/rpg-cards/tarball/master">Download this project as a tar.gz file</a>
            </section>
        </header>
    </div>

    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">
      <section id="main_content" class="inner">
        <h3>
            <a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>
            What it does
        </h3>

<p>
    This project generates cards for spells, items, or monsters for RPG games.
    The cards are packed on an A4 page such that you can print it double sided and
    get cards with a front and back.
    Here's an example of what you can create:
</p>

<div align="center">
    <img src="images/front.png">
    <img src="images/back.png">
</div>

<p>
    You can define the content of the cards yourself using simple JSON data. The above example was generated by this:
</p>

<pre><code>{
    "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 | Your speed is reduced by 10 feet.",
        "description | Stealth | You have disadvantage on Stealth.",
        "fill-3"
    ]
}
</code></pre>

          <h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Live demo
</h3>

<p>
    <a href="generator/generator.htm">Try it out yourself</a>
</p>

<h2>Documentation</h2>

This is not a complete documentation, but some information that should help you get started.

<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Card JSON data
</h3>

<p>
    <ul>
        <li>
            <strong>count</strong>
            The number of times this card is repeated. Useful for consumable items that you hand out multiple times.
        </li>
        <li>
            <strong>color</strong>
            Name of the card color. You can use all <a href="http://www.w3schools.com/cssref/css_colornames.asp">CSS color names</a>.
            Additional custom colors are defined in <i>css/custom-colors.css</i>.
        </li>
        <li>
            <strong>icon</strong>
            Name of the card icon. You can use all icons from <a href="http://game-icons.net/">game-icons.net</a>.
            For example, the file name of <a href="http://game-icons.net/lorc/originals/plain-dagger.html">this dagger</a>
            is "plain-dagger.png", so you would use "plain-dagger" as the icon name.
            Additional custom icon names are defined in <i>css/custom-icons.css</i>.
        </li>
        <li>
            <strong>back_icon</strong>
            Optional. Name of the big icon on the card back. If not specified, the icon from the "icon" property is used.
        </li>
        <li>
            <strong>title</strong>
            The title of the card.
        </li>
        <li>
            <strong>contents</strong>
            An array of strings, specifying all card elements, in top to bottom order (see below).
        </li>
    </ul>
</p>


<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Card elements
</h3>

<p>
    Each card element is a string of the following format:
    <pre>element | param1 | param2</pre><br />

    The following elements are available:

    <ul>
        <li>
            <strong>subtitle</strong>
            Slightly larger italic text.
            Param1: the subtitle text.
        </li>
        <li>
            <strong>rule</strong>
            A horizontal rule.
        </li>
        <li>
            <strong>property</strong>
            A property line. The property description is indented if it spans more than one line.
            Param1: the property name (in bold).
            Param2: the property description.
        </li>
        <li>
            <strong>description</strong>
            Same as <i>property</i>, but text is not indented.
        </li>
        <li>
            <strong>text</strong>
            A simple paragraph of text.
            Param1: the text.
        </li>
        <li>
            <strong>subsection</strong>
            A subsection header, with a horizontal rule below the subsection name.
            Param1: the subsection name
        </li>
        <li>
            <strong>fill-1</strong>
            A dynamically resized empty element that takes up 1 unit of unused space on the card.
            You can use this to vertically center text by adding one of these before and after the text you want to center.
        </li>
        <li>
            <strong>fill-2</strong>
            Same as <i>fill-1</i>, but takes up 2 units of unused space - these elements will therefore be larger than any <i>fill-1</i> element.
        </li>
    </ul>
</p>

<h2>FAQ</h2>
<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Is there a user interface for defining the cards?
</h3>

<p>
    No, at this point, you need to be able to understand and edit JSON data to define the cards.
</p>

<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Why is there no user interface for defining the cards?
</h3>

<p>
    I don't know how to create nice user interfaces, and a text-based input works just fine for me.
    You are welcome to contribute to this project though if you feel it should have a graphical UI.
</p>

<h3>
    <a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>
    Can I change the layout of the cards?
</h3>

<p>
    You'll need to edit the CSS and Javascript files to change the layout at this point.
    I might add some customization options later on.
</p>

      </section>
    </div>

    <!-- FOOTER  -->
    <div id="footer_wrap" class="outer">
      <footer class="inner">
        <p class="copyright">Rpg-cards maintained by <a href="https://github.com/crobi">crobi</a></p>
        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
      </footer>
    </div>

    
  </body>
</html>