question advance

src/components/Game/Question.jsx

@@ -1,50 +1,61 @@
 import React, { Component } from 'react';
 import { kanaDictionary } from '../../data/kanaDictionary';
-import { arrayContains, shuffle } from '../../data/helperFuncs';
+import { removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs';
 import './Question.scss';
 
 class Question extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            previousQuestion: {},
-            currentQuestion: ''
+            previousQuestion: [],
+            previousAnswer: '',
+            currentQuestion: [],
+            answerOptions: []
         }
+        this.setNewQuestion = this.setNewQuestion.bind(this);
     }
 
-    // getQuestionIndex(question) {
-    //     return this.state.selectedGroups.indexOf(question);
-    // }
-
-    // removeSelect(groupName) {
-    //     if(this.getQuestionIndex(groupName)<0) return;
-    //     let newSelectedGroups = this.state.selectedGroups.slice();
-    //     newSelectedGroups.splice(this.getIndex(groupName), 1);
-    //     this.setState({selectedGroups: newSelectedGroups});
-    // }
-
-    getRandomKanas(amount) {
-        let randomizedKanas = [];
-        if(this.state.previousQuestion.length > 0)
-            removeFromAskable(this.state.previousQuestion);
-        shuffle(this.askableCharacterKeys);
-        for(let i = 0; i < amount; i++) {
-            randomizedKanas.push(this.askableCharacterKeys[i]);
+    getRandomKanas(amount, include, exclude) {
+        // console.log(this.askableKanaKeys);
+        let randomizedKanas = this.askableKanaKeys.slice();
+        // console.log(randomizedKanas);
+        if(exclude && exclude.length > 0) randomizedKanas = removeFromArray(exclude, randomizedKanas);
+        if(include && include.length > 0) {
+            randomizedKanas = removeFromArray(include, randomizedKanas);
+            // console.log(randomizedKanas);
+            shuffle(randomizedKanas);
+            randomizedKanas = randomizedKanas.slice(0,amount-1);
+            randomizedKanas.push(include);
+            shuffle(randomizedKanas);
+        }
+        else {
+            shuffle(randomizedKanas);
+            randomizedKanas = randomizedKanas.slice(0,amount);
         }
         return randomizedKanas;
-        // console.log(this.askableCharacters);
-        //return this.askableCharacterKeys[Math.floor(Math.random() * this.askableCharacterKeys.length)];
+        //return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)];
     }
 
-    removeFromAskable(question) {
-        console.log('here');
-        //console.log(this.getQuestionIndex(question));
+    setPreviousQuestion() {
+        // console.log("settings previous");
+        this.previousQuestion = this.currentQuestion;
+        this.setState({previousQuestion: this.previousQuestion});
     }
 
     setNewQuestion() {
-        let question = this.getRandomKanas(1);
-        this.setState({currentQuestion: question[0]});
-        //console.log(question);
+        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();
+        this.setAllowedAnswers();
+        // console.log(this.currentQuestion);
+    }
+
+    setAnswerOptions() {
+        this.answerOptions = this.getRandomKanas(3,this.currentQuestion[0],false);
+        this.setState({answerOptions: this.answerOptions});
+        // console.log(this.answerOptions);
     }
 
     setAllowedAnswers() {
@@ -52,51 +63,64 @@ class Question extends Component {
     }
 
     initializeCharacters() {
-        this.askableCharacters = {};
-        this.askableCharacterKeys = [];
+        this.askableKanas = {};
+        this.askableKanaKeys = [];
+        this.askableRomajis = [];
+        this.previousQuestion = '';
         Object.keys(kanaDictionary).map(function(whichKana) {
             // console.log(whichKana); // 'hiragana' or 'katakana'
             Object.keys(kanaDictionary[whichKana]).map(function(groupName) {
                 // console.log(groupName); // 'h_group1', ...
                 // do we want to include this group?
                 if(arrayContains(groupName, this.props.decidedGroups)) {
-                    // let's merge the group to our askableCharacters
-                    this.askableCharacters = Object.assign(this.askableCharacters, kanaDictionary[whichKana][groupName]['characters']);
+                    // 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.askableCharacterKeys.push(key); 
-                        kanaDictionary[whichKana][groupName]['characters'][key].map(function(romaji) {
-                            console.log(romaji);
-                        }, this);
+                        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);
         }, this);
-        // console.log(this.askableCharacters);
+        // console.log(this.askableKanas);
     }
 
 
-
     componentWillMount() {
+        this.initializeCharacters();
     }
 
     componentDidMount() {
-        this.initializeCharacters();
         this.setNewQuestion();
-        this.setAnswerOptions();
-        this.setAllowedAnswers();
     }
 
     render() {
+        let btnClass = "btn btn-default answer-button";
+        if ('ontouchstart' in window)
+            btnClass += " no-hover"; // disables hover effect on touch screens
         return (
             <div className="text-center question">
                 <div className="big-character">{this.state.currentQuestion}</div>
-
+                {this.state.answerOptions.map(function(answer, idx) {
+                    return <AnswerButton answer={answer} className={btnClass} key={idx} onClick={this.setNewQuestion} />;
+                }, this)}
             </div>
         );
     }
 
 }
 
+class AnswerButton extends Component {
+    render() {
+        return (
+            <button className={this.props.className}>{this.props.answer}</button>;
+        )
+    }
+}
 export default Question;

src/components/Game/Question.scss

@@ -2,5 +2,20 @@
     .big-character {
         font-size: 5em;
     }
+    .answer-button {
+        min-width: 90px;
+        font-size: 2em;
+        @media (min-width: 768px) {
+            margin: 30px 15px 10px;
+        }
+        @media (max-width: 768px) {
+            margin: 30px 5px 10px;
+        }
+    }
+    .no-hover {
+        /* disables hover effect on touch screens */
+        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_group2']
+            decidedGroups: ['h_group1', 'h_group3']
         }
     }
 

src/data/helperFuncs.js

@@ -1,7 +1,25 @@
-export function arrayContains(needle, arrhaystack) {
-    return (arrhaystack.indexOf(needle) > -1);
+export function arrayContains(needle, haystack) {
+    return (haystack.indexOf(needle) > -1) ? true : false;
 }
 
+export function removeFromArray(needle, haystack) {
+    if(typeof needle === 'object')
+        needle = needle[0];
+
+    if(arrayContains(needle, haystack)) {
+        haystack.splice(haystack.indexOf(needle), 1);
+    }
+    return haystack;
+}
+
+// export function getRandomFromArray(arr) {
+//     return arr[Math.floor(Math.random() * arr.length)];
+// }
+
+// export function getIndex(needle, haystack) {
+//     return haystack.indexOf(needle);
+// }
+
 export function shuffle(array) {
     var i = 0
         , j = 0