Package Exports
- @theblindhawk/roulette
- @theblindhawk/roulette/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@theblindhawk/roulette) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Customizable Roulette Library
npm install @theblindhawk/roulette
Features
- Compatible with both Javascript and TypeScript
- Customize the view of the Roulette down to the details
- Customize the click sound and the spin duration
- Control the value the Roulette will land at
- Import any of your own roulette or arrow images
Planned Features
- A casino shaped Roulette to be added as one of the defaults
Table of Contents
Usage
create an html div and give it and id to pass to the Roulette().
<div class="my_class_name" id="roulette"></div>import and set up the roulette using js
import { Roulette } from "@theblindhawk/roulette";
// the array with all the roulette options
const rolls = [0, 8, 3, 5, 50];
let roulette = new Roulette({id: "roulette", rolls: rolls});
// tell the roulette to roll on said option
roulette.roll(8);Roulette
interface Roulette = {
id: string,
rolls: number[] | string[],
colors?: string[],
duration?: number,
arrow?: ArrowData,
landing?: 'precise' | 'loose',
text?: TextData,
audio?: AudioData,
rotate?: number,
diameter?: number,
shrink?: number
};| Value | Type | Default | Comment |
|---|---|---|---|
| id | string | required | The id of the div element that will contain the roulette. |
| rolls | array | required | The values of each section of the roulette. |
| colors | array | [] | The colors of the sections of the roulette. |
| duration | number | 10000 | How long you want the roulette to spin in milliseconds |
| arrow | Arrow | { ... } | The design and size of the arrow if you wish to change it |
| landing | Landing | 'loose' | You can land at the center of the roll or randomly |
| audio | object | { ... } | Set up when the audio plays and its directory |
| text | object | { ... } | The text data, such as fonts and rotation |
| rotate | number | 0 | Initially rotate the roulette to a different degree |
| diameter | number | 310 | the width and height of the roulette element |
| shrink | number | 20 | Shrinks the size of the board in comparison to the overall |
NB: if the number of colors is less than the rolls they will repeat.
arrow: ArrowData
interface ArrowData = {
element?: string / HTMLElement,
width?: number,
fill?: string,
rotate?: number,
};| Value | Type | Default | Comment |
|---|---|---|---|
| element | string / HTMLElement | 'standard' | the arrow as an html string or as an element |
| width | number | 60 | the width of the arrow element in pixels |
| fill | string | 'black' | the color of arrow (if the element is an svg) |
| rotate | number | 0 | rotate the arrow to a different position |
NB: there are currently three ready made arrow svgs: 'standard', 'thin', 'sharp'.
text: TextData
interface TextData = {
font?: {
size?: number,
weight?: number,
color?: string,
},
before?: string,
after?: string,
rotate?: number
};| Value | Type | Default | Comment |
|---|---|---|---|
| font | object | { ... } | The font size/weight/color of the roulette text |
| before | string | '' | Add some text before the rolls[] values |
| after | string | '' | Add some text after the rolls[] values |
| rotate | number / string | 0 | rotate the text to face a different direction |
audio: AudioData
interface AudioData = {
play?: 'once' | 'multiple',
volume?: number,
dir?: string
},| Value | Type | Default | Comment |
|---|---|---|---|
| play | string | 'multiple' | If the sound should play on each segment or only once |
| volume | number | 1 | A number in decimals defining the sound's output strength |
| dir | string | 'default' | The directory of the sound. Pass '' to mute it |
Doughnut Roulette
interface Doughnut = {
...
type: 'doughnut',
doughnut: {
diameter: number,
fill: string,
}
};| Value | Type | Default | Comment |
|---|---|---|---|
| diameter | number | required | size of the hole in the doughnut |
| fill | string | 'white' | color of the hole in the doughnut |
Image Roulette
interface Custom = {
...
type: 'image',
image: {
src: string,
angle: number
}
};| Value | Type | Default | Comment |
|---|---|---|---|
| src | string | required | The url of the custom roulette image |
| angle | number | 0 | Rotate the image without changing the initial point |
Customization
Functions
roll options
| Function | Comment |
|---|---|
| roll(value) | rolls the roulette to an index with said value |
| rollByIndex(index) | rolls the roulette to said index |
| rollRandom() | rolls the roulette to a random index |
| rollProbabilities(probs) | rolls the roulette using custom probabilities[] |
| draw() | redraws the roulette (probably unnecessary) |
other functions
| Function | Options | Default |
|---|---|---|
| setSize() | width, height, shrink | 310, 310, 20 |
| setBorder() | color, width | #808C94, 10 |
| setRollText() | before, after | '', '' |
| rotateText() | rotation(int/string) | 'circular-inner' |
| setTextFont() | size, weight, color | '16px', 1, '#black' |
| setDuration() | milliseconds | 10000 |
| setArrow() | ArrowData | { ... } |
| setProbabilities() | probabilities[] | undefined |
Variables
| Variable | Type | Comment |
|---|---|---|
| last_roll | numeric | the last value you rolled on |
| onstart | function | runs before rolling the roulette |
| onstop | function | runs after rolling the roulette |
Examples
Here is a fully customized standard roulette example
import { Roulette } from "@theblindhawk/roulette";
const rolls = [0, 8, 3, 5, 50];
const colors = ["#27296a", "#db5a52"];
// svg element width = 500x500, wheel drawing width = 460x460
const roulette = new Roulette({
id: "roulette",
rolls: rolls,
colors: colors,
duration: 5000,
arrow: {
width: 80,
fill: 'grey'
},
landing: 'precise',
diameter: 500,
shrink: 40
});
roulette.audio_dir = 'sounds/my_click.wav';
roulette.onstop = function(last_roll) { console.log(last_roll) }
roulette.rollRandom();Roll Probabilities
The probabilities[] array will accept an array the same lenght of the rolls[] containing integers.
const rolls = [0, 8, 3, 5, 50];
// 10% chance for 0/8/3 and 35% chance for 5/50
const probabilities = [10, 10, 10, 35, 35]
const roulette = new Roulette({id: "roulette", rolls: rolls});
roulette.setProbabilities(probabilities);
roulette.rollProbabilities();You can also shorten the syntax by directly handing the probabilities to the roll statement
// use previously passed probabilities
roulette.setProbabilities(probabilities);
roulette.rollProbabilities();
// directly hand probabilities when rolling
roulette.rollProbabilities(probabilities);Any values, so long as they are an array of integers can be passed as probabilities.
The following examples will all have 3 choices with 25%/25%/50% probabilities.
// these will all result in the same probabilities
roulette.rollProbabilities([ 25, 25, 50 ]);
roulette.rollProbabilities([ 1, 1, 2 ]);
roulette.rollProbabilities([ 36, 36, 72 ]);Edit Roll Text
For changing the font of the roulette you can either change the font of the container or rely on setTextFont().
<div class="change_font_here" id="roulette"></div>roulette.setRollText(20, 600, 'grey');The Roulette will automatically display the values passed in the roll[].
But if you need to add some text before or after the rolls use the following.
const probabilities = ['first', 'second'];
const roulette = new Roulette({id: "roulette", rolls: rolls});
// roll 1: 'the first value'
// roll 2: 'the second value'
roulette.setRollText('the ', ' value');If you wish to rotate the text somehow use the following.
// the text is"straight" on the right side
roulette.rotateText('sideways-right');
// the same but using an integer for it
roulette.rotateText(270);