React Casino Roulette

It is not the first but it is the best open source React casino roulette. No canvas used, only pure HTML, CSS, and JS for the best performance. Ready to be used.

This is a continuation(fork) of Ivan Admaer's amazing work. https://github.com/IvanAdmaers/react-casino-roulette

Features

• ✅ Ready to use
• 💅 Customizable
• 💪 Responsive, Mobile-friendly
• 🎲 Supports both European and American
• 🎁 Includes RouletteWheel, RouletteTable, ChipsList components and useRoulette hook.
• ⚙ Typescript support
• 🚀 No canvas, pure HTML, CSS, JS.
• 💡 Open for more. Request a feature in the issues tab.
• 📝 MIT license

Table of Contents

• Features
• Install
• Usage
• Types
  • Chips
  • BetId
  • BetType
• Props
  • 🎡 RouletteWheel Props
  • 🎲 RouletteTable Props
  • ⚙ useRoulette hook
  • 💰 ChipList
  • 📖 Utils functions
• FAQ
• Credits

Install

# Via npm:
npm install git+https://github.com/dozsolti/react-casino-roulette.git
# Via yarn:
yarn add git+https://github.com/dozsolti/react-casino-roulette.git

Don't forget to import this in your components

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

Usage

See the example/src/examples folder for more examples.

Table

import React from 'react';
import { RouletteTable, useRoulette } from 'react-casino-roulette';

// Note: Don't forget to your own chip images.
const chips = {
  '1': 'https://github.com/dozsolti/react-casino-roulette/blob/main/example/public/images/blank-chips/white-chip.png?raw=true',
  '10': 'https://github.com/dozsolti/react-casino-roulette/blob/main/example/public/images/blank-chips/blue-chip.png?raw=true',
}

function ExampleBasicTable() {
  const { bets, onBet } = useRoulette();

  return (
    <RouletteTable chips={chips} bets={bets} onBet={onBet(5)} />
  )
}

export default ExampleBasicTable

Wheel

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

function ExampleBasicWheel() {

  const [winningBet, setWinningBet] = useState('-1');
  const [wheelStart, setWheelStart] = useState(false);


  const doSpin = () => {
    setWinningBet('00'); // One of these: '00', '0', '1', '2', ... '36'
    setWheelStart(true);
  }

  const handleEndSpin = (winner) => {
    alert("The ball landed on " + winner); // in this example it will be '00'
    setWheelStart(false);
  };

  return (
      <>
        <RouletteWheel
            start={wheelStart}
            winningBet={winningBet}
            onSpinningEnd={handleEndSpin}
        />
        <button onClick={doSpin} disabled={wheelStart}>Spin</button>
      </>
  )
}

export default ExampleBasicWheel

ChipList

import React, { useState } from 'react';
import { ChipList } from 'react-casino-roulette';

import whiteChip from '../../../public/images/blank-chips/white-chip.png';
import blueChip from '../../../public/images/blank-chips/blue-chip.png';
import blackChip from '../../../public/images/blank-chips/black-chip.png';
import cyanChip from '../../../public/images/blank-chips/cyan-chip.png';

const chips = {
  '1': whiteChip,
  '10': blueChip,
  '100': blackChip,
  '500': cyanChip,
}

function ExampleChips() {
  const [selectedChip, setSelectedChip] = useState(Object.keys(chips)[0]);

  return (
    <ChipList
      chips={chips}
      selectedChip={selectedChip}
      onChipPressed={setSelectedChip} />
  )
}

export default ExampleChips;

Types

Chips

List of the all available chips. You need to specify the amount and the image, and the components will take care of the rest.

export type Chips = { [amount: string]: ImgHTMLAttributes<any>['src'] };

// Example
const chips = {
  '1': '<image url>',
  '10': '<image url>',
}

See supported images.

BetId

Contains all possible bets.

export type BetId = number | '00' | '0' | '1' | '2' | ... | '34' | '35' | '36' | '00-0' | '00-3' | '00-2-3' | ... | '31-32-33-34-35-36' | '34-35-36' | '1ST_DOZEN' | '2ND_DOZEN' | .. | 'RED' | 'EVEN' | '1_TO_18';

Note: also uses the number type to support betting on a single number (as a number not as a string).

See full list here.

BetType

Prop Name	Type	Example	Description
amount	number	25	How much do you bet. No currency is used.
payload	string[]	["0","1","2"]	An array of strings representing all the numbers you bet.
payoutScale	number	12	How much you will win. For a single number the scale is 36. For RED the scale is 2. To get the amount won calculate bet.amount * bet.payoutScale.

Bets

It is a key-value pair for the id and data.

