stage progress

src/components/App/App.scss

@@ -31,4 +31,8 @@ body {
 }
 .game {
     padding-top: 70px;
+}
+.glyphicon-none:before {
+    content: "\2122";
+    color: transparent !important;
 }

src/components/Game/Game.jsx

@@ -8,7 +8,7 @@ class Game extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            stage:0,
+            stage:1,
             showScreen: ''
         }
         this.showQuestion = this.showQuestion.bind(this);

src/components/Game/Question.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { kanaDictionary } from '../../data/kanaDictionary';
+import { quizSettings } from '../../data/quizSettings';
 import { findRomajisAtKanaKey, removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs';
 import './Question.scss';
 
@@ -10,7 +11,8 @@ class Question extends Component {
             previousQuestion: [],
             previousAnswer: '',
             currentQuestion: [],
-            answerOptions: []
+            answerOptions: [],
+            stageProgress: 0
         }
         this.setNewQuestion = this.setNewQuestion.bind(this);
         this.handleAnswer = this.handleAnswer.bind(this);
@@ -64,6 +66,10 @@ class Question extends Component {
         this.previousAnswer = answer;
         this.setState({previousAnswer: this.previousAnswer});
         this.previousAllowedAnswers = this.allowedAnswers;
+        if(this.isInAllowedAnswers(this.previousAnswer))
+            this.setState({stageProgress: this.state.stageProgress+1});
+        else
+            this.setState({stageProgress: this.state.stageProgress > 0 ? this.state.stageProgress-1 : 0});
         this.setNewQuestion();
     }
 
@@ -104,18 +110,24 @@ class Question extends Component {
     }
 
     getPreviousResult() {
-        let resultString;
+        let resultString='';
         // console.log(this.previousAnswer);
-        if(this.previousQuestion=='' || this.previousAnswer=='') 
+        if(this.previousQuestion=='')
             resultString = <div className="previous-result none">Let's go! Which character is this?</div>
-        else if(this.isInAllowedAnswers(this.previousAnswer))
+        else {
-            resultString = <div className="previous-result correct">Correct!</div>
+            let rightAnswer = (this.props.stage==2?findRomajisAtKanaKey(this.previousQuestion)[0]:this.previousQuestion)+' = '+
-        else
+               this.previousAllowedAnswers[0];
-            resultString = <div className="previous-result wrong">Wrong!</div>
+            if(this.isInAllowedAnswers(this.previousAnswer))
-        
+                resultString = <div className="previous-result correct" title="Correct answer!"><span className="pull-left glyphicon glyphicon-none"></span>{rightAnswer}<span className="pull-right glyphicon glyphicon-ok"></span></div>
+            else
+                resultString = <div className="previous-result wrong" title="Wrong answer!"><span className="pull-left glyphicon glyphicon-none"></span>{rightAnswer}<span className="pull-right glyphicon glyphicon-remove"></span></div>
+        }
         return resultString;
     }
 
+    getStageProgress() {
+    }
+
     isInAllowedAnswers(previousAnswer) {
         // console.log(previousAnswer);
         // console.log(this.allowedAnswers);
@@ -136,17 +148,32 @@ class Question extends Component {
         let btnClass = "btn btn-default answer-button";
         if ('ontouchstart' in window)
             btnClass += " no-hover"; // disables hover effect on touch screens
+        let stageProgressPercentage = Math.round((this.state.stageProgress/quizSettings.stageLength[this.props.stage])*100)+'%';
+        let stageProgressPercentageStyle = { width: stageProgressPercentage }
         return (
             <div className="text-center question col-xs-12">
                 {this.getPreviousResult()}
                 <div className="big-character">{this.getShowableQuestion()}</div>
-                {this.state.answerOptions.map(function(answer, idx) {
+                <div className="answer-container">
-                    return <AnswerButton answer={answer} 
+                    {this.state.answerOptions.map(function(answer, idx) {
-                            className={btnClass} 
+                        return <AnswerButton answer={answer}
-                            key={idx} 
+                                className={btnClass}
-                            answertype={this.getAnswerType()} 
+                                key={idx}
-                            handleAnswer={this.handleAnswer} />
+                                answertype={this.getAnswerType()}
-                }, this)}
+                                handleAnswer={this.handleAnswer} />
+                    }, this)}
+                </div>
+                <div className="progress">
+                    <div className="progress-bar progress-bar-info"
+                        role="progressbar"
+                        aria-valuenow={this.state.stageProgress}
+                        aria-valuemin="0"
+                        aria-valuemax={quizSettings.stageLength[this.props.stage]}
+                        style={stageProgressPercentageStyle}
+                    >
+                        <span>Stage {this.props.stage}</span>
+                    </div>
+                </div>
             </div>
         );
     }

src/components/Game/Question.scss

@@ -1,23 +1,40 @@
 .question {
+    .progress {
+        position: relative;
+        background-color: #ddd;
+        height: 30px;
+        @media (max-width: 768px) {
+            max-width: 360px;
+            margin: 0 auto;
+        }
+    }
+    .progress span {
+        position: absolute;
+        top: 5px;
+        color: #444;
+        display: block;
+        width: 100%;
+    }
     .previous-result{
-        max-width: 340px;
+        max-width: 360px;
         padding: 8px;
-        margin: 50px auto 30px;
+        margin: 30px auto 28px;
+        border-radius: 3px;
     }
     .none {
-        background-color: #888;
+        background-color: #aaa;
         color: #f5f5f5;
     }
     .correct {
         color: #f5f5f5;
-        background-color: #080;
+        background-color: #5cb85c;
     }
     .wrong {
         color: #f5f5f5;
-        background-color: #800;
+        background-color: #d9534f;
     }
     .previous-result-none {
-        max-width: 340px;
+        max-width: 360px;
         padding: 6px;
         margin: 30px auto;
         color: #f5f5f5;
@@ -25,15 +42,16 @@
     .big-character {
         font-size: 5em;
     }
+    .answer-container {
+        max-width: 360px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+    }
     .answer-button {
         min-width: 90px;
         font-size: 2em;
-        @media (min-width: 768px) {
+        margin: 30px 0 60px;
-            margin: 30px 15px 10px;
-        }
-        @media (max-width: 768px) {
-            margin: 30px 5px 10px;
-        }
     }
     .no-hover {
         /* disables hover effect on touch screens */

src/components/Navbar/Navbar.jsx

@@ -23,7 +23,6 @@ class Navbar extends Component {
                             {leftLink}
                         </ul>
                         <ul className="nav navbar-nav navbar-right">
-                            <li id="nav-settings"><a href="#"><span className="glyphicon glyphicon-small glyphicon-cog"></span> Settings</a></li>
                             <li id="nav-profile">{profileButton}</li>
                         </ul>
                     </div>
@@ -32,6 +31,8 @@ class Navbar extends Component {
         )
     }
 }
+                            // <li id="nav-settings"><a href="#"><span className="glyphicon glyphicon-small glyphicon-cog"></span><span className="hidden-nano"> Settings</span></a></li>
+
 //            <div>{this.props.profile.hasOwnProperty('user_id')?this.props.profile.name+' is logged in':'not logged in'}</div>
                         // <ul className="nav navbar-nav">
                         //     <li id="nav-about"><a href="#menu">&lt; Back to menu</a></li>

src/components/Navbar/Navbar.scss

@@ -11,6 +11,11 @@
 .navbar-inverse {
     background-color: #333;
 }
+.hidden-nano {
+  @media (max-width: 390px) {
+    display: none;
+  }
+}
 .nav a {
   color: #fff !important;
 }

src/data/kanaDictionary.js

@@ -1,21 +1,4 @@
-/* export let kanaDictionary_romajifirst = {
+export const kanaDictionary = {
-    'hiragana' : {
-        'h_group1': { characters: { 'a': 'あ', 'i': 'い', 'u': 'う', 'e': 'え', 'o': 'お' } },
-        'h_group2': { characters: { 'ka': 'か', 'ki': 'き', 'ku': 'く', 'ke': 'け', 'ko': 'こ' } },
-        'h_group3': { characters: { 'sa': 'さ', 'shi': 'し', 'su': 'す', 'se': 'せ', 'so': 'そ' } },
-        'h_group4': { characters: { 'ta': 'た', 'chi': 'ち', 'tsu': 'つ', 'te': 'て' , 'to': 'と' } },
-        'h_group5': { characters: { 'na': 'な', 'ni': 'に', 'nu': 'ぬ', 'ne': 'ね', 'no': 'の' } },
-        'h_group6': { characters: { 'ha': 'は', 'hi': 'ひ', 'fu': 'ふ', 'he': 'へ', 'ho': 'ほ' } },
-        'h_group7': { characters: { 'ma': 'ま', 'mi': 'み', 'mu': 'む', 'me': 'め', 'mo': 'も' } },
-        'h_group8': { characters: { 'ya': 'や', 'yu': 'ゆ', 'yo': 'よ' } },
-        'h_group9': { characters: { 'ra': 'ら', 'ri': 'り', 'ru': 'る', 're': 'れ', 'ro': 'ろ' } },
-        'h_group10': { characters: { 'wa': 'わ', 'wo': 'を', 'n': 'ん' } },
-    },
-    'katakana' : {
-    }
-}; */
-
-export let kanaDictionary = {
     'hiragana' : {
         'h_group1': { characters: { 'あ': ['a'], 'い': ['i'], 'う': ['u'], 'え': ['e'], 'お': ['o'] } },
         'h_group2': { characters: { 'か': ['ka'], 'き': ['ki'], 'く': ['ku'], 'け': ['ke'], 'こ': ['ko'] } },
@@ -45,40 +28,3 @@ export let kanaDictionary = {
         'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'], 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'], 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'], 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'], 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'], 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'], 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'], 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'], 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'], 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'], 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'], 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
     }
 };
