Vue-dice-d6 NPM

vue-dice-d6

A d6 vue dice component with animation setted for easily usage

the component used scss for developing, remember to install the node-sass.

Install

npm install vue-dice-d6
// or
yarn add vue-dice-d6

import component

import DiceD6 from 'vue-dice-d6';

export default {
  components: {
    DiceD6
  }
};

Usage

Give the dice width, height

<template>
  <div id="app">
    <button @click="toggleResult">Toggle Dice</button>
    <dice-d6 size="s" :result="result" :start="start" />
  </div>
</template>

<script>
import DiceD6 from 'vue-dice-d6';

export default {
  components: {
    DiceD6,
  },
  data () {
    return {
      result: 1,
      start: false,
    };
  },
  methods: {
    toggleResult() {
      // if dice is animating
      if (this.start) {
        // use setTimeout for stopped transition
        setTimeout(() => {
          this.result = Math.ceil(Math.random() * 6);
        });
      }
      this.start = !this.start;
    },
  },
};
</script>

<style>
.dice-wrapper {
  width: 100px;
  height: 100px;
}
</style>