Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e3e5064

Browse files
Add intro screen functionality
1 parent 2a69e70 commit e3e5064

File tree

6 files changed

+33
-5
lines changed

6 files changed

+33
-5
lines changed

‎src/actions/start.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { START } from '../static/constants/actions';
2+
3+
export const start = payload => ({
4+
type: START,
5+
payload
6+
});

‎src/pages/Game.jsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React, { Fragment } from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import { connect } from 'react-redux';
5+
import { start } from '../actions/start';
56
import { restart } from '../actions/restart';
6-
import { getCurrent, getAnswers } from '../selectors';
7+
import { getIntro,getCurrent, getAnswers } from '../selectors';
78
import ButtonContainer from '../components/ButtonContainer';
89
import ProgressBar from '../components/ProgressBar';
910
import Code from '../components/Code';
@@ -35,7 +36,7 @@ const ShareContainer = styled.p`
3536
text-align: center;
3637
`;
3738

38-
const Game = ({ current, answers, style, onRestart }) => {
39+
const Game = ({ intro,current, answers, style, onStart, onRestart }) => {
3940
let correct;
4041

4142
if (!current) {
@@ -44,13 +45,17 @@ const Game = ({ current, answers, style, onRestart }) => {
4445

4546
return (
4647
<Fragment>
47-
{current ? (
48+
{intro && <Button label="Start" id="start" onClick={onStart} />}
49+
50+
{!intro && current && (
4851
<Fragment>
4952
<ProgressBar />
5053
<Code style={style} />
5154
<ButtonContainer />
5255
</Fragment>
53-
) : (
56+
)}
57+
58+
{!intro && !current && (
5459
<Fragment>
5560
<Result />
5661
<Percentage />
@@ -82,17 +87,21 @@ const Game = ({ current, answers, style, onRestart }) => {
8287

8388
Game.propTypes = {
8489
style: PropTypes.object.isRequired,
90+
onStart: PropTypes.func.isRequired,
8591
onRestart: PropTypes.func.isRequired,
8692
answers: PropTypes.array.isRequired,
93+
intro: PropTypes.bool.isRequired,
8794
current: PropTypes.object
8895
};
8996

9097
export default connect(
9198
state => ({
99+
intro: getIntro(state),
92100
current: getCurrent(state),
93101
answers: getAnswers(state)
94102
}),
95103
{
104+
onStart: () => start(),
96105
onRestart: () => restart()
97106
}
98107
)(Game);

‎src/reducers/index.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { SUBMIT, TOGGLE, TOGGLE_JS, TOGGLE_MODE, RESTART } from '../static/constants/actions';
1+
import {
2+
SUBMIT,
3+
TOGGLE,
4+
TOGGLE_JS,
5+
TOGGLE_MODE,
6+
START,
7+
RESTART
8+
} from '../static/constants/actions';
29
import { randomFromRange } from '../helpers/randomFromRange';
310

411
const rootReducer = (state, action) => {
@@ -22,6 +29,8 @@ const rootReducer = (state, action) => {
2229
return { ...state, js: action.payload };
2330
case TOGGLE_MODE:
2431
return { ...state, mode: action.payload };
32+
case START:
33+
return { ...state, intro: false };
2534
case RESTART:
2635
return {
2736
...state,

‎src/selectors/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ export const getMode = state => state.mode;
66

77
export const getJS = state => state.js;
88

9+
export const getIntro = state => state.intro;
10+
911
export const getCurrent = state => state.progress.current;
1012

1113
export const getAnswers = state => state.progress.answers;

‎src/static/constants/actions.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ export const SUBMIT = 'SUBMIT';
22
export const TOGGLE = 'TOGGLE';
33
export const TOGGLE_JS = 'TOGGLE_JS';
44
export const TOGGLE_MODE = 'TOGGLE_MODE';
5+
export const START = 'START';
56
export const RESTART = 'RESTART';

‎src/store/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const initialProgress = {
2121
const initialState = {
2222
js: 'es5',
2323
mode: 'dark',
24+
intro: true,
2425
patterns: answers,
2526
progress: initialProgress
2627
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /