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' ?
: '' }
)