├── README.md
├── package.json
├── public
    ├── android-chrome-192x192.png
    ├── android-chrome-384x384.png
    ├── apple-touch-icon.png
    ├── browserconfig.xml
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── icon-128x128.png
    ├── icon-144x144.png
    ├── icon-152x152.png
    ├── icon-192x192.png
    ├── icon-384x384.png
    ├── icon-512x512.png
    ├── icon-72x72.png
    ├── icon-96x96.png
    ├── index.html
    ├── manifest.json
    ├── mstile-150x150.png
    └── safari-pinned-tab.svg
├── src
    ├── App.js
    ├── index.css
    ├── index.js
    ├── serviceWorker.js
    └── useGameDice.js
└── yarn.lock


/README.md:
--------------------------------------------------------------------------------
 1 | # useGameDice custom hook example
 2 | 
 3 | Install the app with `yarn install`
 4 | 
 5 | Run the app locally with `yarn start`
 6 | 
 7 | Build the app with `yarn build`
 8 | 
 9 | Demo: https://dice-app.netlify.com/
10 | 
11 | Created with create-react-app by Adrian Bece (https://codeadrian.github.io)
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dice-game",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^1.2.21",
 7 |     "@fortawesome/free-solid-svg-icons": "^5.10.1",
 8 |     "@fortawesome/react-fontawesome": "^0.1.4",
 9 |     "react": "^16.8.6",
10 |     "react-dom": "^16.8.6",
11 |     "react-scripts": "3.0.1"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts start",
15 |     "build": "react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": "react-app"
21 |   },
22 |   "browserslist": {
23 |     "production": [
24 |       ">0.2%",
25 |       "not dead",
26 |       "not op_mini all"
27 |     ],
28 |     "development": [
29 |       "last 1 chrome version",
30 |       "last 1 firefox version",
31 |       "last 1 safari version"
32 |     ]
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/android-chrome-384x384.png


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#edce9c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-128x128.png


--------------------------------------------------------------------------------
/public/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-144x144.png


--------------------------------------------------------------------------------
/public/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-152x152.png


--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-192x192.png


--------------------------------------------------------------------------------
/public/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-384x384.png


--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-512x512.png


--------------------------------------------------------------------------------
/public/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-72x72.png


--------------------------------------------------------------------------------
/public/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/icon-96x96.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link
 6 |       rel="apple-touch-icon"
 7 |       sizes="180x180"
 8 |       href="%PUBLIC_URL%/apple-touch-icon.png"
 9 |     />
10 |     <link
11 |       rel="icon"
12 |       type="image/png"
13 |       sizes="32x32"
14 |       href="%PUBLIC_URL%/favicon-32x32.png"
15 |     />
16 |     <link
17 |       rel="icon"
18 |       type="image/png"
19 |       sizes="16x16"
20 |       href="%PUBLIC_URL%/favicon-16x16.png"
21 |     />
22 |     <link
23 |       rel="mask-icon"
24 |       href="%PUBLIC_URL%/safari-pinned-tab.svg"
25 |       color="#e45438"
26 |     />
27 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
28 |     <meta name="apple-mobile-web-app-title" content="Dice App" />
29 |     <meta name="application-name" content="Dice App" />
30 |     <meta name="msapplication-TileColor" content="#edce9c" />
31 |     <meta name="theme-color" content="#edce9c" />
32 | 
33 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
34 |     <link
35 |       href="https://fonts.googleapis.com/css?family=Smokum&display=swap"
36 |       rel="stylesheet"
37 |     />
38 |     <!--
39 |       manifest.json provides metadata used when your web app is installed on a
40 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
41 |     -->
42 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
43 |     <!--
44 |       Notice the use of %PUBLIC_URL% in the tags above.
45 |       It will be replaced with the URL of the `public` folder during the build.
46 |       Only files inside the `public` folder can be referenced from the HTML.
47 | 
48 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
49 |       work correctly both with client-side routing and a non-root public URL.
50 |       Learn how to configure a non-root public URL by running `npm run build`.
51 |     -->
52 |     <title>Dice App | By Adrian Bece</title>
53 |   </head>
54 |   <body>
55 |     <noscript>You need to enable JavaScript to run this app.</noscript>
56 |     <div id="root"></div>
57 |     <!--
58 |       This HTML file is a template.
59 |       If you open it directly in the browser, you will see an empty page.
60 | 
61 |       You can add webfonts, meta tags, or analytics to this file.
62 |       The build step will place the bundled scripts into the <body> tag.
63 | 
64 |       To begin the development, run `npm start` or `yarn start`.
65 |       To create a production bundle, use `npm run build` or `yarn build`.
66 |     -->
67 |   </body>
68 | </html>
69 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "DiceApp",
 3 |   "name": "Dice App",
 4 |   "icons": [
 5 |     {
 6 |       "src": "icon-72x72.png",
 7 |       "sizes": "72x72",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "icon-96x96.png",
12 |       "sizes": "96x96",
13 |       "type": "image/png"
14 |     },
15 |     {
16 |       "src": "icon-128x128.png",
17 |       "sizes": "128x128",
18 |       "type": "image/png"
19 |     },
20 |     {
21 |       "src": "icon-144x144.png",
22 |       "sizes": "144x144",
23 |       "type": "image/png"
24 |     },
25 |     {
26 |       "src": "icon-152x152.png",
27 |       "sizes": "152x152",
28 |       "type": "image/png"
29 |     },
30 |     {
31 |       "src": "icon-192x192.png",
32 |       "sizes": "192x192",
33 |       "type": "image/png"
34 |     },
35 |     {
36 |       "src": "icon-384x384.png",
37 |       "sizes": "384x384",
38 |       "type": "image/png"
39 |     },
40 |     {
41 |       "src": "icon-512x512.png",
42 |       "sizes": "512x512",
43 |       "type": "image/png"
44 |     }
45 |   ],
46 |   "start_url": ".",
47 |   "display": "standalone",
48 |   "theme_color": "#edce9c",
49 |   "background_color": "#edce9c"
50 | }
51 | 


