@ekingdom/roulette

Roulette component

This package is supplied with dist and lib folders included.

• lib directory contains raw ES-6 components. You can copy/paste them into your application and use directly.
• dist is the compiled CommonJS module.

NOTE: It is not backwards compatible with its predecessor.

Notable changes:

• significantly reduced animation CPU consumption (from 70-90% to 5-10%)
• removed layout phase from animation
• fixed memory leaks and optimized performance
• patched audio playbacks for mobile devices
• audio is now completely decoupled into its own component
• allow audio to be configured via props

A complete example of implementation could be found in src/app dir-ry. The code is pretty thoroughly covered with comments.

Installation steps:

npm i -S @ekingdom/roulette

1. Import core components:

import { Roulette, RouletteItem, RouletteStack, AudioProvider } from '@ekingdom/roulette'

1. Import core styles (.scss files are also available):

import '@ekingdom/roulette/dist/css/roulette-core-styles.min.css'

1. Audio files can be found at @ekingdom/roulette/dist/audio:

import roll400Sound from '@ekingdom/roulette/dist/audio/roll400.wav'
import startSound from '@ekingdom/roulette/dist/audio/start.wav'
import finishSound from '@ekingdom/roulette/dist/audio/finish.wav'

1. Combine the components in your render method (see src/app for details):

...
render() {
    return (
        <AudioProvider
            audioEnabled={true}
            audioLoop={roll400Sound}
            audioStart={startSound}
            audioFinish={finishSound}
            volume={1}
        >
            <RouletteStack
                run={this.state.run}
                poolMultiplier={4}
                onComplete={this.handleComplete}
                loading={this.state.loading}
                afterStopLootStyles={{
                    transform: 'scale(1.1)',
                    backgroundColor: 'yellow',
                }}
            >
                {
                    createArray(this.state.count).map((el, i) => (
                        <Roulette
                            key={this.state[`RID_${i}`]}
                            rouletteID={i}
                            itemID={this.state[`LID_${i}`]}
                        >
                            {
                                caseBox.caseItems.map(item => (
                                    <RouletteItem key={item.id} itemID={item.id}>
            
                                        <div className="roulette-item-img">
                                            <img src={item.img} alt="" />
                                        </div>
                                        <span>{item.id}</span>
            
                                    </RouletteItem>
                                ))
                            }
                        </Roulette>
                    ))
                }
            </RouletteStack>
        </AudioProvider>
    )
}

DOCS

The documentation complied with jsdoc is available from within docs directory

git clone https://github.com/skinholdings/roulette.git
cd roulette/docs
open index.html

Contributing

Via pull requests

To build the package locally (shall generate a file heathmont-roulette-1.1.2.tgz in root dir-ry):

npm run pack

Go to your project, and install the package:

cd ../path/to/my/project
npm i -S ../path/to/roulette/heathmont-roulette-1.1.2.tgz

TODO:

• Tests