├── public
    ├── favicon.png
    ├── master-mind.png
    ├── manifest.json
    └── index.html
├── src
    ├── components
    │   ├── dialogs
    │   │   ├── cup.png
    │   │   ├── clover.png
    │   │   ├── tiny-brain.jpg
    │   │   ├── black-raven.png
    │   │   ├── IntroDialog.js
    │   │   └── ResultDialog.js
    │   ├── CodePegs.js
    │   ├── HiddenPegs.js
    │   ├── ColorPegs.js
    │   ├── KeyPegs.js
    │   ├── Main.css
    │   └── Board.js
    ├── App.test.js
    ├── index.js
    ├── index.css
    ├── serviceWorker.js
    └── App.js
├── .gitignore
├── README.md
└── package.json


/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/public/favicon.png


--------------------------------------------------------------------------------
/public/master-mind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/public/master-mind.png


--------------------------------------------------------------------------------
/src/components/dialogs/cup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/src/components/dialogs/cup.png


--------------------------------------------------------------------------------
/src/components/dialogs/clover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/src/components/dialogs/clover.png


--------------------------------------------------------------------------------
/src/components/dialogs/tiny-brain.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/src/components/dialogs/tiny-brain.jpg


--------------------------------------------------------------------------------
/src/components/dialogs/black-raven.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robinhuy/react-master-mind/master/src/components/dialogs/black-raven.png


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/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 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 4 |   -webkit-font-smoothing: antialiased;
 5 |   -moz-osx-font-smoothing: grayscale;
 6 |   background-color: #ddd;
 7 | }
 8 | 
 9 | code {
10 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
11 | }
12 | 
13 | img {
14 |   max-width: 100%;
15 | }
16 | 
17 | @media (max-width: 500px) {
18 |   h1 {
19 |     font-size: 2rem !important;
20 |   }
21 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Master Mind
 2 | 
 3 | Master Mind Game using ReactJS.<br>
 4 | ![preview image](public/master-mind.png)
 5 | 
 6 | ## Available Scripts
 7 | 
 8 | In the project directory, you can run:
 9 | 
10 | ### `npm start`
11 | 
12 | Runs the app in the development mode.<br>
13 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
14 | 
15 | ### `npm run build`
16 | 
17 | Builds the app for production to the `build` folder.<br>
18 | It correctly bundles React in production mode and optimizes the build for the best performance.
19 | 
20 | The build is minified and the filenames include the hashes.<br>
21 | Your app is ready to be deployed!
22 | 


--------------------------------------------------------------------------------
/src/components/CodePegs.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid } from '@material-ui/core';
 3 | import { Lens } from '@material-ui/icons';
 4 | 
 5 | import './Main.css';
 6 | 
 7 | export default function CodePegs(props) {
 8 |   const { isMobile, numberOfPegsInRow, rows, rowIndex, currentRow, currentPeg } = props;
 9 |   let codePegs = [];
10 | 
11 |   for (let i = 0; i < numberOfPegsInRow; i++) {
12 |     const index = rowIndex * numberOfPegsInRow + i;
13 | 
14 |     codePegs.push(
15 |       <Lens
16 |         key={i}
17 |         fontSize={isMobile ? 'default' : 'large'}
18 |         className={index === currentPeg ? "Code-Peg--active" : rowIndex === currentRow ? "Code-Peg" : ""}
19 |         onClick={() => props.onChangePeg(index)}
20 |         style={{ color: rows[index] }} />
21 |     );
22 |   }
23 | 
24 |   return (
25 |     <Grid container justify="space-evenly">
26 |       {codePegs}
27 |     </Grid>
28 |   );
29 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "master-mind",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "https://robinhuy.github.io/master-mind",
 6 |   "dependencies": {
 7 |     "@material-ui/core": "^4.1.1",
 8 |     "@material-ui/icons": "^4.2.0",
 9 |     "intro.js": "^2.9.3",
10 |     "react": "^16.8.6",
11 |     "react-dom": "^16.8.6",
12 |     "react-scripts": "3.0.1"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/HiddenPegs.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid } from '@material-ui/core';
 3 | import { Lens, HelpOutline } from '@material-ui/icons';
 4 | 
 5 | import './Main.css';
 6 | 
 7 | export default function HiddenPegs(props) {
 8 |   const { codes, isWin } = props;
 9 |   let codePegs = [];
10 | 
11 |   for (let i = 0; i < codes.length; i++) {
12 |     if (isWin === null) {
13 |       codePegs.push(
14 |         <HelpOutline
15 |           key={i}
16 |           fontSize="large"
17 |           style={{ color: '#555555' }} />
18 |       );
19 |     } else {
20 |       codePegs.push(
21 |         <Lens
22 |           key={i}
23 |           fontSize="large"
24 |           className={isWin ? 'Code-Peg--win' : 'Code-Peg--lose'}
25 |           style={{ color: codes[i] }} />
26 |       );
27 |     }
28 |   }
29 | 
30 |   return (
31 |     <Grid container justify="space-evenly">
32 |       {codePegs}
33 |     </Grid>
34 |   );
35 | }


--------------------------------------------------------------------------------
/src/components/dialogs/IntroDialog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
 3 | 
 4 | export default function IntroDialog(props) {
 5 |   const { openDialog, onCloseDialog, showIntro } = props
 6 |   return (
 7 |     <Dialog
 8 |       open={openDialog}
 9 | 
10 |     >
11 |       <DialogTitle>Welcome to the Mastermind Game</DialogTitle>
12 | 
13 |       <DialogContent>
14 |         <DialogContentText>
15 |           If you don't know the rule of the game, please check <a target="_blank" rel="noopener noreferrer" href="https://en.wikipedia.org/wiki/Mastermind_(board_game)">here</a>!
16 |         </DialogContentText>
17 |       </DialogContent>
18 | 
19 |       <DialogActions>
20 |         <Button onClick={onCloseDialog} color="primary">
21 |           Play Now
22 |         </Button>
23 | 
24 |         <Button onClick={showIntro} color="secondary">
25 |           View Tutorial
26 |         </Button>
27 |       </DialogActions>
28 |     </Dialog>
29 |   )
30 | }


--------------------------------------------------------------------------------
/src/components/ColorPegs.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid, Button } from '@material-ui/core';
 3 | import { Lens, Check } from '@material-ui/icons';
 4 | 
 5 | import './Main.css';
 6 | 
 7 | export default function ColorPegs(props) {
 8 |   const isMobile = props.isMobile;
 9 | 
10 |   return (
11 |     <div
12 |       className="Color-Pegs"
13 |       data-intro="Choose color here and Submit your guess."
14 |       data-step="2"
15 |       data-disable-interaction="2"
16 |     >
17 |       <Grid container alignContent="center" alignItems="center">
18 |         {props.colors.map(color =>
19 |           <Grid item xs={4} key={color}>
20 |             <Lens
21 |               className="Color-Peg"
22 |               fontSize={isMobile ? 'default' : 'large'}
23 |               style={{ color: color }}
24 |               onClick={() => props.onChooseColor(color)} />
25 |           </Grid>
26 |         )}
27 |       </Grid>
28 | 
29 |       <Button variant="outlined" size="small" color="primary" onClick={props.onSubmit}>
30 |         <Check fontSize="small" /><span style={isMobile ? { display: 'none' } : {}}> Submit</span>
31 |       </Button>
32 |     </div>
33 |   );
34 | }


