bugfix when similar groups are selected

README.md

@@ -1,10 +1,10 @@
 # Kana Quiz 2
-Kana Quiz remade with React.js.
+Kana Quiz made with React.js.
 
 See live at http://simplemedia.org/kana/
 
 
-`npm install`
+Install deps: `npm install`
 
 Development: `npm start`
 

npm-shrinkwrap.json

@@ -1918,9 +1918,8 @@
     },
     "lodash": {
       "version": "4.17.4",
-      "from": "lodash@>=4.2.0 <5.0.0",
+      "from": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
-      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",

src/components/App/App.jsx

@@ -41,7 +41,7 @@ class App extends Component {
                         />
                     </div>
                 </div>
-                <Footer />
+                {this.state.gameState=='chooseCharacters'?<Footer />:null}
             </div>
         )
     }

src/components/Footer/Footer.jsx

@@ -6,7 +6,18 @@ class Footer extends Component {
         return (
             <div className="container footer">
                 <div className="col-xs-12">
-                    <h4>New version!</h4>
+                    <h4>How to use</h4>
+                    <p>Kana refers to the two syllabic writing systems used in Japanese: <a href="http://en.wikipedia.org/wiki/Kana" title="Read more at wikipedia">Hiragana and Katakana</a>.</p>
+                    <p>There is no "the right way" to use Kana Quiz.
+                    If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly.</p>
+                    <p>Have fun!</p>
+
+                    <h4>Update - 18 March 2017</h4>
+                    <p>* Bugfix: Fixed unintended behavior when same group was selected from both hiragana &amp; katakana. Thanks for the bug report!</p>
+                    <p>Coders needed! This app is open source, but I'm currently the only one working on it. If you'd like to practice your React.js skills,
+                        feel free to check the issues and fork it on <a href="https://github.com/anzzstuff/kanaquiz">GitHub</a>!</p>
+
+                    <h4>Launch - 14 Aug 2016</h4>
                     <p>
                         Here we are finally with a new version of Kana Quiz.
                         This app doesn't require flash anymore, and should work great with mobile phones and tablets.
@@ -15,12 +26,6 @@ class Footer extends Component {
                         <a href="https://goo.gl/forms/BwtgpkYjT1iyH8uE3">this form</a>! {' '}
                         If you for some reason want to use the old version, it's still available <a href="http://simplemedia.org/kana/flash/">here</a>.
                     </p>
-
-                    <h4>How to use</h4>
-                    <p>Kana refers to the two syllabic writing systems used in Japanese: <a href="http://en.wikipedia.org/wiki/Kana" title="Read more at wikipedia">Hiragana and Katakana</a>.</p>
-                    <p>There is no "the right way" to use Kana Quiz.
-                    If you are a beginner, you might want to start by choosing the first two groups (a -&gt; ko) of hiragana. Once you manage to pass the last stage, add in one or two more groups. Aim for the perfection - you want to be answering quickly. To learn the characters in the beginning just enter false answers and it'll tell you what the correct answer was.</p>
-                    <p>Have fun!</p>
                     <div className="copyright">&copy; <a href="http://simplemedia.org/">Antti Pilto</a> 2016</div>
                 </div>
             </div>

src/components/Footer/Footer.scss

@@ -9,4 +9,8 @@
     a {
         text-decoration: underline;
     }
+    .copyright {
+        border-top: 1px #aaa solid;
+        padding: 10px 0px;
+    }
 }

src/components/Game/Question.jsx

@@ -22,15 +22,44 @@ class Question extends Component {
     }
 
     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(exclude && exclude.length > 0) {
-        if(include && include.length > 0) {
+            // we're excluding previous question when deciding a new question
+            randomizedKanas = removeFromArray(exclude, randomizedKanas);
+        }
+                
+        if(include && include.length > 0) { 
+            // we arrive here when we're deciding answer options (included = currentQuestion)
+            
+            // remove included kana
             randomizedKanas = removeFromArray(include, randomizedKanas);
-            // console.log(randomizedKanas);
             shuffle(randomizedKanas);
-            randomizedKanas = randomizedKanas.slice(0, amount-1);
+
+            // cut the size to make looping quicker
+            randomizedKanas = randomizedKanas.slice(0,20);
+
+            // let's remove kanas that have the same answer as included
+            let searchFor = findRomajisAtKanaKey(include, kanaDictionary)[0];
+            randomizedKanas = randomizedKanas.filter(function(character) {
+                return searchFor!=findRomajisAtKanaKey(character, kanaDictionary)[0];
+            }, this);
+            
+            // now let's remove "duplicate" kanas (if two kanas have same answers)
+            let tempRandomizedKanas = randomizedKanas.slice(); 
+            randomizedKanas = randomizedKanas.filter(function(r) {
+                let dupeFound = false;
+                searchFor = findRomajisAtKanaKey(r, kanaDictionary)[0];
+                tempRandomizedKanas.shift();
+                tempRandomizedKanas.map(function(w) {
+                    if(findRomajisAtKanaKey(w, kanaDictionary)[0]==searchFor)
+                        dupeFound = true;
+                }, this);
+                return !dupeFound;
+            }, this);
+
+            // alright, let's cut the array and add included to the end
+            randomizedKanas = randomizedKanas.slice(0, amount-1); // -1 so we have room to add included
             randomizedKanas.push(include);
             shuffle(randomizedKanas);
         }
@@ -39,7 +68,6 @@ class Question extends Component {
             randomizedKanas = randomizedKanas.slice(0, amount);
         }
         return randomizedKanas;
-        //return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)];
     }
 
     setNewQuestion() {

src/components/Game/ShowStage.jsx

@@ -45,7 +45,7 @@ class ShowStage extends Component {
 
     componentDidMount() {
         if(this.props.stage<=4)
-            this.timeoutID = setTimeout(this.removeStage, 1500); // how soon we start fading out (1500)
+            this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
         this.showStage();
         window.scrollTo(0,0);
     }
@@ -56,7 +56,7 @@ class ShowStage extends Component {
 
     render() {
         return (
-            <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
+            <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
                 {this.state.stageContent}
             </ReactCSSTransitionGroup>
         );

src/data/helperFuncs.js

@@ -30,6 +30,20 @@ export function findRomajisAtKanaKey(needle, kanaDictionary) {
     return romaji;
 }
 
+    // whichKanaTypeIsThis(character, kanaDictionary) { // in case if needed later
+    //     let type = null;
+    //     Object.keys(kanaDictionary).map(function(whichKana) {
+    //         Object.keys(kanaDictionary[whichKana]).map(function(groupName) {
+    //             Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) {
+    //                 if(key==character) {
+    //                     type = whichKana;
+    //                 }
+    //             }, this);
+    //         }, this);
+    //     }, this);
+    //     return type;       
+    // }
+
 export function shuffle(array) {
     var i = 0
         , j = 0