From 86bb0d0a9d461d5601e386e288b043cf0cd2c24f Mon Sep 17 00:00:00 2001 From: Dmitry Malakhov Date: Sun, 10 Sep 2017 02:30:57 +0300 Subject: [PATCH 01/10] added choice type route --- .babelrc | 11 +- app/actions/game.js | 10 + app/components/Button/index.js | 4 +- app/components/Button/styled/ButtonStyled.js | 10 +- app/components/Input/styled/LabelStyled.js | 4 +- app/constants/game.js | 7 + app/constants/route.js | 2 + app/containers/ChoiceTypeRouteContainer.js | 17 + app/containers/ConfigureRouteContainer.js | 1 + app/reducers/game.js | 5 + app/routes/AnimationRoute.js | 3 + app/routes/ChoiceTypeRoute.js | 80 ++++ app/routes/ConfigureRoute.js | 13 + ...nfigureRoute.js => RedirectToInitRoute.js} | 14 +- app/routes/ShallowRoute.js | 4 +- app/utils/game.js | 2 +- package.json | 26 +- yarn.lock | 356 +++++++++++++++--- 18 files changed, 489 insertions(+), 80 deletions(-) create mode 100644 app/containers/ChoiceTypeRouteContainer.js create mode 100644 app/routes/ChoiceTypeRoute.js rename app/routes/{RedirectToConfigureRoute.js => RedirectToInitRoute.js} (67%) diff --git a/.babelrc b/.babelrc index 9381fa7..bc5f28e 100644 --- a/.babelrc +++ b/.babelrc @@ -5,5 +5,14 @@ "transform-class-properties", "transform-object-rest-spread", "syntax-dynamic-import" - ] + ], + "env": { + "production": { + "plugins": [ + ["transform-react-remove-prop-types", { + "additionalLibraries": ["react-immutable-proptypes"], + }], + ] + } + } } diff --git a/app/actions/game.js b/app/actions/game.js index 24a7185..13a8729 100644 --- a/app/actions/game.js +++ b/app/actions/game.js @@ -115,3 +115,13 @@ export const restartGame = () => dispatch => { dispatch(resetGameState()); dispatch(redirectToPath(CONFIGURE_ROUTE)); }; + +export const setTypeOfGame = createAction( + 'SET_TYPE_OF_GAME', + type => ({ type }), +); + +export const initTypeOfGame = type => dispatch => { + dispatch(setTypeOfGame(type)); + dispatch(redirectToPath(CONFIGURE_ROUTE)); +}; diff --git a/app/components/Button/index.js b/app/components/Button/index.js index 4f1b5bb..b1c9b4b 100644 --- a/app/components/Button/index.js +++ b/app/components/Button/index.js @@ -11,16 +11,18 @@ import { noop } from '../../../utils/misc'; const propTypes = { label: PropTypes.string, + disabled: PropTypes.bool, onClick: PropTypes.func, }; const defaultProps = { label: '', + disabled: false, onClick: noop, }; const Button = props => ( - + {props.label} ); diff --git a/app/components/Button/styled/ButtonStyled.js b/app/components/Button/styled/ButtonStyled.js index e15da9f..9082931 100644 --- a/app/components/Button/styled/ButtonStyled.js +++ b/app/components/Button/styled/ButtonStyled.js @@ -12,9 +12,11 @@ import { borderStyle, } from 'polished'; -export const ButtonStyled = styled.div` +export const ButtonStyled = styled.button` -webkit-appearance: none; -moz-appearance: none; + background-color: white; + width: 200px; cursor: pointer; margin: 0; position: relative; @@ -23,10 +25,16 @@ export const ButtonStyled = styled.div` vertical-align: middle; align-items: center; text-transform: uppercase; + justify-content: center; ${padding('15px', '15px', '15px', '15px')} ${borderStyle('solid')} ${borderColor('black')} + &:disabled { + ${borderColor('gray')} + ${borderStyle('solid')} + } + &:hover { ${borderStyle('dotted')} } diff --git a/app/components/Input/styled/LabelStyled.js b/app/components/Input/styled/LabelStyled.js index 82ec2f7..005bd2f 100644 --- a/app/components/Input/styled/LabelStyled.js +++ b/app/components/Input/styled/LabelStyled.js @@ -6,6 +6,4 @@ import styled from 'styled-components'; -export const LabelStyled = styled.label` - padding: 10px 1px; -`; +export const LabelStyled = styled.label``; diff --git a/app/constants/game.js b/app/constants/game.js index 98a4157..62327bc 100644 --- a/app/constants/game.js +++ b/app/constants/game.js @@ -1,5 +1,12 @@ +// default config export const DEFAULT_SIZE_PLAYINGBOARD = 3; +// status export const GAME_CONFIGURE = 0; export const GAME_RUN = 1; export const GAME_END = 2; + +// types +export const HOTSEAT = 'hotseat'; +export const PLAYER_VS_COMPUTER = 'pvc'; +export const MULTIPLAYER = 'mp'; diff --git a/app/constants/route.js b/app/constants/route.js index ebf5466..61adc54 100644 --- a/app/constants/route.js +++ b/app/constants/route.js @@ -3,3 +3,5 @@ export const CONFIGURE_ROUTE = '/configure'; export const PLAYINGBOARD_ROUTE = '/playingboard'; export const FINISH_ROUTE = '/finish'; export const ABOUT_ROUTE = '/about'; +export const CHOICE_TYPE_ROUTE = '/choicetype'; +export const INIT_ROUTE = CHOICE_TYPE_ROUTE; diff --git a/app/containers/ChoiceTypeRouteContainer.js b/app/containers/ChoiceTypeRouteContainer.js new file mode 100644 index 0000000..85f565b --- /dev/null +++ b/app/containers/ChoiceTypeRouteContainer.js @@ -0,0 +1,17 @@ +/** + * @author Dmitry Malakhov + */ + +'use strict'; + +import styled from 'styled-components'; + +const ChoiceTypeRouteContainer = styled.div` + height: 200px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +`; + +export default ChoiceTypeRouteContainer; diff --git a/app/containers/ConfigureRouteContainer.js b/app/containers/ConfigureRouteContainer.js index ebe8b80..4cfd394 100644 --- a/app/containers/ConfigureRouteContainer.js +++ b/app/containers/ConfigureRouteContainer.js @@ -11,6 +11,7 @@ const ConfigureRouteContainer = styled.div` flex-direction: column; justify-content: space-around; align-items: center; + height: 400px; `; export default ConfigureRouteContainer; diff --git a/app/reducers/game.js b/app/reducers/game.js index 5c62f9e..80da30d 100644 --- a/app/reducers/game.js +++ b/app/reducers/game.js @@ -14,6 +14,7 @@ import { gameEnd, resetGameState, updateScore, + setTypeOfGame, } from '../actions/game'; import { @@ -56,6 +57,10 @@ export default createReducer({ size, costOfMove, }), + [setTypeOfGame]: (state, { type }) => ({ + ...state, + type, + }), [toggleCellMode]: (state, { rowNum, cellNum }) => ({ ...state, playingboard: state.playingboard.setIn( diff --git a/app/routes/AnimationRoute.js b/app/routes/AnimationRoute.js index ceee022..bf373f3 100644 --- a/app/routes/AnimationRoute.js +++ b/app/routes/AnimationRoute.js @@ -9,6 +9,7 @@ import PropTypes from 'prop-types'; import ConfigureRoute from './ConfigureRoute'; import PlayingboardRoute from './PlayingboardRoute'; import FinishRoute from './FinishRoute'; +import ChoiceTypeRoute from './ChoiceTypeRoute'; import SCTransition from '../components/SCTransition'; import asyncComponent from '../hoc/asyncComponent'; @@ -18,6 +19,7 @@ import { PLAYINGBOARD_ROUTE, FINISH_ROUTE, ABOUT_ROUTE, + CHOICE_TYPE_ROUTE, } from '../constants/route'; const propTypes = { @@ -43,6 +45,7 @@ const availableRoutes = { [CONFIGURE_ROUTE]: ConfigureRoute, [PLAYINGBOARD_ROUTE]: PlayingboardRoute, [FINISH_ROUTE]: FinishRoute, + [CHOICE_TYPE_ROUTE]: ChoiceTypeRoute, [ABOUT_ROUTE]: asyncComponent(AboutRoute), }; diff --git a/app/routes/ChoiceTypeRoute.js b/app/routes/ChoiceTypeRoute.js new file mode 100644 index 0000000..709e820 --- /dev/null +++ b/app/routes/ChoiceTypeRoute.js @@ -0,0 +1,80 @@ +/** + * @author Dmitry Malakhov + */ + +'use strict'; + +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import Button from '../components/Button'; +import ChoiceTypeRouteContainer from '../containers/ChoiceTypeRouteContainer'; +import RouteContainer from '../containers/RouteContainer'; +import { initTypeOfGame } from '../actions/game'; +import { noop } from '../../utils/misc'; + +import { + HOTSEAT, + PLAYER_VS_COMPUTER, + MULTIPLAYER, +} from '../constants/game'; + +const propTypes = { + onInitTypeOfGame: PropTypes.func, +}; + +const defaultProps = { + onInitTypeOfGame: noop, +}; + +class ChoiceTypeRoute extends PureComponent { + _handleClickHotseat = () => { + this.props.onInitTypeOfGame(HOTSEAT); + } + + _handleClickPVC = () => { + this.props.onInitTypeOfGame(PLAYER_VS_COMPUTER); + } + + _handleClickMultiplayer = () => { + this.props.onInitTypeOfGame(MULTIPLAYER); + } + + render() { + return ( + + + `; exports[`Storyshots Button with label 1`] = ` .c0 { -webkit-appearance: none; -moz-appearance: none; + background-color: white; + width: 200px; cursor: pointer; margin: 0; position: relative; @@ -71,6 +91,10 @@ exports[`Storyshots Button with label 1`] = ` -ms-flex-align: center; align-items: center; text-transform: uppercase; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; @@ -85,6 +109,17 @@ exports[`Storyshots Button with label 1`] = ` border-left-color: black; } +.c0:disabled { + border-top-color: gray; + border-right-color: gray; + border-bottom-color: gray; + border-left-color: gray; + border-top-style: solid; + border-right-style: solid; + border-bottom-style: solid; + border-left-style: solid; +} + .c0:hover { border-top-style: dotted; border-right-style: dotted; @@ -92,12 +127,13 @@ exports[`Storyshots Button with label 1`] = ` border-left-style: dotted; } -
Button -
+ `; exports[`Storyshots Cell default props 1`] = ` @@ -265,27 +301,8 @@ exports[`Storyshots GameInfoBox default props 1`] = `
- .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background: #dddddd; -} - -
- .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: space-around; - -webkit-justify-content: space-around; - -ms-flex-pack: space-around; - justify-content: space-around; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -
- .c0 { - margin: 10px; - display: inline-block; -} - - - .c1 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c1 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c1 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
@@ -782,73 +502,16 @@ exports[`Storyshots Row with Cells 1`] = `
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
- .c0 { - width: 50px; - height: 50px; - border: 1px solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 2em; -} - -
From d213e26bfd0b3aae1fff74452942edded95d696a Mon Sep 17 00:00:00 2001 From: Dmitry Malakhov Date: Mon, 11 Sep 2017 03:49:45 +0300 Subject: [PATCH 03/10] massive refactoring --- .../__snapshots__/storyshots.test.js.snap | 2 +- .../UserInfo/index.js | 0 .../UserInfo/styled/NameStyled.js | 0 .../UserInfo/styled/ScoreStyled.js | 0 .../UserInfo/styled/UserInfoStyled.js | 0 .../{GameInfoBox => GameInfo}/index.js | 16 ++-- .../{GameInfoBox => GameInfo}/stories.js | 6 +- .../styled/GameInfoStyled.js} | 0 .../ConfigureHotseat.js} | 91 ++++++++++--------- .../{AboutRoute.js => AboutRoute/index.js} | 2 +- .../index.js} | 14 +-- .../index.js} | 16 ++-- .../styled/ChoiceTypeRouteStyled.js} | 4 +- app/routes/ConfigureRoute/index.js | 56 ++++++++++++ .../styled/ConfigureRouteStyled.js} | 4 +- .../{FinishRoute.js => FinishRoute/index.js} | 16 ++-- .../FinishRoute/styled/FinishRouteStyled.js} | 4 +- .../index.js} | 31 +++---- .../styled/PlayingboardRouteStyled.js} | 0 .../index.js} | 6 +- .../index.js} | 6 +- .../styled}/RouteContainer.js | 0 22 files changed, 165 insertions(+), 109 deletions(-) rename app/components/{GameInfoBox => GameInfo}/UserInfo/index.js (100%) rename app/components/{GameInfoBox => GameInfo}/UserInfo/styled/NameStyled.js (100%) rename app/components/{GameInfoBox => GameInfo}/UserInfo/styled/ScoreStyled.js (100%) rename app/components/{GameInfoBox => GameInfo}/UserInfo/styled/UserInfoStyled.js (100%) rename app/components/{GameInfoBox => GameInfo}/index.js (71%) rename app/components/{GameInfoBox => GameInfo}/stories.js (61%) rename app/components/{GameInfoBox/styled/GameInfoBoxStyled.js => GameInfo/styled/GameInfoStyled.js} (100%) rename app/{routes/ConfigureRoute.js => containers/ConfigureHotseat.js} (64%) rename app/routes/{AboutRoute.js => AboutRoute/index.js} (78%) rename app/routes/{AnimationRoute.js => AnimationRoute/index.js} (85%) rename app/routes/{ChoiceTypeRoute.js => ChoiceTypeRoute/index.js} (80%) rename app/{containers/ChoiceTypeRouteContainer.js => routes/ChoiceTypeRoute/styled/ChoiceTypeRouteStyled.js} (71%) create mode 100644 app/routes/ConfigureRoute/index.js rename app/{containers/ConfigureRouteContainer.js => routes/ConfigureRoute/styled/ConfigureRouteStyled.js} (71%) rename app/routes/{FinishRoute.js => FinishRoute/index.js} (75%) rename app/{containers/FinishRouteContainer.js => routes/FinishRoute/styled/FinishRouteStyled.js} (71%) rename app/routes/{PlayingboardRoute.js => PlayingboardRoute/index.js} (72%) rename app/{containers/PlayingboardRouteContainer.js => routes/PlayingboardRoute/styled/PlayingboardRouteStyled.js} (100%) rename app/routes/{RedirectToInitRoute.js => RedirectToInitRoute/index.js} (85%) rename app/routes/{ShallowRoute.js => ShallowRoute/index.js} (92%) rename app/{containers => routes/styled}/RouteContainer.js (100%) diff --git a/.storybook/__snapshots__/storyshots.test.js.snap b/.storybook/__snapshots__/storyshots.test.js.snap index 96fc958..b338a5e 100644 --- a/.storybook/__snapshots__/storyshots.test.js.snap +++ b/.storybook/__snapshots__/storyshots.test.js.snap @@ -244,7 +244,7 @@ exports[`Storyshots Cell with position 1`] = ` /> `; -exports[`Storyshots GameInfoBox default props 1`] = ` +exports[`Storyshots GameInfo default props 1`] = ` .c1 { display: -webkit-box; display: -webkit-flex; diff --git a/app/components/GameInfoBox/UserInfo/index.js b/app/components/GameInfo/UserInfo/index.js similarity index 100% rename from app/components/GameInfoBox/UserInfo/index.js rename to app/components/GameInfo/UserInfo/index.js diff --git a/app/components/GameInfoBox/UserInfo/styled/NameStyled.js b/app/components/GameInfo/UserInfo/styled/NameStyled.js similarity index 100% rename from app/components/GameInfoBox/UserInfo/styled/NameStyled.js rename to app/components/GameInfo/UserInfo/styled/NameStyled.js diff --git a/app/components/GameInfoBox/UserInfo/styled/ScoreStyled.js b/app/components/GameInfo/UserInfo/styled/ScoreStyled.js similarity index 100% rename from app/components/GameInfoBox/UserInfo/styled/ScoreStyled.js rename to app/components/GameInfo/UserInfo/styled/ScoreStyled.js diff --git a/app/components/GameInfoBox/UserInfo/styled/UserInfoStyled.js b/app/components/GameInfo/UserInfo/styled/UserInfoStyled.js similarity index 100% rename from app/components/GameInfoBox/UserInfo/styled/UserInfoStyled.js rename to app/components/GameInfo/UserInfo/styled/UserInfoStyled.js diff --git a/app/components/GameInfoBox/index.js b/app/components/GameInfo/index.js similarity index 71% rename from app/components/GameInfoBox/index.js rename to app/components/GameInfo/index.js index 617a278..63a145f 100644 --- a/app/components/GameInfoBox/index.js +++ b/app/components/GameInfo/index.js @@ -9,7 +9,7 @@ import PropTypes from 'prop-types'; import { PlayersPropTypes, PlayersDefaultProps } from '../../models/players'; import { ScorePropTypes, ScoreDefaultProps } from '../../models/score'; import UserInfo from './UserInfo'; -import GameInfoBoxStyled from './styled/GameInfoBoxStyled'; +import GameInfoStyled from './styled/GameInfoStyled'; const propTypes = { players: PlayersPropTypes, @@ -23,7 +23,7 @@ const defaultProps = { currentPlayer: 0, }; -const GameInfoBox = ({ players, score, currentPlayer }) => { +const GameInfo = ({ players, score, currentPlayer }) => { const usersInformation = players.map((player, index) => ( { )); return ( - + {usersInformation} - + ); }; -GameInfoBox.propTypes = propTypes; -GameInfoBox.defaultProps = defaultProps; -GameInfoBox.displayName = 'GameInfoBox'; +GameInfo.propTypes = propTypes; +GameInfo.defaultProps = defaultProps; +GameInfo.displayName = 'GameInfo'; -export default GameInfoBox; +export default GameInfo; diff --git a/app/components/GameInfoBox/stories.js b/app/components/GameInfo/stories.js similarity index 61% rename from app/components/GameInfoBox/stories.js rename to app/components/GameInfo/stories.js index be6a1be..d88b8ba 100644 --- a/app/components/GameInfoBox/stories.js +++ b/app/components/GameInfo/stories.js @@ -7,9 +7,9 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import GameInfoBox from './'; +import GameInfo from './'; const onClickAction = action('onClick'); -storiesOf('GameInfoBox', module) - .add('default props', () => ); +storiesOf('GameInfo', module) + .add('default props', () => ); diff --git a/app/components/GameInfoBox/styled/GameInfoBoxStyled.js b/app/components/GameInfo/styled/GameInfoStyled.js similarity index 100% rename from app/components/GameInfoBox/styled/GameInfoBoxStyled.js rename to app/components/GameInfo/styled/GameInfoStyled.js diff --git a/app/routes/ConfigureRoute.js b/app/containers/ConfigureHotseat.js similarity index 64% rename from app/routes/ConfigureRoute.js rename to app/containers/ConfigureHotseat.js index aaf17fd..5013981 100644 --- a/app/routes/ConfigureRoute.js +++ b/app/containers/ConfigureHotseat.js @@ -12,8 +12,7 @@ import { configureGame } from '../actions/game'; import { redirectToPath } from '../actions/app'; import Button from '../components/Button'; import Input from '../components/Input'; -import RouteContainer from '../containers/RouteContainer'; -import ConfigureRouteContainer from '../containers/ConfigureRouteContainer'; + import { DEFAULT_SIZE_PLAYINGBOARD } from '../constants/game'; import { CHOICE_TYPE_ROUTE } from '../constants/route'; @@ -41,7 +40,7 @@ const defaultProps = { onRedirectToPath: noop, }; -class ConfigureRoute extends PureComponent { +class ConfigureHotseatRoute extends PureComponent { constructor(props) { super(props); @@ -97,50 +96,52 @@ class ConfigureRoute extends PureComponent { } render() { - return ( - - - - - - -