--------------------------------------------------------------------------------
/src/components/KeyPegs.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Grid } from '@material-ui/core';
 3 | import { SwapHorizontalCircle, CheckCircle, PanoramaFishEye } from '@material-ui/icons';
 4 | 
 5 | export default function KeyPegs(props) {
 6 |   const { isMobile, keys, numberOfPegsInRow, rowIndex } = props;
 7 |   const fontSize = isMobile ? 'small' : 'default';
 8 |   let gridItem = [];
 9 | 
10 |   for (let i = 0; i < props.numberOfPegsInRow; i++) {
11 |     const index = rowIndex * numberOfPegsInRow + i;
12 | 
13 |     gridItem.push(
14 |       <Grid item xs={6} key={i}>
15 |         <Grid container justify="center" alignItems="center">
16 |           {keys[index] === 'black' ? (
17 |             <CheckCircle fontSize={fontSize} style={{color: 'green'}} />
18 |           ) : keys[index] === 'white' ? (
19 |             <SwapHorizontalCircle fontSize={fontSize} style={{color: 'orange'}} />
20 |           ) : (
21 |                 <PanoramaFishEye fontSize={fontSize} />
22 |               )}
23 |         </Grid>
24 |       </Grid >
25 |     )
26 |   }
27 | 
28 |   return (
29 |     <Grid container style={{ maxWidth: '55px', margin: 'auto' }}>
30 |       {gridItem}
31 |     </Grid>
32 |   );
33 | }


