1st stage

src/components/Game/Question.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { kanaDictionary } from '../../data/kanaDictionary';
-import { removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs';
+import { findRomajisAtKanaKey, removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs';
 import './Question.scss';
 
 class Question extends Component {
@@ -13,6 +13,7 @@ class Question extends Component {
             answerOptions: []
         }
         this.setNewQuestion = this.setNewQuestion.bind(this);
+        this.handleAnswer = this.handleAnswer.bind(this);
     }
 
     getRandomKanas(amount, include, exclude) {
@@ -36,15 +37,7 @@ class Question extends Component {
         //return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)];
     }
 
-    setPreviousQuestion() {
-        // console.log("settings previous");
-        this.previousQuestion = this.currentQuestion;
-        this.setState({previousQuestion: this.previousQuestion});
-    }
-
     setNewQuestion() {
-        if(this.props.stage<=2) document.activeElement.blur(); // reset answer button's :active
-        if(this.currentQuestion) this.setPreviousQuestion();
         this.currentQuestion = this.getRandomKanas(1, false, this.previousQuestion);
         this.setState({currentQuestion: this.currentQuestion});
         this.setAnswerOptions();
@@ -59,7 +52,19 @@ class Question extends Component {
     }
 
     setAllowedAnswers() {
+        if(this.props.stage==1) this.allowedAnswers = findRomajisAtKanaKey(this.currentQuestion);
+        if(this.props.stage==2) this.allowedAnswers = this.currentQuestion;
+        // console.log("allowed answers: "+this.allowedAnswers);
+    }
 
+    handleAnswer(answer) {
+        if(this.props.stage<=2) document.activeElement.blur(); // reset answer button's :active
+        this.previousQuestion = this.currentQuestion;
+        this.setState({previousQuestion: this.previousQuestion});
+        this.previousAnswer = answer;
+        this.setState({previousAnswer: this.previousAnswer});
+        this.previousAllowedAnswers = this.allowedAnswers;
+        this.setNewQuestion();
     }
 
     initializeCharacters() {
@@ -67,6 +72,7 @@ class Question extends Component {
         this.askableKanaKeys = [];
         this.askableRomajis = [];
         this.previousQuestion = '';
+        this.previousAnswer = '';
         Object.keys(kanaDictionary).map(function(whichKana) {
             // console.log(whichKana); // 'hiragana' or 'katakana'
             Object.keys(kanaDictionary[whichKana]).map(function(groupName) {
@@ -75,15 +81,10 @@ class Question extends Component {
                 if(arrayContains(groupName, this.props.decidedGroups)) {
                     // let's merge the group to our askableKanas
                     this.askableKanas = Object.assign(this.askableKanas, kanaDictionary[whichKana][groupName]['characters']);
-
                     Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) {
                         // let's add all askable kana keys to array
                         this.askableKanaKeys.push(key);
                         this.askableRomajis.push(kanaDictionary[whichKana][groupName]['characters'][key][0]);
-                        // console.log(kanaDictionary[whichKana][groupName]['characters'][key][0]);
-                        // kanaDictionary[whichKana][groupName]['characters'][key].map(function(romaji) {
-                        //     console.log(romaji);
-                        // }, this);
                     }, this);
                 }
             }, this);
@@ -91,6 +92,37 @@ class Question extends Component {
         // console.log(this.askableKanas);
     }
 
+    getAnswerType() {
+        if(this.props.stage==2) return 'kana';
+            else return 'romaji';
+    }
+
+    getShowableQuestion() {
+        if(this.getAnswerType()=='kana')
+            return findRomajisAtKanaKey(this.state.currentQuestion)[0];
+        else return this.state.currentQuestion;
+    }
+
+    getPreviousResult() {
+        let resultString;
+        // console.log(this.previousAnswer);
+        if(this.previousQuestion=='' || this.previousAnswer=='') 
+            resultString = <div className="previous-result none">Let's go! Which character is this?</div>
+        else if(this.isInAllowedAnswers(this.previousAnswer))
+            resultString = <div className="previous-result correct">Correct!</div>
+        else
+            resultString = <div className="previous-result wrong">Wrong!</div>
+        
+        return resultString;
+    }
+
+    isInAllowedAnswers(previousAnswer) {
+        // console.log(previousAnswer);
+        // console.log(this.allowedAnswers);
+        if(arrayContains(previousAnswer, this.previousAllowedAnswers))
+            return true;
+        else return false;
+    }
 
     componentWillMount() {
         this.initializeCharacters();
@@ -105,10 +137,15 @@ class Question extends Component {
         if ('ontouchstart' in window)
             btnClass += " no-hover"; // disables hover effect on touch screens
         return (
-            <div className="text-center question">
+            <div className="text-center question col-xs-12">
-                <div className="big-character">{this.state.currentQuestion}</div>
+                {this.getPreviousResult()}
+                <div className="big-character">{this.getShowableQuestion()}</div>
                 {this.state.answerOptions.map(function(answer, idx) {
-                    return <AnswerButton answer={answer} className={btnClass} key={idx} onClick={this.setNewQuestion} />;
+                    return <AnswerButton answer={answer} 
+                            className={btnClass} 
+                            key={idx} 
+                            answertype={this.getAnswerType()} 
+                            handleAnswer={this.handleAnswer} />
                 }, this)}
             </div>
         );
@@ -117,10 +154,16 @@ class Question extends Component {
 }
 
 class AnswerButton extends Component {
+    getShowableAnswer() {
+        if(this.props.answertype=='romaji')
+            return findRomajisAtKanaKey(this.props.answer)[0];
+        else return this.props.answer;
+    }
+
     render() {
         return (
-            <button className={this.props.className}>{this.props.answer}</button>;
+            <button className={this.props.className} onClick={()=>this.props.handleAnswer(this.getShowableAnswer())}>{this.getShowableAnswer()}</button>
-        )
+        );
     }
 }
 export default Question;

src/components/Game/Question.scss

@@ -1,4 +1,27 @@
 .question {
+    .previous-result{
+        max-width: 340px;
+        padding: 8px;
+        margin: 50px auto 30px;
+    }
+    .none {
+        background-color: #888;
+        color: #f5f5f5;
+    }
+    .correct {
+        color: #f5f5f5;
+        background-color: #080;
+    }
+    .wrong {
+        color: #f5f5f5;
+        background-color: #800;
+    }
+    .previous-result-none {
+        max-width: 340px;
+        padding: 6px;
+        margin: 30px auto;
+        color: #f5f5f5;
+    }
     .big-character {
         font-size: 5em;
     }
@@ -17,5 +40,4 @@
         background-color: #fff;
         border-color: #ccc;
     }
-    margin-top: 70px;
 }

src/components/GameContainer/GameContainer.jsx

@@ -8,7 +8,7 @@ class GameContainer extends Component {
         super(props);
         this.startGame = this.startGame.bind(this);
         this.state = {
-            decidedGroups: ['h_group1', 'h_group3']
+            decidedGroups: ['h_group3']
         }
     }
 

src/data/helperFuncs.js

@@ -1,3 +1,5 @@
+import { kanaDictionary } from './kanaDictionary';
+
 export function arrayContains(needle, haystack) {
     return (haystack.indexOf(needle) > -1) ? true : false;
 }
@@ -12,6 +14,24 @@ export function removeFromArray(needle, haystack) {
     return haystack;
 }
 
+export function findRomajisAtKanaKey(needle) {
+    let romaji = [];
+    Object.keys(kanaDictionary).map(function(whichKana) {
+    // console.log(whichKana); // 'hiragana' or 'katakana'
+        Object.keys(kanaDictionary[whichKana]).map(function(groupName) {
+            // console.log(groupName); // 'h_group1', ...
+            // return kanaDictionary[whichKana][groupName]['characters'][this.props.answer];
+            Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) {
+                if(key==needle) {
+                    // console.log(kanaDictionary[whichKana][groupName]['characters'][key]);
+                    romaji = kanaDictionary[whichKana][groupName]['characters'][key];
+                }
+            }, this);
+        }, this);
+    }, this);
+    // console.log(romaji);
+    return romaji;
+}
 // export function getRandomFromArray(arr) {
 //     return arr[Math.floor(Math.random() * arr.length)];
 // }