React Casino Roulette

The first open source React casino roulette. This includes both table and wheel. No canvas used, only pure HTML, CSS, and JS for the best performance. No loading screens needed.

That's like selling. Fewer clicks mean more purchases. Faster loading speed leads to higher conversion rates.

Live example - react-casino-roulette.ivanadmaers.com
Another one - codesandbox.io/s/react-casino-roulette-example-ksw8u4

If you need the same functionality, plus 2 supported types (American and European roulette), and plain CSS and JS implementation, take a look at - https://github.com/IvanAdmaers/casino-roulette.

Please, pay your attention, some of the bet types names (STRAIGHT_UP, CORNER, etc) you receive when handeling user's bet may be incorrect. Everything else works great. It's fixed in https://github.com/IvanAdmaers/casino-roulette.

Features

• 🚀 No canvas, pure HTML, CSS, JS
• 💪 The first open source casino roulette
• 🔥 Table + Wheel
• ⌛ No loading screens needed
• ✅ Ease of use
• 📝 MIT license
• 📦 Lightweight
• 🔧 Jest
• 🎉 NextJS, GatsbyJS and RemixJS support

Installation

# Via npm:
npm i react-casino-roulette
# Via yarn:
yarn add react-casino-roulette

Usage

Table

import { useState } from 'react';
import { RouletteTable } from 'react-casino-roulette';

import 'react-casino-roulette/dist/index.css';

export const Table = () => {
  const [bets, setBets] = useState({});

  const handleBet = (betData) => {
    const { id } = betData;

    setBets((prevState) => ({
      ...prevState,
      [id]: {
        icon: 'https://cdn-icons-png.flaticon.com/512/10095/10095709.png',
      },
    }));
  };

  return (
    <div style={{ maxWidth: 800, margin: 'auto' }}>
      <RouletteTable bets={bets} onBet={handleBet} />
    </div>
  );
};

Wheel

import { useState } from 'react';
import { RouletteWheel } from 'react-casino-roulette';

import 'react-casino-roulette/dist/index.css';

export const Wheel = () => {
  const [start, setStart] = useState(false);
  const [winningBet, setWinningBet] = useState('-1');

  const doSpin = () => {
    setWinningBet('00');
    setStart(true);
  };

  return (
    <div>
      <div
        style={{ display: 'flex', justifyContent: 'center' }}
      >
        <RouletteWheel start={start} winningBet={winningBet} />
      </div>
      <div>
        <button type="button" disabled={start} onClick={doSpin}>
          Spin
        </button>
      </div>
    </div>
  );
};

Props

Where * means required

Table

| Prop | Type | Default value | Description | |--|--|--|--| | bets* | object | - | Object of bets for the table. See its BetType type here. | | onBet* | (params: IOnBetParams) => void | - | Triggers when user choose a bet on the table. See its IOnBetParams interface here | | isDebug | boolean | false | Sets debug mode |

Wheel

| Prop | Type | Default value | Description | |--|--|--|--| | start* | boolean | - | Sets when the wheel should start spinning | | winningBet* | string | - | Sets the wheel winning bet. Available values: -1, 0, 00 and 1 - 36 | | onSpinningEnd | () => void | () => undefined | Triggers when the wheel stops spinning | | withAnimation | boolean | true | Sets should the wheel plays rotating animation | | addRest | boolean | true | Adds an animation of the ball shifting after the end of the spinning |

FAQ

❓ Where can I find an example of using this package?
💬 Use the links below:

• https://react-casino-roulette.ivanadmaers.com
• https://codesandbox.io/s/react-casino-roulette-example-ksw8u4
• Example folder

❓ How can I customize the table or wheel?
💬 At this moment this is possible by overriding default css styles.

❓ Can I use this with SSR?
💬 Of course. And if you are using NextJS we would like to recommend you to import this package dynamically to decrease your project final bundle size.

❓ What React versions does this package support?
💬 This project requires:

• react >=17.0.0
• react-dom >=17.0.0

❓ Are ideas welcome?
💬 We value all ideas, improvements, suggestions and pull requests ❤️.

Local development

1. Clone the project

2. In the root directory run

npm ci i

npm start

The last command runs webpack to compile our package to a dist folder

3. cd example/

4. Run

npm ci i

npm start

The last command runs Webpack Dev Server so you can see the app in browser.

5. Enjoy the power!

License

MIT