JSFiddle - React, Tailwind, and code Playground

by Gustavo

HTML

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

<div id="app">
  <button @click="roll">roll</button>
  <div>Roll: {{total}}</div>
  <div>Log:</div>
  <pre>{{log}}</pre>
</div>

JavaScript

var app = new Vue({
    el: '#app',
    created () {
      this.roller =  rpgen.roller.create('best 3 of 4d6+1')
      this.roll()
    },
    data: {
      rawTotal: '',
      rawLog: ''
    },
    computed: {
      total: {
        get () {
          return this.rawText
        },
        set (val) {
          this.rawTotal = val
        }
      },
      log: {
        get () {
          return this.rawLog
        },
        set (val) {
          this.rawLog = val
        }
      
      }
    },
    methods: {
      roll () {
        const roll = this.roller(true)
        this.total = roll.total
        this.log = roll.log
      }
    }
  })