export type Bets = Record<BetId, BetType>;

Roulette layout type

export type RouletteLayoutType = 'european' | 'american';

Props

RouletteWheel Props

Prop Name	Type	Default	Description	Required
start	boolean	-	Sets when the wheel should start spinning.	Required
winningBet	string	-	Sets the wheel winning bet. Available values: '-1', '0', '00' and '1' to '36'.	Required
onSpinningEnd	(winner: AvailableNumbers) => void	() => undefined	Triggers when the wheel stops spinning. Returns the spin's results.
layoutType	RouletteLayoutType	'european'	The European-style layout has a single zero, and the American style layout is usually a double-zero.
automaticSpinning	boolean	true	Used only as an idle animation, works separatly from ball spinning. By default is set to true so it spins the wheel continuously. If set to false, the Wheel will only spin when triggered by a user interaction or other event.
spinLaps	number	3	The number of complete rotations the wheel should make before stopping.
spinDuration	number	3	The duration of the spin animation in seconds.
spinEaseFunction	transition-timing-function	'ease-out'	The easing function to be used for the spin animation. This property controls the acceleration and deceleration of the spin. Common easing functions include 'linear', 'ease-in', 'ease-out', and others.

---

RouletteTable Props

Prop Name	Type	Default	Description	Required
bets	Bets	-	See Bets type for details.	Required
onBet	(params: IOnBetParams) => void	-	A callback function that is triggered when a bet is placed. The params object contains the following properties: * bet: The type of the bet, as defined in the ACTION_TYPES enum. * payload: An array of strings representing the payload of the bet. * id: A unique identifier for the bet.	Required
chips	Chips	-	List of the all available chips. See Chips type for details.	Required
layoutType	RouletteLayoutType	'european'	The European-style layout has a single zero, and the American style layout is usually a double-zero.
readOnly	boolean	false	When set to true, the component becomes disabled, preventing user interaction. Recommended to enable readOnly while the wheel is spinning to disable later bets.
height	boolean	368px	The height of the component. A specific value (e.g., '368px').
isDebug	boolean	false	Enables debug mode, which can be used to see all the bet-able positions on the table.

---

useRoulette hook

Prop Name	Type	Default	Description
bets	Bets	{}	See Bets type for details.
onBet	(amount: number | string, mode: BetModes) => (payload: string[], id: BetId) => void	-	A callback function that is triggered when a bet is placed. It takes two arguments: amount and mode. * amount: The amount to be added, subtracted, or set for the bet. * mode: The operation to be performed on the bet, can be one of: 'add', 'set', or 'remove'. The callback function returns another function that needs to be sent to the RouletteTable.
hasBets	boolean	false	Returns whether there are any bets placed.
total	number	0	The sum of all bets.
updateBet	(betId: BetId, amount: number) => void	-	Sets the amount of one bet. If amount is 0 or below the bet will be removed.
updateAllBets	(newBets: { [betId in BetId]: number }) => void	-	A function will overrides all the bets. Only need to specify the betId and amount, the rest of data will be calculated, such as payload and payoutScale.
removeBet	(betId: BetId) => void	-	Removes a specific bet from the list.
clearBets	() => void	-	Removes all bets.

---

ChipList

Prop Name	Type	Default	Description	Required
chips	Chips	-	List of the all available chips. See Chips type for details.	Required
selectedChip	string	-	The currently selected chip value.	Required
onChipPressed	(chipValue: string) => any	-	A callback function that is triggered when a chip is pressed. The function receives the value of the selected chip as an argument.	Required
budget	number	-1	The total budget available for betting. If specified every chip that is strictly greater than the budget will be disabled.
chipSize	number	64	The size of the chips in pixels.

Utils functions

Prop Name	Type	Description
findChipIcon	(bet: BetType, chips: Chips) => ImgHTMLAttributes<any>['src']	Returns the image for a chip based of a bet.
getWheelNumbers	() => number[]	Returns the numbers for the roulette wheel in the official order. See details.
getNumberCount	(layoutType: RouletteLayoutType) => number	Returns 38 for american, otherwise 37.
calculatePayout	(betId: BetId) => number	A function that calculates the payout for a given bet. For a single number will get 36 times back. Example betting 10$ will reward you with 360$. But since you payed 10$ for the bet, the total profit will be only 350$.
getPayloadFromBetId	(betId: string) => string[]	Returns the list of numbers that are covered by a bet.

FAQ

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

• Examples folder

❓ How can I customize the table or wheel?
💬 You can customize using props for 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 ❤️.

Credits

🙏 Special thanks for Ivan Admaer for making this project possible. https://github.com/IvanAdmaers/