--------------------------------------------------------------------------------
/src/components/Main.css:
--------------------------------------------------------------------------------
 1 | .Board-Row {
 2 |   border-top: 1px solid #ddd;
 3 |   padding-left: 8px;
 4 |   padding-right: 8px;
 5 | }
 6 | 
 7 | .Board-Row--active {
 8 |   background-color: #f5f5f5;
 9 | }
10 | 
11 | .Code-Peg {
12 |   cursor: pointer;
13 |   border: 1px solid #ffffff;
14 |   border-radius: 100%;
15 | }
16 | 
17 | .Code-Peg--active, .Code-Peg--win, .Code-Peg--lose {
18 |   border-radius: 100%;
19 | }
20 | 
21 | .Code-Peg--active {
22 |   border: 1px solid #aaaaaa;
23 | }
24 | 
25 | .Code-Peg--win {
26 |   border: 1px solid #85C920;
27 | }
28 | 
29 | .Code-Peg--lose {
30 |   border: 1px solid #FF4B38;
31 | }
32 | 
33 | .Color-Pegs {
34 |   position: relative;
35 |   padding: 5px;
36 |   text-align: center;
37 |   background-color: #ffffff;
38 |   border: 1px solid #ddd;
39 | }
40 | 
41 | .Color-Pegs::before {
42 |   content: "";
43 |   position: absolute;
44 |   width: 0;
45 |   height: 0;
46 |   top: 50%;
47 |   left: -13px;
48 |   box-sizing: border-box;
49 |   border: 10px solid black;
50 |   border-color: #ffffff transparent transparent #ffffff;
51 |   transform-origin: 0 0;
52 |   transform: rotate(-45deg);
53 |   box-shadow: -1px -1px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), -1px -1px 0px 0px rgba(0, 0, 0, 0.12)
54 | }
55 | 
56 | .Color-Peg {
57 |   cursor: pointer;
58 | }
59 | 
60 | .Color-Peg:hover {
61 |   opacity: 0.9;
62 | }
63 | 
64 | .Color-Peg:active {
65 |   opacity: 0.6;
66 | }
67 | 
68 | .Step-Number {
69 |   text-align: center;
70 |   font-size: 1.5rem;
71 |   font-weight: bold;
72 |   color: #6a6a6a;
73 | }


--------------------------------------------------------------------------------
/src/components/dialogs/ResultDialog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core';
 3 | import { Refresh } from '@material-ui/icons';
 4 | 
 5 | import clover from './clover.png';
 6 | import cup from './cup.png';
 7 | import blackRaven from './black-raven.png';
 8 | import tinyBrain from './tiny-brain.jpg';
 9 | 