-
-// If answer is wrong, let's check if the answer is a key here, and compare the value to the correct answer
-// export let acceptedAlternatives = { 'si': 'shi', 'ti': 'chi', 'tu': 'tsu', 'hu': 'fu', 'o': 'wo',
-                                    // 'zi': 'ji', 'di': 'ji', 'du': 'zu', 'sya': 'sha', 'syu': 'shu', 'syo': 'sho',
-                                    // 'cya': 'cha', 'cyu': 'chu', 'cyo': 'cho', 'jya': 'ja', 'jyu': 'ju', 'jyo': 'jo' };
-
-
-
-// export let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu', 'wo': 'o',
-//                                     'ji': 'zi', 'ji':  };
-
-/*
-let kanaArray = [
-        'あ','い','う','え','お',
-        'か','き','く','け','こ',
-        'さ','し','す','せ','そ',
-        'た','ち','つ','て','と',
-        'な','に','ぬ','ね','の',
-        'は','ひ','ふ','へ','ほ',
-        'ま','み','む','め','も',
-        'や','ゆ','よ',
-        'ら','り','る','れ','ろ',
-        'わ','を','ん'
-];
-let romajiArray = [
-        'a','i','u','e','o',
-        'ka','ki','ku','ke','ko',
-        'sa','shi','su','se','so',
-        'ta','chi','tsu','te','to',
-        'na','ni','nu','ne','no',
-        'ha','hi','fu','he','ho',
-        'ma','mi','mu','me','mo',
-        'ya','yu','yo',
-        'ra','ri','ru','re','ro',
-        'wa','wo','n'
-];
-*/

src/data/quizSettings.js

@@ -0,0 +1,8 @@
+export const quizSettings = {
+    stageLength : {
+        1: 20,
+        2: 20,
+        3: 20,
+        4: 20
+    }
+};