A vue.js dice roller component with images. Like story cubes
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist
src
.babelrc
.eslintignore
.eslintrc.js
.gitignore
README.md
example.gif
example.html
index.js
package-lock.json
package.json

README.md

vue-dice-roller

npm npm vue2

A Dice Roller Vue.js component with images. Like story cubes.

example.gif

You can check an example here http://vitomd.com/vue-dice-roller/example.html

Note to self, to generate icon list

  printf "https://raw.githubusercontent.com/vitogit/vue-dice-roller/master/src/icons/%s?sanitize=true\',\n\'" * > _list.js

License

Idea based on https://github.com/treetrnk/storygen/

The icons used are from http://game-icons.net/ the author is https://github.com/Delapouite

It has a CC BY 3.0 license so if you use the component or the icons you must credit him for his work.

Installation

npm install --save vue-dice-roller

Default import

Install all the components:

import Vue from 'vue'
import {DiceRoller} from 'vue-dice-roller'

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Install all the components:

import 'vue-dice-roller/dist/vue-dice-roller.css'
import {DiceRoller} from 'vue-dice-roller/dist/vue-dice-roller.common'

Vue.use(DiceRoller)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-dice-roller/dist/vue-dice-roller.css"/>

<script src="vue.js"></script>
<script src="vue-dice-roller/dist/vue-dice-roller.browser.js"></script>
    Vue.use(VueDiceRoller)

Example Vue App

Full Example. You can check it online here: http://vitomd.com/vue-dice-roller/example.html

  <button @click="roll">ROLL</button>
  <select v-model="diceCount">
    <option v-for="index in 10" :value="index">{{index}}</option>
  </select>
  <dice-roller ref="diceroller" :count="diceCount"/>
  
<script>
  import {DiceRoller} from 'vue-dice-roller'
  export default {
    name: 'DiceExample',
    components: {DiceRoller},
    data () {
      return {
        diceCount: 6
      }
    },
    methods: {
      roll() {
        vm.$refs.diceroller.roll();
      }
    }
  }
</script>  

Example HTML

Full Example. You can check it online here: http://vitomd.com/vue-dice-roller/example.html

      <div id="app">
        <button @click="roll">ROLL</button>
        <select v-model="diceCount">
          <option v-for="index in 10" :value="index">{{index}}</option>
        </select>
        <dice-roller ref="diceroller" :count="diceCount"/>
      </div>

     <script>
        Vue.use(VueDiceRoller)
        new Vue({
          el: '#app',
          data () {
            return {
              diceCount: 6
            }
          },
          methods: {
            roll() {
              console.log("this.$refs",this.$refs)
              this.$refs.diceroller.roll();
            }
          }
        })
     </script>

Will roll 5 dices with random color backgrounds

    <dice-roller ref="diceroller" :count="5"/>

Will roll 3 dices with white backgrounds

    <dice-roller ref="diceroller" :count="3" :whiteBackground="true"/>