10 | export default function ResultDialog(props) {
11 |   const { openDialog, isWin, currentRow, onCloseDialog, onRestartGame, hasRestartedGame } = props
12 | 
13 |   let textContent = '';
14 |   let image = null;
15 | 
16 |   if (isWin) {
17 |     if (currentRow < 2) {
18 |       textContent = 'You are the luckies person in the world!';
19 |       image = clover;
20 |     } else {
21 |       textContent = 'You are the champion!';
22 |       image = cup;
23 |     }
24 |   } else {
25 |     if (!hasRestartedGame) {
26 |       textContent = 'Better luck next time!';
27 |       image = blackRaven;
28 |     } else {
29 |       textContent = 'You must think harder!';
30 |       image = tinyBrain;
31 |     }
32 |   }
33 | 
34 |   return (
35 |     <Dialog
36 |       open={openDialog}
37 |       maxWidth="xs"
38 |       fullWidth={true}
39 |       style={{ textAlign: 'center' }}
40 |     >
41 |       <DialogTitle>
42 |         {isWin ? 'Congratulation' : 'Game Over'}
43 |       </DialogTitle>
44 | 
45 |       <DialogContent>
46 |         <DialogContentText>
47 |           <img src={image} alt="result" />
48 |           <div>{textContent}</div>
49 |         </DialogContentText>
50 |       </DialogContent>
51 | 
52 |       <DialogActions style={{ justifyContent: 'center' }}>
53 |         <Button onClick={onRestartGame} color="primary" autoFocus>
54 |           <Refresh fontSize="small" /> Play Again
55 |         </Button>
56 | 
57 |         <Button onClick={onCloseDialog} color="secondary">
58 |           Review Board
59 |         </Button>
60 |       </DialogActions>
61 |     </Dialog>
62 |   )
63 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="description" content="Master Mind Game using ReactJS.">
 8 |     <meta property="fb:app_id" content="1060439867385425">
 9 |     <meta property="og:site_name" content="robinhuy.github.io">
10 |     <meta property="og:title" content="Master Mind">
11 |     <meta property="og:description" content="Master Mind Game using ReactJS.">
12 |     <meta property="og:image" content="%PUBLIC_URL%/master-mind.png">
13 |     <meta property="og:image:type" content="image/png">
14 |     <meta property="og:url" content="https://robinhuy.github.io/master-mind/">
15 |     <meta property="og:type" content="product">
16 |     <!--
17 |       manifest.json provides metadata used when your web app is installed on a
18 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
19 |     -->
20 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
21 |     <!--
22 |       Notice the use of %PUBLIC_URL% in the tags above.
23 |       It will be replaced with the URL of the `public` folder during the build.
24 |       Only files inside the `public` folder can be referenced from the HTML.
25 | 
26 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27 |       work correctly both with client-side routing and a non-root public URL.
28 |       Learn how to configure a non-root public URL by running `npm run build`.
29 |     -->
30 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
31 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
32 |     
33 |     <title>Master Mind</title>
34 | 
35 |     <script>
36 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
37 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
38 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
39 |       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
40 |       ga('create', 'UA-86889005-1', 'auto');
41 |       ga('send', 'pageview');
42 |     </script>
43 |   </head>
44 |   <body>
45 |     <noscript>You need to enable JavaScript to run this app.</noscript>
46 |     <div id="root"></div>
47 |     <!--
48 |       This HTML file is a template.
49 |       If you open it directly in the browser, you will see an empty page.
50 | 
51 |       You can add webfonts, meta tags, or analytics to this file.
52 |       The build step will place the bundled scripts into the <body> tag.
53 | 
54 |       To begin the development, run `npm start` or `yarn start`.
55 |       To create a production bundle, use `npm run build` or `yarn build`.
56 |     -->
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/src/components/Board.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Paper, List, ListItem, Grid, Button } from '@material-ui/core';
  3 | import { Refresh } from '@material-ui/icons';
  4 | 
  5 | import KeyPegs from './KeyPegs';
  6 | import CodePegs from './CodePegs';
  7 | import ColorPegs from './ColorPegs';
  8 | import HiddenPegs from './HiddenPegs';
  9 | 
 10 | export default function Board(props) {
 11 |   const { isMobile, numberOfRows, numberOfPegsInRow, codes, rows, keys, currentRow, currentPeg, colors, isWin, onRestartGame } = props
 12 |   let listItems = [];
 13 | 
 14 |   for (let i = 0; i < numberOfRows; i++) {
 15 |     const isCurrentRow = (currentRow === i);
 16 | 
 17 |     listItems.push(
 18 |       <ListItem
 19 |         key={i}
 20 |         disableGutters={true}
 21 |         className={isCurrentRow ? 'Board-Row Board-Row--active' : 'Board-Row'}
 22 |       >
 23 |         <Grid container alignContent="center" alignItems="center">
 24 |           {i === 0 ? (
 25 |             <Grid
 26 |               item xs={2}
 27 |               data-intro="Feedback of your guess: Green icon is correct in both color and position, Orange icon is correct color but wrong position."
 28 |               data-step="4"
 29 |               data-disable-interaction="4"
 30 |             >
 31 |               <KeyPegs keys={keys} numberOfPegsInRow={numberOfPegsInRow} rowIndex={i} isMobile={isMobile} />
 32 |             </Grid>
 33 |           ) : (
 34 |               <Grid item xs={2}>
 35 |                 <KeyPegs keys={keys} numberOfPegsInRow={numberOfPegsInRow} rowIndex={i} isMobile={isMobile} />
 36 |               </Grid>
 37 |             )}
 38 | 
 39 |           {i === 0 ? (
 40 |             <Grid
 41 |               item xs={isMobile ? 6 : 7}
 42 |               data-intro="Your guess in each turn."
 43 |               data-step="3"
 44 |               data-disable-interaction="3"
 45 |             >
 46 |               <CodePegs
 47 |                 rows={rows}
 48 |                 numberOfPegsInRow={numberOfPegsInRow}
 49 |                 rowIndex={i}
 50 |                 currentRow={currentRow}
 51 |                 currentPeg={currentPeg}
 52 |                 isMobile={isMobile}
 53 |                 onChangePeg={props.onChangePeg} />
 54 |             </Grid>
 55 |           ) : (
 56 |               <Grid item xs={isMobile ? 6 : 7}>
 57 |                 <CodePegs
 58 |                   rows={rows}
 59 |                   numberOfPegsInRow={numberOfPegsInRow}
 60 |                   rowIndex={i}
 61 |                   currentRow={currentRow}
 62 |                   currentPeg={currentPeg}
 63 |                   isMobile={isMobile}
 64 |                   onChangePeg={props.onChangePeg} />
 65 |               </Grid>
 66 |             )}
 67 | 
 68 |           <Grid item xs={isMobile ? 4 : 3}>
 69 |             {isCurrentRow && isWin === null &&
 70 |               <ColorPegs
 71 |                 colors={colors}
 72 |                 isWin={isWin}
 73 |                 isMobile={isMobile}
 74 |                 onChooseColor={props.onChooseColor}
 75 |                 onSubmit={props.onSubmit} />
 76 |             }
 77 |           </Grid>
 78 |         </Grid>
 79 |       </ListItem>
 80 |     );
 81 |   }
 82 | 
 83 |   const hiddenRowIndex = numberOfRows + 1
 84 |   listItems.push(
 85 |     <ListItem
 86 |       disableGutters={true}
 87 |       key={hiddenRowIndex}
 88 |       className={'Board-Row'}
 89 |       style={{ paddingTop: '15px' }}
 90 |     >
 91 |       <Grid container alignContent="center" alignItems="center">
 92 |         <Grid item xs={2}>
 93 |           <div className="Step-Number">{currentRow}</div>
 94 |         </Grid>
 95 | 
 96 |         <Grid
 97 |           item xs={7}
 98 |           data-intro="Result of the game, display at the end game."
 99 |           data-step="5"
100 |           data-disable-interaction="5"
101 |         >
102 |           <HiddenPegs codes={codes} isWin={isWin} />
103 |         </Grid>
104 | 
105 |         <Grid item xs={3}>
106 |           <Grid container justify="center" alignItems="center">
107 |             <Button onClick={onRestartGame} color="primary">
108 |               <Refresh fontSize="small" /> Restart
109 |             </Button>
110 |           </Grid>
111 |         </Grid>
112 |       </Grid>
113 |     </ListItem>
114 |   )
115 | 
116 |   return (
117 |     <Paper
118 |       data-intro={`Try to guess the pattern, in both order and color, within ${numberOfRows} turns.`}
119 |       data-step="1"
120 |       data-disable-interaction="1"
121 |     >
122 |       <List>{listItems}</List>
123 |     </Paper>
124 |   );
125 | }


