You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
// Renders a 6-sided die inside #dice and rolls a random value on click.
|
|
(() => {
|
|
const dice = document.getElementById('dice');
|
|
if (!dice) return;
|
|
|
|
// The 7 standard pip positions of a die face.
|
|
const positions = ['tl', 'tr', 'ml', 'c', 'mr', 'bl', 'br'];
|
|
|
|
const face = document.createElement('span');
|
|
face.className = 'dice__face';
|
|
face.innerHTML = positions
|
|
.map((p) => `<span class="pip pip--${p}"></span>`)
|
|
.join('');
|
|
dice.appendChild(face);
|
|
|
|
const SPIN_MS = 400; // keep in sync with the dice-roll animation duration
|
|
|
|
const showValue = () => {
|
|
const value = Math.floor(Math.random() * 6) + 1;
|
|
face.dataset.value = value;
|
|
dice.setAttribute('aria-label', `Dice showing ${value}. Click to roll.`);
|
|
};
|
|
|
|
const roll = (animate = true) => {
|
|
if (!animate) {
|
|
showValue();
|
|
return;
|
|
}
|
|
|
|
// Restart the roll animation on every click.
|
|
dice.classList.remove('is-rolling');
|
|
void dice.offsetWidth; // force reflow so the animation can replay
|
|
dice.classList.add('is-rolling');
|
|
|
|
// Reveal the new value once the spin is halfway through.
|
|
setTimeout(showValue, SPIN_MS / 2);
|
|
};
|
|
|
|
dice.addEventListener('click', () => roll());
|
|
dice.addEventListener('animationend', () => dice.classList.remove('is-rolling'));
|
|
|
|
roll(false); // show a starting value without animating
|
|
})();
|