--------------------------------------------------------------------------------
/public/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAdrian/dice-app/783c9057d19a7030b7d36982871175163bae476f/public/mstile-150x150.png


--------------------------------------------------------------------------------
/public/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="450.000000pt" height="450.000000pt" viewBox="0 0 450.000000 450.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,450.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M550 4234 c-179 -47 -322 -179 -382 -351 l-23 -68 0 -1565 0 -1565
13 | 23 -68 c46 -132 144 -245 266 -306 129 -65 18 -61 1816 -61 1798 0 1687 -4
14 | 1816 61 122 61 220 174 266 306 l23 68 0 1565 0 1565 -23 68 c-61 174 -205
15 | 305 -387 352 -87 22 -3310 22 -3395 -1z m932 -771 c107 -51 176 -133 204 -243
16 | 52 -204 -99 -415 -315 -439 -171 -19 -324 58 -397 200 -39 76 -45 199 -15 280
17 | 38 99 130 184 240 221 84 28 200 20 283 -19z m1853 7 c83 -32 173 -122 204
18 | -205 32 -85 27 -207 -13 -284 -139 -272 -553 -270 -686 3 -39 80 -47 153 -26
19 | 236 33 129 133 230 265 267 66 18 183 10 256 -17z m-923 -892 c75 -35 138 -94
20 | 179 -170 32 -59 34 -69 34 -158 0 -89 -2 -99 -34 -158 -41 -75 -103 -135 -179
21 | -170 -50 -24 -69 -27 -162 -27 -93 0 -112 3 -162 27 -76 35 -138 95 -179 170
22 | -32 59 -34 69 -34 158 0 84 3 101 28 148 52 98 129 165 230 198 69 23 210 14
23 | 279 -18z m-929 -891 c235 -107 286 -402 101 -581 -189 -184 -533 -111 -625
24 | 133 -30 81 -24 204 15 280 92 179 321 254 509 168z m1874 -3 c68 -33 135 -98
25 | 169 -165 39 -76 45 -199 15 -280 -75 -199 -331 -296 -526 -200 -107 53 -173
26 | 132 -201 241 -42 163 44 334 203 407 102 47 241 46 340 -3z"/>
27 | </g>
28 | </svg>
29 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from "react";
 2 | import { useGameDice } from "./useGameDice";
 3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 4 | import {
 5 |   faDiceOne,
 6 |   faDiceTwo,
 7 |   faDiceThree,
 8 |   faDiceFour,
 9 |   faDiceFive,
10 |   faDiceSix
11 | } from "@fortawesome/free-solid-svg-icons";
12 | 
13 | function App() {
14 |   const [state, api] = useGameDice(5);
15 |   const { diceValue, numberOfDice } = state;
16 | 
17 |   const getDiceClassName = useCallback(value => {
18 |     switch (value) {
19 |       case 1:
20 |         return faDiceOne;
21 |       case 2:
22 |         return faDiceTwo;
23 |       case 3:
24 |         return faDiceThree;
25 |       case 4:
26 |         return faDiceFour;
27 |       case 5:
28 |         return faDiceFive;
29 |       default:
30 |         return faDiceSix;
31 |     }
32 |   }, []);
33 | 
34 |   const handleNumberOfDiceClick = useCallback(
35 |     event => {
36 |       const { value } = event.currentTarget || event.srcElement;
37 |       const numValue = value && parseInt(value);
38 |       numValue && api.setNumberOfDice(numValue);
39 |     },
40 |     [api]
41 |   );
42 | 
43 |   return (
44 |     <section className="diceApp">
45 |       <div className="diceApp__wrapper">
46 |         <h1 className="diceApp__heading">Dice App</h1>
47 |         <article className="diceApp__container diceApp__container--primary">
48 |           {diceValue &&
49 |             diceValue.map((value, index) => (
50 |               <FontAwesomeIcon
51 |                 key={`dice-${index}`}
52 |                 className="diceApp__dice"
53 |                 icon={getDiceClassName(value)}
54 |               />
55 |             ))}
56 |         </article>
57 |         <article className="diceApp__container diceApp__container--secondary">
58 |           <button
59 |             className="button diceApp__button button--primary"
60 |             onClick={api.rollDice}
61 |           >
62 |             <strong>Roll </strong>
63 |           </button>
64 |           <button className="button diceApp__button" onClick={api.resetDice}>
65 |             <strong>Reset </strong>
66 |           </button>
67 |           <button
68 |             value={`${numberOfDice === 1 ? 5 : 1}`}
69 |             className="button button__icon  diceApp__button"
70 |             onClick={handleNumberOfDiceClick}
71 |           >
72 |             <strong>{numberOfDice === 1 ? 5 : 1} x Dice</strong>
73 |           </button>
74 |         </article>
75 |         <hr className="diceApp__divider" />
76 |         <a
77 |           className="diceApp__link"
78 |           href="https://codeAdrian.github.io"
79 |           target="_blank"
80 |           rel="noopener noreferrer"
81 |         >
82 |           By Adrian Bece
83 |         </a>
84 |       </div>
85 |     </section>
86 |   );
87 | }
88 | 
89 | export default App;
90 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --color__bg: #edce9c;
  3 |   --color__primary: #e45438;
  4 |   --color__cta: #d8433a;
  5 |   --color__cta--darker: #c23c34;
  6 |   --color__secondary: #e37f32;
  7 |   --color__secondary--darker: #cc722d;
  8 | }
  9 | 
 10 | body,
 11 | html,
 12 | #root,
 13 | .diceApp {
 14 |   min-height: 100vh;
 15 | }
 16 | 
 17 | body {
 18 |   margin: 0;
 19 |   -webkit-font-smoothing: antialiased;
 20 |   -moz-osx-font-smoothing: grayscale;
 21 |   font-size: 2rem;
 22 |   line-height: 3rem;
 23 |   font-family: "Smokum", cursive;
 24 |   background: var(--color__bg);
 25 |   letter-spacing: 3px;
 26 | }
 27 | 
 28 | .diceApp {
 29 |   text-align: center;
 30 |   display: flex;
 31 |   flex-direction: column;
 32 |   justify-content: space-around;
 33 | }
 34 | 
 35 | .diceApp__wrapper {
 36 |   padding: 2rem;
 37 |   max-width: 520px;
 38 |   margin: 0 auto;
 39 | }
 40 | 
 41 | .diceApp__dice {
 42 |   font-size: 6rem;
 43 |   line-height: 6rem;
 44 |   display: inline-block;
 45 |   color: #3f3f3f;
 46 | }
 47 | 
 48 | .diceApp__dice:only-child {
 49 |   font-size: 10rem;
 50 |   line-height: 10rem;
 51 | }
 52 | 
 53 | .diceApp__dice:not(:last-child) {
 54 |   padding-right: 1rem;
 55 | }
 56 | 
 57 | .diceApp__heading {
 58 |   font-weight: 600;
 59 |   color: var(--color__primary);
 60 |   font-size: 10rem;
 61 |   line-height: 12rem;
 62 |   margin: 0;
 63 |   padding-bottom: 3rem;
 64 | }
 65 | 
 66 | .diceApp__button {
 67 |   border: none;
 68 |   margin: 0;
 69 |   padding: 0;
 70 |   width: auto;
 71 |   overflow: visible;
 72 | 
 73 |   background: transparent;
 74 | 
 75 |   /* inherit font & color from ancestor */
 76 |   color: inherit;
 77 | 
 78 |   /* Corrects font smoothing for webkit */
 79 |   -webkit-font-smoothing: inherit;
 80 |   -moz-osx-font-smoothing: inherit;
 81 | 
 82 |   /* Corrects inability to style clickable `input` types in iOS */
 83 |   -webkit-appearance: none;
 84 |   font: inherit;
 85 |   font-size: 4rem;
 86 |   line-height: 4rem;
 87 |   font-weight: 600;
 88 | }
 89 | 
 90 | .diceApp__button:focus,
 91 | .diceApp__button::-moz-focus-inner {
 92 |   border: 0;
 93 |   outline: 0;
 94 | }
 95 | 
 96 | .diceApp__button:not(:last-child) {
 97 |   margin-right: 2rem;
 98 | }
 99 | 
