before removing login

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"
   }
 }

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()});

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 {
                             </div>
                         </div>
                     </div>
-                    <div className="col-xs-12 text-center">
+                    <div className="col-sm-3 col-xs-12 pull-right">
+                        <span className="pull-right lock">Lock to stage &nbsp;
+                        {this.props.isLocked?<input className="stage-choice" type="number" min="1" max="4" maxLength="1" size="1" onChange={(e)=>this.props.lockStage(e.target.value, true)} value={this.props.stage} />:''}
+                        <Switch onClick={()=>this.props.lockStage(1)} on={this.props.isLocked} /></span>
+                    </div>
+                    <div className="col-sm-offset-3 col-sm-6 col-xs-12 text-center">
                         {this.state.errMsg!=''?(<div className="error-message">{this.state.errMsg}</div>):''}
                         <button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button>
                     </div>

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;
 }

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 (
             <div>
-                { this.state.showScreen==='stage' ? <ShowStage lockStage={this.lockStage} handleShowQuestion={this.showQuestion} handleEndGame={this.props.handleEndGame} stage={this.state.stage} /> : '' }
+                { this.state.showScreen==='stage' ? <ShowStage lockStage={this.lockStage} handleShowQuestion={this.showQuestion} handleEndGame={this.props.handleEndGame} stage={this.props.stage} /> : '' }
-                { this.state.showScreen==='question' ? <Question isLocked={this.state.isLocked} handleStageUp={this.stageUp} stage={this.state.stage} decidedGroups={this.props.decidedGroups} /> : '' }
+                { this.state.showScreen==='question' ? <Question isLocked={this.props.isLocked} handleStageUp={this.stageUp} stage={this.props.stage} decidedGroups={this.props.decidedGroups} /> : '' }
             </div>
         );
     }

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}
                     >
-                        <span>Stage {this.props.stage}</span>
+                        <span>Stage {this.props.stage} {this.props.isLocked?' (Locked)':''}</span>
                     </div>
                 </div>
             </div>

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 (
             <div>
@@ -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' ?
                     <Game decidedGroups={this.state.decidedGroups}
                         handleEndGame={this.props.handleEndGame} 
+                        stageUp={this.stageUp}
+                        stage={this.state.stage}
+                        isLocked={this.state.isLocked}
+                        lockStage={this.lockStage}
                     /> : '' }
             </div>
         )