--------------------------------------------------------------------------------
/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/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Container, AppBar, Toolbar, Typography } from '@material-ui/core';
  3 | import introJs from 'intro.js';
  4 | import 'intro.js/minified/introjs.min.css';
  5 | 
  6 | import Board from './components/Board';
  7 | import ResultDialog from './components/dialogs/ResultDialog';
  8 | import IntroDialog from './components/dialogs/IntroDialog';
  9 | 
 10 | class App extends React.Component {
 11 |   constructor(props) {
 12 |     super(props);
 13 |     this.state = {
 14 |       colors: ['#FFB400', '#FF5A5F', '#8CE071', '#00D1C1', '#007A87', '#7B0051'],
 15 |       numberOfRows: 8,
 16 |       numberOfPegsInRow: 4,
 17 |       codes: [],
 18 |       rows: [],
 19 |       keys: [],
 20 |       currentRow: 0,
 21 |       currentPeg: 0,
 22 |       openIntroDialog: false,
 23 |       openResultDialog: false,
 24 |       isWin: null,
 25 |       hasRestartedGame: false,
 26 |       isMobile: false
 27 |     };
 28 |   }
 29 | 
 30 |   _generateRandomCodes = () => {
 31 |     const { colors, numberOfPegsInRow } = this.state;
 32 |     let codes = [];
 33 | 
 34 |     for (let i = 0; i < numberOfPegsInRow; i++) {
 35 |       codes.push(colors[Math.floor(Math.random() * colors.length)]);
 36 |     }
 37 | 
 38 |     return codes;
 39 |   }
 40 | 
 41 |   _initGame = () => {
 42 |     const { numberOfPegsInRow, numberOfRows } = this.state;
 43 |     const length = numberOfRows * numberOfPegsInRow;
 44 | 
 45 |     this.setState({
 46 |       codes: this._generateRandomCodes(),
 47 |       rows: Array(length).fill('gray'),
 48 |       keys: Array(length).fill('gray'),
 49 |       currentRow: 0,
 50 |       currentPeg: 0,
 51 |       openResultDialog: false,
 52 |       isWin: null
 53 |     });
 54 |   }
 55 | 
 56 |   componentDidMount() {
 57 |     this._initGame();
 58 | 
 59 |     if (window.matchMedia && window.matchMedia('(max-width: 500px)').matches) {
 60 |       this.setState({ isMobile: true })
 61 |     }
 62 | 
 63 |     // Only show intro dialog if it's the first time visiting page
 64 |     const isVisited = localStorage.getItem('isVisited');
 65 |     if (!isVisited) {
 66 |       this.setState({ openIntroDialog: true })
 67 |     }
 68 |   }
 69 | 
 70 |   _showIntro = () => {
 71 |     this.setState({ openIntroDialog: false })
 72 |     introJs().setOption('showStepNumbers', false).start();
 73 |     localStorage.setItem('isVisited', '1');
 74 |   }
 75 | 
 76 |   _onChooseColor = (color) => {
 77 |     const { rows, currentPeg, numberOfPegsInRow } = this.state;
 78 |     let newRows = Array.from(rows);
 79 |     newRows[currentPeg] = color;
 80 | 
 81 |     this.setState({ rows: newRows });
 82 | 
 83 |     // Only change the current peg when it is not the final peg in row
 84 |     if ((currentPeg + 1) % numberOfPegsInRow !== 0) {
 85 |       this.setState({ currentPeg: currentPeg + 1 });
 86 |     }
 87 |   }
 88 | 
 89 |   _onChangePeg = (index) => {
 90 |     const { currentRow, numberOfPegsInRow } = this.state;
 91 |     const startIndex = currentRow * numberOfPegsInRow;
 92 |     const endIndex = startIndex + numberOfPegsInRow;
 93 | 
 94 |     if (index >= startIndex && index < endIndex) {
 95 |       this.setState({ currentPeg: index });
 96 |     }
 97 |   }
 98 | 
 99 |   _onSubmit = () => {
100 |     const { codes, rows, keys, currentRow, numberOfRows, numberOfPegsInRow } = this.state;
101 |     const startIndex = currentRow * numberOfPegsInRow;
102 |     let newCodes = Array.from(codes);
103 |     let newRows = Array.from(rows);
104 |     let newKeys = Array.from(keys);
105 |     let numberOfBlackPegs = 0;
106 |     let numberOfWhitePegs = 0;
107 | 
108 |     // Count black pegs
109 |     for (let i = 0; i < numberOfPegsInRow; i++) {
110 |       const index = startIndex + i;
111 | 
112 |       if (newRows[index] === newCodes[i]) {
113 |         numberOfBlackPegs++;
114 |         delete (newRows[index]);
115 |         delete (newCodes[i]);
116 |       }
117 |     }
118 | 
119 |     // Count white pegs
120 |     for (let i = 0; i < numberOfPegsInRow; i++) {
121 |       const index = startIndex + i;
122 |       const indexOfPeg = newCodes.indexOf(newRows[index])
123 | 
124 |       if (indexOfPeg !== -1) {
125 |         numberOfWhitePegs++;
126 |         delete (newRows[index]);
127 |         delete (newCodes[indexOfPeg])
128 |       }
129 |     }
130 | 
131 |     // Update key pegs
132 |     for (let i = 0; i < numberOfBlackPegs; i++) {
133 |       newKeys[startIndex + i] = 'black';
134 |     }
135 |     for (let i = numberOfBlackPegs; i < numberOfBlackPegs + numberOfWhitePegs; i++) {
136 |       newKeys[startIndex + i] = 'white';
137 |     }
138 |     this.setState({ keys: newKeys });
139 | 
140 |     // Check win
141 |     if (numberOfBlackPegs === numberOfPegsInRow) {
142 |       this.setState({
143 |         openResultDialog: true,
144 |         isWin: true
145 |       })
146 |     } else if (currentRow === numberOfRows - 1) {
147 |       this.setState({
148 |         openResultDialog: true,
149 |         isWin: false
150 |       })
151 |     } else {
152 |       this.setState({
153 |         currentPeg: (currentRow + 1) * numberOfPegsInRow
154 |       });
155 |     }
156 | 
157 |     // Increase step
158 |     this.setState({ currentRow: currentRow + 1 })
159 |   }
160 | 
161 |   _onCloseIntroDialog = () => {
162 |     this.setState({ openIntroDialog: false })
163 |   }
164 | 
165 |   _onCloseResultDialog = () => {
166 |     this.setState({ openResultDialog: false })
167 |   }
168 | 
169 |   _onRestartGame = () => {
170 |     this.setState({ hasRestartedGame: true });
171 | 
172 |     this._initGame();
173 | 
174 |     var body = document.body;
175 |     var html = document.documentElement;
176 |     body.scrollTop = 0;
177 |     html.scrollTop = 0;
178 |   }
179 | 
180 |   render() {
181 |     const { openIntroDialog, openResultDialog, isWin, hasRestartedGame, currentRow } = this.state
182 | 
183 |     return (
184 |       <Container
185 |         maxWidth="sm"
186 |         style={{ marginTop: '15px' }}
187 |       >
188 |         <AppBar color="primary" position="static">
189 |           <Toolbar style={{ justifyContent: 'center' }}>
190 |             <Typography variant="h3" component="h1">
191 |               Master Mind
192 |           </Typography>
193 |           </Toolbar>
194 |         </AppBar>
195 | 
196 |         <Board
197 |           {...this.state}
198 |           onChangePeg={this._onChangePeg}
199 |           onChooseColor={this._onChooseColor}
200 |           onSubmit={this._onSubmit}
201 |           onRestartGame={this._onRestartGame}
202 |         />
203 | 
204 |         <ResultDialog
205 |           openDialog={openResultDialog}
206 |           currentRow={currentRow}
207 |           isWin={isWin}
208 |           hasRestartedGame={hasRestartedGame}
209 |           onCloseDialog={this._onCloseResultDialog}
210 |           onRestartGame={this._onRestartGame} />
211 | 
212 |         <IntroDialog
213 |           openDialog={openIntroDialog}
214 |           onCloseDialog={this._onCloseIntroDialog}
215 |           showIntro={this._showIntro} />
216 |       </Container>
217 |     );
218 |   }
219 | }
220 | 
221 | export default App;
222 | 


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