nuxy/react-slot-machine-gen

:file_folder: The / slot-machine-gen / plugin React component wrapper.

React Slot Machine Generator

Create an extremely biased, web-based slot machine game.

Features

• Faux-panoramic reel animations (3D cylinder, without <canvas>)
• Support for single/multi-line reels and pay-lines.
• Pseudo-random selections by configured weight.
• Configurable RNG (to make it less biased)
• Configurable sound clips for reel animations.
• Easy to set-up and customize.

Checkout the demo for examples of use.

Dependencies

• Node.js

Installation

Add to an existing React project using YARN.

$ yarn add react-slot-machine-gen

Usage

import React       from 'react';
import SlotMachine from 'react-slot-machine-gen'; // or '../dist/react-slot-machine';

const reels = [
  {
    imageSrc: 'path/to/image.png',
    symbols: [
      {
        title: 'cherry',
        position: 100,
        weight: 2
      },
      {
        title: 'plum',
        position: 300,
        weight: 6
      },
      {
        title: 'orange',
        position: 500,
        weight: 5
      },
      {
        title: 'bell',
        position: 700,
        weight: 1
      },
      {
        title: 'cherry',
        position: 900,
        weight: 3
      },
      {
        title: 'plum',
        position: 1100,
        weight: 5
      }
    }
  },

  // add more reels ...
];

export default class Demo extends React.Component {
  constructor() {
    super();

    this.state = {
      play: false
    };
  }

  playEvent() {
    this.setState({
      play: !this.state.play
    });
  }

  render() {
    return (
      <React.Fragment>
        <SlotMachine reels={reels} play={this.state.play} />

        <button id="play-button" onClick={() => this.playEvent()}>Play</button>
      </React.Fragment>
    );
  }
};

Component Props

Name	Type	Description
reels	Array	Symbols configuration.
play	Boolean	Spins the reels if true
callback	Function	Returns winning symbols.
options	Object	Override game defaults.

Documentation

• Methods
• Reels configuration
• Game options
• Callback
• Customizing symbols

Developers

CLI options

Run ESLint on project sources:

$ npm run lint

Transpile ES6 sources (using Babel) and minify to a distribution:

$ npm run build

Bundle demo sources (using Webpack):

$ npm run webpack

Contributions

If you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the Node.js style guide)

Versioning

This package is maintained under the Semantic Versioning guidelines.

License and Warranty

This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.

react-slot-machine-gen is provided under the terms of the MIT license

Author

Marc S. Brooks

react-slot-machine-gen's Issues

ERROR in ./node_modules/react-slot-machine-gen/src/react-slot-machine.js

Hello !

i have this error with react

`ERROR in ./node_modules/react-slot-machine-gen/src/react-slot-machine.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\33624\Desktop\OZALENTOURS2.0\Machine\machine\node_modules\react-slot-machine-gen\src\react-slot-machine.js: Support for the experimental syntax 'jsx' isn't currently enabled (38:7):

36 | render() {
37 | return (

38 |

| ^
39 | );
40 | }
41 | };`

i cannot implement webpack error ref

Who can implement this in react 18 project generate with nextjs?

This is the project repo: https://github.com/cornflourblue/next-js-13-mysql-registration-login-example

MY steps:
1-Make me error i install npm install react-slot-machine-gen
2-Copy use section in this repo, in my page in pages directory...

and get this error:

Failed to compile
./node_modules/react-slot-machine-gen/src/react-slot-machine.js
Module parse failed: Unexpected token (38:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   render() {
|     return (
>       <div id={this.props.id} className="slot-machine" ref="wrapper"></div>
|     );
|   }

Please some body can help me??

Issue with next.js

I you are using next.js. please use dynamic SSR to make this work

Module parse failed: Unexpected token (38:6)

Hello
I am trying to use this module in my next.js project.
I am getting this error.

How can I resolve this issue?
Thanks in advance.

Experimental syntax JSX isn't currently enabled in react-slot-machine.js

          @nuxy This error is still prevalent when installing `react-slot-machine-gen` from npm and trying to use it in a react project. I have tried both of the fixes you suggested above but the error doesn't go away. Any other fix, you might suggest?

Originally posted by @darshanhande11 in #5 (comment)