// The Rolecard Builder will transform each line in the rolecard into an HTML tag, and you can style it as needed.
// A style is a JSON array of "rules", achieving just that.

// Each Rule performs an action, being either "transform" or "block".
//  * Transform rules specify a "search & replace" call, per JS String.replace on that line.
//    You need to specify a "search" and "replace" field, matching what to search for, and what to replace it with.
//  * Block rules transform a line, and every line indented under it, into an HTML block.
//    You need to specify a "regex" matching the line, and optionally a "replace" on what to replace it with.
//    You can specify "style", "onmouseover", "onmouseout" and "onclick" attributes of the generated HTML block.

[
  // ###
  // Builds a big visible box holding a rolecard. Rolecards should be no more than 700 pixels wide.
  {
    "action": "block",
    "regex": "^###(.*)",
    "replace": "$1",
    "style": "width: 670px; border: 1px solid black; background-color: #D3D3FC; padding: 15px; box-shadow: 2px 2px #bab1bf; background-image: url(http://www.pvv.org/~andreasd/mafia/rolecard_builder2/bokeh.png)",
    "onmouseover": "this.style.backgroundColor='#E3E3FE';",
    "onmouseout": "this.style.backgroundColor='#D3D3FC';"
  },

{
    "action": "transform",
    "search": "\[RIGHT:(\S*\.png|\S*\.jpg),(\S*),(\S*)\]",
    "replace": "<u style='display:inline-block; float: right; background-image: url($1); width:$2px; height:$3px'></u>" // this works!
  },

{
    "action": "transform",
    "search": "\[LEFT:(\S*\.png|\S*\.jpg),(\S*),(\S*)\]",
    "replace": "<u style='display:inline-block; float: left; background-image: url($1); width:$2px; height:$3px'></u>" // this works!
  },

  // [image_url,width,height]
  // Replaces an image URL in brackets with an image tag
  // Unfortunately, QT doesn't support IMG tags, so we have to improvise.
  //  --- An image at the start of the line turns into a "bullet section".
  {
    "action": "block",
    "regex": "^\[(\S*\.png|\S*\.jpg),(\S*),(\S*)\] (.*)",
    "replace": "<u style='position: absolute; display:inline-block; background-image: url($1); left: calc(-$2px - 10px); width:$2px; height:$3px'></u>$4", // this works!
    "style": "position: relative; margin-left: calc($2px + 10px); min-height: $2px); margin-bottom: 15px"
  },
  {  // --- Whereas other blocks just turn into inline images.
    "action": "transform",
    "search": "\[(\S*\.png|\S*\.jpg),(\S*),(\S*)\]",
    "replace": "<u style='display:inline-block; background-image: url($1); width:$2px; height:$3px'></u>" // this works!
  },

  // === Small Heading ===
  // Headline, sectioned by a margin. All text under it will be indented a bit.
  {
    "action": "block",
    "regex": "===(.*)===(.*)",
    "replace": "<b style='font-size: 130%; display:block; margin: 0 0 1em -20px'>$1</b>$2",
    "style": "padding: 0 0 15px 20px"
  },

  // === Large Heading ===
  // Headline, sectioned by a margin. All text under it will be indented a bit.
  {
    "action": "block",
    "regex": "==(.*)==(.*)",
    "replace": "<b style='font-size: 160%; display:block; margin: 0 0 1em -20px'>$1</b>$2",
    "style": "padding: 0 0 15px 20px"
  },

  // *Bold Text*
  // Text immediately inbetween stars turn bold.
  {
    "action": "transform",
    "search": "\*(\S[^*]*\S)\*",
    "replace": "<b>$1</b>"
  }
]