react-slots
a slots machine game component based on React.js
Installation
use npm to install:
$ npm install react-slots
Examples
import * as React from 'react';import SlotsComponent from 'react-slots-component'; /** * the img of slots */import * as Apple from '../img/apple.png';import * as Aubergine from '../img/aubergine.png';import * as Carrot from '../img/carrot.png';import * as Cheese from '../img/cheese.png';import * as Fries from '../img/fries.png';import * as Grapes from '../img/grapes.png';import * as Groceries from '../img/groceries.png';import * as Lemon from '../img/lemon.png';import * as Orange from '../img/orange.png';import * as Pineapple from '../img/pineapple.png';import * as Salad from '../img/salad.png';import * as Sandwich from '../img/sandwich.png';import * as Start from '../img/start.png'; export class App extends React.PureComponent<any, any> { public render() { const elementStyle = { width: '50px', height: '50px', margin: '4px', border: '2px solid orange', }; const items = [ <img key='apple' src={Apple} style={elementStyle} alt=''/>, <img key='aubergine' src={Aubergine} style={elementStyle} alt=''/>, <img key='carrot' src={Carrot} style={elementStyle} alt=''/>, <img key='cheese' src={Cheese} style={elementStyle} alt=''/>, <img key='fries' src={Fries} style={elementStyle} alt=''/>, <img key='grapes' src={Grapes} style={elementStyle} alt=''/>, <img key='groceries' src={Groceries} style={elementStyle} alt=''/>, <img key='lemon' src={Lemon} style={elementStyle} alt=''/>, <img key='orange' src={Orange} style={elementStyle} alt=''/>, <img key='pineapple' src={Pineapple} style={elementStyle} alt=''/>, <img key='salad' src={Salad} style={elementStyle} alt=''/>, <img key='sandwich' src={Sandwich} style={elementStyle} alt=''/>, ]; const buttonStyle: React.CSSProperties = { position: 'absolute', top: '68px', left: '68px', width: '120px', height: '120px', }; const button = <img src={Start} style={buttonStyle} alt='' />; const activeStyle = { background: 'orange', }; const callback = ({ type, finalIndex }: any) => { console.log(type, finalIndex); }; const setAsyncFinalIndex = (): number | Promise<number> => { return new Promise((resolve) => { setTimeout(() => { resolve(10); }, 2000); }); }; return ( <SlotsComponent setAsyncFinalIndex={setAsyncFinalIndex} items={items} elementStyle={elementStyle} activeStyle={activeStyle} button={button} callback={callback} /> ); }}