| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-21 12:14:30 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-21 12:30:45 -0700 |
| commit | d01e0aa92bdedce5c03245e583d096ea5ce1753d (patch) | |
| tree | 73317e914f203410415b337b230469ce1bd4adfb /src/index.js | |
| parent | 517c89b1cca85638f26d9987bc8b222d0a56ec6b (diff) | |
Add dice
Diffstat (limited to 'src/index.js')
| -rw-r--r-- | src/index.js | 44 |
1 files changed, 43 insertions, 1 deletions
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'); + }); +}); |