From d01e0aa92bdedce5c03245e583d096ea5ce1753d Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 21 May 2024 12:14:30 -0700
Subject: Add dice
---
src/index.js | 44 +++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 43 insertions(+), 1 deletion(-)
(limited to 'src')
diff --git a/src/index.js b/src/index.js
index cbd6b3b..b268b2b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,6 +13,16 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
fileName = localStorage.getItem('map') || 'scenario-side_show',
map = `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'),
+ dice = document.querySelectorAll('.die'),
+
+ d6 = {
+ 1: 'one',
+ 2: 'two',
+ 3: 'three',
+ 4: 'four',
+ 5: 'five',
+ 6: 'six'
+ },
toggleContentVis = (function () {
document.querySelectorAll('#content > div').forEach(div => {
@@ -26,7 +36,7 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
localStorage.setItem('content-visibility', this.checked);
}).bind(contentVisToggleEl);
- let mapResourceEl = document.querySelector('object');
+let mapResourceEl = document.querySelector('object');
function loadScenario(data) {
const current = document.querySelector('object');
@@ -61,6 +71,19 @@ function clearMoveEndedIndicators(records) {
records.forEach(el => el.classList.remove('movement-ended'));
}
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
+function getRandomIntInclusive(min, max) {
+ const minCeiled = Math.ceil(min);
+ const maxFloored = Math.floor(max);
+ return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
+}
+
+// ⚀ ⚁ ⚂ ⚃ ⚄ ⚅
+function roll(die) {
+ const numsAsWords = Object.values(die);
+ return numsAsWords[getRandomIntInclusive(0, numsAsWords.length - 1)];
+}
+
function load() {
const svg = this.contentDocument.querySelector('svg'),
startLocs = svg.querySelector('.start-locations')
@@ -185,3 +208,22 @@ document.querySelector('input[type="file"]').addEventListener('change', e => {
const [file] = fileInputEl.files;
loadScenario(URL.createObjectURL(file))
});
+
+dice.forEach(el => {
+ el.classList.add(roll(d6));
+
+ el.addEventListener('animationend', e => {
+ if (e.animationName === 'roll-out') {
+ el.classList.remove('roll-out');
+ el.classList.replace(el.classList.item(1), roll(d6));
+ el.classList.add('roll-in');
+ }
+ });
+});
+
+document.querySelector('#roll-dice').addEventListener('click', () => {
+ dice.forEach(el => {
+ el.classList.remove('roll-in');
+ el.classList.add('roll-out');
+ });
+});
--
cgit v1.2.3