chukwumaijem / roll-a-die

Simple 3D dice roll using CSS3 animation.

Roll A Die

Simple 3D dice roll animator by CSS3 Animation.

Demo

Vanilla JS

Copy dist/roll-a-die.js into your library folder Load it into your HTML script

<script type="text/javascript" src="path/to/roll-a-die.js"></script>

You can use the UNPKG link https://unpkg.com/[email protected]/dist/roll-a-die.js. Remember to update the package number to the most recent.

Call the method with its options.

rollADie({ element, numberOfDice: 2, callback});

With npm (and CommonJS builder)

Install with npm.

npm install --save roll-a-die

Install with yarn.

yarn add roll-a-die

import the library

ES5

const rollADie = require('roll-a-die');

ES6

import rollADie from 'roll-a-die';

Call the method

rollADie({ element, numberOfDice: 2, callback });
rollADie({ element, numberOfDice: 2, callback, soundVolume: 1 });
rollADie({ element, numberOfDice: 2, callback, delay: 1000, soundVolume: 0 }); // disable sound
rollADie({ element, numberOfDice: 2, callback, values: [3, 4], soundVolume: 0.3 });

Parameter Definitions

• element: The element to render die animation on. Type: HTMLElement
• numberOfDice: The number of dice to use.` Type: number
• callback: Called when animation is finished. Returns an array of the values from throw. Type: Function
• soundVolume: Set volume of audio between 0 and 1. (Optional) Defaults to 1. Type: number
• delay: Time in milliseconds to delay before removing animations (Optional). Type: number
• values: Values to show on die face. When provided, it overrides library genrated values. (Optional). Type: Array of numbers

Thanks

• (Sound Effect)
  • http://commons.nicovideo.jp/material/nc93322

License

MIT License

roll-a-die's Issues

Audio elements don't get removed

When triggering the method rollADie() multiple times it creates new audio elements but doesn't get rid of old ones or reueses them.

Callback is triggered immediately

The provided callback will be executed immediately. It would be great if it is executed after the animation faded.

rollADie({ element, numberOfDice: 1, delay: 3000, callback: () => { console.log("done animating"); }, values: [value] });

Feature Request: Support for customizing svg of dice

Would it be possible to include the feature to provide the SVG markup for the dice in an angular template or by specifying an URL to a SVG-File? I think currently the SVG markup is pretty much hardcoded inside the javascript code and there is just know way to get the hands on it because of minifications and so on ...

Any help would be appreciated! :)

Available only up to version 1.3.1

Hi!

I was trying to use the package but it is only available up to version 1.3.1 instead of the current release 1.5.3, could you fix this please?

Best.