Merge branch 'develop'

.gitignore

@@ -26,7 +26,7 @@ yarn-error.log*
 
 # IDE generated files #
 ######################
-.vscode/*
+.vscode
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json

package.json

@@ -79,4 +79,4 @@
         "strategy": "default",
         "clearDist": true
     }
-}
+}

src/components/CurrentDie.jsx

@@ -1,9 +1,10 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
 import Base from './Base';
-import { D4, D6, D8, D10, D12, D20 } from './dice';
+import { D4, D6, D8, D10, D12, D20, D100 } from './dice';
 import { cryptoRandomNumberGen } from './rng';
 import Amount from './Amount';
+
 const CurrentDie = props => {
     const [sides, setSides] = useState(props.sides);
     const [result, setResult] = useState(props.sides);
@@ -51,6 +52,8 @@ const CurrentDie = props => {
                             return <D12 />;
                         case '20':
                             return <D20 />;
+                        case '100':
+                            return <D100 />;
                     }
                 })()}
                 <span class="m-auto text-gray-900 z-10">{result}</span>

src/components/Stats.jsx

@@ -0,0 +1,46 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import Base from './Base';
+import { D4, D6, D8, D10, D12, D20, D100 } from './dice';
+import { cryptoRandomNumberGen } from './rng';
+import Amount from './Amount';
+
+const RollStats = props => {
+    const [sides, setSides] = useState(props.sides);
+    const [result, setResult] = useState(props.sides);
+    const [active, isActive] = useState(false);
+    const [done, isDone] = useState(true);
+    const ticks = 40;
+    const speed = 60;
+    setSides(6);
+    const handleClick = () => {
+        isActive(true);
+        isDone(false);
+        const randomArray = [result];
+        for (let i = 0; i < ticks; i++) {
+            randomArray.unshift(cryptoRandomNumberGen(6, 18));
+        }
+        let displayRefresh = 0;
+        let interval = setInterval(function () {
+            setResult(randomArray.shift());
+            if (++displayRefresh === ticks) {
+                window.clearInterval(interval);
+                isActive(false);
+                isDone(true);
+            }
+        }, speed);
+    };
+    return (
+        <Base>
+            <button
+                onClick={handleClick}
+                class={`dice ${active ? ' active ' : ''} ${
+                    done ? ' done ' : ''
+                    }`}>
+                <D6 />
+                <span class="m-auto text-gray-900 z-10">{result}</span>
+            </button>
+        </Base>
+    );
+};
+export default RollStats;

src/components/dice.jsx

@@ -4,10 +4,12 @@ import d8 from '../assets/d8.svg';
 import d10 from '../assets/d10.svg';
 import d12 from '../assets/d12.svg';
 import d20 from '../assets/d20.svg';
+import d100 from '../assets/d10.svg';
 
 export const D4 = d4;
 export const D6 = d6;
 export const D8 = d8;
 export const D10 = d10;
 export const D12 = d12;
 export const D20 = d20;
+export const D100 = d100;

src/components/menu.jsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { Link } from '@reach/router';
-import { D4, D6, D8, D10, D12, D20 } from './dice';
+import { D4, D6, D8, D10, D12, D20, D100 } from './dice';
 
 const Menu = props => {
     return (
@@ -17,7 +17,7 @@ const Menu = props => {
                 <D8 />
                 <span>d8</span>
             </Link>
-            <Link class="btn" to="/10">
+            <Link class="btn" to="/10" exact>
                 <D10 />
                 <span>d10</span>
             </Link>
@@ -29,6 +29,14 @@ const Menu = props => {
                 <D20 />
                 <span>d20</span>
             </Link>
+            <Link class="btn" to="/100" exact>
+                <D100 />
+                <span>d100</span>
+            </Link>
+            <Link class="btn" to="/stats">
+                <D20 />
+                <span>STATS</span>
+            </Link>
         </nav>
     );
 };

src/index.jsx

@@ -1,6 +1,7 @@
 import { h, render } from 'preact';
 import { Router } from '@reach/router';
 import CurrentDie from './components/CurrentDie';
+import RollStats from './components/Stats'
 
 if (module.hot) {
     module.hot.accept();
@@ -13,7 +14,8 @@ const App = () => {
 render(
     <Router>
         <App path="/" exact />
-        <CurrentDie path="/:sides" />
+        <CurrentDie exact path="/:sides" />
+        <RollStats exact path="/stats" sides="20" />
     </Router>,
     document.body
 );