Add intro screen functionality

Author: zoltantothcom

src/actions/start.js

@@ -0,0 +1,6 @@
+import { START } from '../static/constants/actions';
+
+export const start = payload => ({
+  type: START,
+  payload
+});

src/pages/Game.jsx

@@ -2,8 +2,9 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
+import { start } from '../actions/start';
 import { restart } from '../actions/restart';
-import { getCurrent, getAnswers } from '../selectors';
+import { getIntro, getCurrent, getAnswers } from '../selectors';
 import ButtonContainer from '../components/ButtonContainer';
 import ProgressBar from '../components/ProgressBar';
 import Code from '../components/Code';
@@ -35,7 +36,7 @@ const ShareContainer = styled.p`
   text-align: center;
 `;
 
-const Game = ({ current, answers, style, onRestart }) => {
+const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
   let correct;
 
   if (!current) {
@@ -44,13 +45,17 @@ const Game = ({ current, answers, style, onRestart }) => {
 
   return (
     <Fragment>
-      {current ? (
+      {intro && <Button label="Start" id="start" onClick={onStart} />}
+
+      {!intro && current && (
         <Fragment>
           <ProgressBar />
           <Code style={style} />
           <ButtonContainer />
         </Fragment>
-      ) : (
+      )}
+
+      {!intro && !current && (
         <Fragment>
           <Result />
           <Percentage />
@@ -82,17 +87,21 @@ const Game = ({ current, answers, style, onRestart }) => {
 
 Game.propTypes = {
   style: PropTypes.object.isRequired,
+  onStart: PropTypes.func.isRequired,
   onRestart: PropTypes.func.isRequired,
   answers: PropTypes.array.isRequired,
+  intro: PropTypes.bool.isRequired,
   current: PropTypes.object
 };
 
 export default connect(
   state => ({
+    intro: getIntro(state),
     current: getCurrent(state),
     answers: getAnswers(state)
   }),
   {
+    onStart: () => start(),
     onRestart: () => restart()
   }
 )(Game);

src/reducers/index.js

@@ -1,4 +1,11 @@
-import { SUBMIT, TOGGLE, TOGGLE_JS, TOGGLE_MODE, RESTART } from '../static/constants/actions';
+import {
+  SUBMIT,
+  TOGGLE,
+  TOGGLE_JS,
+  TOGGLE_MODE,
+  START,
+  RESTART
+} from '../static/constants/actions';
 import { randomFromRange } from '../helpers/randomFromRange';
 
 const rootReducer = (state, action) => {
@@ -22,6 +29,8 @@ const rootReducer = (state, action) => {
     return { ...state, js: action.payload };
   case TOGGLE_MODE:
     return { ...state, mode: action.payload };
+  case START:
+    return { ...state, intro: false };
   case RESTART:
     return {
       ...state,

src/selectors/index.js

@@ -6,6 +6,8 @@ export const getMode = state => state.mode;
 
 export const getJS = state => state.js;
 
+export const getIntro = state => state.intro;
+
 export const getCurrent = state => state.progress.current;
 
 export const getAnswers = state => state.progress.answers;

src/static/constants/actions.js

@@ -2,4 +2,5 @@ export const SUBMIT = 'SUBMIT';
 export const TOGGLE = 'TOGGLE';
 export const TOGGLE_JS = 'TOGGLE_JS';
 export const TOGGLE_MODE = 'TOGGLE_MODE';
+export const START = 'START';
 export const RESTART = 'RESTART';

src/store/index.js

@@ -21,6 +21,7 @@ export const initialProgress = {
 const initialState = {
   js: 'es5',
   mode: 'dark',
+  intro: true,
   patterns: answers,
   progress: initialProgress
 };