├── public
    ├── favicon.ico
    ├── favicon.png
    ├── social-image.png
    ├── icons
    │   ├── launcher-icon-1x.png
    │   ├── launcher-icon-2x.png
    │   └── launcher-icon-4x.png
    ├── manifest.json
    ├── shapesLibrary.json
    └── index.html
├── src
    ├── media
    │   ├── icon-play.svg
    │   ├── icon-right-arrow.svg
    │   ├── icon-pause.svg
    │   ├── icon-cross.svg
    │   ├── icon-facebook.svg
    │   ├── icon-twitter.svg
    │   ├── icon-link.svg
    │   ├── icon-reset.svg
    │   └── icon-github.svg
    ├── controls
    │   ├── inputs
    │   │   ├── index.js
    │   │   ├── Checkbox.js
    │   │   └── Select.js
    │   ├── Counter.js
    │   ├── ControlButton.js
    │   ├── modals
    │   │   ├── ImportShapeModal.js
    │   │   ├── AboutModal.js
    │   │   ├── SaveShapeModal.js
    │   │   └── ManageShapesModal.js
    │   └── Controls.js
    ├── index.js
    ├── test
    │   └── App.test.js
    ├── css
    │   ├── index.css
    │   ├── App.css
    │   ├── controls
    │   │   ├── ControlButton.css
    │   │   ├── inputs.css
    │   │   ├── Modal.css
    │   │   └── Controls.css
    │   └── Footer.css
    ├── config
    │   ├── colorThemes.js
    │   ├── configHandler.js
    │   └── defaultConfig.js
    ├── Footer.js
    ├── notifications.js
    ├── shapesHandler.js
    ├── utils.js
    └── App.js
├── CHANGELOG.md
├── .gitignore
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── env.js
    ├── paths.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── scripts
    ├── test.js
    ├── build.js
    └── start.js
├── LICENSE
├── README.md
├── CONTRIBUTING.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/public/social-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/social-image.png


--------------------------------------------------------------------------------
/public/icons/launcher-icon-1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/icons/launcher-icon-1x.png


--------------------------------------------------------------------------------
/public/icons/launcher-icon-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/icons/launcher-icon-2x.png


--------------------------------------------------------------------------------
/public/icons/launcher-icon-4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sarcadass/yagol/HEAD/public/icons/launcher-icon-4x.png


--------------------------------------------------------------------------------
/src/media/icon-play.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="-115 213 32 32">
2 |   <polygon points="-113.2,245 -84.8,229 -113.2,213"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/media/icon-right-arrow.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 24 24">
2 |   <polygon points="7.408,0.021 4.613,2.815 13.797,12 4.613,21.184 7.408,23.979 19.387,12"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/controls/inputs/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from './Checkbox'
2 | import Select from './Select'
3 | import '../../css/controls/inputs.css'
4 | 
5 | export { Checkbox, Select }
6 | 


--------------------------------------------------------------------------------
/src/media/icon-pause.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="-140.5 229.3 32 32">
2 |   <rect x="-136.4" y="229.3" width="8.3" height="32"/>
3 |   <rect x="-120.9" y="229.3" width="8.3" height="32"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | import './css/index.css'
5 | 
6 | ReactDOM.render(<App />, document.getElementById('app'))
7 | 


--------------------------------------------------------------------------------
/src/media/icon-cross.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="-48 -48 120 120">
2 | 	<path d="M72,52.9l-41.6-41l41-41.4L52.9-48L11.9-6.4l-41.5-41L-48-29.1l41.6,41.2l-41,41.6L-29.1,72l41.2-41.6 l41.4,41L72,52.9z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/media/icon-facebook.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 16 16">
2 |   <path d="M8,5.333H6V8h2v8h3.334V8h2.428L14,5.333h-2.666V4.222c0-0.637,0.127-0.889,0.742-0.889H14V0h-2.539 C9.064,0,8,1.055,8,3.077V5.333z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## v1.1.0
 2 | 
 3 | ### New Shape
 4 | 
 5 | - Add **Double Glider** shape ([@earl](https://github.com/earle))
 6 | 
 7 | ### Miscellaneous
 8 | 
 9 | - Update dependencies
10 | - Update README
11 | - Add CHANGELOG
12 | 


--------------------------------------------------------------------------------
/src/test/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 | })
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # misc
10 | .DS_Store
11 | .env
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | .idea/
16 | *.code-workspace
17 | 