100 | .button {
101 |   color: var(--color__bg);
102 |   background: var(--color__secondary);
103 |   padding: 1rem 2rem;
104 |   cursor: pointer;
105 |   transition: background 0.2s ease-out;
106 | }
107 | 
108 | .button:hover,
109 | .button:active {
110 |   background: var(--color__secondary--darker);
111 | }
112 | 
113 | .button--primary {
114 |   background: var(--color__cta);
115 |   color: var(--color__bg);
116 |   display: block;
117 |   width: 100%;
118 |   margin-bottom: 2rem;
119 | }
120 | 
121 | .button--primary:hover,
122 | .button--primary:active {
123 |   background: var(--color__cta--darker);
124 | }
125 | 
126 | .diceApp__container--primary {
127 |   padding-bottom: 3rem;
128 | }
129 | 
130 | .diceApp__divider {
131 |   margin: 2rem 0.5rem;
132 |   border: 0.2rem solid var(--color__cta);
133 |   border-width: 0.2rem;
134 |   height: 0;
135 | }
136 | 
137 | .diceApp__link,
138 | .diceApp__link:visited {
139 |   font-weight: 400;
140 |   letter-spacing: 0;
141 |   font-weight: 600;
142 |   font-size: 3rem;
143 |   text-decoration: none;
144 |   color: var(--color__primary);
145 |   padding-bottom: 0.2rem;
146 | }
147 | 
148 | @media screen and (max-width: 568px) {
149 |   html {
150 |     font-size: 0.75rem;
151 |   }
152 | }
153 | 
154 | @media screen and (max-width: 440px) {
155 |   html {
156 |     font-size: 0.65rem;
157 |   }
158 | }
159 | 
160 | @media screen and (max-width: 375px) {
161 |   html {
162 |     font-size: 0.55rem;
163 |   }
164 | }
165 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import * as serviceWorker from "./serviceWorker";
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById("root"));
 8 | 
 9 | serviceWorker.register();
