diff --git a/package.json b/package.json index e905f1f..51d3d45 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "jwt-decode": "^2.1.0", "postcss": "^5.1.0", "react": "^15.2.1", - "react-dom": "^15.2.1" + "react-dom": "^15.2.1", + "react-toggle-switch": "^2.1.2" } } diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index a3437f5..ac8f7ab 100644 --- a/src/components/App/App.jsx +++ b/src/components/App/App.jsx @@ -13,7 +13,7 @@ class App extends Component { super(props); this.state = { isAuthenticated: this.isAuthenticated(), - gameState: 'game' + gameState: 'chooseCharacters' } auth.on('profile_updated', (newProfile) => { this.setState({isAuthenticated: this.isAuthenticated()}); diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx index 5d9ffe1..2572453 100644 --- a/src/components/ChooseCharacters/ChooseCharacters.jsx +++ b/src/components/ChooseCharacters/ChooseCharacters.jsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import Switch from 'react-toggle-switch'; import { kanaDictionary } from '../../data/kanaDictionary'; import './ChooseCharacters.scss'; import CharacterGroup from './CharacterGroup'; @@ -124,7 +125,12 @@ class ChooseCharacters extends Component { -
+
+ Lock to stage   + {this.props.isLocked?this.props.lockStage(e.target.value, true)} value={this.props.stage} />:''} + this.props.lockStage(1)} on={this.props.isLocked} /> +
+
{this.state.errMsg!=''?(
{this.state.errMsg}
):''}
diff --git a/src/components/ChooseCharacters/ChooseCharacters.scss b/src/components/ChooseCharacters/ChooseCharacters.scss index 436cb3c..2f99817 100644 --- a/src/components/ChooseCharacters/ChooseCharacters.scss +++ b/src/components/ChooseCharacters/ChooseCharacters.scss @@ -52,4 +52,53 @@ .error-message { color: #d9534f; padding-bottom: 10px; +} +.lock { + color: #888; + margin-bottom: 10px; +} +.stage-choice { + border: 1px solid #999; + padding-left: 5px; + border-radius: 5px; + margin-right: 5px; + outline: none; +} +.switch { + border: 1px solid #ccc; + background: #e5e5e5; + width: 44px; + height: 19px; + border-radius: 13px; + cursor: pointer; + display: inline-block; + float: right; + margin-top: 1px; +} + +.switch-toggle { + border: 1px solid #999; + box-shadow: 1px 1px 1px #ccc; + width: 19px; + height: 17px; + left: 0; + border-radius: 12px; + background: #eee; + position: relative; + transition: left .2s ease-in-out; +} + +.switch.on { + border: 1px solid #4da94f; + background: #5cb85c; +} + +.switch.on .switch-toggle { + left: 23px; + border: 1px solid #b8ffb2; + background: #b8ffb2; +} + +.switch.disabled { + cursor: not-allowed; } \ No newline at end of file diff --git a/src/components/Game/Game.jsx b/src/components/Game/Game.jsx index 21b6dbc..715e4a5 100644 --- a/src/components/Game/Game.jsx +++ b/src/components/Game/Game.jsx @@ -8,8 +8,6 @@ class Game extends Component { constructor(props) { super(props); this.state = { - stage:0, - isLocked: false, showScreen: '' } this.showQuestion = this.showQuestion.bind(this); @@ -18,11 +16,13 @@ class Game extends Component { } stageUp() { - this.setState({stage: this.state.stage+1, showScreen: 'stage'}); + this.props.stageUp(); + this.setState({showScreen: 'stage'}); } lockStage(stage) { - this.setState({stage: stage, showScreen: 'question', isLocked: true}); + this.setState({showScreen: 'question'}); + this.props.lockStage(stage); } showQuestion() { @@ -30,14 +30,14 @@ class Game extends Component { } componentWillMount() { - this.stageUp(); + this.setState({showScreen: 'stage'}); } render() { return (
- { this.state.showScreen==='stage' ? : '' } - { this.state.showScreen==='question' ? : '' } + { this.state.showScreen==='stage' ? : '' } + { this.state.showScreen==='question' ? : '' }
); } diff --git a/src/components/Game/Question.jsx b/src/components/Game/Question.jsx index 5f4a9aa..2d34873 100644 --- a/src/components/Game/Question.jsx +++ b/src/components/Game/Question.jsx @@ -77,7 +77,7 @@ class Question extends Component { this.allowedAnswers.push(answer.join('')); }, this); } - console.log(this.allowedAnswers); + // console.log(this.allowedAnswers); } handleAnswer(answer) { @@ -215,7 +215,7 @@ class Question extends Component { aria-valuemax={quizSettings.stageLength[this.props.stage]} style={stageProgressPercentageStyle} > - Stage {this.props.stage} + Stage {this.props.stage} {this.props.isLocked?' (Locked)':''}
diff --git a/src/components/GameContainer/GameContainer.jsx b/src/components/GameContainer/GameContainer.jsx index 284ee73..a7fd99c 100644 --- a/src/components/GameContainer/GameContainer.jsx +++ b/src/components/GameContainer/GameContainer.jsx @@ -8,16 +8,32 @@ class GameContainer extends Component { super(props); this.startGame = this.startGame.bind(this); this.state = { + stage:1, + isLocked: false, decidedGroups: ['h_group3'] } + this.stageUp = this.stageUp.bind(this); + this.lockStage = this.lockStage.bind(this); } startGame(decidedGroups) { - // console.log(options); // prints array this.setState({decidedGroups: decidedGroups}); this.props.handleStartGame(); } + stageUp() { + this.setState({stage: this.state.stage+1}); + } + + lockStage(stage, forceLock) { + stage = parseInt(stage) || 1; + if(stage<1 || stage>4) stage=1; + if(forceLock) + this.setState({stage: stage, isLocked: true}); + else + this.setState({stage: stage, isLocked: !this.state.isLocked}); + } + render() { return (
@@ -26,10 +42,17 @@ class GameContainer extends Component { handleStartGame={this.startGame} isAuthenticated={this.props.isAuthenticated} nickName={this.props.nickName} + stage={this.state.stage} + isLocked={this.state.isLocked} + lockStage={this.lockStage} /> : '' } { this.props.gameState==='game' ? : '' }
)