carlosmoran092 / vue-slot-machine

A Vue component of a slot machine, made with an HTML5 canvas, RWD.

Vue-SlotMachine

A Vue component of a slot machine, made with an HTML5 canvas, RWD.

Table of Contents

• Installation
• Usage
• Support
• Contributing

Installation

In NPM

1. Use npm or yarn download @puckwang/vue-slot-machine.

npm install @puckwang/vue-slot-machine

// or

yarn add @puckwang/vue-slot-machine

2. Registered component. Then register the plugin to globally install all components:

import SlotMachine from '@puckwang/vue-slot-machine';

Vue.use(SlotMachine);

Or, import components individually for local registration:

import {SlotMachine} from '@puckwang/vue-slot-machine';

export default {
    components: { "slot-machine": SlotMachine }
}

In Browser

<div id="app">
    <div>
        <slot-machine></slot-machine>
    </div>
</div>

<script src="https://unpkg.com/@puckwang/vue-slot-machine@latest"></script>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  components: { "slot-machine": VueSlotMachine.SlotMachine }
})
</script>

Usage

Demo

<template>
    <slot-machine
        :list="list"
        :trigger="trigger"
        :height="300"
        :width="300"
        @onComplete="onComplete">
    </slot-machine>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {text: '1', color: '#668CFF'},
                {text: '2', color: '#FF6666'},
                {text: '3', color: '#B366FF'},
            ],
            trigger: null,
        };
    },
    methods: {
        start() { // Trigger to let the machine start
            this.trigger = new Date();
        },
        onComplete(data) { // Run complete callback
            console.log(data);
        }
    }
}
</script>

Configuration

Component props

list

• Type: Object[]
• Description: A list of gift object.
• Default: 0~9

trigger

• Type: Date
• Description: Use to trigger to let the machine start.
• Default: null

currentIndex

• Type: Integer
• Description: Specify the index the result.
• Default: -1

width

• Type: Date
• Description: Width of canvas.
• Default: 300

height

• Type: Date
• Description: Height of canvas.
• Default: 300

responsive

• Type: Boolean
• Description: Responsive Canvas, width and height will be filled parent element, it's according to the set ratio (height / width).
• Default: false

Gift Object

text

• Type: String
• Description: Text of the gift.
• Required

color

• Type: ColorHex
• Description: Color of the gift.
• Default: #000 (Black)

Support

Please open an issue for support.

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.