Add dice

public/assets/css/style.css

@@ -314,6 +314,105 @@ div#content {
   margin-bottom: 0;
 }
 
+div#dice {
+  position: absolute;
+  right: 0;
+  bottom: 30px;
+  margin: 3px;
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  border: 1px solid darkgray;
+}
+
+.die {
+  width: 31px;
+  height: 31px;
+  border: 1px solid black;
+  border-radius: 4px;
+  margin: 0 auto;
+  margin-top: 3px;
+  margin-bottom: 1px;
+  background-color: white;
+  display: flex;
+  justify-content: space-around;
+}
+
+.die > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  background-color: black;
+  border-radius: 50%;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+}
+
+.die.one > div:nth-child(even) > .dot:nth-child(even) {
+  visibility: visible;
+}
+
+.die.two > div:first-child > .dot:first-child,
+.die.two > div:last-child > .dot:last-child {
+  visibility: visible;
+}
+
+.die.three > div:first-child > .dot:first-child,
+.die.three > div:nth-child(even) > .dot:nth-child(even),
+.die.three > div:last-child > .dot:last-child {
+  visibility: visible;
+}
+
+.die.four > div:nth-child(odd) > .dot:nth-child(odd) {
+  visibility: visible;
+}
+
+.die.five > div:nth-child(odd) > .dot:nth-child(odd),
+.die.five > div:nth-child(even) > .dot:nth-child(even) {
+  visibility: visible;
+}
+
+.die.six > div:nth-child(odd) > .dot {
+  visibility: visible;
+}
+
+.die.test > div:first-child > .dot {
+  visibility: visible;
+}
+
+.roll-in {
+  animation: roll-in 0.125s linear 1;
+}
+
+.roll-out {
+  animation: roll-out 0.125s linear 1;
+}
+
+@keyframes roll-out {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes roll-in {
+  0% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;

public/index.html

@@ -103,6 +103,44 @@
         <input type="checkbox" data-allegiance="attacker"/>
       </div>
 
+      <div id="dice">
+        <button type="button" id="roll-dice">Roll</button>
+        <div class="die">
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        </div>
+        <div class="die">
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+          <div>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        </div>
+      </div>
+
       <div class="map-placeholder">
         Loading...
       </div>

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');
+  });
+});