From 7e67ed48c727047ec73a8ef71995c1cf8249c7ef Mon Sep 17 00:00:00 2001
From: Antti Pilto <antti.pilto@student.oulu.fi>
Date: Mon, 27 Mar 2017 19:53:57 +0300
Subject: [PATCH] fix change locked stage on mobile

---
 src/components/Footer/Footer.jsx               |  1 +
 src/components/Game/ShowStage.jsx              | 10 +++++-----
 src/components/GameContainer/GameContainer.jsx |  8 ++++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index a5fc742..a7b08e9 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -14,6 +14,7 @@ class Footer extends Component {
 
                     <h4>Updates</h4>
                     <p>
+                        <strong>27 March 2017</strong> &middot; Bufix: Allow mobile browsers to change a locked stage number.<br />
                         <strong>24 March 2017</strong> &middot; Enhancement: Improved mobile browser usability with reduced margins.<br />
                         <strong>18 March 2017</strong> &middot; Bugfix: Fixed unintended behavior when same group was selected from both hiragana &amp; katakana. Thanks for the bug report!
                     </p>
diff --git a/src/components/Game/ShowStage.jsx b/src/components/Game/ShowStage.jsx
index 26012d5..6c22eda 100644
--- a/src/components/Game/ShowStage.jsx
+++ b/src/components/Game/ShowStage.jsx
@@ -21,17 +21,17 @@ class ShowStage extends Component {
     showStage() {
         let stageDescription;
         let stageSecondaryDescription = false;
-        if(this.props.stage===1) stageDescription = 'Choose one';
-        if(this.props.stage===2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
-        if(this.props.stage===3) stageDescription = 'Write the answer';
-        if(this.props.stage===4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
+        if(this.props.stage==1) stageDescription = 'Choose one';
+        if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
+        if(this.props.stage==3) stageDescription = 'Write the answer';
+        if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
         let stageContent = (<div className="text-center show-stage">
                 <h1>Stage {this.props.stage}</h1>
                 <h3>{stageDescription}</h3>
                 {stageSecondaryDescription?<h4>{stageSecondaryDescription}</h4>:''}
             </div>);
 
-        if(this.props.stage===5) {
+        if(this.props.stage==5) {
             stageContent = (<div className="text-center show-end">
                 <h1>Congratulations!</h1>
                 <h3>You have passed all 4 stages.</h3>
diff --git a/src/components/GameContainer/GameContainer.jsx b/src/components/GameContainer/GameContainer.jsx
index ebe4134..779a6c3 100644
--- a/src/components/GameContainer/GameContainer.jsx
+++ b/src/components/GameContainer/GameContainer.jsx
@@ -17,6 +17,11 @@ class GameContainer extends Component {
     }
 
     startGame(decidedGroups) {
+        if(parseInt(this.state.stage)<1 || isNaN(parseInt(this.state.stage)))
+            this.setState({stage: 1});
+        else if(parseInt(this.state.stage)>4)
+            this.setState({stage: 4});
+
         this.setState({decidedGroups: decidedGroups});
         this.props.handleStartGame();
     }
@@ -26,8 +31,7 @@ class GameContainer extends Component {
     }
 
     lockStage(stage, forceLock) {
-        stage = parseInt(stage) || 1;
-        if(stage<1 || stage>4) stage=1;
+        // if(stage<1 || stage>4) stage=1; // don't use this to allow backspace
         if(forceLock)
             this.setState({stage: stage, isLocked: true});
         else