Added roll interface

acidtone · Jul 23, 2022 · 133b6c4 · 133b6c4
1 parent 8b15401
commit 133b6c4
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -5,8 +5,42 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dice Roller!</title>
+  <script type="module" src="js/app.js"></script>
+  <style>
+    ul {
+      list-style: none;
+      display: flex;
+    }
+
+    ul li {
+      margin: 0.5rem;
+    }
+
+    .die {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 1rem;
+    }
+  </style>
 </head>
 <body>
-
+  <div class="wrapper">
+    <section class="roll-nav">
+      <ul>
+        <li><button class="roll-dice">Roll Dice</button></li>
+        <li><button class="resolve-dice">Resolve</button></li>
+      </ul>
+    </section>
+    <section class="roll-pile">
+      <h2>Roll Result</h2>
+      <ul>
+      </ul>
+    </section>
+    <section class="keep-pile">
+      <h2>Keep Pile</h2>
+      <ul>
+      </ul>
+    </section>
+  </div>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,103 @@
+import {roll, reduceRollResults} from './utilities.js'
+
+const die = [
+  'Heart',
+  'Attack',
+  'Money',
+  'One',
+  'Two',
+  'Three'
+];
+
+const init = () => {
+
+  const moveDie = event => {
+    if (event.target.parentNode.parentNode.parentNode.classList.contains('roll-pile')) {
+      keepPile.appendChild(event.target.parentNode);
+    } else if (event.target.parentNode.parentNode.parentNode.classList.contains('keep-pile')) {
+      rollPile.appendChild(event.target.parentNode);
+    }
+  }
+
+  const resolveDice = () => {
+    // Disable rolling
+    rollBtn.disabled = true;
+
+    // If any remaining dice, keep them
+    const remainingDice =  rollPile.querySelectorAll('li');
+    if (remainingDice.length > 0) {
+      remainingDice.forEach(function(item) {
+        keepPile.appendChild(item);
+      });
+    }
+
+    // Get values from dice
+    const keptDice = keepPile.querySelectorAll('button');
+    const keptDiceVals = [];
+
+    for(let dieVal of keptDice){
+      keptDiceVals.push(dieVal.innerHTML);
+    }
+
+    // Create a map of the rolled values
+    const rollResults = reduceRollResults(keptDiceVals);
+    console.log(rollResults);
+
+    // Add map values
+    let keptValuesDisplay = '';
+    for(let faceValue in rollResults){
+        keptValuesDisplay += `<li><button>${faceValue} ${rollResults[faceValue]}</button></li>` 
+    }
+    rollPile.innerHTML = keptValuesDisplay; 
+
+    resolveBtn.disabled = true;
+
+  }
+
+  const rollBtn = document.querySelector('.roll-dice');
+  const resolveBtn = document.querySelector('.resolve-dice');
+  const rollPile = document.querySelector('.roll-pile ul');
+  const keepPile = document.querySelector('.keep-pile ul');
+
+  let rollCount = 0;
+
+  resolveBtn.disabled = true; // disable by default
+
+
+  rollBtn.addEventListener('click', () => {
+    resolveBtn.disabled = false; // enable resolve after first roll
+
+    const numDie = 6 - keepPile.querySelectorAll('li').length;
+
+    let rollResults = [];
+    for (let i = 0; i < numDie; i++) {
+      rollResults[rollResults.length] = roll(die);
+    }
+
+    console.log(rollResults);
+
+    rollCount++;
+
+    if (rollCount <= 3) {
+      let listItems = '';
+      rollResults.forEach(function(item){
+        listItems += `<li><button class="die">${item}</button></li>`;
+      });
+      rollPile.innerHTML = listItems;
+
+      rollPile.querySelectorAll('button').forEach(function(item){
+        item.addEventListener('click', moveDie);
+      });
+
+    } else {
+      resolveDice();
+    }
+
+
+  })
+
+  resolveBtn.addEventListener('click', resolveDice)
+
+}
+
+init();
diff --git a/js/dice-roller.js b/js/dice-roller.js
diff --git a/js/utilities.js b/js/utilities.js
@@ -0,0 +1,26 @@
+const isFairDie = faces => {
+  const validFaces = [2, 4, 6, 8, 10, 12, 20];
+  return validFaces.includes(faces);
+}
+
+export const roll = die => {
+  if (Number.isInteger(die) && isFairDie(die)) return Math.ceil(Math.random() * die);
+  if (Array.isArray(die) && isFairDie(die.length)) return die[Math.floor(Math.random() * die.length)];
+  return 'Not a valid die';
+}
+
+// Takes array of dice and maps out values
+export const reduceRollResults = (resultsArray) => {
+
+  // First, sort all values
+  const rollResults = resultsArray.reduce((acc, curr) => {
+      if (typeof acc[curr] == 'undefined') {
+        acc[curr] = 1;
+      } else {
+        acc[curr] += 1;
+      }
+      return acc;
+    }, {});
+
+  return rollResults;
+}