--------------------------------------------------------------------------------
/src/css/index.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   position: fixed;
 4 |   overflow: hidden;
 5 | }
 6 | 
 7 | body {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   margin: 0;
11 |   padding: 0;
12 |   font-family: "Roboto Mono", monospace;
13 |   font-size: 100%;
14 |   color: #fff;
15 |   background-color: #333;
16 |   touch-action: none;
17 | }
18 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/controls/Counter.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import utils from '../utils'
 3 | 
 4 | export default class Counter extends Component {
 5 |   render() {
 6 |     let count = utils.formatDigits(this.props.iterationCount)
 7 |     let label = this.props.iterationCount > 1 ? ' iterations' : ' iteration'
 8 |     return (<div className="info counter">{count + label}</div>)
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/css/App.css:
--------------------------------------------------------------------------------
 1 | .main-wrapper {
 2 |   position: absolute;
 3 |   display: flex;
 4 |   width: 100%;
 5 |   height: 100%;
 6 |   align-items: center;
 7 |   justify-content: center;
 8 |   overflow: hidden;
 9 |   user-select: none;
10 | }
11 | 
12 | #game {
13 |   display: block;
14 |   margin-top: -28px;
15 |   cursor: crosshair;
16 |   touch-action: none;
17 | }
18 | 
19 | .ReactModalPortal {
20 |   position: relative;
21 |   z-index: 2;
22 | }
23 | 
24 | a {
25 |   color: inherit;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/css/controls/ControlButton.css:
--------------------------------------------------------------------------------
 1 | .play-cta {
 2 |   width: 80px;
 3 | }
 4 | 
 5 | .play-cta .icon {
 6 |   width: .75em;
 7 |   margin-right: 5px;
 8 | }
 9 | 
10 | .options-cta .icon {
11 |   width: .75em;
12 |   transform: rotate(90deg) scale(1);
13 |   margin-right: 5px;
14 |   transition: transform .3s;
15 | }
16 | 
17 | .options-cta.open .icon {
18 |   transform: rotate(90deg) scale(-1);
19 | }
20 | 
21 | .reset-cta .icon {
22 |   width: 1em;
23 |   transform: translateY(1px);
24 |   margin-right: 4px;
25 | }
26 | 


--------------------------------------------------------------------------------
/src/media/icon-twitter.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 16 16">
2 |   <path d="M16,3.538c-0.588,0.261-1.221,0.437-1.885,0.516c0.677-0.406,1.198-1.049,1.442-1.816c-0.634,0.376-1.337,0.65-2.084,0.797 c-0.599-0.638-1.452-1.037-2.396-1.037c-2.119,0-3.676,1.977-3.198,4.03c-2.727-0.137-5.146-1.444-6.765-3.43 c-0.86,1.475-0.446,3.405,1.016,4.383C1.592,6.964,1.085,6.817,0.644,6.571C0.607,8.092,1.698,9.514,3.276,9.83 C2.814,9.956,2.308,9.985,1.793,9.887C2.21,11.19,3.422,12.14,4.86,12.166c-1.38,1.082-3.119,1.565-4.86,1.36 C1.453,14.458,3.179,15,5.032,15c6.094,0,9.539-5.146,9.33-9.763C15.003,4.774,15.561,4.195,16,3.538z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | process.env.NODE_ENV = 'test';
 4 | process.env.PUBLIC_URL = '';
 5 | 
 6 | // Load environment variables from .env file. Suppress warnings using silent
 7 | // if this file is missing. dotenv will never modify any environment variables
 8 | // that have already been set.
 9 | // https://github.com/motdotla/dotenv
10 | require('dotenv').config({silent: true});
11 | 
12 | const jest = require('jest');
13 | const argv = process.argv.slice(2);
14 | 
15 | // Watch unless on CI or in coverage mode
16 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
17 |   argv.push('--watch');
18 | }
19 | 
20 | 
21 | jest.run(argv);
22 | 


--------------------------------------------------------------------------------
/src/media/icon-link.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="-48 -48 120 120">
2 |   <path d="M-17.1-4.4c2.2-2.2,4.6-4,7.2-5.4c14.4-8,32.9-3.7,42.2,10.3L21.2,11.7C17.9,4.4,9.9,0.2,2,2 c-3,0.7-5.8,2.2-8.2,4.5L-27.7,28c-6.5,6.5-6.5,17.2,0,23.7s17.2,6.5,23.7,0l6.6-6.6c6,2.4,12.5,3.4,18.9,2.9L6.9,62.6 c-12.6,12.6-32.9,12.6-45.5,0s-12.6-32.9,0-45.5C-38.6,17.1-17.1-4.4-17.1-4.4z M17.1-38.6L2.5-23.9c6.4-0.5,12.9,0.5,18.9,2.9 l6.6-6.6c6.5-6.5,17.2-6.5,23.7,0s6.5,17.2,0,23.7L30.2,17.5c-6.6,6.6-17.2,6.5-23.7,0C5,16,3.7,14.1,2.8,12.3L-8.4,23.5 c1.2,1.8,2.4,3.3,4,4.9c4.1,4.1,9.2,7.1,15.2,8.5c7.7,1.9,16,0.8,23.1-3.1c2.6-1.4,5-3.2,7.2-5.4L62.6,6.9 c12.6-12.6,12.6-32.9,0-45.5C50-51.1,29.7-51.1,17.1-38.6z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Yagol",
 3 |   "name": "Yagol - Game of Life sandbox",
 4 |   "author": "Benjamin Blonde",
 5 |   "icons": [
 6 |     {
 7 |       "src": "icons/launcher-icon-1x.png",
 8 |       "type": "image/png",
 9 |       "sizes": "48x48"
10 |     },
11 |     {
12 |       "src": "icons/launcher-icon-2x.png",
13 |       "type": "image/png",
14 |       "sizes": "96x96"
15 |     },
16 |     {
17 |       "src": "icons/launcher-icon-4x.png",
18 |       "type": "image/png",
19 |       "sizes": "192x192"
20 |     }
21 |   ],
22 |   "start_url": "index.html?launcher=true",
23 |   "display": "standalone",
24 |   "background_color": "#eee",
25 |   "theme_color": "#eee"
26 | }


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/src/media/icon-reset.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 512 512">
2 |   <path d="M256.026,0c-24.816,0-45.004,20.188-45.004,45.004v181.016c0,24.816,20.188,45.004,45.004,45.004 s45.004-20.188,45.004-45.004V45.004C301.03,20.188,280.842,0,256.026,0z"/>
3 |   <path d="M406.625,118.959c-18.939-17.083-46.502-15.14-63.041,1.873c-16.632,17.109-17.917,46.086,3.153,65.296 c33.44,30.395,50.343,76.459,42.336,122.928c-10.868,63.067-65.717,112.767-133.05,112.915 c-68.971,0.152-121.809-50.77-132.708-110.617c-8.497-46.747,7.179-93.553,41.972-125.197c21.01-19.127,19.913-48.232,3.234-65.36 c-16.567-17.013-44.295-18.851-63.4-1.56c-52.909,47.923-80.527,118.769-72.843,190.58C44.496,423.995,140.9,512,256.553,512 c114.326,0,207.934-88.216,222.368-194.743C488.985,243.027,461.957,168.899,406.625,118.959z"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/config/colorThemes.js:
--------------------------------------------------------------------------------
 1 | /* Color themes */
 2 | export default {
 3 |   'default (dark)': {
 4 |     background: '#252525',
 5 |     deadCell: '#373737',
 6 |     aliveCell: '#007300',
 7 |     cellText: '#000',
 8 |     cellGraphText: '#fff',
 9 |     footerText: '#fff',
10 |     controlsBackground: 'rgba(0,0,0,.75)',
11 |     buttonHoverBackground: '#252525',
12 |     controlsText: '#fff',
13 |     controlsBorder: '#444'
14 |   },
15 | 
16 |   'default (light)': {
17 |     background: '#eee',
18 |     deadCell: '#ddd',
19 |     aliveCell: '#59d459',
20 |     cellText: '#555',
21 |     cellGraphText: '#000',
22 |     footerText: '#000',
23 |     controlsBackground: 'rgba(255,255,255,.9)',
24 |     buttonHoverBackground: '#eee',
25 |     controlsText: '#444',
26 |     controlsBorder: '#bbb'
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/controls/inputs/Checkbox.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Checkbox extends Component {
 4 |   constructor(props) {
 5 |     super(props)
 6 |     this.handleChange = this.handleChange.bind(this)
 7 |   }
 8 | 
 9 |   handleChange(event) {
10 |     this.props.handleChange(event)
11 |   }
12 | 
13 |   render() {
14 |     return (
15 |       <div className="checkbox-wrapper">
16 |         <input type="checkbox"
17 |                id={this.props.id}
18 |                onChange={this.handleChange}
19 |                disabled={this.props.isDisabled}
20 |                checked={this.props.isChecked} />
21 |         <label htmlFor={this.props.id} title={this.props.title ? this.props.title : ''}>
22 |           <span className="checkbox-icon"></span>
23 |           <span className="label-text">{this.props.label}</span>
24 |         </label>
25 |       </div>
26 |     )
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/media/icon-github.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 25 25">
2 |   <path d="M12.476,0C5.587,0,0,5.586,0,12.476 c0,5.512,3.575,10.189,8.533,11.842c0.623,0.113,0.853-0.271,0.853-0.604c0-0.296-0.011-1.279-0.017-2.32 c-3.471,0.754-4.203-1.473-4.203-1.473c-0.568-1.444-1.386-1.827-1.386-1.827c-1.132-0.772,0.085-0.758,0.085-0.758 c1.253,0.088,1.913,1.286,1.913,1.286c1.113,1.908,2.919,1.356,3.631,1.039c0.112-0.81,0.435-1.358,0.791-1.67 c-2.771-0.315-5.684-1.385-5.684-6.167c0-1.362,0.487-2.475,1.286-3.349c-0.13-0.314-0.558-1.582,0.121-3.301 c0,0,1.047-0.336,3.432,1.278c0.995-0.276,2.062-0.415,3.122-0.419c1.061,0.004,2.129,0.143,3.125,0.419 c2.384-1.614,3.43-1.278,3.43-1.278c0.68,1.719,0.25,2.987,0.122,3.301c0.801,0.874,1.283,1.986,1.283,3.349 c0,4.792-2.918,5.847-5.696,6.157c0.447,0.385,0.847,1.146,0.847,2.309c0,1.671-0.015,3.015-0.015,3.424 c0,0.333,0.224,0.723,0.855,0.602c4.957-1.652,8.526-6.329,8.526-11.84C24.953,5.586,19.365,0,12.476,0z"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/config/configHandler.js:
--------------------------------------------------------------------------------
 1 | import defaultConfig from './defaultConfig'
 2 | import colorThemes from '../config/colorThemes'
 3 | 
 4 | export default {
 5 |   save: configToSave => {
 6 |     let savedConfig = localStorage.getItem('savedConfig')
 7 |     let newConfig = savedConfig ? JSON.parse(savedConfig) : {}
 8 |     Object.assign(newConfig, configToSave)
 9 |     localStorage.setItem('savedConfig', JSON.stringify(newConfig))
10 |   },
11 | 
12 |   get: () => ({
13 |     ...defaultConfig,
14 |     ...JSON.parse(localStorage.getItem('savedConfig'))
15 |   }),
16 | 
17 |   getModalStyle: theme => ({
18 |     overlay: defaultConfig.modalStyle.overlay,
19 |     content: {
20 |       ...defaultConfig.modalStyle.content,
21 |       ...{
22 |         background: colorThemes[theme].controlsBackground,
23 |         color: colorThemes[theme].footerText,
24 |         borderColor: colorThemes[theme].footerText,
25 |       }
26 |     }
27 |   })
28 | }
29 | 


--------------------------------------------------------------------------------
/src/controls/inputs/Select.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | export default class Select extends Component {
 4 |   constructor(props) {
 5 |     super(props)
 6 |     this.handleChange = this.handleChange.bind(this)
 7 |   }
 8 | 
 9 |   handleChange(event) {
10 |     this.props.handleChange(event, this.props.type)
11 |   }
12 | 
13 |   render() {
14 |     return (
15 |       <div className="input-block select-wrapper">
16 |         <label className="input-label">
17 |           <span>{this.props.label}</span>
18 |           <select className="input-style"
19 |                   value={this.props.defaultValue}
20 |                   onChange={this.handleChange}>
21 |             {this.props.options.map((el, index) => {
22 |               return <option key={index}
23 |                              value={el[0]}>{el[1]}</option>
24 |             })}
25 |           </select>
26 |         </label>
27 |       </div>
28 |     )
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 Benjamin Blonde
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/config/defaultConfig.js:
--------------------------------------------------------------------------------
 1 | /* Default config */
 2 | export default {
 3 |   // Responsive
 4 |   mobileThreshold: 560,
 5 |   // Basic
 6 |   bodyPaddingX: 14,
 7 |   bodyPaddingY: 28,
 8 |   randomSeedThreshold: 4, // (100 / n)% alive cells
 9 |   colorTheme: 'default (light)', // See './colorThemes.js'
10 |   // Options
11 |   isControlsOpen: true,
12 |   isOptionsOpen: false,
13 |   showNeighborsCount: false,
14 |   randomSeed: false,
15 |   timeCompressionList: [
16 |     [1000, '1 iteration / second'],
17 |     [500, '2 iterations / second'],
18 |     [250, '4 iterations / second'],
19 |     [125, '8 iterations / second'],
20 |     [0, 'Real Time']
21 |   ],
22 |   timeCompression: 250,
23 |   cellSizesList: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
24 |   cellSize: 12,
25 |   borderSizesList: [0, 1, 2, 3, 4, 5, 6],
26 |   borderSize: 1,
27 |   // Modal style
28 |   modalStyle: {
29 |     overlay: { backgroundColor: 'rgba(0, 0, 0, .5)' },
30 |     content: {
31 |       position: 'absolute',
32 |       width: '260px',
33 |       background: 'rgba(0,0,0,.75)',
34 |       overflow: 'auto',
35 |       WebkitOverflowScrolling: 'touch',
36 |       outline: 'none',
37 |       padding: '15px'
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 4 | // injected into the application via DefinePlugin in Webpack configuration.
 5 | 
 6 | var REACT_APP = /^REACT_APP_/i;
 7 | 
 8 | function getClientEnvironment(publicUrl) {
 9 |   var raw = Object
10 |     .keys(process.env)
11 |     .filter(key => REACT_APP.test(key))
12 |     .reduce((env, key) => {
13 |       env[key] = process.env[key];
14 |       return env;
15 |     }, {
16 |       // Useful for determining whether we’re running in production mode.
17 |       // Most importantly, it switches React into the correct mode.
18 |       'NODE_ENV': process.env.NODE_ENV || 'development',
19 |       // Useful for resolving the correct path to static assets in `public`.
20 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
21 |       // This should only be used as an escape hatch. Normally you would put
22 |       // images into the `src` and `import` them in code to get their paths.
23 |       'PUBLIC_URL': publicUrl
24 |     });
25 |   // Stringify all values so we can feed into Webpack DefinePlugin
26 |   var stringified = {
27 |     'process.env': Object
28 |       .keys(raw)
29 |       .reduce((env, key) => {
30 |         env[key] = JSON.stringify(raw[key]);
31 |         return env;
32 |       }, {})
33 |   };
34 | 
35 |   return { raw, stringified };
36 | }
37 | 
38 | module.exports = getClientEnvironment;
39 | 


--------------------------------------------------------------------------------
/src/controls/ControlButton.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import '../css/controls/ControlButton.css'
 3 | import IconPlay from '../media/icon-play.svg'
 4 | import IconPause from '../media/icon-pause.svg'
 5 | import IconReset from '../media/icon-reset.svg'
 6 | import IconRightArrow from '../media/icon-right-arrow.svg'
 7 | 
 8 | export default class ControlButton extends Component {
 9 |   constructor(props) {
10 |     super(props)
11 |     this.handleChange = this.handleChange.bind(this)
12 |   }
13 | 
14 |   handleChange() {this.props.handleChange()}
15 | 
16 |   render() {
17 |     return (
18 |       <button className={this.props.className}
19 |               alt={this.props.alt}
20 |               title={this.props.title}
21 |               onClick={this.handleChange}>
22 | 
23 |         {this.props.type === 'play' ?
24 |           <IconPlay className="icon" width={9} height={9} fill={this.props.color} />
25 |         : ''}
26 | 
27 |         {this.props.type === 'pause' ?
28 |           <IconPause className="icon" width={9} height={9} fill={this.props.color} />
29 |         : ''}
30 | 
31 |         {this.props.type === 'reset' ?
32 |           <IconReset className="icon" width={11} height={11} fill={this.props.color} />
33 |         : ''}
34 | 
35 |         {this.props.type === 'options' ?
36 |           <IconRightArrow className="icon" width={9} height={9} fill={this.props.color} />
37 |         : ''}
38 | 
39 |         {this.props.buttonLabel}
40 |       </button>
41 |     )
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Yagol
 2 | 
 3 | Yet Another Game Of Life. Yagol is a Conway's Game of Life sandbox made with ReactJs. Customize the different options then create, share and watch your shapes evolve.
 4 | This app was created with the excellent [create-react-app](https://github.com/facebook/create-react-app).
 5 | 
 6 | ![Yagol Intro Animation](https://media.giphy.com/media/QfHUF4DU6HB9erASmv/giphy.gif "Yagol Intro Animation")
 7 | 
 8 | **See the [app site](http://sarcadass.github.io/yagol)**.
 9 | 
10 | 
11 | ## Installing Yagol locally
12 | 
13 | - Clone this repo
14 | - In the folder you cloned the repo run `npm install`
15 | - Launch the local server (with hot js/css reloading) with `npm start` (note that it will be less performant than the builded version, see how to use the builded version below)
16 | 
17 | ## Build the project and use it locally
18 | 
19 | - Install yagol locally (see above)
20 | - Run `npm build`
21 | - You will have to use a local web server and set `build/` as your root folder to run Yagol if you want to use the default shapes
22 | - To do that you can use [http-server](https://github.com/indexzero/http-server). install it globally (`npm install http-server -g`) then set `build/` as your current working directory (`cd build`) then run `http-server`. The URL where you can access Yagol should be written in your terminal
23 | 
24 | 
25 | ## Dependencies
26 | 
27 | - [react-modal](https://github.com/reactjs/react-modal)
28 | - [react-notification-system](https://github.com/igorprado/react-notification-system)
29 | - [react-svg-loader](https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loader)
30 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | You have different ways to contribute to this projects, see how to below.
 3 | 
 4 | 
 5 | ## Submitting a bug
 6 | If you find a bug, you can open an issue (make sure there is not a similar issue already open). Please be the more descriptive as possible:
 7 | 
 8 | - What is the bug
 9 | - What is the OS and web browser you encountered the bug with
10 | - What is the exact scenario to reproduce the bug
11 | 
12 | 
13 | ## Adding a default shape
14 | If you had created an interesting shape and you want to make it available as a default shape to everyone who use Yagol, follow these steps:
15 | 
16 | - Fork this repository
17 | - Install Yagol locally (see how to on [README](https://github.com/sarcadass/yagol/blob/master/README.md))
18 | - Save your shape as a custom shape
19 | - Decode the shape export string with this [site](https://www.base64decode.org/)
20 | - Save the decoded object in a new key with the same name as your shape in the `public/shapesLibrary.json` file
21 | - Commit your changes (without the builded files)
22 | - Submit a PR
23 | 
24 | 
25 | ## Adding a color theme
26 | If you want to add a new color theme for Yagol, follow these steps:
27 | 
28 | - Fork this repository
29 | - Install Yagol locally (see how to on [README](https://github.com/sarcadass/yagol/blob/master/README.md))
30 | - Create a new color theme with a name in `src/config/colorThemes.js` (copy-paste an existing one and change the color values)
31 | - Commit your changes (without the builded files)
32 | - Submit a PR
33 | 
34 | 
35 | ## Adding a new feature
36 | If you want to add a new feature, create an issue with the 'enhancement' tag first.
37 | 


--------------------------------------------------------------------------------
/src/controls/modals/ImportShapeModal.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactModal from 'react-modal'
 3 | 
 4 | export default class SaveShapeModal extends Component {
 5 |   constructor(props) {
 6 |     super(props)
 7 |     this.handleShowModal = this.handleShowModal.bind(this)
 8 |     this.importShape = this.importShape.bind(this)
 9 |   }
10 | 
11 |   handleShowModal() {
12 |     this.props.handleShowModal()
13 |   }
14 | 
15 |   importShape(event) {
16 |     event.preventDefault()
17 |     this.props.importShape(this.shapeImportInput.value)
18 |   }
19 | 
20 |   render() {
21 |     return (
22 |       <div>
23 |         <ReactModal
24 |           isOpen={this.props.showModal}
25 |           contentLabel="onRequestClose Example"
26 |           onRequestClose={this.handleShowModal}
27 |           style={this.props.modalStyle}
28 |           className={{
29 |             base: 'modal import-shape-modal',
30 |             afterOpen: 'modal-opened',
31 |             beforeClose: 'modal-closed'
32 |         }}>
33 |           <h2>Import a custom shape</h2>
34 |           <form onSubmit={this.importShape}>
35 |             <p>Paste the shape export string below.</p>
36 |             <input className="input-style"
37 |               type="text"
38 |               placeholder="Paste shape export string here"
39 |               ref={input => this.shapeImportInput = input} />
40 |             <input type="submit" className="input-style small-cta" value="Import shape" />
41 |           </form>
42 |           <button className="input-style small-cta" onClick={this.handleShowModal}>Close</button>
43 |         </ReactModal>
44 |       </div>
45 |     )
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/controls/modals/AboutModal.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactModal from 'react-modal'
 3 | 
 4 | export default class AboutModal extends Component {
 5 |   constructor(props) {
 6 |     super(props)
 7 |     this.handleShowModal = this.handleShowModal.bind(this)
 8 |   }
 9 | 
10 |   handleShowModal() {
11 |     this.props.handleShowModal()
12 |   }
13 | 
14 |   render() {
15 |     return (
16 |       <div>
17 |         <ReactModal
18 |            isOpen={this.props.showModal}
19 |            contentLabel="onRequestClose Example"
20 |            onRequestClose={this.handleShowModal}
21 |            style={this.props.modalStyle}
22 |            className={{
23 |             base: 'modal modal-about',
24 |             afterOpen: 'modal-opened',
25 |             beforeClose: 'modal-closed'
26 |           }}
27 |         >
28 |           <h2>About this project</h2>
29 |           <p>This project is a <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank" rel="noopener">Conway's Game of Life</a> sandbox game, it is coded with <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noopener">create-react-app</a>.</p>
30 |           <p>I created this project to learn <a href="https://github.com/facebook/react" target="_blank">react</a>, created by <a href="https://twitter.com/Sarcadass" target="_blank" rel="noopener">Benjamin Blonde</a>, MIT License.</p>
31 |           <p>You can find the <a href="https://github.com/sarcadass/yagol" target="_blank" rel="noopener">Github repo here</a>.</p>
32 |           <button className="input-style small-cta" onClick={this.handleShowModal}>Close</button>
33 |         </ReactModal>
34 |       </div>
35 |     )
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/css/Footer.css:
--------------------------------------------------------------------------------
 1 | footer {
 2 |   position: absolute;
 3 |   display: flex;
 4 |   justify-content: space-between;
 5 |   bottom: 0;
 6 |   left: 0;
 7 |   right: 0;
 8 |   padding: 5px 15px;
 9 |   font-family: Helvetica, Arial, sans-serif;
10 | }
11 | 
12 | footer .credits-wrapper {
13 |   margin: 0;
14 |   line-height: 15px;
15 |   font-size: 9px;
16 |   text-align: right;
17 | }
18 | 
19 | footer .credits-wrapper .first-row {
20 |   display: block;
21 | }
22 | 
23 | footer .credits-wrapper strong {
24 |   font-size: 11px;
25 | }
26 | 
27 | footer .social-share-wrapper {
28 |   display: flex;
29 |   align-items: center;
30 | }
31 | 
32 | footer .social-share-wrapper a {
33 |   display: block;
34 |   margin-right: 10px;
35 | }
36 | 
37 | footer .social-share-wrapper a:last-child {
38 |   margin-right: 0;
39 | }
40 | 
41 | footer .social-share-wrapper .github {
42 |   height: 20px;
43 | }
44 | 
45 | footer .social-share-wrapper .social-cta {
46 |   position: relative;
47 |   padding: 5px 10px 5px 23px;
48 |   color: #fff;
49 |   font-size: 10px;
50 |   text-decoration: none;
51 |   text-shadow: 1px 1px 1px rgba(0,0,0,.5);
52 |   transition: background-color .15s;
53 | }
54 | 
55 | footer .social-share-wrapper .social-cta.facebook {
56 |   background-color: #3b5998;
57 | }
58 | 
59 | footer .social-share-wrapper .social-cta.facebook:hover {
60 |   background-color: #4264aa;
61 | }
62 | 
63 | footer .social-share-wrapper .social-cta.twitter {
64 |   background-color: #1dcaff;
65 | }
66 | 
67 | footer .social-share-wrapper .social-cta.twitter:hover {
68 |   background-color: #37d0ff;
69 | }
70 | 
71 | footer .social-share-wrapper .social-cta svg {
72 |   position: absolute;
73 |   left: 5px;
74 |   top: 5px;
75 | }
76 | 
77 | @media screen and (max-width: 489px) {
78 |   footer .social-share-wrapper {
79 |     display: none;
80 |   }
81 | 
82 |   footer .credits-wrapper {
83 |     width: 100%;
84 |     text-align: center;
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/src/css/controls/inputs.css:
--------------------------------------------------------------------------------
 1 | .input-block {
 2 |   padding-top: 1em;
 3 | }
 4 | 
 5 | .input-label {
 6 |   display: block;
 7 |   margin: 0;
 8 |   font-size: 1em;
 9 | }
10 | 
11 | .input-label span {
12 |   display: block;
13 |   padding-bottom: .375em;
14 |   margin: 0;
15 |   font-size: .75em;
16 |   text-transform: uppercase;
17 |   font-weight: normal;
18 | }
19 | 
20 | .input-style {
21 |   display: block;
22 |   height: 2.334em;
23 |   width: 100%;
24 |   padding: 5px;
25 |   border: solid 1px currentColor;
26 |   background-color: transparent;
27 |   font-size: 12px;
28 |   color: inherit;
29 |   box-sizing: border-box;
30 |   border-radius: 0;
31 | }
32 | 
33 | .small-cta {
34 |   text-transform: uppercase;
35 |   cursor: pointer;
36 |   background-color: rgba(0,0,0,0);
37 |   transition: all .3s;
38 | }
39 | 
40 | .small-cta.disabled {
41 |   opacity: .5;
42 |   cursor: not-allowed;
43 |   text-decoration: line-through;
44 | }
45 | 
46 | /* CHECKBOX */
47 | .checkbox-wrapper {
48 |   padding-bottom: .25em;
49 | }
50 | 
51 | .checkbox-wrapper input[type=checkbox] {
52 |   display: none;
53 | }
54 | .checkbox-wrapper input[type=checkbox] + label {
55 |   font-size: .75em;
56 |   opacity: 1;
57 |   transition: opacity .3s;
58 | }
59 | 
60 | .checkbox-wrapper input[type=checkbox]:disabled + label {
61 |   opacity: .5;
62 |   cursor: not-allowed;
63 |   text-decoration: line-through;
64 | }
65 | 
66 | .checkbox-wrapper label {
67 |   position: relative;
68 |   display: inline-block;
69 |   cursor: pointer;
70 |   line-height: 20px;
71 | }
72 | 
73 | .checkbox-wrapper label .checkbox-icon {
74 |   position: absolute;
75 |   display: block;
76 |   width: 7px;
77 |   height: 7px;
78 |   top: 3px;
79 |   border: solid 1px;
80 | }
81 | 
82 | .checkbox-wrapper label .label-text {
83 |   display: block;
84 |   padding-left: 14px;
85 |   line-height: 1.3em;
86 | } 
87 | 
88 | /* SELECT */
89 | .select-wrapper option {
90 |   color: #000;
91 | }
92 | 


--------------------------------------------------------------------------------
/public/shapesLibrary.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "Yagol": {
 3 |     "name": "Yagol",
 4 |     "lifeMap": [0,44,88,132,176,1,45,89,133,177,220,221,222,223,224,225,264,265,266,267,268,269,270,226,182,138,94,50,6,7,51,95,139,183,227,271,315,359,403,447,491,535,534,533,532,531,530,529,528,484,485,486,487,488,489,490,446,402,358,314,537,493,449,405,361,317,273,229,185,141,97,53,9,10,11,12,13,14,15,16,60,104,148,192,236,280,324,368,412,456,500,544,543,499,455,411,367,323,279,147,103,191,235,59,58,57,55,54,56,98,142,186,230,274,318,450,494,538,406,362,231,232,233,234,275,276,277,278,18,62,106,150,194,238,282,326,370,414,458,502,19,20,21,22,23,24,25,546,547,548,549,550,551,552,553,509,465,421,377,333,63,107,151,195,239,283,327,371,415,459,503,241,242,243,244,245,289,285,286,287,288,332,376,420,464,508,507,506,505,504,69,68,67,66,65,64,27,28,29,30,31,32,33,34,555,511,467,423,379,335,291,247,203,159,115,71,556,557,558,559,560,561,562,518,474,430,386,342,298,254,210,166,122,78,77,121,165,209,253,297,341,385,429,473,517,516,515,514,513,512,468,424,380,336,292,248,204,160,116,72,73,74,75,76,36,564,565,566,567,568,569,570,571,520,476,432,388,344,300,256,212,168,124,80,527,526,525,524,523,522,521,477,433,389,345,301,257,213,169,125,81,37],
 5 |     "shapeSize": [44,13]
 6 |   },
 7 | 
 8 |   "Glider": {
 9 |     "name": "Glider",
10 |     "shapeSize": [3,3],
11 |     "lifeMap": [6,7,8,5,1]
12 |   },
13 | 
14 |   "Double Glider": {
15 |     "name": "Double Glider",
16 |     "shapeSize": [5,5],
17 |     "lifeMap": [20,15,10,5,0,6,12,18,24,19,14,9,4]
18 |   },
19 | 
20 |   "Exploder": {
21 |     "name": "Exploder",
22 |     "shapeSize": [5,5],
23 |     "lifeMap": [0,10,5,15,20,22,2,4,9,14,19,24]
24 |   },
25 | 
26 |   "10 Cells Row": {
27 |     "name": "10 cells row",
28 |     "shapeSize": [10,1],
29 |     "lifeMap": [0,1,2,3,4,5,6,7,8,9]
30 |   },
31 | 
32 |   "Small Spaceship": {
33 |     "name": "Small Spaceship",
34 |     "shapeSize": [5,4],
35 |     "lifeMap": [15,5,18,14,9,4,3,2,1]
36 |   },
37 | 
38 |   "Tumblr": {
39 |     "name": "Tumblr",
40 |     "shapeSize": [7,6],
41 |     "lifeMap": [2,1,8,9,4,11,12,5,18,25,32,16,23,30,40,41,34,27,36,35,28,21]
42 |   },
43 | 
44 |   "Gosper Glider Gun": {
45 |     "name": "Gosper Glider Gun",
46 |     "shapeSize": [38,15],
47 |     "lifeMap": [76,77,115,114,122,160,161,85,86,124,168,206,244,169,208,98,99,60,23,24,62,480,481,482,518,557,72,34,35,73,301,302,341,339,377]
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/controls/modals/SaveShapeModal.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactModal from 'react-modal'
 3 | 
 4 | export default class SaveShapeModal extends Component {
 5 |   constructor(props) {
 6 |     super(props)
 7 |     this.handleShowModal = this.handleShowModal.bind(this)
 8 |     this.saveShape = this.saveShape.bind(this)
 9 |     this.selectLink = this.selectLink.bind(this)
10 |   }
11 | 
12 |   handleShowModal() {
13 |     this.props.handleShowModal()
14 |   }
15 | 
16 |   saveShape(event) {
17 |     event.preventDefault()
18 |     this.props.saveShape(this.shapeNameInput.value)
19 |   }
20 | 
21 |   selectLink(event) {
22 |     this.shapeNameLink.setSelectionRange(0, this.shapeNameLink.value.length)
23 |   }
24 | 
25 |   render() {
26 |     return (
27 |       <div>
28 |         <ReactModal 
29 |           isOpen={this.props.showModal}
30 |           contentLabel="onRequestClose Example"
31 |           onRequestClose={this.handleShowModal}
32 |           style={this.props.modalStyle}
33 |           className={{
34 |             base: 'modal',
35 |             afterOpen: 'modal-opened',
36 |             beforeClose: 'modal-closed'
37 |         }}>
38 |           <h2>Save & share your shape</h2>
39 |           { // Display save shape form if not saved yet
40 |           !this.props.activeShape.name ?
41 |             <form onSubmit={this.saveShape}>
42 |               <p>To save your shape,<br/>you need to give it a name.</p>
43 |               <input className="input-style"
44 |                 type="text"
45 |                 placeholder="Shape name"
46 |                 maxLength={30}
47 |                 ref={input => this.shapeNameInput = input}
48 |                 />
49 |               <input type="submit" className="input-style small-cta" value="Save shape" />
50 |             </form>
51 |           : // Display saved notif and shape export string in a read-only input
52 |             <div>
53 |               <p className="green-notification">✓ Custom shape saved</p>
54 |               <p>Share this shape by sending the shape export string below:</p>
55 |               <input className="input-style share-link-input"
56 |                 type="text"
57 |                 readOnly="true"
58 |                 ref={input => this.shapeNameLink = input}
59 |                 onClick={this.selectLink}
60 |                 value={this.props.activeShape.exportString} />
61 |             </div>
62 |           }
63 |           <button className="input-style small-cta" onClick={this.handleShowModal}>Close</button>
64 |         </ReactModal>
65 |       </div>
66 |     )
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/css/controls/Modal.css:
--------------------------------------------------------------------------------
  1 | .ReactModal__Overlay {
  2 |   display: flex;
  3 |   justify-content: center;
  4 | }
  5 | 
  6 | .modal {
  7 |   text-align: center;
  8 |   align-self: center;
  9 | }
 10 | 
 11 | .modal h2 {
 12 |   text-transform: uppercase;
 13 |   font-size: 16px;
 14 |   margin: 0;
 15 |   border-bottom: solid 1px;
 16 |   border-bottom-color: currentColor;
 17 |   padding-bottom: 10px;
 18 | }
 19 | 
 20 | .modal p {
 21 |   font-size: 12px;
 22 | }
 23 | 
 24 | .modal hr {
 25 |   margin: 20px 0;
 26 | }
 27 | 
 28 | /* Save shape modal */
 29 | .modal .input-style {
 30 |   width: 80%;
 31 |   margin: 0 auto 10px;
 32 | }
 33 | 
 34 | .import-shape-modal .input-style {
 35 |   text-align: center;
 36 | }
 37 | 
 38 | .modal .green-notification {
 39 |   font-size: 16px;
 40 |   color: #2ecc71;
 41 | }
 42 | 
 43 | .modal .loader-wrapper {
 44 |   margin-bottom: 16px; 
 45 | }
 46 | 
 47 | .modal .loader {
 48 |   display: block;
 49 |   margin: 0 auto;
 50 |   width: 25px;
 51 |   height: 25px;
 52 |   border-width: 8px;
 53 |   border-style: solid;
 54 |   border-radius: 50%;
 55 |   animation: loader-spin 2s linear infinite;
 56 | }
 57 | 
 58 | @keyframes loader-spin {
 59 |   0% { transform: rotate(0deg) }
 60 |   100% { transform: rotate(360deg) }
 61 | }
 62 | 
 63 | /* Handle shapes modal */
 64 | .modal .shapes-list {
 65 |   max-height: 236px;
 66 |   padding: 0 10px;
 67 |   margin: 10px 0 20px;
 68 |   overflow: auto;
 69 |   list-style-type: none;
 70 | }
 71 | 
 72 | .modal .shapes-list li {
 73 |   display: flex;
 74 |   justify-content: space-between;
 75 |   padding: 7px 0;
 76 |   border-bottom: solid 1px;
 77 |   border-bottom-color: currentColor;
 78 |   line-height: 16px;
 79 | }
 80 | 
 81 | .modal .shapes-list h6 {
 82 |   flex-basis: 74%;
 83 |   text-align: left;
 84 |   margin: 0;
 85 |   font-size: 12px;
 86 |   word-break: break-all;
 87 | }
 88 | 
 89 | .modal .shapes-list .shape-size {
 90 |   font-size: 10px;
 91 |     margin-left: 5px;
 92 |     color: #aaa;
 93 | }
 94 | 
 95 | .modal .actions-wrapper {
 96 |   display: flex;
 97 |   flex-direction: row-reverse;
 98 | }
 99 | 
100 | .modal .action-icon {
101 |   display: block;
102 |   width: 14px;
103 |   height: 14px;
104 |   padding: 2px;
105 |   margin-left: 8px;
106 |   cursor: pointer;
107 |   opacity: .5;
108 | }
109 | 
110 | .modal .action-icon:hover {
111 |   opacity: 1;
112 | }
113 | 
114 | .modal .action-icon:last-child {
115 |   margin-left: 0
116 | }
117 | 
118 | /* Handle shapes modal */
119 | .modal.modal-about p {
120 |   line-height: 1.6em;
121 |   font-family: Helvetica, Arial, sans-serif;
122 | }
123 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!-- 
 3 | ██╗   ██╗ █████╗  ██████╗  ██████╗ ██╗
 4 | ╚██╗ ██╔╝██╔══██╗██╔════╝ ██╔═══██╗██║
 5 |  ╚████╔╝ ███████║██║  ███╗██║   ██║██║
 6 |   ╚██╔╝  ██╔══██║██║   ██║██║   ██║██║
 7 |    ██║   ██║  ██║╚██████╔╝╚██████╔╝███████╗
 8 |    ╚═╝   ╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚══════╝
 9 | -->
10 | <html lang="en">
11 |   <head>
12 |     <title>Yagol - Yet Another Game Of Life</title>
13 |     <meta name="description" content="Yagol is a Conway's Game of Life sandbox made with ReactJs. Customize the different options then create, share and watch your shapes evolve.">
14 |     <meta charset="utf-8">
15 |     <meta name="theme-color" content="#111">
16 |     <meta name="mobile-web-app-capable" content="yes">
17 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
18 |     <link rel="shortcut icon" href="favicon.ico">
19 |     <link rel="manifest" href="manifest.json">
20 |     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400" rel="stylesheet">
21 |     <!-- Facebook metas -->
22 |     <meta name="og:url" content="https://sarcadass.github.io/yagol">
23 |     <meta name="og:type" content="website">
24 |     <meta name="og:title" content="Yagol">
25 |     <meta name="og:description" content="Yagol is a Conway's Game of Life sandbox made with ReactJs. Customize the different options then create, share and watch your shapes evolve.">
26 |     <meta name="og:image" content="https://sarcadass.github.io/yagol/social-image.png">
27 |     <!-- Twitter metas -->
28 |     <meta name="twitter:card" content="summary_large_image">
29 |     <meta name="twitter:creator" content="@Sarcadass">
30 |     <meta name="twitter:title" content="Yagol">
31 |     <meta name="twitter:description" content="Yagol is a Conway's Game of Life sandbox made with ReactJs. Customize the different options then create, share and watch your shapes evolve.">
32 |     <meta name="twitter:image" content="https://sarcadass.github.io/yagol/social-image.png">
33 |     <meta name="twitter:image:width" content="600">
34 |     <meta name="twitter:image:height" content="315">
35 |   </head>
36 |   <body>
37 |     <noscript>This webapp use Javascript to work, please enable Javascript to use it.</noscript>
38 |     <div id="app"></div>
39 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120928312-1"></script>
40 |     <script>
41 |       window.dataLayer = window.dataLayer || [];
42 |       function gtag(){dataLayer.push(arguments);}
43 |       gtag('js', new Date());
44 |       gtag('config', 'UA-120928312-1');
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/src/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import colorThemes from './config/colorThemes'
 3 | import IconGithub from './media/icon-github.svg'
 4 | import IconFacebook from './media/icon-facebook.svg'
 5 | import IconTwitter from './media/icon-twitter.svg'
 6 | import AboutModal from './controls/modals/AboutModal'
 7 | import pckg from '../package.json'
 8 | const twitterLink = `https://twitter.com/intent/tweet?text=${encodeURIComponent(pckg.description)}
 9 | &via=Sarcadass&url=${encodeURIComponent(pckg.url)}`
10 | import './css/Footer.css'
11 | 
12 | export default class Footer extends Component {
13 |   constructor(props) {
14 |     super(props)
15 |     this.state = { isAboutModalOpen: false }
16 |     this.handleAboutModal = this.handleAboutModal.bind(this)
17 |   }
18 | 
19 |   handleAboutModal(event) {
20 |     if (event) event.preventDefault()
21 |     this.setState(prevState => {
22 |       return { isAboutModalOpen: !prevState.isAboutModalOpen }
23 |     })
24 |   }
25 | 
26 |   render() {
27 |     return (
28 |       <footer style={{ color: colorThemes[this.props.colorTheme].footerText }}>
29 |         <div className="social-share-wrapper">
30 |           {/* Github Link */}
31 |           <a className="github" href="https://github.com/sarcadass/yagol" target="_blank" rel="noopener">
32 |             <IconGithub width={20} height={20} fill={colorThemes[this.props.colorTheme].footerText} />
33 |           </a>
34 |           {/* Share on Facebook */}
35 |           <a className="social-cta facebook" href={`http://www.facebook.com/sharer.php?u=${encodeURIComponent(pckg.url)}`} target="_blank" rel="noopener">
36 |             <IconFacebook width={12} height={12} fill="#fff" /> Share on Facebook
37 |           </a>
38 |           {/* Share on Twitter */}
39 |           <a className="social-cta twitter" href={twitterLink} target="_blank" rel="noopener">
40 |             <IconTwitter width={12} height={12} fill="#fff" /> Share on Twitter
41 |           </a>
42 |           <AboutModal showModal={this.state.isAboutModalOpen}
43 |                         handleShowModal={this.handleAboutModal}
44 |                         colorTheme={this.props.colorTheme}
45 |                         modalStyle={this.props.modalStyle}/>
46 |         </div>
47 | 
48 |         <p className="credits-wrapper">
49 |           <span className="first-row">
50 |             <strong>Yagol v{pckg.version}. </strong>
51 |             <a className="about-modal-cta"
52 |                href="#open-about-modal"
53 |                onClick={this.handleAboutModal}>
54 |               About this project</a>.
55 |           </span>
56 |           Created by <a href="https://twitter.com/Sarcadass" target="_blank" rel="noopener">{pckg.author}</a>, {pckg.license} license.
57 |         </p>
58 |       </footer>
59 |     )
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var path = require('path');
 4 | var fs = require('fs');
 5 | var url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | var appDirectory = fs.realpathSync(process.cwd());
10 | function resolveApp(relativePath) {
11 |   return path.resolve(appDirectory, relativePath);
12 | }
13 | 
14 | // We support resolving modules according to `NODE_PATH`.
15 | // This lets you use absolute paths in imports inside large monorepos:
16 | // https://github.com/facebookincubator/create-react-app/issues/253.
17 | 
18 | // It works similar to `NODE_PATH` in Node itself:
19 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
20 | 
21 | // We will export `nodePaths` as an array of absolute paths.
22 | // It will then be used by Webpack configs.
23 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
24 | 
25 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
26 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
27 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
28 | 
29 | var nodePaths = (process.env.NODE_PATH || '')
30 |   .split(process.platform === 'win32' ? ';' : ':')
31 |   .filter(Boolean)
32 |   .filter(folder => !path.isAbsolute(folder))
33 |   .map(resolveApp);
34 | 
35 | var envPublicUrl = process.env.PUBLIC_URL;
36 | 
37 | function ensureSlash(path, needsSlash) {
38 |   var hasSlash = path.endsWith('/');
39 |   if (hasSlash && !needsSlash) {
40 |     return path.substr(path, path.length - 1);
41 |   } else if (!hasSlash && needsSlash) {
42 |     return path + '/';
43 |   } else {
44 |     return path;
45 |   }
46 | }
47 | 
48 | function getPublicUrl(appPackageJson) {
49 |   return envPublicUrl || require(appPackageJson).homepage;
50 | }
51 | 
52 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
53 | // "public path" at which the app is served.
54 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
55 | // single-page apps that may serve index.html for nested URLs like /todos/42.
56 | // We can't use a relative path in HTML because we don't want to load something
57 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
58 | function getServedPath(appPackageJson) {
59 |   var publicUrl = getPublicUrl(appPackageJson);
60 |   var servedUrl = envPublicUrl || (
61 |     publicUrl ? url.parse(publicUrl).pathname : '/'
62 |   );
63 |   return ensureSlash(servedUrl, true);
64 | }
65 | 
66 | // config after eject: we're in ./config/
67 | module.exports = {
68 |   appBuild: resolveApp('build'),
69 |   appPublic: resolveApp('public'),
70 |   appHtml: resolveApp('public/index.html'),
71 |   appIndexJs: resolveApp('src/index.js'),
72 |   appPackageJson: resolveApp('package.json'),
73 |   appSrc: resolveApp('src'),
74 |   yarnLockFile: resolveApp('yarn.lock'),
75 |   testsSetup: resolveApp('src/setupTests.js'),
76 |   appNodeModules: resolveApp('node_modules'),
77 |   nodePaths: nodePaths,
78 |   publicUrl: getPublicUrl(resolveApp('package.json')),
79 |   servedPath: getServedPath(resolveApp('package.json'))
80 | };
81 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "yagol",
  3 |   "version": "1.1.0",
  4 |   "description": "Yagol is a Conway's Game of Life sandbox game made with react. Customize the different options then create, share and watch your shapes evolve.",
  5 |   "author": "Benjamin Blonde",
  6 |   "license": "MIT",
  7 |   "url": "http://sarcadass.github.io/yagol",
  8 |   "private": true,
  9 |   "homepage": ".",
 10 |   "repository": {
 11 |     "type": "git",
 12 |     "url": "https://github.com/sarcadass/yagol"
 13 |   },
 14 |   "dependencies": {
 15 |     "babel-plugin-react-svg": "^2.1.0",
 16 |     "react": "^15.6.1",
 17 |     "react-dom": "^15.6.1",
 18 |     "react-modal": "^3.1.10",
 19 |     "react-notification-system": "^0.2.15",
 20 |     "react-svg-loader": "^2.1.0"
 21 |   },
 22 |   "devDependencies": {
 23 |     "autoprefixer": "6.7.2",
 24 |     "babel-core": "^6.26.3",
 25 |     "babel-eslint": "7.1.1",
 26 |     "babel-jest": "18.0.0",
 27 |     "babel-loader": "6.2.10",
 28 |     "babel-preset-react-app": "^2.2.0",
 29 |     "babel-runtime": "^6.26.0",
 30 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 31 |     "chalk": "1.1.3",
 32 |     "connect-history-api-fallback": "1.3.0",
 33 |     "cross-spawn": "4.0.2",
 34 |     "css-loader": "0.26.1",
 35 |     "detect-port": "1.1.0",
 36 |     "dotenv": "2.0.0",
 37 |     "eslint": "3.16.1",
 38 |     "eslint-config-react-app": "^0.6.2",
 39 |     "eslint-loader": "1.6.0",
 40 |     "eslint-plugin-flowtype": "2.21.0",
 41 |     "eslint-plugin-import": "^2.12.0",
 42 |     "eslint-plugin-jsx-a11y": "4.0.0",
 43 |     "eslint-plugin-react": "6.4.1",
 44 |     "extract-text-webpack-plugin": "1.0.1",
 45 |     "file-loader": "0.10.0",
 46 |     "fs-extra": "0.30.0",
 47 |     "html-webpack-plugin": "2.24.0",
 48 |     "http-proxy-middleware": "^0.18.0",
 49 |     "jest": "18.1.0",
 50 |     "json-loader": "0.5.4",
 51 |     "object-assign": "4.1.1",
 52 |     "postcss-loader": "1.2.2",
 53 |     "promise": "7.1.1",
 54 |     "react-dev-utils": "^0.5.2",
 55 |     "style-loader": "0.13.1",
 56 |     "url-loader": "0.5.7",
 57 |     "webpack": "1.14.0",
 58 |     "webpack-dev-server": "1.16.2",
 59 |     "webpack-manifest-plugin": "1.1.0",
 60 |     "whatwg-fetch": "2.0.2"
 61 |   },
 62 |   "scripts": {
 63 |     "start": "node scripts/start.js",
 64 |     "build": "node scripts/build.js",
 65 |     "test": "node scripts/test.js --env=jsdom"
 66 |   },
 67 |   "jest": {
 68 |     "collectCoverageFrom": [
 69 |       "src/**/*.{js,jsx}"
 70 |     ],
 71 |     "setupFiles": [
 72 |       "<rootDir>/config/polyfills.js"
 73 |     ],
 74 |     "testPathIgnorePatterns": [
 75 |       "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
 76 |     ],
 77 |     "testEnvironment": "node",
 78 |     "testURL": "http://localhost",
 79 |     "transform": {
 80 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
 81 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
 82 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
 83 |     },
 84 |     "transformIgnorePatterns": [
 85 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
 86 |     ],
 87 |     "moduleNameMapper": {
 88 |       "^react-native$": "react-native-web"
 89 |     }
 90 |   },
 91 |   "babel": {
 92 |     "presets": [
 93 |       "react-app"
 94 |     ]
 95 |   },
 96 |   "eslintConfig": {
 97 |     "extends": "react-app"
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/notifications.js:
--------------------------------------------------------------------------------
  1 | let notif
  2 | const displayNotification = options =>
  3 |   notif.addNotification({
  4 |     title: options.title,
  5 |     message: options.message,
  6 |     position: options.position || 'bc',
  7 |     level: options.level || 'info',
  8 |     autoDismiss: options.autoDismiss || 4,
  9 |     action: options.action || null
 10 |   })
 11 | const isNotificationAlreadyOpen = title => {
 12 |   if (notif.state.notifications.length) {
 13 |     for (let i = 0; i < notif.state.notifications.length; i++) {
 14 |       if (notif.state.notifications[i].title === title) return true
 15 |     }
 16 |   }
 17 |   return false
 18 | }
 19 | 
 20 | export default {
 21 |   init: notificationSystem => notif = notificationSystem,
 22 | 
 23 |   clearAll: () => notif.clearNotifications(),
 24 | 
 25 |   /* APP */
 26 |   showNeighborsCountDisabled: () => displayNotification({
 27 |     title: 'Show Neighbors count disabled',
 28 |     message: 'The show neighbors counter is disabled when the cell size is under 10 pixels.',
 29 |   }),
 30 | 
 31 |   cellBorderSizeChanged: () => displayNotification({
 32 |     title: 'Cell/Border Size changed',
 33 |     message: 'The cell/border size has changed to adapt the grid size to the shape size.',
 34 |   }),
 35 | 
 36 |   shapeIsTooBig: () => displayNotification({
 37 |     title: 'Shape is too big',
 38 |     message: 'Shape is too big to fit in the canvas. Try to enlarge your window then reset and reload the shape.',
 39 |     level: 'error',
 40 |     autoDismiss: 8
 41 |   }),
 42 | 
 43 |   shapeLoadedAndSaved: () => displayNotification({
 44 |     title: 'Shape loaded',
 45 |     message: 'The shape has been successfully loaded and saved in your custom shapes library.',
 46 |     level: 'success',
 47 |     autoDismiss: 6
 48 |   }),
 49 | 
 50 |   cellOrBorderSizeTooBig: () => displayNotification({
 51 |     title: 'Cell or border is too big',
 52 |     message: 'Please reduce the cell or border size.',
 53 |     level: 'error'
 54 |   }),
 55 | 
 56 |   resizeGridPrompt: callback => {
 57 |     const title = 'Window size changed'
 58 |     if (!isNotificationAlreadyOpen(title)) {
 59 |       return displayNotification({
 60 |         title: title,
 61 |         message: 'Do you want to adapt the game size to your new window size?',
 62 |         level: 'info',
 63 |         action: { label: 'Resize grid', callback }
 64 |       })
 65 |     }
 66 |   },
 67 | 
 68 |   /* CONTROLS */
 69 |   cantSaveShape: message => displayNotification({
 70 |     title: "Can't save shape",
 71 |     message,
 72 |     level: 'warning',
 73 |     autoDismiss: 6
 74 |   }),
 75 | 
 76 |   /* MANAGE SHAPES MODAL */
 77 |   shapeSuccessfullyLoaded: () => displayNotification({
 78 |     title: 'Shape successfully loaded',
 79 |     message: 'The shape has been successfully loaded in the game.',
 80 |     level: 'success'
 81 |   }),
 82 | 
 83 |   shapeLinkCopied: () => displayNotification({
 84 |     title: 'Shape link copied',
 85 |     message: 'The shape link has been copied into your clipboard.',
 86 |     level: 'success'
 87 |   }),
 88 | 
 89 |   shapeLinkNotCopied: error => displayNotification({
 90 |     title: "Shape link can't be copied",
 91 |     message: `Error while copying the shape link into your clipboard. Error: ${error}`,
 92 |     level: 'error'
 93 |   }),
 94 | 
 95 |   /* IMPORT SHAPES MODAL */
 96 |   wrongShapeExportString: () => displayNotification({
 97 |     title: 'Wrong shape export string',
 98 |     message: 'The shape export string you have entered is invalid.',
 99 |     level: 'error'
100 |   }),
101 | 
102 |   shapeAlreadyExists: shapeName => displayNotification({
103 |     title: 'This shape already exists',
104 |     message: `The shape you trying to import already exists with the name: ${shapeName}.`,
105 |     level: 'warning'
106 |   }),
107 | 
108 |   shapeSuccessfullyImported: shapeName => displayNotification({
109 |     title: 'Shape successfully imported',
110 |     message: 'The shape has been successfully imported and saved in your custom shapes.',
111 |     level: 'success'
112 |   })
113 | }
114 | 


--------------------------------------------------------------------------------
/src/controls/modals/ManageShapesModal.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import ReactModal from 'react-modal'
  3 | import shapesHandler from '../../shapesHandler'
  4 | import config from '../../config/configHandler'
  5 | import notif from '../../notifications'
  6 | import colorThemes from '../../config/colorThemes'
  7 | import IconPlay from '../../media/icon-play.svg'
  8 | import IconCross from '../../media/icon-cross.svg'
  9 | import IconLink from '../../media/icon-link.svg'
 10 | 
 11 | export default class ManageShapesModal extends Component {
 12 |   constructor(props) {
 13 |     super(props)
 14 |     this.state = { displayLinkToCopy: false }
 15 |     this.handleShowModal = this.handleShowModal.bind(this)
 16 |     this.deleteShape = this.deleteShape.bind(this)
 17 |     this.loadShape = this.loadShape.bind(this)
 18 |     this.copyShapeExportString = this.copyShapeExportString.bind(this)
 19 |     this.modalStyle = config.get().modalStyle
 20 |   }
 21 | 
 22 |   handleShowModal() {
 23 |     this.props.handleShowModal()
 24 |   }
 25 | 
 26 |   deleteShape(shapeName, event) {
 27 |     event.preventDefault()
 28 |     this.props.deleteShape(shapeName)
 29 |   }
 30 | 
 31 |   loadShape(shapeName, event) {
 32 |     event.preventDefault()
 33 |     notif.shapeSuccessfullyLoaded()
 34 |     this.props.loadShape('custom', shapeName)
 35 |   }
 36 | 
 37 |   copyShapeExportString(exportString, event) {
 38 |     event.preventDefault()
 39 |     this.setState({ displayLinkToCopy: exportString },
 40 |       () => {
 41 |         this.inputLink.select()
 42 |         try {
 43 |           document.execCommand('copy')
 44 |           notif.shapeLinkCopied()
 45 |         } catch(error) {notif.shapeLinkNotCopied(error)}
 46 |         this.setState({ displayLinkToCopy: false })
 47 |       }
 48 |     )
 49 |   }
 50 | 
 51 |   render() {
 52 |     const customShapes = shapesHandler.getCustomShapes()
 53 |     const shapesNames = Object.keys(customShapes)
 54 |     return (
 55 |       <div>
 56 |         <ReactModal
 57 |           isOpen={this.props.showModal}
 58 |           contentLabel="onRequestClose Example"
 59 |           onRequestClose={this.handleShowModal}
 60 |           style={this.props.modalStyle}
 61 |           className={{
 62 |             base: 'modal',
 63 |             afterOpen: 'modal-opened',
 64 |             beforeClose: 'modal-closed'
 65 |         }}>
 66 |           <h2>Manage your custom shapes</h2>
 67 |           <ul className="shapes-list">
 68 |             {shapesNames.map((shapeName, i) => {
 69 |               return (
 70 |                 <li key={i}>
 71 |                   <h6 className="shape-name">
 72 |                     {shapeName}
 73 |                     <span className="shape-size">
 74 |                       {`[${customShapes[shapeName].shapeSize[0]}, ${customShapes[shapeName].shapeSize[1]}]`}
 75 |                     </span>
 76 |                   </h6>
 77 |                   <div className="actions-wrapper">
 78 |                     <a href="#delete-shape"
 79 |                        className="action-icon"
 80 |                        alt="Cross icon"
 81 |                        title="Delete the shape."
 82 |                        onClick={this.deleteShape.bind(this, shapeName)}>
 83 |                       <IconCross fill={colorThemes[this.props.colorTheme].footerText} />
 84 |                     </a>
 85 | 
 86 |                     <a href="#load-shape"
 87 |                        className="action-icon"
 88 |                        alt="Load icon"
 89 |                        title="Load the shape."
 90 |                        onClick={this.loadShape.bind(this, shapeName)}>
 91 |                       <IconPlay fill={colorThemes[this.props.colorTheme].footerText} />
 92 |                     </a>
 93 | 
 94 |                     <a href="#copy-link"
 95 |                        className="action-icon"
 96 |                        alt="Link icon"
 97 |                        title="Copy the URL of the shape in your clipboard to share it."
 98 |                        onClick={this.copyShapeExportString.bind(this, customShapes[shapeName].exportString)}>
 99 |                       <IconLink fill={colorThemes[this.props.colorTheme].footerText} />
100 |                     </a>
101 |                   </div>
102 |                 </li>
103 |               )
104 |             })}
105 |           </ul>
106 | 
107 |           { // Temporary input to select shape link and copy it programmatically
108 |             this.state.displayLinkToCopy ?
109 |               <input type="text" readOnly="true" value={this.state.displayLinkToCopy}
110 |                 ref={(inputLink) => {this.inputLink = inputLink}} />
111 |               : ''
112 |           }
113 | 
114 |           <button className="input-style small-cta" onClick={this.handleShowModal}>Close</button>
115 |         </ReactModal>
116 |       </div>
117 |     )
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/src/css/controls/Controls.css:
--------------------------------------------------------------------------------
  1 | /* Controls */
  2 | .controls {
  3 |   position: absolute;
  4 |   min-width: 280px;
  5 |   top: 0;
  6 |   right: 0;
  7 |   transform: translate3d(90%,15px,0);
  8 |   transition: transform .3s;
  9 |   z-index: 1;
 10 | }
 11 | 
 12 | .controls.open {
 13 |   transform: translate3d(-15px,15px,0);
 14 | }
 15 | 
 16 | .controls header {
 17 |   display: flex;
 18 |   border-color: inherit;
 19 | }
 20 | 
 21 | .open-controls-cta {
 22 |   width: 44px;
 23 |   border-style: solid;
 24 |   border-width: 0 1px 0 0;
 25 |   border-color: inherit;
 26 |   cursor: pointer;
 27 |   outline: 0;
 28 |   background-color: rgba(0,0,0,0);
 29 |   transition: background-color .3s;
 30 | }
 31 | 
 32 | .open-controls-cta .icon {
 33 |   position: relative;
 34 |   display: block;
 35 |   margin: 25px auto 0;
 36 |   transform: scaleX(-1) translateY(-50%);
 37 |   transition: transform .3s;
 38 | }
 39 | 
 40 | .controls.open .open-controls-cta .icon {
 41 |   transform: scaleX(1) translateY(-50%);
 42 | }
 43 | 
 44 | /* Info Bar */
 45 | .controls-bar-wrapper {
 46 |   border-color: inherit;
 47 | }
 48 | 
 49 | .info-bar {
 50 |   display: flex;
 51 |   padding: 8px 0;
 52 |   border-color: inherit;
 53 | }
 54 | 
 55 | .info-bar .info {
 56 |   font-size: .813em;
 57 |   padding: 0 .625em;
 58 |   border-style: solid;
 59 |   border-width: 0 0 0 1px;
 60 |   border-color: inherit;
 61 | }
 62 | 
 63 | .info-bar .info:first-child {
 64 |   border-left: none;
 65 | }
 66 | 
 67 | .info-bar .info.counter {
 68 |   width: 13em;
 69 |   padding-left: 0;
 70 |   text-align: right;
 71 | }
 72 | .info-bar .info.grid-size {
 73 |   min-width: 4.5em;
 74 |   text-align: center;
 75 | }
 76 | 
 77 | .info-bar .info.cells-graph .background {
 78 |   min-width: 118px;
 79 | }
 80 | 
 81 | .info-bar .background {
 82 |   position: relative;
 83 |   height: 1.628em;
 84 |   font-size: .85em;
 85 |   text-align: center;
 86 |   overflow: hidden;
 87 | }
 88 | 
 89 | .info-bar .background .value {
 90 |   position: relative;
 91 |   display: block;
 92 |   text-align: center;
 93 |   line-height: 1.6em;
 94 | }
 95 | 
 96 | .info-bar .background-alive {
 97 |   display: block;
 98 |   width: 100%;
 99 |   height: 100%;
100 |   position: absolute;
101 |   top: 0;
102 |   left: 0;
103 |   transition: transform .15s;
104 |   transform: translate3d(-100%,0,0);
105 | }
106 | 
107 | /* Controls Bar */
108 | .controls-bar {
109 |   display: flex;
110 |   border-color: inherit;
111 | }
112 | 
113 | .big-cta {
114 |   display: block;
115 |   flex-basis: 33.333333%;
116 |   line-height: 14px;
117 |   padding: 10px 0;
118 |   border-style: solid;
119 |   border-width: 1px 1px 0 0;
120 |   border-color: inherit;
121 |   border-radius: 0;
122 |   font-size: .75em;
123 |   font-weight: bold;
124 |   text-transform: uppercase;
125 |   background-color: rgba(0,0,0,0);
126 |   cursor: pointer;
127 |   color: inherit;
128 |   outline: none;
129 |   transition: background-color .3s;
130 | }
131 | 
132 | .big-cta:last-child {
133 |   border-right: none;
134 | }
135 | 
136 | /* Options */
137 | .options-wrapper {
138 |   position: absolute;
139 |   box-sizing: border-box;
140 |   max-height: calc(100vh - 84px);
141 |   padding: 0 15px;
142 |   width: 200px;
143 |   right: 0;
144 |   margin: 0;
145 |   border-style: solid;
146 |   border-width: 1px 0 0;
147 |   border-color: inherit;
148 |   background-color: inherit;
149 |   overflow: auto;
150 |   transform: translate3d(120%,0,0);
151 |   transition: transform .3s;
152 | }
153 | 
154 | .options-wrapper.open {
155 |   transform: translate3d(0,0,0);
156 | }
157 | 
158 | .options-list {
159 |   padding: 15px 0 20px;
160 |   margin: 0;
161 |   list-style-type: none;
162 | }
163 | 
164 | @media screen and (max-width: 560px) {
165 |   .controls {
166 |     transform: translate3d(89%,0,0);
167 |   }
168 |   
169 |   .controls header {
170 |     font-size: 74%;
171 |   }
172 |   
173 |   .controls.open {
174 |     width: 100%;
175 |     transform: translate3d(0,0,0);
176 |   }
177 |   
178 |   .big-cta:hover,
179 |   .open-controls-cta:hover {
180 |     background-color: rgba(0,0,0,0);
181 |   }
182 |   
183 |   .open-controls-cta {
184 |     flex-basis: 5%;
185 |     text-align: center;
186 |   }
187 | 
188 |   .open-controls-cta .icon {
189 |     margin-top: 24px;
190 |   }
191 |   
192 |   .controls-bar-wrapper {
193 |     flex-basis: 95%;
194 |   }
195 |   
196 |   .info-bar .info {
197 |     box-sizing: border-box;
198 |   }
199 |   
200 |   .info-bar .info.counter {
201 |     width: inherit;
202 |     flex-basis: 38%;
203 |   }
204 |   
205 |   .info-bar .info.grid-size {
206 |     flex-basis: 20%;
207 |   }
208 |   
209 |   .info-bar .info.cells-graph {
210 |     flex-basis: 42%;
211 |   }
212 | 
213 |   .info-bar .info.cells-graph .background {
214 |     min-width: inherit;
215 |   }
216 |   
217 |   .big-cta {
218 |     padding: 7px 0;
219 |     font-size: 1em;
220 |   }
221 |   
222 |   .options-wrapper {
223 |     width: 100%;
224 |     overflow-y: auto;
225 |     padding-bottom: 0;
226 |     padding-top: 0;
227 |   }
228 |   
229 |   .controls .options-wrapper {
230 |     transform: translate3d(16%,0,0);
231 |   }
232 |   
233 |   .controls.open .options-wrapper {
234 |     transform: translate3d(100%,0,0);
235 |   }
236 |   
237 |   .controls.open .options-wrapper.open {
238 |     transform: translate3d(0,0,0);
239 |   }
240 | }
241 | 


--------------------------------------------------------------------------------
/src/shapesHandler.js:
--------------------------------------------------------------------------------
  1 | import utils from './utils'
  2 | 
  3 | const shapesHandler = {
  4 |   saveCustomShape: options => {
  5 |     let customShapes = shapesHandler.getCustomShapes()
  6 |     let newCustomShapes = customShapes ? customShapes : {}
  7 |     let shapeData = shapesHandler.getShapeLifeMapAndSize(options.gridSize, options.indexChanged)
  8 |     newCustomShapes[options.name] = {
  9 |       name: options.name,
 10 |       shapeSize: shapeData.size,
 11 |       lifeMap: shapeData.lifeMap,
 12 |     }
 13 |     const exportString = shapesHandler.encodeShapeExportString(newCustomShapes[options.name])
 14 |     newCustomShapes[options.name].exportString = exportString
 15 |     localStorage.setItem('customShapes', JSON.stringify(newCustomShapes))
 16 |   },
 17 | 
 18 |   importCustomShape: (shapeData, shapeExportString) => {
 19 |     let customShapes = shapesHandler.getCustomShapes()
 20 |     let newCustomShapes = customShapes ? customShapes : {}
 21 |     newCustomShapes[shapeData.name] = shapeData
 22 |     newCustomShapes[shapeData.name].exportString = shapeExportString
 23 |     localStorage.setItem('customShapes', JSON.stringify(newCustomShapes))
 24 |   },
 25 | 
 26 |   // Generate a shape export string by encoding shape data to a base64 string
 27 |   encodeShapeExportString: shapeData => btoa(unescape(encodeURIComponent(JSON.stringify(shapeData)))),
 28 | 
 29 |   decodeShapeExportString: exportString => {
 30 |     try {
 31 |       return JSON.parse(decodeURIComponent(escape(atob(exportString))))
 32 |     } catch(e) {
 33 |       // If corrupted Base64 string, return undefined
 34 |       return undefined
 35 |     }
 36 |   },
 37 | 
 38 |   loadCustomShape: name => {
 39 |     const customShapes = shapesHandler.getCustomShapes()
 40 |     return customShapes ? customShapes[name] : null
 41 |   },
 42 | 
 43 |   deleteCustomShape: name => {
 44 |     const customShapes = shapesHandler.getCustomShapes()
 45 |     // If only one shape delete customShapes from localStorage
 46 |     if (Object.keys(customShapes).length === 1) {
 47 |       localStorage.removeItem('customShapes')
 48 |       return 'noShapeLeft'
 49 |     }
 50 |     delete customShapes[name]
 51 |     localStorage.setItem('customShapes', JSON.stringify(customShapes))
 52 |   },
 53 | 
 54 |   doesImportShapeAlreadyExist: shapeExportString => {
 55 |     const customShapes = shapesHandler.getCustomShapes()
 56 |     for (let shape in customShapes) {
 57 |       if (customShapes[shape].exportString === shapeExportString) {return customShapes[shape].name}
 58 |     }
 59 |     return false
 60 |   },
 61 | 
 62 |   getCustomShapes: () => JSON.parse(localStorage.getItem('customShapes')),
 63 | 
 64 |   getCustomShapesNames: () => {
 65 |     const customShapes = shapesHandler.getCustomShapes()
 66 |     if (customShapes) {
 67 |       let customShapesNames = Object.keys(customShapes)
 68 |       customShapesNames.unshift('Load a shape')
 69 |       return customShapesNames
 70 |     }
 71 |     return null
 72 |   },
 73 | 
 74 |   getShapeLifeMapAndSize: (gridSize, indexChanged) => {
 75 |     let lifeMap = utils.generateSeed()
 76 |     let colLength = gridSize[0]
 77 |     let rowLength = gridSize[1]
 78 |     indexChanged.forEach((el, i) => {
 79 |       lifeMap[el] = lifeMap[el] ? 0 : 1
 80 |     })
 81 |     let gridMap = {}
 82 |     let activeGridRow = -1
 83 | 
 84 |     // Create an 'hashMap' of the actual lifeMap with rows
 85 |     // as keys containing the cols
 86 |     for (let i = 0; i < lifeMap.length; i++) {
 87 |       if (!(i % colLength)) {
 88 |         activeGridRow += 1
 89 |         gridMap[activeGridRow] = []
 90 |       }
 91 |       gridMap[activeGridRow].push(lifeMap[i])
 92 |     }
 93 | 
 94 |     let widthStart, widthEnd, heightStart, heightEnd
 95 |     // Detect the cell Alive the most on the left and right
 96 |     // of the actual shape
 97 |     for (let i = 0; i < rowLength; i++) {
 98 |       let widthStartSetForActualRow = false
 99 |       // If no cell alive on the actual row, continue
100 |       if (gridMap[i].indexOf(1) === -1) continue
101 |       // Set the first row of the shape
102 |       if (heightStart === undefined) heightStart = i
103 |       // Set the last row of the shape
104 |       if (heightEnd === undefined || i > heightEnd) heightEnd = i
105 |       // Iterate on each col cell of the current row
106 |       for (let j = 0; j < gridMap[i].length ; j++) {
107 |         if (!widthStartSetForActualRow) {
108 |           // If the cell is alive and under the actual
109 |           // saved widthStart
110 |           if (gridMap[i][j] && (widthStart === undefined || j < widthStart)) {
111 |             widthStart = j
112 |             widthStartSetForActualRow = true
113 |           }
114 |         }
115 |         // If the cell is alive and under the actual
116 |         // saved widthEnd
117 |         if (gridMap[i][j] && (widthEnd === undefined || j > widthEnd)) {
118 |           widthEnd = j
119 |         }
120 |       }
121 |     }
122 | 
123 |     let shapeWidth = widthStart !== undefined ? (widthEnd - widthStart) + 1 : 0
124 |     let shapeHeight = heightStart !== undefined ? (heightEnd - heightStart) + 1 : 0
125 |     let widthDiff = gridSize[0] - shapeWidth
126 |     let shapelifeMap = indexChanged.map(el => {
127 |       // remove previous row
128 |       let newIndex = el - widthDiff * Math.floor(el / gridSize[0])
129 |       newIndex -= widthStart
130 |       newIndex -= shapeWidth * heightStart
131 |       return newIndex
132 |     })
133 | 
134 |     return {
135 |       size: [shapeWidth, shapeHeight],
136 |       lifeMap: shapelifeMap
137 |     }
138 |   },
139 | }
140 | 
141 | export default shapesHandler
142 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.NODE_ENV = 'production';
  5 | 
  6 | // Load environment variables from .env file. Suppress warnings using silent
  7 | // if this file is missing. dotenv will never modify any environment variables
  8 | // that have already been set.
  9 | // https://github.com/motdotla/dotenv
 10 | require('dotenv').config({silent: true});
 11 | 
 12 | var chalk = require('chalk');
 13 | var fs = require('fs-extra');
 14 | var path = require('path');
 15 | var url = require('url');
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 21 | var measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
 22 | var printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 23 | 
 24 | var useYarn = fs.existsSync(paths.yarnLockFile);
 25 | 
 26 | // Warn and crash if required files are missing
 27 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 28 |   process.exit(1);
 29 | }
 30 | 
 31 | // First, read the current file sizes in build directory.
 32 | // This lets us display how much they changed later.
 33 | measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
 34 |   // Remove all content but keep the directory so that
 35 |   // if you're in it, you don't end up in Trash
 36 |   fs.emptyDirSync(paths.appBuild);
 37 | 
 38 |   // Start the webpack build
 39 |   build(previousFileSizes);
 40 | 
 41 |   // Merge with the public folder
 42 |   copyPublicFolder();
 43 | });
 44 | 
 45 | // Print out errors
 46 | function printErrors(summary, errors) {
 47 |   console.log(chalk.red(summary));
 48 |   console.log();
 49 |   errors.forEach(err => {
 50 |     console.log(err.message || err);
 51 |     console.log();
 52 |   });
 53 | }
 54 | 
 55 | // Create the production build and print the deployment instructions.
 56 | function build(previousFileSizes) {
 57 |   console.log('Creating an optimized production build...');
 58 |   webpack(config).run((err, stats) => {
 59 |     if (err) {
 60 |       printErrors('Failed to compile.', [err]);
 61 |       process.exit(1);
 62 |     }
 63 | 
 64 |     if (stats.compilation.errors.length) {
 65 |       printErrors('Failed to compile.', stats.compilation.errors);
 66 |       process.exit(1);
 67 |     }
 68 | 
 69 |     if (process.env.CI && stats.compilation.warnings.length) {
 70 |      printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
 71 |      process.exit(1);
 72 |    }
 73 | 
 74 |     console.log(chalk.green('Compiled successfully.'));
 75 |     console.log();
 76 | 
 77 |     console.log('File sizes after gzip:');
 78 |     console.log();
 79 |     printFileSizesAfterBuild(stats, previousFileSizes);
 80 |     console.log();
 81 | 
 82 |     var appPackage  = require(paths.appPackageJson);
 83 |     var publicUrl = paths.publicUrl;
 84 |     var publicPath = config.output.publicPath;
 85 |     var publicPathname = url.parse(publicPath).pathname;
 86 |     if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
 87 |       // "homepage": "http://user.github.io/project"
 88 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPathname) + '.');
 89 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
 90 |       console.log();
 91 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
 92 |       console.log('To publish it at ' + chalk.green(publicUrl) + ', run:');
 93 |       // If script deploy has been added to package.json, skip the instructions
 94 |       if (typeof appPackage.scripts.deploy === 'undefined') {
 95 |         console.log();
 96 |         if (useYarn) {
 97 |           console.log('  ' + chalk.cyan('yarn') +  ' add --dev gh-pages');
 98 |         } else {
 99 |           console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
100 |         }
101 |         console.log();
102 |         console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
103 |         console.log();
104 |         console.log('    ' + chalk.dim('// ...'));
105 |         console.log('    ' + chalk.yellow('"scripts"') + ': {');
106 |         console.log('      ' + chalk.dim('// ...'));
107 |         console.log('      ' + chalk.yellow('"predeploy"') + ': ' + chalk.yellow('"npm run build",'));
108 |         console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
109 |         console.log('    }');
110 |         console.log();
111 |         console.log('Then run:');
112 |       }
113 |       console.log();
114 |       console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
115 |       console.log();
116 |     } else if (publicPath !== '/') {
117 |       // "homepage": "http://mywebsite.com/project"
118 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
119 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
120 |       console.log();
121 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
122 |       console.log();
123 |     } else {
124 |       if (publicUrl) {
125 |         // "homepage": "http://mywebsite.com"
126 |         console.log('The project was built assuming it is hosted at ' + chalk.green(publicUrl) +  '.');
127 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
128 |         console.log();
129 |       } else {
130 |         // no homepage
131 |         console.log('The project was built assuming it is hosted at the server root.');
132 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
133 |         console.log('For example, add this to build it for GitHub Pages:')
134 |         console.log();
135 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
136 |         console.log();
137 |       }
138 |       var build = path.relative(process.cwd(), paths.appBuild);
139 |       console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
140 |       console.log('You may serve it with a static server:');
141 |       console.log();
142 |       if (useYarn) {
143 |         console.log(`  ${chalk.cyan('yarn')} global add serve`);
144 |       } else {
145 |         console.log(`  ${chalk.cyan('npm')} install -g serve`);
146 |       }
147 |       console.log(`  ${chalk.cyan('serve')} -s build`);
148 |       console.log();
149 |     }
150 |   });
151 | }
152 | 
153 | function copyPublicFolder() {
154 |   fs.copySync(paths.appPublic, paths.appBuild, {
155 |     dereference: true,
156 |     filter: file => file !== paths.appHtml
157 |   });
158 | }
159 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | import config from './config/configHandler'
  2 | const configData = config.get()
  3 | let windowWidth = window.innerWidth
  4 | let windowHeight = window.innerHeight
  5 | const bodyPaddingX = configData.bodyPaddingX
  6 | const bodyPaddingY = configData.bodyPaddingY
  7 | let roundedCol, roundedRow, wrapperWidth, wrapperHeight, colSize, rowSize, cellsCount
  8 | const seed = isRandomSeed =>
  9 |   isRandomSeed ? (Math.round(Math.random() * 10) % configData.randomSeedThreshold === 0 ? 1 : 0) : 0
 10 | const getNeighborsIndexes = index => {
 11 |   const position = index + 1
 12 |   let neighborsIndexes = []
 13 |   let xAxisBorder, yAxisBorder
 14 |   // Detect if cell is on X or Y axis extremities
 15 |   if (position <= colSize) xAxisBorder = 'top'
 16 |   if (position > cellsCount - colSize) xAxisBorder = 'bottom'
 17 |   if (position % colSize === 1) yAxisBorder = 'left'
 18 |   if (position % colSize === 0) yAxisBorder = 'right'
 19 |   for (let i = 0; i < 8; i++) {
 20 |     switch (i) {
 21 |       default:
 22 |       case 0: // Top Row - Left
 23 |         if (xAxisBorder !== 'top' && yAxisBorder !== 'left') {
 24 |           neighborsIndexes.push(index - (colSize + 1))
 25 |         }
 26 |         break
 27 |       case 1: // Top Row - Middle
 28 |         if (xAxisBorder !== 'top') {
 29 |           neighborsIndexes.push(index - colSize)
 30 |         }
 31 |         break
 32 |       case 2: // Top Row - Right
 33 |         if (xAxisBorder !== 'top' && yAxisBorder !== 'right') {
 34 |           neighborsIndexes.push(index - (colSize - 1))
 35 |         }
 36 |         break
 37 |       case 3: // Middle Row - Left
 38 |         if (yAxisBorder !== 'left') {
 39 |           neighborsIndexes.push(index - 1)
 40 |         }
 41 |         break
 42 |       case 4: // Middle Row - Right
 43 |         if (yAxisBorder !== 'right') {
 44 |           neighborsIndexes.push(index + 1)
 45 |         }
 46 |         break
 47 |       case 5: // Bottom Row - Left
 48 |         if (xAxisBorder !== 'bottom' && yAxisBorder !== 'left') {
 49 |           neighborsIndexes.push(index + (colSize - 1))
 50 |         }
 51 |         break
 52 |       case 6: // Bottom Row - Middle
 53 |         if (xAxisBorder !== 'bottom') {
 54 |           neighborsIndexes.push(index + colSize)
 55 |         }
 56 |         break
 57 |       case 7: // Bottom Row - Right
 58 |         if (xAxisBorder !== 'bottom' && yAxisBorder !== 'right') {
 59 |           neighborsIndexes.push(index + (colSize + 1))
 60 |         }
 61 |         break
 62 |     }
 63 |   }
 64 |   return neighborsIndexes
 65 | }
 66 | 
 67 | export default {
 68 |   initGridData: (cellSize, borderSize, isResize) => {
 69 |     if (isResize) {
 70 |       windowWidth = window.innerWidth
 71 |       windowHeight = window.innerHeight
 72 |     }
 73 |     cellSize += borderSize * 2
 74 |     roundedCol = Math.floor((windowWidth - bodyPaddingX * 2) / cellSize)
 75 |     roundedRow = Math.floor((windowHeight - bodyPaddingY * 2) / cellSize)
 76 |     wrapperWidth = roundedCol * cellSize
 77 |     wrapperHeight = roundedRow * cellSize
 78 |     colSize = roundedCol
 79 |     rowSize = Math.floor(wrapperHeight / cellSize)
 80 |     cellsCount = rowSize * colSize
 81 |   },
 82 | 
 83 |   // Predict if the grid will have enough space to paint
 84 |   // at least one cell when changing cell or border size
 85 |   gridHasCells: (newCellSize, newBorderSize) => {
 86 |     newCellSize += newBorderSize * 2
 87 |     const newRoundedCol = Math.floor((windowWidth - bodyPaddingX * 2) / newCellSize)
 88 |     const newRoundedRow = Math.floor((windowHeight - bodyPaddingY * 2) / newCellSize)
 89 |     return !!(newRoundedCol && newRoundedRow)
 90 |   },
 91 | 
 92 |   adaptGridSizeToShapeSize: (shapeSize, cellSize, borderSize) => {
 93 |     let newGridSize = [colSize, rowSize]
 94 |     let newCellSize = cellSize
 95 |     let newBorderSize = borderSize
 96 |     let newRoundedCol, newRoundedRow, newWrapperHeight, newRowSize
 97 |     let shapeTooBigWithSmallestCellSize = false
 98 |     let shapeTooBigWithSmallestBorderSize = false
 99 |     // Try adapating the canvas size by reducing the cell size and keeping
100 |     // the actual border size
101 |     while (!shapeTooBigWithSmallestCellSize && (newGridSize[0] < shapeSize[0] || newGridSize[1] < shapeSize[1])) {
102 |       if (newCellSize <= 2) {
103 |         shapeTooBigWithSmallestCellSize = true
104 |         break
105 |       }
106 |       newCellSize -= 2
107 |       newRoundedCol = Math.floor((windowWidth - bodyPaddingX * 2) / (newCellSize + newBorderSize * 2))
108 |       newRoundedRow = Math.floor((windowHeight - bodyPaddingY * 2) / (newCellSize + newBorderSize * 2))
109 |       newWrapperHeight = newRoundedRow * (newCellSize + newBorderSize * 2)
110 |       newRowSize = Math.floor(newWrapperHeight / (newCellSize + newBorderSize * 2))
111 |       newGridSize = [newRoundedCol, newRowSize]
112 |     }
113 |     // If shape is still too big with minimum cell size,
114 |     // try reducing the border size until the minimum size
115 |     // with minimum cell size
116 |     if (shapeTooBigWithSmallestCellSize) {
117 |       while (!shapeTooBigWithSmallestBorderSize && (newGridSize[0] < shapeSize[0] || newGridSize[1] < shapeSize[1])) {
118 |         if (newBorderSize === 0) {
119 |           shapeTooBigWithSmallestBorderSize = true
120 |           break
121 |         }
122 |         newBorderSize -= 1
123 |         newRoundedCol = Math.floor((windowWidth - bodyPaddingX * 2) / (newCellSize + newBorderSize * 2))
124 |         newRoundedRow = Math.floor((windowHeight - bodyPaddingY * 2) / (newCellSize + newBorderSize * 2))
125 |         newWrapperHeight = newRoundedRow * (newCellSize + newBorderSize * 2)
126 |         newRowSize = Math.floor(newWrapperHeight / (newCellSize + newBorderSize * 2))
127 |         newGridSize = [newRoundedCol, newRowSize]
128 |       }
129 |     }
130 | 
131 |     // If grid could be adapted to shape, return new cell and border values,
132 |     // Else shape is too big to adapt the canvas, return null
133 |     return !shapeTooBigWithSmallestBorderSize ?
134 |       { cellSize: newCellSize, borderSize: newBorderSize } :
135 |       null
136 |   },
137 | 
138 |   generateSeed: isRandomSeed => {
139 |     const seedMap = []
140 |     for (let i = 0; i < cellsCount; i++) {seedMap.push(seed(isRandomSeed))}
141 |     return seedMap
142 |   },
143 | 
144 |   /**
145 |    * Switch a cell State, by returning updated data.
146 |    * @param {object} options - Options
147 |    * @param {int} options.index - The index of the cell
148 |    * @param {array} options.lifeMap - The current life map
149 |    * @param {array} options.neighbourLifeMap - The current neighbour life map
150 |    * @param {int} options.cellsAlive - The current total cells alive
151 |    * @returns {object} Object with 3 keys { lifeMap, neighbourLifeMap, cellsAlive }
152 |    */
153 |   switchCellState: options => {
154 |     const lifeStateDiff = options.lifeMap[options.index] ? -1 : 1
155 |     let newValues = {
156 |       lifeMap: options.lifeMap,
157 |       neighbourLifeMap: options.neighbourLifeMap,
158 |       cellsAlive: options.cellsAlive
159 |     }
160 |     newValues.lifeMap[options.index] += lifeStateDiff
161 |     newValues.cellsAlive += lifeStateDiff
162 |     getNeighborsIndexes(options.index).forEach(el => {
163 |       newValues.neighbourLifeMap[el] += lifeStateDiff
164 |     })
165 |     return newValues
166 |   },
167 | 
168 |   // Add a comma every 3 figures
169 |   formatDigits: totalCellsNumber =>
170 |     totalCellsNumber.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'),
171 | 
172 |   /* GETTER */
173 |   getLifeMap: (lifeMap, neighbourLifeMap) => neighbourLifeMap.map((el, i) =>
174 |     lifeMap[i] ? (el === 2 || el === 3 ? 1 : 0) : (el === 3 ? 1 : 0)
175 |   ),
176 | 
177 |   getLifeMapDiff: (previousLifeMap, newLifeMap) => previousLifeMap.reduce((acc, el, i) => {
178 |     if (el !== newLifeMap[i]) acc.push(i)
179 |     return acc
180 |   }, []),
181 | 
182 |   getLifeMapDiffWithNeighbors: (diffMap, previousNeighbourLifeMap, neighbourLifeMap) => {
183 |     previousNeighbourLifeMap.forEach((el, i) => {
184 |       if (el !== neighbourLifeMap[i]) {diffMap.push(i)}
185 |     })
186 |     // Remove duplicates
187 |     let newDiffMap = {}
188 |     return diffMap.filter(function(el) {
189 |       return newDiffMap.hasOwnProperty(el) ? false : (newDiffMap[el] = true)
190 |     })
191 |   },
192 | 
193 |   // get all indexes of the alive cells from the lifeMap
194 |   getChangedIndexesFromLifeMap: lifemap => lifemap.reduce((acc, el, i) => {
195 |     if (el) acc.push(i)
196 |     return acc
197 |   }, []),
198 | 
199 |   getTotalCells: () => cellsCount,
200 | 
201 |   getWrapperWidth: () => wrapperWidth,
202 | 
203 |   getWrapperHeight: () => wrapperHeight,
204 | 
205 |   getColSize: () => colSize,
206 | 
207 |   // Return an array with the alive cells neighbors count for each cell
208 |   getNeighbourMap: lifeMap =>
209 |     lifeMap.map((element, index) =>
210 |       getNeighborsIndexes(index).reduce((acc, el) => acc + lifeMap[el], 0)
211 |     ),
212 | 
213 |   getCellsAliveCount: lifeMap =>
214 |     lifeMap.reduce((acc, el) => acc + el),
215 | 
216 |   getGridSize: () => [colSize, rowSize],
217 | 
218 |   getSelectList: array => array.reduce((acc, el) => {
219 |     acc.push([el, el])
220 |     return acc
221 |   }, []),
222 | 
223 |   getPointerType: eventType =>
224 |     eventType === 'touchstart' || eventType === 'touchmove' ? 'touch' : 'mouse',
225 | 
226 |   getDeviceType: () => /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile/.test(navigator.userAgent) ?
227 |     'mobile' : 'desktop'
228 | }
229 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var autoprefixer = require('autoprefixer');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9 | var getClientEnvironment = require('./env');
 10 | var paths = require('./paths');
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // In development, we always serve from the root. This makes config easier.
 14 | var publicPath = '/';
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | var publicUrl = '';
 19 | // Get environment variables to inject into our app.
 20 | var env = getClientEnvironment(publicUrl);
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | module.exports = {
 26 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 27 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 28 |   devtool: 'cheap-module-source-map',
 29 |   // These are the "entry points" to our application.
 30 |   // This means they will be the "root" imports that are included in JS bundle.
 31 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 32 |   entry: [
 33 |     // Include an alternative client for WebpackDevServer. A client's job is to
 34 |     // connect to WebpackDevServer by a socket and get notified about changes.
 35 |     // When you save a file, the client will either apply hot updates (in case
 36 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 37 |     // make a syntax error, this client will display a syntax error overlay.
 38 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 39 |     // to bring better experience for Create React App users. You can replace
 40 |     // the line below with these two lines if you prefer the stock client:
 41 |     // require.resolve('webpack-dev-server/client') + '?/',
 42 |     // require.resolve('webpack/hot/dev-server'),
 43 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 44 |     // We ship a few polyfills by default:
 45 |     require.resolve('./polyfills'),
 46 |     // Finally, this is your app's code:
 47 |     paths.appIndexJs
 48 |     // We include the app code last so that if there is a runtime error during
 49 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 50 |     // changing JS code would still trigger a refresh.
 51 |   ],
 52 |   output: {
 53 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 54 |     path: paths.appBuild,
 55 |     // Add /* filename */ comments to generated require()s in the output.
 56 |     pathinfo: true,
 57 |     // This does not produce a real file. It's just the virtual path that is
 58 |     // served by WebpackDevServer in development. This is the JS bundle
 59 |     // containing code from all our entry points, and the Webpack runtime.
 60 |     filename: 'static/js/bundle.js',
 61 |     // This is the URL that app is served from. We use "/" in development.
 62 |     publicPath: publicPath
 63 |   },
 64 |   resolve: {
 65 |     // This allows you to set a fallback for where Webpack should look for modules.
 66 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 67 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 68 |     // if there any conflicts. This matches Node resolution mechanism.
 69 |     // https://github.com/facebookincubator/create-react-app/issues/253
 70 |     fallback: paths.nodePaths,
 71 |     // These are the reasonable defaults supported by the Node ecosystem.
 72 |     // We also include JSX as a common component filename extension to support
 73 |     // some tools, although we do not recommend using it, see:
 74 |     // https://github.com/facebookincubator/create-react-app/issues/290
 75 |     extensions: ['.js', '.json', '.jsx', ''],
 76 |     alias: {
 77 |       // Support React Native Web
 78 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 79 |       'react-native': 'react-native-web'
 80 |     }
 81 |   },
 82 |   
 83 |   module: {
 84 |     // First, run the linter.
 85 |     // It's important to do this before Babel processes the JS.
 86 |     preLoaders: [
 87 |       {
 88 |         test: /\.(js|jsx)$/,
 89 |         loader: 'eslint',
 90 |         include: paths.appSrc,
 91 |       }
 92 |     ],
 93 |     loaders: [
 94 |       // ** ADDING/UPDATING LOADERS **
 95 |       // The "url" loader handles all assets unless explicitly excluded.
 96 |       // The `exclude` list *must* be updated with every change to loader extensions.
 97 |       // When adding a new loader, you must add its `test`
 98 |       // as a new entry in the `exclude` list for "url" loader.
 99 | 
100 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
101 |       // Otherwise, it acts like the "file" loader.
102 |       {
103 |         exclude: [
104 |           /\.html$/,
105 |           // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
106 |           // because you might change the hot reloading server from the custom one
107 |           // to Webpack's built-in webpack-dev-server/client?/, which would not
108 |           // get properly excluded by /\.(js|jsx)$/ because of the query string.
109 |           // Webpack 2 fixes this, but for now we include this hack.
110 |           // https://github.com/facebookincubator/create-react-app/issues/1713
111 |           /\.(js|jsx)(\?.*)?$/,
112 |           /\.css$/,
113 |           /\.json$/,
114 |           /\.svg$/
115 |         ],
116 |         loader: 'url',
117 |         query: {
118 |           limit: 10000,
119 |           name: 'static/media/[name].[hash:8].[ext]'
120 |         }
121 |       },
122 |       // Process JS with Babel.
123 |       {
124 |         test: /\.(js|jsx)$/,
125 |         include: paths.appSrc,
126 |         loader: 'babel',
127 |         query: {
128 |           
129 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
130 |           // It enables caching results in ./node_modules/.cache/babel-loader/
131 |           // directory for faster rebuilds.
132 |           cacheDirectory: true
133 |         }
134 |       },
135 |       // "postcss" loader applies autoprefixer to our CSS.
136 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
137 |       // "style" loader turns CSS into JS modules that inject <style> tags.
138 |       // In production, we use a plugin to extract that CSS to a file, but
139 |       // in development "style" loader enables hot editing of CSS.
140 |       {
141 |         test: /\.css$/,
142 |         loader: 'style!css?importLoaders=1!postcss'
143 |       },
144 |       // JSON is not enabled by default in Webpack but both Node and Browserify
145 |       // allow it implicitly so we also enable it.
146 |       {
147 |         test: /\.json$/,
148 |         loader: 'json'
149 |       },
150 |       // "file" loader for svg
151 |       {
152 |         test: /\.svg$/,
153 |         loader: "babel-loader!react-svg-loader",
154 |         options: {
155 |           jsx: true // true outputs JSX tags
156 |         }
157 |       }
158 |       // ** STOP ** Are you adding a new loader?
159 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
160 |     ]
161 |   },
162 |   
163 |   // We use PostCSS for autoprefixing only.
164 |   postcss: function() {
165 |     return [
166 |       autoprefixer({
167 |         browsers: [
168 |           '>1%',
169 |           'last 4 versions',
170 |           'Firefox ESR',
171 |           'not ie < 9', // React doesn't support IE8 anyway
172 |         ]
173 |       }),
174 |     ];
175 |   },
176 |   plugins: [
177 |     // Makes some environment variables available in index.html.
178 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
179 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
180 |     // In development, this will be an empty string.
181 |     new InterpolateHtmlPlugin(env.raw),
182 |     // Generates an `index.html` file with the <script> injected.
183 |     new HtmlWebpackPlugin({
184 |       inject: true,
185 |       template: paths.appHtml,
186 |     }),
187 |     // Makes some environment variables available to the JS code, for example:
188 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
189 |     new webpack.DefinePlugin(env.stringified),
190 |     // This is necessary to emit hot updates (currently CSS only):
191 |     new webpack.HotModuleReplacementPlugin(),
192 |     // Watcher doesn't work well if you mistype casing in a path so we use
193 |     // a plugin that prints an error when you attempt to do this.
194 |     // See https://github.com/facebookincubator/create-react-app/issues/240
195 |     new CaseSensitivePathsPlugin(),
196 |     // If you require a missing module and then `npm install` it, you still have
197 |     // to restart the development server for Webpack to discover it. This plugin
198 |     // makes the discovery automatic so you don't have to restart.
199 |     // See https://github.com/facebookincubator/create-react-app/issues/186
200 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
201 |   ],
202 |   // Some libraries import Node modules but don't use them in the browser.
203 |   // Tell Webpack to provide empty mocks for them so importing them works.
204 |   node: {
205 |     fs: 'empty',
206 |     net: 'empty',
207 |     tls: 'empty'
208 |   }
209 | };
210 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var autoprefixer = require('autoprefixer');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | var ManifestPlugin = require('webpack-manifest-plugin');
  8 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  9 | var paths = require('./paths');
 10 | var getClientEnvironment = require('./env');
 11 | 
 12 | 
 13 | 
 14 | // Webpack uses `publicPath` to determine where the app is being served from.
 15 | // It requires a trailing slash, or the file assets will get an incorrect path.
 16 | var publicPath = paths.servedPath;
 17 | // Some apps do not use client-side routing with pushState.
 18 | // For these, "homepage" can be set to "." to enable relative asset paths.
 19 | var shouldUseRelativeAssetPaths = publicPath === './';
 20 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 21 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 22 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 23 | var publicUrl = publicPath.slice(0, -1);
 24 | // Get environment variables to inject into our app.
 25 | var env = getClientEnvironment(publicUrl);
 26 | 
 27 | // Assert this just to be safe.
 28 | // Development builds of React are slow and not intended for production.
 29 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 30 |   throw new Error('Production builds must have NODE_ENV=production.');
 31 | }
 32 | 
 33 | // Note: defined here because it will be used more than once.
 34 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 35 | 
 36 | // ExtractTextPlugin expects the build output to be flat.
 37 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 38 | // However, our output is structured with css, js and media folders.
 39 | // To have this structure working with relative paths, we have to use custom options.
 40 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 41 |   // Making sure that the publicPath goes back to to build folder.
 42 |   ? { publicPath: Array(cssFilename.split('/').length).join('../') }
 43 |   : undefined;
 44 | 
 45 | // This is the production configuration.
 46 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 47 | // The development configuration is different and lives in a separate file.
 48 | module.exports = {
 49 |   // Don't attempt to continue if there are any errors.
 50 |   bail: true,
 51 |   // We generate sourcemaps in production. This is slow but gives good results.
 52 |   // You can exclude the *.map files from the build during deployment.
 53 |   devtool: 'source-map',
 54 |   // In production, we only want to load the polyfills and the app code.
 55 |   entry: [
 56 |     require.resolve('./polyfills'),
 57 |     paths.appIndexJs
 58 |   ],
 59 |   output: {
 60 |     // The build folder.
 61 |     path: paths.appBuild,
 62 |     // Generated JS file names (with nested folders).
 63 |     // There will be one main bundle, and one file per asynchronous chunk.
 64 |     // We don't currently advertise code splitting but Webpack supports it.
 65 |     filename: 'static/js/[name].[chunkhash:8].js',
 66 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 67 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 68 |     publicPath: publicPath
 69 |   },
 70 |   resolve: {
 71 |     // This allows you to set a fallback for where Webpack should look for modules.
 72 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 73 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 74 |     // if there any conflicts. This matches Node resolution mechanism.
 75 |     // https://github.com/facebookincubator/create-react-app/issues/253
 76 |     fallback: paths.nodePaths,
 77 |     // These are the reasonable defaults supported by the Node ecosystem.
 78 |     // We also include JSX as a common component filename extension to support
 79 |     // some tools, although we do not recommend using it, see:
 80 |     // https://github.com/facebookincubator/create-react-app/issues/290
 81 |     extensions: ['.js', '.json', '.jsx', ''],
 82 |     alias: {
 83 |       // Support React Native Web
 84 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 85 |       'react-native': 'react-native-web'
 86 |     }
 87 |   },
 88 |   
 89 |   module: {
 90 |     // First, run the linter.
 91 |     // It's important to do this before Babel processes the JS.
 92 |     preLoaders: [
 93 |       {
 94 |         test: /\.(js|jsx)$/,
 95 |         loader: 'eslint',
 96 |         include: paths.appSrc
 97 |       }
 98 |     ],
 99 |     loaders: [
100 |       // ** ADDING/UPDATING LOADERS **
101 |       // The "url" loader handles all assets unless explicitly excluded.
102 |       // The `exclude` list *must* be updated with every change to loader extensions.
103 |       // When adding a new loader, you must add its `test`
104 |       // as a new entry in the `exclude` list in the "url" loader.
105 | 
106 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
107 |       // Otherwise, it acts like the "file" loader.
108 |       {
109 |         exclude: [
110 |           /\.html$/,
111 |           /\.(js|jsx)$/,
112 |           /\.css$/,
113 |           /\.json$/,
114 |           /\.svg$/
115 |         ],
116 |         loader: 'url',
117 |         query: {
118 |           limit: 10000,
119 |           name: 'static/media/[name].[hash:8].[ext]'
120 |         }
121 |       },
122 |       // Process JS with Babel.
123 |       {
124 |         test: /\.(js|jsx)$/,
125 |         include: paths.appSrc,
126 |         loader: 'babel',
127 |         
128 |       },
129 |       // The notation here is somewhat confusing.
130 |       // "postcss" loader applies autoprefixer to our CSS.
131 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
132 |       // "style" loader normally turns CSS into JS modules injecting <style>,
133 |       // but unlike in development configuration, we do something different.
134 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
135 |       // (second argument), then grabs the result CSS and puts it into a
136 |       // separate file in our build process. This way we actually ship
137 |       // a single CSS file in production instead of JS code injecting <style>
138 |       // tags. If you use code splitting, however, any async bundles will still
139 |       // use the "style" loader inside the async code so CSS from them won't be
140 |       // in the main CSS file.
141 |       {
142 |         test: /\.css$/,
143 |         loader: ExtractTextPlugin.extract(
144 |           'style',
145 |           'css?importLoaders=1!postcss',
146 |           extractTextPluginOptions
147 |         )
148 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
149 |       },
150 |       // JSON is not enabled by default in Webpack but both Node and Browserify
151 |       // allow it implicitly so we also enable it.
152 |       {
153 |         test: /\.json$/,
154 |         loader: 'json'
155 |       },
156 |       // "file" loader for svg
157 |       {
158 |         test: /\.svg$/,
159 |         loader: "babel-loader!react-svg-loader",
160 |         options: {
161 |           jsx: true // true outputs JSX tags
162 |         },
163 |       }
164 |       // ** STOP ** Are you adding a new loader?
165 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
166 |     ]
167 |   },
168 |   
169 |   // We use PostCSS for autoprefixing only.
170 |   postcss: function() {
171 |     return [
172 |       autoprefixer({
173 |         browsers: [
174 |           '>1%',
175 |           'last 4 versions',
176 |           'Firefox ESR',
177 |           'not ie < 9', // React doesn't support IE8 anyway
178 |         ]
179 |       }),
180 |     ];
181 |   },
182 |   plugins: [
183 |     // Makes some environment variables available in index.html.
184 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
185 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
186 |     // In production, it will be an empty string unless you specify "homepage"
187 |     // in `package.json`, in which case it will be the pathname of that URL.
188 |     new InterpolateHtmlPlugin(env.raw),
189 |     // Generates an `index.html` file with the <script> injected.
190 |     new HtmlWebpackPlugin({
191 |       inject: true,
192 |       template: paths.appHtml,
193 |       minify: {
194 |         removeComments: true,
195 |         collapseWhitespace: true,
196 |         removeRedundantAttributes: true,
197 |         useShortDoctype: true,
198 |         removeEmptyAttributes: true,
199 |         removeStyleLinkTypeAttributes: true,
200 |         keepClosingSlash: true,
201 |         minifyJS: true,
202 |         minifyCSS: true,
203 |         minifyURLs: true
204 |       }
205 |     }),
206 |     // Makes some environment variables available to the JS code, for example:
207 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
208 |     // It is absolutely essential that NODE_ENV was set to production here.
209 |     // Otherwise React will be compiled in the very slow development mode.
210 |     new webpack.DefinePlugin(env.stringified),
211 |     // This helps ensure the builds are consistent if source hasn't changed:
212 |     new webpack.optimize.OccurrenceOrderPlugin(),
213 |     // Try to dedupe duplicated modules, if any:
214 |     new webpack.optimize.DedupePlugin(),
215 |     // Minify the code.
216 |     new webpack.optimize.UglifyJsPlugin({
217 |       compress: {
218 |         screw_ie8: true, // React doesn't support IE8
219 |         warnings: false
220 |       },
221 |       mangle: {
222 |         screw_ie8: true
223 |       },
224 |       output: {
225 |         comments: false,
226 |         screw_ie8: true
227 |       }
228 |     }),
229 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
230 |     new ExtractTextPlugin(cssFilename),
231 |     // Generate a manifest file which contains a mapping of all asset filenames
232 |     // to their corresponding output file so that tools can pick it up without
233 |     // having to parse `index.html`.
234 |     new ManifestPlugin({
235 |       fileName: 'asset-manifest.json'
236 |     })
237 |   ],
238 |   // Some libraries import Node modules but don't use them in the browser.
239 |   // Tell Webpack to provide empty mocks for them so importing them works.
240 |   node: {
241 |     fs: 'empty',
242 |     net: 'empty',
243 |     tls: 'empty'
244 |   }
245 | };
246 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | process.env.NODE_ENV = 'development';
  4 | 
  5 | // Load environment variables from .env file. Suppress warnings using silent
  6 | // if this file is missing. dotenv will never modify any environment variables
  7 | // that have already been set.
  8 | // https://github.com/motdotla/dotenv
  9 | require('dotenv').config({silent: true});
 10 | 
 11 | var chalk = require('chalk');
 12 | var webpack = require('webpack');
 13 | var WebpackDevServer = require('webpack-dev-server');
 14 | var historyApiFallback = require('connect-history-api-fallback');
 15 | var httpProxyMiddleware = require('http-proxy-middleware');
 16 | var detect = require('detect-port');
 17 | var clearConsole = require('react-dev-utils/clearConsole');
 18 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 19 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 20 | var getProcessForPort = require('react-dev-utils/getProcessForPort');
 21 | var openBrowser = require('react-dev-utils/openBrowser');
 22 | var prompt = require('react-dev-utils/prompt');
 23 | var fs = require('fs');
 24 | var config = require('../config/webpack.config.dev');
 25 | var paths = require('../config/paths');
 26 | 
 27 | var useYarn = fs.existsSync(paths.yarnLockFile);
 28 | var cli = useYarn ? 'yarn' : 'npm';
 29 | var isInteractive = process.stdout.isTTY;
 30 | 
 31 | // Warn and crash if required files are missing
 32 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 33 |   process.exit(1);
 34 | }
 35 | 
 36 | // Tools like Cloud9 rely on this.
 37 | var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 38 | var compiler;
 39 | var handleCompile;
 40 | 
 41 | // You can safely remove this after ejecting.
 42 | // We only use this block for testing of Create React App itself:
 43 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 44 | if (isSmokeTest) {
 45 |   handleCompile = function (err, stats) {
 46 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 47 |       process.exit(1);
 48 |     } else {
 49 |       process.exit(0);
 50 |     }
 51 |   };
 52 | }
 53 | 
 54 | function setupCompiler(host, port, protocol) {
 55 |   // "Compiler" is a low-level interface to Webpack.
 56 |   // It lets us listen to some events and provide our own custom messages.
 57 |   compiler = webpack(config, handleCompile);
 58 | 
 59 |   // "invalid" event fires when you have changed a file, and Webpack is
 60 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 61 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 62 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 63 |   compiler.plugin('invalid', function() {
 64 |     if (isInteractive) {
 65 |       clearConsole();
 66 |     }
 67 |     console.log('Compiling...');
 68 |   });
 69 | 
 70 |   var isFirstCompile = true;
 71 | 
 72 |   // "done" event fires when Webpack has finished recompiling the bundle.
 73 |   // Whether or not you have warnings or errors, you will get this event.
 74 |   compiler.plugin('done', function(stats) {
 75 |     if (isInteractive) {
 76 |       clearConsole();
 77 |     }
 78 | 
 79 |     // We have switched off the default Webpack output in WebpackDevServer
 80 |     // options so we are going to "massage" the warnings and errors and present
 81 |     // them in a readable focused way.
 82 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 83 |     var isSuccessful = !messages.errors.length && !messages.warnings.length;
 84 |     var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
 85 | 
 86 |     if (isSuccessful) {
 87 |       console.log(chalk.green('Compiled successfully!'));
 88 |     }
 89 | 
 90 |     if (showInstructions) {
 91 |       console.log();
 92 |       console.log('The app is running at:');
 93 |       console.log();
 94 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 95 |       console.log();
 96 |       console.log('Note that the development build is not optimized.');
 97 |       console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
 98 |       console.log();
 99 |       isFirstCompile = false;
100 |     }
101 | 
102 |     // If errors exist, only show errors.
103 |     if (messages.errors.length) {
104 |       console.log(chalk.red('Failed to compile.'));
105 |       console.log();
106 |       messages.errors.forEach(message => {
107 |         console.log(message);
108 |         console.log();
109 |       });
110 |       return;
111 |     }
112 | 
113 |     // Show warnings if no errors were found.
114 |     if (messages.warnings.length) {
115 |       console.log(chalk.yellow('Compiled with warnings.'));
116 |       console.log();
117 |       messages.warnings.forEach(message => {
118 |         console.log(message);
119 |         console.log();
120 |       });
121 |       // Teach some ESLint tricks.
122 |       console.log('You may use special comments to disable some warnings.');
123 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
124 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
125 |     }
126 |   });
127 | }
128 | 
129 | // We need to provide a custom onError function for httpProxyMiddleware.
130 | // It allows us to log custom error messages on the console.
131 | function onProxyError(proxy) {
132 |   return function(err, req, res){
133 |     var host = req.headers && req.headers.host;
134 |     console.log(
135 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
136 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
137 |     );
138 |     console.log(
139 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
140 |       chalk.cyan(err.code) + ').'
141 |     );
142 |     console.log();
143 | 
144 |     // And immediately send the proper error response to the client.
145 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
146 |     if (res.writeHead && !res.headersSent) {
147 |         res.writeHead(500);
148 |     }
149 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
150 |       host + ' to ' + proxy + ' (' + err.code + ').'
151 |     );
152 |   }
153 | }
154 | 
155 | function addMiddleware(devServer) {
156 |   // `proxy` lets you to specify a fallback server during development.
157 |   // Every unrecognized request will be forwarded to it.
158 |   var proxy = require(paths.appPackageJson).proxy;
159 |   devServer.use(historyApiFallback({
160 |     // Paths with dots should still use the history fallback.
161 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
162 |     disableDotRule: true,
163 |     // For single page apps, we generally want to fallback to /index.html.
164 |     // However we also want to respect `proxy` for API calls.
165 |     // So if `proxy` is specified, we need to decide which fallback to use.
166 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
167 |     // Modern browsers include text/html into `accept` header when navigating.
168 |     // However API calls like `fetch()` won’t generally accept text/html.
169 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
170 |     htmlAcceptHeaders: proxy ?
171 |       ['text/html'] :
172 |       ['text/html', '*/*']
173 |   }));
174 |   if (proxy) {
175 |     if (typeof proxy !== 'string') {
176 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
177 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
178 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
179 |       process.exit(1);
180 |     }
181 | 
182 |     // Otherwise, if proxy is specified, we will let it handle any request.
183 |     // There are a few exceptions which we won't send to the proxy:
184 |     // - /index.html (served as HTML5 history API fallback)
185 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
186 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
187 |     // Tip: use https://jex.im/regulex/ to visualize the regex
188 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
189 | 
190 |     // Pass the scope regex both to Express and to the middleware for proxying
191 |     // of both HTTP and WebSockets to work without false positives.
192 |     var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
193 |       target: proxy,
194 |       logLevel: 'silent',
195 |       onProxyReq: function(proxyReq) {
196 |         // Browers may send Origin headers even with same-origin
197 |         // requests. To prevent CORS issues, we have to change
198 |         // the Origin to match the target URL.
199 |         if (proxyReq.getHeader('origin')) {
200 |           proxyReq.setHeader('origin', proxy);
201 |         }
202 |       },
203 |       onError: onProxyError(proxy),
204 |       secure: false,
205 |       changeOrigin: true,
206 |       ws: true,
207 |       xfwd: true
208 |     });
209 |     devServer.use(mayProxy, hpm);
210 | 
211 |     // Listen for the websocket 'upgrade' event and upgrade the connection.
212 |     // If this is not done, httpProxyMiddleware will not try to upgrade until
213 |     // an initial plain HTTP request is made.
214 |     devServer.listeningApp.on('upgrade', hpm.upgrade);
215 |   }
216 | 
217 |   // Finally, by now we have certainly resolved the URL.
218 |   // It may be /index.html, so let the dev server try serving it again.
219 |   devServer.use(devServer.middleware);
220 | }
221 | 
222 | function runDevServer(host, port, protocol) {
223 |   var devServer = new WebpackDevServer(compiler, {
224 |     // Enable gzip compression of generated files.
225 |     compress: true,
226 |     // Silence WebpackDevServer's own logs since they're generally not useful.
227 |     // It will still show compile warnings and errors with this setting.
228 |     clientLogLevel: 'none',
229 |     // By default WebpackDevServer serves physical files from current directory
230 |     // in addition to all the virtual build products that it serves from memory.
231 |     // This is confusing because those files won’t automatically be available in
232 |     // production build folder unless we copy them. However, copying the whole
233 |     // project directory is dangerous because we may expose sensitive files.
234 |     // Instead, we establish a convention that only files in `public` directory
235 |     // get served. Our build script will copy `public` into the `build` folder.
236 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
237 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
238 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
239 |     // Note that we only recommend to use `public` folder as an escape hatch
240 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
241 |     // for some reason broken when imported through Webpack. If you just want to
242 |     // use an image, put it in `src` and `import` it from JavaScript instead.
243 |     contentBase: paths.appPublic,
244 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
245 |     // for the WebpackDevServer client so it can learn when the files were
246 |     // updated. The WebpackDevServer client is included as an entry point
247 |     // in the Webpack development configuration. Note that only changes
248 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
249 |     hot: true,
250 |     // It is important to tell WebpackDevServer to use the same "root" path
251 |     // as we specified in the config. In development, we always serve from /.
252 |     publicPath: config.output.publicPath,
253 |     // WebpackDevServer is noisy by default so we emit custom message instead
254 |     // by listening to the compiler events with `compiler.plugin` calls above.
255 |     quiet: true,
256 |     // Reportedly, this avoids CPU overload on some systems.
257 |     // https://github.com/facebookincubator/create-react-app/issues/293
258 |     watchOptions: {
259 |       ignored: /node_modules/
260 |     },
261 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
262 |     https: protocol === "https",
263 |     host: host
264 |   });
265 | 
266 |   // Our custom middleware proxies requests to /index.html or a remote API.
267 |   addMiddleware(devServer);
268 | 
269 |   // Launch WebpackDevServer.
270 |   devServer.listen(port, err => {
271 |     if (err) {
272 |       return console.log(err);
273 |     }
274 | 
275 |     if (isInteractive) {
276 |       clearConsole();
277 |     }
278 |     console.log(chalk.cyan('Starting the development server...'));
279 |     console.log();
280 | 
281 |     openBrowser(protocol + '://' + host + ':' + port + '/');
282 |   });
283 | }
284 | 
285 | function run(port) {
286 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
287 |   var host = process.env.HOST || 'localhost';
288 |   setupCompiler(host, port, protocol);
289 |   runDevServer(host, port, protocol);
290 | }
291 | 
292 | // We attempt to use the default port but if it is busy, we offer the user to
293 | // run on a different port. `detect()` Promise resolves to the next free port.
294 | detect(DEFAULT_PORT).then(port => {
295 |   if (port === DEFAULT_PORT) {
296 |     run(port);
297 |     return;
298 |   }
299 | 
300 |   if (isInteractive) {
301 |     clearConsole();
302 |     var existingProcess = getProcessForPort(DEFAULT_PORT);
303 |     var question =
304 |       chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
305 |         ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
306 |         '\n\nWould you like to run the app on another port instead?';
307 | 
308 |     prompt(question, true).then(shouldChangePort => {
309 |       if (shouldChangePort) {
310 |         run(port);
311 |       }
312 |     });
313 |   } else {
314 |     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
315 |   }
316 | });
317 | 


--------------------------------------------------------------------------------
/src/controls/Controls.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import ReactModal from 'react-modal'
  3 | import ControlButton from './ControlButton'
  4 | import Counter from './Counter'
  5 | import { Select, Checkbox } from './inputs/index'
  6 | import config from '../config/configHandler'
  7 | import colorThemes from '../config/colorThemes'
  8 | import shapesHandler from '../shapesHandler'
  9 | import SaveShapeModal from './modals/SaveShapeModal'
 10 | import ImportShapeModal from './modals/ImportShapeModal'
 11 | import ManageShapesModal from './modals/ManageShapesModal'
 12 | import notif from '../notifications'
 13 | import IconRightArrow from '../media/icon-right-arrow.svg'
 14 | import utils from '../utils'
 15 | import '../css/controls/Controls.css'
 16 | import '../css/controls/Modal.css'
 17 | const configData = config.get()
 18 | const themesList = utils.getSelectList(Object.keys(colorThemes))
 19 | const cellSizeList = utils.getSelectList(configData.cellSizesList)
 20 | const borderSizeList = utils.getSelectList(configData.borderSizesList)
 21 | 
 22 | export default class Controls extends Component {
 23 |   constructor(props) {
 24 |     super(props)
 25 |     this.state = {
 26 |       isControlsOpen: configData.isControlsOpen,
 27 |       isOptionsOpen: configData.isOptionsOpen,
 28 |       defaultShapes: null,
 29 |       importShapeModalOpen: false,
 30 |       saveShapeModalOpen: false,
 31 |       manageShapesModalOpen: false,
 32 |       headerHeight: 0
 33 |     }
 34 |     ReactModal.setAppElement('#app')
 35 |     this.resizeTimer = null
 36 |     this.toggleControls = this.toggleControls.bind(this)
 37 |     this.toggleOptions = this.toggleOptions.bind(this)
 38 |     this.switchIterationMode = this.switchIterationMode.bind(this)
 39 |     this.switchShowNeighborsCount = this.switchShowNeighborsCount.bind(this)
 40 |     this.switchRandomSeed = this.switchRandomSeed.bind(this)
 41 |     this.changeTimeCompression = this.changeTimeCompression.bind(this)
 42 |     this.changeColorTheme = this.changeColorTheme.bind(this)
 43 |     this.changeCellAndBorderSize = this.changeCellAndBorderSize.bind(this)
 44 |     this.resetCells = this.resetCells.bind(this)
 45 |     this.saveShape = this.saveShape.bind(this)
 46 |     this.importShape = this.importShape.bind(this)
 47 |     this.handleShapeChange = this.handleShapeChange.bind(this)
 48 |     this.handleSaveShapeModal = this.handleSaveShapeModal.bind(this)
 49 |     this.handleImportShapeModal = this.handleImportShapeModal.bind(this)
 50 |     this.handleManageShapesModal = this.handleManageShapesModal.bind(this)
 51 |     this.deleteShape = this.deleteShape.bind(this)
 52 |     this.getMenuMaxHeight = this.getMenuMaxHeight.bind(this)
 53 |     this.onResize = this.onResize.bind(this)
 54 |   }
 55 | 
 56 |   toggleControls() {
 57 |     let value
 58 |     this.setState(prevState => {
 59 |       return value = { isControlsOpen: !prevState.isControlsOpen }
 60 |     }, () => {config.save(value)})
 61 |   }
 62 | 
 63 |   toggleOptions() {
 64 |     let value
 65 |     this.setState(prevState => {
 66 |       return value = { isOptionsOpen: !prevState.isOptionsOpen }
 67 |     }, () => {config.save(value)})
 68 |   }
 69 | 
 70 |   switchIterationMode() {
 71 |     this.props.switchIterationMode(this.props.isIterating)
 72 |   }
 73 | 
 74 |   switchShowNeighborsCount() {
 75 |     this.props.switchShowNeighborsCount()
 76 |   }
 77 | 
 78 |   switchRandomSeed(event) {
 79 |     this.props.switchRandomSeed(event.target.checked)
 80 |   }
 81 | 
 82 |   changeTimeCompression(event) {
 83 |     this.props.changeTimeCompression(event.target.value)
 84 |   }
 85 | 
 86 |   changeColorTheme(event) {
 87 |     this.props.changeColorTheme(event.target.value)
 88 |   }
 89 | 
 90 |   changeCellAndBorderSize(event, type) {
 91 |     const newSize = event.target.value !== '' ? parseInt(event.target.value, 10) : 0
 92 |     let newValue = {}
 93 |     if (type === 'cell') {
 94 |       newValue.cellSize = newSize
 95 |     } else {
 96 |       newValue.borderSize = newSize
 97 |     }
 98 |     this.props.changeCellAndBorderSize(newValue)
 99 |   }
100 | 
101 |   resetCells() {
102 |     this.props.resetCells()
103 |   }
104 | 
105 |   saveShape(name) {
106 |     this.props.saveShape(name)
107 |   }
108 | 
109 |   importShape(shapeExportString) {
110 |     this.props.importShape(shapeExportString)
111 |   }
112 | 
113 |   handleShapeChange(type, event) {
114 |     const shapeName = event.target.value
115 |     if (shapeName === 'Load a shape') return this.props.resetCells()
116 |     this.props.loadShapeFromDb(type, shapeName)
117 |   }
118 | 
119 |   handleSaveShapeModal() {
120 |     if (this.props.randomSeedGenerated) {
121 |       return notif.cantSaveShape("Can't save shape with random seed activated. Disable random seed and reset the game.")
122 |     } else if (!this.props.allIndexChanged.length) {
123 |       return notif.cantSaveShape('Create a shape first.')
124 |     } else if (this.props.shapesLibraryNames.indexOf(this.props.activeShape.name) !== -1) {
125 |       return notif.cantSaveShape('This shape is already a default shape.')
126 |     }
127 |     this.setState(prevState => {
128 |       return { saveShapeModalOpen : !prevState.saveShapeModalOpen }
129 |     })
130 |   }
131 | 
132 |   handleImportShapeModal() {
133 |     this.setState(prevState => {
134 |       return { importShapeModalOpen : !prevState.importShapeModalOpen }
135 |     })
136 |   }
137 | 
138 |   handleManageShapesModal() {
139 |     this.setState(prevState => {
140 |       return { manageShapesModalOpen: !prevState.manageShapesModalOpen }
141 |     })
142 |   }
143 | 
144 |   deleteShape(name) {
145 |     if (!confirm('Do you really want to delete this shape ?')) {return}
146 |     const state = shapesHandler.deleteCustomShape(name)
147 |     const isNoShapeLeft = state === 'noShapeLeft'
148 |     const isActiveStateShape = name === this.props.activeShape.name
149 |     if (isNoShapeLeft || isActiveStateShape) {
150 |       if (isNoShapeLeft) this.handleManageShapesModal()
151 |       if (isActiveStateShape) this.resetCells()
152 |     } else {
153 |       // refresh the shape list
154 |       this.setState(this.state)
155 |     }
156 |   }
157 | 
158 |   getMenuMaxHeight() {
159 |     const headerGeometry = this.header.getBoundingClientRect()
160 |     this.setState(() => {
161 |       return { headerHeight: headerGeometry.bottom - headerGeometry.top }
162 |     })
163 |   }
164 | 
165 |   onResize() {
166 |     // Debounce resize
167 |     if (this.resizeTimer) clearTimeout(this.resizeTimer)
168 |     this.resizeTimer = setTimeout(this.getMenuMaxHeight, 200)
169 |   }
170 | 
171 |   componentDidMount() {
172 |     this.getMenuMaxHeight()
173 |     window.addEventListener('resize', this.onResize, { passive: true })
174 |   }
175 | 
176 |   render() {
177 |     const isOptionsMenuOpenClass = this.state.isOptionsOpen ? 'open' : ''
178 |     const isShowNeighborsCountDisabled = this.props.cellSize < 10
179 |     const showNeighboursCountTitle = isShowNeighborsCountDisabled ?
180 |       'This option is disabled when the cell size is under 10 pixels.' :
181 |       'Show the number of alive neighbours for each cell.'
182 |     const randomSeedTitle = 'If this option is checked, the canvas will be populated ' +
183 |       'by a random seed when reset. If not, the canvas will be filled with dead cells.'
184 |     const translateX = -(100 - ((this.props.cellsAlive / this.props.cellsCount) * 100).toFixed(1))
185 |     const alivePercent = { transform: `translate3d(${translateX}%, 0, 0)`, backgroundColor: colorThemes[this.props.colorTheme].aliveCell }
186 |     const customShapesNames = shapesHandler.getCustomShapesNames()
187 |     const customShapeSelectLabel = this.props.activeShape.type === 'custom' ?
188 |      this.props.activeShape.name : 'Load a shape'
189 |     const defaultShapeSelectLabel = this.props.activeShape.type === 'default' ?
190 |       this.props.activeShape.name : 'Load a shape'
191 |     // Save shape CTA data
192 |     let saveShapeCtaClass =
193 |       (this.props.randomSeedGenerated || !this.props.allIndexChanged.length) ||
194 |       (this.props.shapesLibraryNames.indexOf(this.props.activeShape.name) !== -1) ?
195 |       'disabled' : ''
196 |     let saveShapeCtaTitle = 'Save and share your shape.'
197 |     saveShapeCtaTitle = !this.props.allIndexChanged.length ?
198 |       'Create a shape first.' : saveShapeCtaTitle
199 |     saveShapeCtaTitle = this.props.randomSeedGenerated ?
200 |       "Can't save shape with random seed activated. Disable random seed and reset the game." :
201 |       saveShapeCtaTitle
202 |     return (
203 |       <section className={`controls ${this.state.isControlsOpen ? 'open' : ''}`}
204 |                style={{
205 |                  backgroundColor: colorThemes[this.props.colorTheme].controlsBackground,
206 |                  color: colorThemes[this.props.colorTheme].controlsText,
207 |                  borderColor: colorThemes[this.props.colorTheme].controlsBorder
208 |                }}>
209 |         <style scoped>
210 |           {`button:hover, input[type=submit]:hover {background-color: ${colorThemes[this.props.colorTheme].buttonHoverBackground}}
211 |             @media screen and (max-width: 560px) {.options-wrapper {max-height: ${window.innerHeight - this.state.headerHeight}px}}`}
212 |         </style>
213 |         <header ref={header => this.header = header}>
214 |           <button className="open-controls-cta" onClick={this.toggleControls}
215 |             alt="Right Arrow" title="Open / close controls">
216 |             <IconRightArrow width={24} height={24} className="icon" fill={colorThemes[this.props.colorTheme].controlsText} />
217 |           </button>
218 |           <div className="controls-bar-wrapper">
219 |             <div className="info-bar">
220 |               <Counter iterationCount={this.props.iterationCount} />
221 |               <div className="info grid-size">{this.props.gridSize[0] + 'x' + this.props.gridSize[1]}</div>
222 |               <div className="info cells-graph">
223 |                 <div className="background" style={{ backgroundColor: colorThemes[this.props.colorTheme].deadCell }}>
224 |                   <span className="background-alive" style={alivePercent}> </span>
225 |                   <span className="value" style={{ color: colorThemes[this.props.colorTheme].cellGraphText }}>
226 |                     {`${utils.formatDigits(this.props.cellsAlive)} / ${utils.formatDigits(this.props.cellsCount)}`}
227 |                   </span>
228 |                 </div>
229 |               </div>
230 |             </div>
231 |             <div className="controls-bar">
232 |               <ControlButton className="play-cta big-cta"
233 |                              title="Play / Pause the animation"
234 |                              alt="Play / pause button"
235 |                              color={colorThemes[this.props.colorTheme].controlsText}
236 |                              handleChange={this.switchIterationMode}
237 |                              type={this.props.isIterating ? 'pause' : 'play'}
238 |                              buttonLabel={this.props.isIterating ? 'pause' : 'play'} />
239 |               <ControlButton className="reset-cta big-cta"
240 |                              title="Reset the game"
241 |                              alt="Reset button"
242 |                              color={colorThemes[this.props.colorTheme].controlsText}
243 |                              handleChange={this.resetCells}
244 |                              type="reset"
245 |                              buttonLabel="Reset" />
246 |               <ControlButton className={`options-cta big-cta ${isOptionsMenuOpenClass}`}
247 |                              title="Open / Close the options"
248 |                              alt="Down arrow button"
249 |                              color={colorThemes[this.props.colorTheme].controlsText}
250 |                              handleChange={this.toggleOptions}
251 |                              type="options"
252 |                              buttonLabel="Options" />
253 |             </div>
254 |           </div>
255 |         </header>
256 |         <div className={`options-wrapper ${isOptionsMenuOpenClass}`}>
257 |           <style scoped>
258 |             {`.checkbox-wrapper label .checkbox-icon {border-color: ${colorThemes[this.props.colorTheme].controlsText}}
259 |               .checkbox-wrapper input[type=checkbox]:checked + label .checkbox-icon {background-color: ${colorThemes[this.props.colorTheme].controlsText}}`}
260 |           </style>
261 |           <ul className={`options-list`}>
262 |             <li>
263 |               <Checkbox id="show-neighbors-count"
264 |                         label="Show neighbors count"
265 |                         isDisabled={isShowNeighborsCountDisabled}
266 |                         isChecked={this.props.showNeighborsCount}
267 |                         title={showNeighboursCountTitle}
268 |                         handleChange={this.switchShowNeighborsCount} />
269 |             </li>
270 |             <li>
271 |               <Checkbox id="random-seed"
272 |                         label="Random seed"
273 |                         isChecked={this.props.randomSeed}
274 |                         title={randomSeedTitle}
275 |                         handleChange={this.switchRandomSeed} />
276 |             </li>
277 |             <li>
278 |               <Select label="Color theme"
279 |                       defaultValue={this.props.colorTheme}
280 |                       options={themesList}
281 |                       handleChange={this.changeColorTheme} />
282 |             </li>
283 |             <li>
284 |               <Select label="Time compression"
285 |                       defaultValue={this.props.timeCompression}
286 |                       options={configData.timeCompressionList}
287 |                       handleChange={this.changeTimeCompression} />
288 |             </li>
289 | 
290 |             <li>
291 |               <Select label="Cell size (in px)"
292 |                       type="cell"
293 |                       defaultValue={this.props.cellSize}
294 |                       options={cellSizeList}
295 |                       handleChange={this.changeCellAndBorderSize} />
296 |             </li>
297 | 
298 |             <li>
299 |               <Select label="Border Size (in px)"
300 |                       type="border"
301 |                       defaultValue={this.props.borderSize}
302 |                       options={borderSizeList}
303 |                       handleChange={this.changeCellAndBorderSize} />
304 |             </li>
305 | 
306 |             {Array.isArray(this.props.shapesLibraryNames) ?
307 |               <li>
308 |                 <div className="input-block select-wrapper">
309 |                   <label className="input-label">
310 |                     <span>Default shapes</span>
311 |                     <select className="input-style"
312 |                             value={defaultShapeSelectLabel}
313 |                             onChange={this.handleShapeChange.bind(this, 'default')}>
314 |                       {this.props.shapesLibraryNames.map((el, index) => 
315 |                         <option key={index} value={el}>{el}</option>
316 |                       )}
317 |                     </select>
318 |                   </label>
319 |                 </div>
320 |               </li>
321 |               : ''
322 |             }
323 | 
324 |             {customShapesNames ?
325 |               <li>
326 |                 <div className="input-block select-wrapper">
327 |                   <label className="input-label">
328 |                     <span>Custom shapes</span>
329 |                     <select className="input-style"
330 |                             value={customShapeSelectLabel}
331 |                             onChange={this.handleShapeChange.bind(this, 'custom')}>
332 |                       {customShapesNames.map((el, index) => {
333 |                         return <option key={index} value={el}>{el}</option>
334 |                       })}
335 |                     </select>
336 |                   </label>
337 |                 </div>
338 |               </li>
339 |               : ''
340 |             }
341 | 
342 |             <li>
343 |               <div className="input-block">
344 |               <button id="save-shape-cta"
345 |                       className={`input-style small-cta ${saveShapeCtaClass}`}
346 |                       title={saveShapeCtaTitle}
347 |                       onClick={this.handleSaveShapeModal}>
348 |                   Save & share
349 |                 </button>
350 |                 <SaveShapeModal
351 |                   showModal={this.state.saveShapeModalOpen}
352 |                   handleShowModal={this.handleSaveShapeModal}
353 |                   saveShape={this.saveShape}
354 |                   activeShape={this.props.activeShape}
355 |                   colorTheme={this.props.colorTheme}
356 |                   modalStyle={this.props.modalStyle} />
357 |               </div>
358 |             </li>
359 | 
360 |             <li>
361 |               <div className="input-block">
362 |                 <button id="import-shape-cta"
363 |                         className="input-style small-cta"
364 |                         title="Import a shape"
365 |                         onClick={this.handleImportShapeModal}>
366 |                   Import a shape
367 |                 </button>
368 |                 <ImportShapeModal
369 |                   showModal={this.state.importShapeModalOpen}
370 |                   handleShowModal={this.handleImportShapeModal}
371 |                   importShape={this.importShape}
372 |                   colorTheme={this.props.colorTheme}
373 |                   modalStyle={this.props.modalStyle} />
374 |               </div>
375 |             </li>
376 | 
377 |             {customShapesNames ?
378 |               <li>
379 |                 <div className="input-block">
380 |                   <button id="manage-shape-cta"
381 |                           className="input-style small-cta"
382 |                           title={saveShapeCtaTitle}
383 |                           onClick={this.handleManageShapesModal}>
384 |                     Manage shapes
385 |                   </button>
386 |                   <ManageShapesModal
387 |                     showModal={this.state.manageShapesModalOpen}
388 |                     handleShowModal={this.handleManageShapesModal}
389 |                     loadShape={this.props.loadShapeFromDb}
390 |                     activeShape={this.props.activeShape}
391 |                     resetCells={this.props.resetCells}
392 |                     deleteShape={this.deleteShape}
393 |                     colorTheme={this.props.colorTheme}
394 |                     modalStyle={this.props.modalStyle} />
395 |                 </div>
396 |               </li>
397 |               : ''
398 |             }
399 |           </ul>
400 |         </div>
401 |       </section>
402 |     )
403 |   }
404 | }
405 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import config from './config/configHandler'
  3 | import colorThemes from './config/colorThemes'
  4 | import utils from './utils'
  5 | import Controls from './controls/Controls'
  6 | import Footer from './Footer'
  7 | import NotificationSystem from 'react-notification-system'
  8 | import shapesHandler from './shapesHandler'
  9 | import notif from './notifications'
 10 | import './css/App.css'
 11 | const configData = config.get()
 12 | let shapesLibrary = null
 13 | 
 14 | export default class App extends Component {
 15 |   constructor(props) {
 16 |     super(props)
 17 |     utils.initGridData(configData.cellSize, configData.borderSize)
 18 |     const lifeMap = utils.generateSeed(configData.randomSeed)
 19 |     this.state = {
 20 |       iterationCount: 0,
 21 |       cellSize: configData.cellSize,
 22 |       borderSize: configData.borderSize,
 23 |       randomSeed: configData.randomSeed,
 24 |       showNeighborsCount: configData.cellSize < 10 ?
 25 |         false : configData.showNeighborsCount,
 26 |       timeCompression: configData.timeCompression,
 27 |       colSize: utils.getColSize(),
 28 |       gridSize: utils.getGridSize(),
 29 |       totalCells: utils.getTotalCells(),
 30 |       lifeMap: lifeMap,
 31 |       neighbourLifeMap: utils.getNeighbourMap(lifeMap),
 32 |       cellsAlive: utils.getCellsAliveCount(lifeMap),
 33 |       wrapperWidth: { width: `${utils.getWrapperWidth()}px` },
 34 |       isIterating: false,
 35 |       allIndexChanged: [],
 36 |       shapesLibraryNames: null,
 37 |       activeShape: { type: null, name: null, exportString: null },
 38 |       randomSeedGenerated: configData.randomSeed,
 39 |       colorTheme: configData.colorTheme,
 40 |       modalStyle: config.getModalStyle(configData.colorTheme)
 41 |     }
 42 |     this.resizeTimer = null
 43 |     this.interval = null
 44 |     this.pixelRatio = window.devicePixelRatio
 45 |     this.currentIndexChanged = {}
 46 |     this.changeLifeMode = null
 47 |     this.fireFrame = this.fireFrame.bind(this)
 48 |     this.generateCells = this.generateCells.bind(this)
 49 |     this.renderCell = this.renderCell.bind(this)
 50 |     this.stopClickDrag = this.stopClickDrag.bind(this)
 51 |     this.handleCellChangeState = this.handleCellChangeState.bind(this)
 52 |     this.switchShowNeighborsCount = this.switchShowNeighborsCount.bind(this)
 53 |     this.switchRandomSeed = this.switchRandomSeed.bind(this)
 54 |     this.changeTimeCompression = this.changeTimeCompression.bind(this)
 55 |     this.changeColorTheme = this.changeColorTheme.bind(this)
 56 |     this.switchIterationMode = this.switchIterationMode.bind(this)
 57 |     this.changeCellAndBorderSize = this.changeCellAndBorderSize.bind(this)
 58 |     this.resetCells = this.resetCells.bind(this)
 59 |     this.refreshCanvas = this.refreshCanvas.bind(this)
 60 |     this.setCanvasProperties = this.setCanvasProperties.bind(this)
 61 |     this.importShape = this.importShape.bind(this)
 62 |     this.saveShape = this.saveShape.bind(this)
 63 |     this.loadShape = this.loadShape.bind(this)
 64 |     this.loadShapeFromDb = this.loadShapeFromDb.bind(this)
 65 |     this.displayResizeGridPrompt = this.displayResizeGridPrompt.bind(this)
 66 |     this.onResize = this.onResize.bind(this)
 67 |   }
 68 | 
 69 |   fireFrame() {
 70 |     let newLifeMap = utils.getLifeMap(this.state.lifeMap, this.state.neighbourLifeMap)
 71 |     this.lifeMapDiff = utils.getLifeMapDiff(this.state.lifeMap, newLifeMap)
 72 |     if (this.state.showNeighborsCount) {
 73 |       this.lifeMapDiff = utils.getLifeMapDiffWithNeighbors(
 74 |         this.lifeMapDiff, this.state.neighbourLifeMap, utils.getNeighbourMap(newLifeMap)
 75 |       )
 76 |     }
 77 |     this.setState({
 78 |       isIterating: true,
 79 |       iterationCount: this.state.iterationCount + 1,
 80 |       lifeMap: newLifeMap,
 81 |       neighbourLifeMap: utils.getNeighbourMap(newLifeMap),
 82 |       cellsAlive: utils.getCellsAliveCount(newLifeMap)
 83 |     }, this.generateCells.bind(this, true))
 84 |     clearInterval(this.interval)
 85 |     if (this.state.timeCompression) {
 86 |       this.interval = setInterval(() => {
 87 |         this.animation = requestAnimationFrame(this.fireFrame)
 88 |       }, this.state.timeCompression)
 89 |     } else {
 90 |       this.animation = requestAnimationFrame(this.fireFrame)
 91 |     }
 92 |   }
 93 | 
 94 |   generateCells(useLifeMapDiff) {
 95 |     // If lifeMapDiff is provided, generate only the cells which changed
 96 |     // else generate all the cells.
 97 |     const totalCellToGenerate = useLifeMapDiff ? this.lifeMapDiff.length : utils.getTotalCells()
 98 |     const borderSize = this.state.borderSize
 99 |     const cellSize = this.state.cellSize
100 |     for (let i = 0; i < totalCellToGenerate; i++) {
101 |       let activeIndex = useLifeMapDiff ? this.lifeMapDiff[i] : i
102 |       let xPos = activeIndex % this.state.colSize
103 |       xPos = xPos * cellSize + (borderSize * xPos) * 2 + borderSize
104 |       let yPos = Math.floor(activeIndex / this.state.colSize)
105 |       yPos = yPos * cellSize + (borderSize * yPos) * 2 + borderSize
106 |       this.renderCell(activeIndex, xPos, yPos)
107 |     }
108 |   }
109 | 
110 |   renderCell(cellIndex, xPos, yPos) {
111 |     this.ctx.fillStyle = this.state.lifeMap[cellIndex] ?
112 |       colorThemes[this.state.colorTheme].aliveCell : colorThemes[this.state.colorTheme].deadCell
113 |     this.ctx.fillRect(xPos, yPos, this.state.cellSize, this.state.cellSize)
114 |     if (this.state.showNeighborsCount) {
115 |       this.ctx.fillStyle = colorThemes[this.state.colorTheme].cellText
116 |       const halfCellSize = this.state.cellSize / 2
117 |       this.ctx.fillText(
118 |         this.state.neighbourLifeMap[cellIndex],
119 |         xPos + halfCellSize,
120 |         yPos + halfCellSize
121 |       )
122 |     }
123 |   }
124 | 
125 |   handleCellChangeState(event) {
126 |     // Prevent mouse events (mousedown & mousemove) to trigger immediatly after a 'touchstart'
127 |     // but allow mixed devices (mouse and touch) to use both type of inputs separately
128 |     if (event.type === 'touchstart') {
129 |       this.lastTouchedTime = new Date()
130 |     } else if (event.type === 'mousedown' || event.type === 'mousemove') {
131 |       if (this.lastTouchedTime) {
132 |         if (new Date() - this.lastTouchedTime < 750) {
133 |           return event.preventDefault()
134 |         }
135 |       }
136 |     }
137 |     const pointerType = utils.getPointerType(event.type)
138 |     const startEvent = pointerType === 'touch' ? 'touchstart' : 'mousedown'
139 |     const moveEvent = pointerType === 'touch' ? 'touchmove' : 'mousemove'
140 |     const isTouchEvent = event.type === 'touchstart' || event.type === 'touchmove'
141 |     const canvasWidth = Math.floor(this.canvas.width / this.pixelRatio)
142 |     const canvasHeight = Math.floor(this.canvas.height / this.pixelRatio)
143 |     // [SAFARI BUG] event.buttons not recognized
144 |     // https://github.com/facebook/react/issues/7122
145 |     const buttonPressedCode = event.buttons !== undefined ? event.buttons : event.nativeEvent.which
146 |     // if mouse over the canvas but not clicking
147 |     if (event.type === 'mousemove' && buttonPressedCode !== 1) {return}
148 |     let x, y
149 |     if (event.type === 'mousedown' || event.type === 'mousemove') {
150 |       x = event.pageX - this.canvas.offsetLeft
151 |       y = event.pageY - this.canvas.offsetTop
152 |     } else if (isTouchEvent) {
153 |       x = event.touches[0].clientX - this.canvas.offsetLeft
154 |       y = event.touches[0].clientY - this.canvas.offsetTop
155 |     }
156 |     // Prevent dragging overflowing out of the canvas
157 |     if (x < 0 || x > canvasWidth || y < 0 || y > canvasHeight) {return}
158 |     let cellSize = this.state.cellSize + this.state.borderSize * 2
159 |     let col = Math.floor(x / cellSize)
160 |     let row = Math.floor(y / cellSize)
161 |     let cellIndex = row * utils.getColSize() + col
162 | 
163 |     if (event.type === moveEvent) {
164 |       // Don't switch a cell multiple times or cell with the
165 |       // same state as the new one changed
166 |       if (this.currentIndexChanged.hasOwnProperty(cellIndex) ||
167 |         this.state.lifeMap[cellIndex] === this.changeLifeMode
168 |       ) {return}
169 |       
170 |       this.currentIndexChanged[cellIndex] = true
171 |     } else if (event.type === startEvent) {
172 |       // Set the switch mode (life / death) if click and moving the mouse
173 |       this.changeLifeMode = this.state.lifeMap[cellIndex] ? 0 : 1
174 |     }
175 |     let newValues = utils.switchCellState({
176 |       index: cellIndex,
177 |       lifeMap: this.state.lifeMap.slice(0),
178 |       neighbourLifeMap: this.state.neighbourLifeMap.slice(0),
179 |       cellsAlive: this.state.cellsAlive
180 |     })
181 |     let indexInAllCellChanged = this.state.allIndexChanged.indexOf(cellIndex)
182 |     let newAllIndexChanged = this.state.allIndexChanged
183 |     if (indexInAllCellChanged !== -1) {
184 |       newAllIndexChanged.splice(indexInAllCellChanged, 1)
185 |     } else {
186 |       newAllIndexChanged.push(cellIndex)
187 |     }
188 |     // Generate an array of the cell's index changed to only repaint them
189 |     this.lifeMapDiff = utils.getLifeMapDiff(this.state.lifeMap, newValues.lifeMap)
190 |     if (this.state.showNeighborsCount) {
191 |       this.lifeMapDiff = utils.getLifeMapDiffWithNeighbors(this.lifeMapDiff,
192 |         this.state.neighbourLifeMap, newValues.neighbourLifeMap)
193 |     }
194 |     this.setState(prevState => ({
195 |       lifeMap: newValues.lifeMap,
196 |       neighbourLifeMap: newValues.neighbourLifeMap,
197 |       cellsAlive: newValues.cellsAlive,
198 |       allIndexChanged: newAllIndexChanged,
199 |       activeShape: { type: null, name: null, exportString: null },
200 |     }), this.generateCells.bind(this, true))
201 |   }
202 | 
203 |   stopClickDrag() { this.currentIndexChanged = {} }
204 | 
205 |   switchShowNeighborsCount() {
206 |     let value
207 |     this.setState(
208 |       prevState => {
209 |         value = { showNeighborsCount: !prevState.showNeighborsCount }
210 |         return value
211 |       }, () => {
212 |         this.refreshCanvas()
213 |         this.generateCells()
214 |         config.save(value)
215 |       }
216 |     )
217 |   }
218 | 
219 |   switchRandomSeed() {
220 |     let newRandomSeed
221 |     this.setState(
222 |       prevState => newRandomSeed = { randomSeed: !prevState.randomSeed },
223 |       () => {config.save(newRandomSeed)}
224 |     )
225 |   }
226 | 
227 |   changeTimeCompression(value) {
228 |     let newTimeCompression = { timeCompression: parseInt(value, 10) }
229 |     this.setState(
230 |       newTimeCompression,
231 |       () => {config.save(newTimeCompression)}
232 |     )
233 |   }
234 | 
235 |   changeColorTheme(value) {
236 |     let newColorTheme = { colorTheme: value }
237 |     this.setState(
238 |       {
239 |         ...newColorTheme,
240 |         modalStyle: config.getModalStyle(value)
241 |       },
242 |       () => {
243 |         this.generateCells()
244 |         config.save(newColorTheme)
245 |       }
246 |     )
247 |   }  
248 | 
249 |   switchIterationMode() {
250 |     const activeShape = { type: null, name: null, exportString: null }
251 |     clearInterval(this.interval)
252 |     if (this.state.isIterating) {
253 |       cancelAnimationFrame(this.animation)
254 |       this.setState({ isIterating: false, activeShape})
255 |     } else {
256 |       this.setState({ isIterating: true, activeShape},
257 |         () => {this.animation = requestAnimationFrame(this.fireFrame)})
258 |     }
259 |   }
260 | 
261 |   changeCellAndBorderSize(newValues) {
262 |     let newCellSize = newValues.cellSize !== undefined ? newValues.cellSize : this.state.cellSize
263 |     const newBorderSize = newValues.borderSize !== undefined ? newValues.borderSize : this.state.borderSize
264 |     if (newCellSize < 2) newCellSize = 2
265 |     let configToSave = { cellSize: newCellSize, borderSize: newBorderSize }
266 |     // If cell or border size is too big and there is no cell
267 |     // that can fit the grid
268 |     if (!utils.gridHasCells(newCellSize, newBorderSize)) {
269 |       notif.clearAll()
270 |       return notif.cellOrBorderSizeTooBig()
271 |     }
272 |     utils.initGridData(newCellSize, newBorderSize)
273 |     let newState = {
274 |       cellSize: newCellSize,
275 |       borderSize: newBorderSize,
276 |       totalCells: utils.getTotalCells(),
277 |       gridSize: utils.getGridSize()
278 |     }
279 |     // Disable show neigbors count if new cell size < 10
280 |     if (newCellSize < 10 && this.state.showNeighborsCount) {
281 |       newState.showNeighborsCount = false
282 |       configToSave.showNeighborsCount = false
283 |       notif.showNeighborsCountDisabled()
284 |     }
285 |     this.setState(newState, () => {
286 |       this.setCanvasProperties()
287 |       this.refreshCanvas()
288 |       config.save(configToSave)
289 |       this.state.activeShape.name ?
290 |         this.loadShapeFromDb(this.state.activeShape.type, this.state.activeShape.name) :
291 |         this.resetCells()
292 |     })
293 |   }
294 | 
295 |   refreshCanvas() {
296 |     this.ctx.clearRect(0, 0, utils.getWrapperWidth(), utils.getWrapperHeight())
297 |   }
298 | 
299 |   resetCells() {
300 |     let lifeMap = utils.generateSeed(this.state.randomSeed)
301 |     if (this.state.isIterating) this.switchIterationMode()
302 |     this.setState({
303 |       iterationCount: 0,
304 |       lifeMap: lifeMap,
305 |       neighbourLifeMap: utils.getNeighbourMap(lifeMap),
306 |       cellsAlive: utils.getCellsAliveCount(lifeMap),
307 |       colSize: utils.getColSize(),
308 |       gridSize: utils.getGridSize(),
309 |       totalCells: utils.getTotalCells(),
310 |       isIterating: false,
311 |       allIndexChanged: [],
312 |       randomSeedGenerated: this.state.randomSeed,
313 |       activeShape: { type: null, name: null, exportString: null }
314 |     }, this.generateCells)
315 |   }
316 | 
317 |   setCanvasProperties() {
318 |     this.ctx.scale(this.pixelRatio, this.pixelRatio)
319 |     this.ctx.font = `${this.state.cellSize}px monospace`
320 |     this.ctx.textAlign = 'center'
321 |     this.ctx.textBaseline = 'middle'
322 |   }
323 | 
324 |   saveShape(name) {
325 |     if (shapesHandler.loadCustomShape(name)) {
326 |       if (!confirm('This shape already exists. Overwrite it ?')) {return}
327 |     }
328 |     const indexChanged = this.state.iterationCount > 0 ?
329 |       utils.getChangedIndexesFromLifeMap(this.state.lifeMap) :
330 |       this.state.allIndexChanged
331 |     let shapeData = { name, indexChanged, gridSize: this.state.gridSize }
332 |     shapesHandler.saveCustomShape(shapeData)
333 |     const exportString = shapesHandler.loadCustomShape(name).exportString
334 |     this.setState({ activeShape: { type: 'custom', name, exportString } })
335 |   }
336 | 
337 |   importShape(shapeExportString) {
338 |     const shapeData = shapesHandler.decodeShapeExportString(shapeExportString)
339 |     const isAlreadyExistingShape = shapesHandler.doesImportShapeAlreadyExist(shapeExportString)
340 |     // If shapeExportString is not a valid Base64 string
341 |     if (!shapeData) {return notif.wrongShapeExportString()}
342 |     // If same shape already exists in custom shapes
343 |     if (isAlreadyExistingShape) {return notif.shapeAlreadyExists(isAlreadyExistingShape)}
344 |     shapesHandler.importCustomShape(shapeData, shapeExportString)
345 |     notif.shapeSuccessfullyImported()
346 |     this.loadShapeFromDb('custom', shapeData.name)
347 |   }
348 | 
349 |   loadShape(shapeData, type) {
350 |     const gridSize = this.state.gridSize
351 |     // If shape size is bigger than actual grid size,
352 |     // reduce cell size or border size to make it fit
353 |     if (gridSize[0] < shapeData.shapeSize[0] || gridSize[1] < shapeData.shapeSize[1]) {
354 |       const newCellAndBorderValues = utils.adaptGridSizeToShapeSize(
355 |         shapeData.shapeSize,
356 |         this.state.cellSize,
357 |         this.state.borderSize
358 |       )
359 |       // If shape is still too big even with minimal
360 |       // cell and border size, display notif
361 |       if (!newCellAndBorderValues) return notif.shapeIsTooBig()
362 |       this.changeCellAndBorderSize(newCellAndBorderValues)
363 |       notif.clearAll()
364 |       notif.cellBorderSizeChanged()
365 |     }
366 |     let newLifeMap = utils.generateSeed(false)
367 |     if (this.state.isIterating) {this.switchIterationMode()}
368 |     let colStart = Math.floor(gridSize[0] / 2 - shapeData.shapeSize[0] / 2)
369 |     let rowStart = Math.floor(gridSize[1] / 2 - shapeData.shapeSize[1] / 2)
370 |     let allIndexChanged = []
371 |     for (let i = 0; i < shapeData.lifeMap.length; i++) {
372 |       let activeRow = Math.floor(shapeData.lifeMap[i] / shapeData.shapeSize[0])
373 |       let activeRowIndex = rowStart * gridSize[0] + activeRow * gridSize[0]
374 |       let activeColLifeMapIndex = shapeData.lifeMap[i] % shapeData.shapeSize[0]
375 |       let activeIndex = activeRowIndex + colStart + activeColLifeMapIndex
376 |       allIndexChanged.push(activeIndex)
377 |       newLifeMap[activeIndex] = 1
378 |     }
379 |     this.setState({
380 |       iterationCount: 0,
381 |       lifeMap: newLifeMap,
382 |       neighbourLifeMap: utils.getNeighbourMap(newLifeMap),
383 |       cellsAlive: utils.getCellsAliveCount(newLifeMap),
384 |       colSize: utils.getColSize(),
385 |       isIterating: false,
386 |       allIndexChanged: allIndexChanged,
387 |       randomSeedGenerated: false,
388 |       activeShape: { type, name: shapeData.name, exportString: shapeData.exportString }
389 |     }, this.generateCells)
390 |   }
391 | 
392 |   loadShapeFromDb(type, name) {
393 |     const shapeData = type === 'custom' ? shapesHandler.loadCustomShape(name) : shapesLibrary[name]
394 |     this.loadShape(shapeData, type)
395 |   }
396 | 
397 |   displayResizeGridPrompt() {
398 |     // Prevent displaying the resize Grid prompt if the user mobile
399 |     // virtual keyboard is showing up (which trigger a resize event)
400 |     if (utils.getDeviceType() === 'mobile' && this.windowWidth === window.innerWidth) return
401 |     this.windowWidth = window.innerWidth
402 |     // When window is resized, ask if the user wants
403 |     // to adapt the canvas size to the new window size
404 |     notif.resizeGridPrompt(() => {
405 |       utils.initGridData(this.state.cellSize, this.state.borderSize, true)
406 |       // Redraw the canvas with the new size
407 |       this.changeCellAndBorderSize({})
408 |     })
409 |   }
410 | 
411 |   onResize() {
412 |     // Debounce resize
413 |     if (this.resizeTimer) clearTimeout(this.resizeTimer)
414 |     this.resizeTimer = setTimeout(this.displayResizeGridPrompt, 200)
415 |   }
416 | 
417 |   componentDidMount() {
418 |     notif.init(this.refs.notificationSystem)
419 |     this.ctx = this.canvas.getContext('2d')
420 |     this.setCanvasProperties()
421 |     this.generateCells()
422 |     this.windowWidth = window.innerWidth
423 |     window.addEventListener('resize', this.onResize, { passive: true })
424 |     // Get shapes library & set it in memory
425 |     fetch(new Request('shapesLibrary.json'))
426 |       .then(response => response.json())
427 |       .then(response => {
428 |         let shapesLibraryNames = Object.keys(response)
429 |         shapesLibraryNames.unshift('Load a shape')
430 |         shapesLibrary = response
431 |         this.setState({ shapesLibraryNames })
432 |       })
433 |   }
434 | 
435 |   render() {
436 |     const wrapperWidth = utils.getWrapperWidth()
437 |     const wrapperHeight = utils.getWrapperHeight()
438 |     const state = this.state
439 |     const canvasStyle = this.pixelRatio > 1 ?
440 |       { width: `${wrapperWidth}px`, height: `${wrapperHeight}px` } : {}
441 |     return (
442 |       <div className="main-wrapper"
443 |            style={{ backgroundColor: colorThemes[this.state.colorTheme].background }}>
444 |         <canvas id="game"
445 |                 width={wrapperWidth * this.pixelRatio}
446 |                 height={wrapperHeight * this.pixelRatio}
447 |                 style={canvasStyle}
448 |                 ref={canvas => this.canvas = canvas}
449 |                 onMouseMove={this.handleCellChangeState}
450 |                 onMouseDown={this.handleCellChangeState}
451 |                 onMouseUp={this.stopClickDrag}
452 |                 onTouchStart={this.handleCellChangeState}
453 |                 onTouchMove={this.handleCellChangeState}
454 |                 onTouchEnd={this.stopClickDrag}>
455 |           Game of Life sandbox.
456 |         </canvas>
457 |         <Controls isIterating={state.isIterating}
458 |                   switchIterationMode={this.switchIterationMode}
459 |                   resetCells={this.resetCells}
460 |                   iterationCount={state.iterationCount}
461 |                   cellsCount={state.totalCells}
462 |                   cellsAlive={state.cellsAlive}
463 |                   gridSize={state.gridSize}
464 |                   showNeighborsCount={state.showNeighborsCount}
465 |                   switchShowNeighborsCount={this.switchShowNeighborsCount}
466 |                   switchRandomSeed={this.switchRandomSeed}
467 |                   randomSeed={state.randomSeed}
468 |                   changeTimeCompression={this.changeTimeCompression}
469 |                   timeCompression={state.timeCompression}
470 |                   cellSize={state.cellSize}
471 |                   borderSize={state.borderSize}
472 |                   changeCellAndBorderSize={this.changeCellAndBorderSize}
473 |                   loadShapeFromDb={this.loadShapeFromDb}
474 |                   saveShape={this.saveShape}
475 |                   importShape={this.importShape}
476 |                   activeShape={state.activeShape}
477 |                   shapesLibraryNames={state.shapesLibraryNames}
478 |                   randomSeedGenerated={state.randomSeedGenerated}
479 |                   allIndexChanged={state.allIndexChanged}
480 |                   colorTheme={state.colorTheme}
481 |                   changeColorTheme={this.changeColorTheme}
482 |                   modalStyle={state.modalStyle} />
483 |         <Footer colorTheme={state.colorTheme} modalStyle={state.modalStyle} />
484 |         <NotificationSystem ref="notificationSystem" />
485 |       </div>
486 |     )
487 |   }
488 | }
489 | 


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