RPGen demo

by Gustavo

HTML

<script src="//unpkg.com/@guumaster/rpgen"></script>

<div id="app">
  <button @click="regenerate">+</button>
  <pre>{{text}}</pre>
</div>
<template id="demo">
  ;@tpl|main
  - [lines]
  - [roll]
  - [roll_spanish]

  ;lines
  line 1 is random
  line 2 is awesome
  line 3 is sad

  ;roll
  1d20 roll: [1d20]

  ;roll_spanish
  4d6 in spanish: "[4d6|num1]"
</template>

Babel + JSX

var app = new Vue({
    el: '#app',
    created () {
      this.generator =  rpgen.generator.fromHtmlElement('demo')
      this.regenerate()
    },
    data: {
      rawText: ''
    },
    computed: {
      text: {
        get () {
          return this.rawText
        },
        set (val) {
          this.rawText = val
        }
      }
    },
    methods: {
      regenerate () {
        this.text = this.generator.generate()
      }
    }
  })