10 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/useGameDice.js:
--------------------------------------------------------------------------------
 1 | import { useState, useMemo, useCallback, useEffect } from "react";
 2 | 
 3 | export const useGameDice = (initialNumberOfDice = 1, initialDiceValue = 1) => {
 4 |   const [diceValue, setDiceValue] = useState();
 5 |   const [numberOfDice, setNumberOfDice] = useState(initialNumberOfDice);
 6 | 
 7 |   const initalDiceState = useMemo(
 8 |     () => Array(numberOfDice).fill(initialDiceValue),
 9 |     [numberOfDice, initialDiceValue]
10 |   );
11 | 
12 |   const generateRandomDiceNumber = useCallback(() => {
13 |     return Math.floor(Math.random() * 6) + 1;
14 |   }, []);
15 | 
16 |   const rollDice = useCallback(() => {
17 |     const arrayConfig = { length: numberOfDice };
18 |     const newDiceValues = Array.from(arrayConfig, generateRandomDiceNumber);
19 |     setDiceValue(newDiceValues);
20 |   }, [numberOfDice, generateRandomDiceNumber]);
21 | 
22 |   const resetDice = useCallback(() => {
23 |     setDiceValue(initalDiceState);
24 |   }, [initalDiceState]);
25 | 
26 |   useEffect(() => {
27 |     setDiceValue(initalDiceState);
28 |   }, [initalDiceState]);
29 | 
30 |   const state = {
31 |     diceValue,
32 |     numberOfDice
33 |   };
34 | 
35 |   const api = useMemo(
36 |     () => ({
37 |       setNumberOfDice,
38 |       rollDice,
39 |       resetDice
40 |     }),
41 |     [setNumberOfDice, rollDice, resetDice]
42 |   );
43 | 
44 |   return [state, api];
45 | };
46 | 


--------------------------------------------------------------------------------