question begin

src/components/App/App.jsx

@@ -12,7 +12,7 @@ class App extends Component {
         super(props);
         this.state = {
             isAuthenticated: this.isAuthenticated(),
-            gameState: 'chooseCharacters'
+            gameState: 'game'
             /*profile: auth.getProfile()*/
         }
         auth.on('profile_updated', (newProfile) => {

src/components/ChooseCharacters/ChooseCharacters.jsx

@@ -8,17 +8,17 @@ class ChooseCharacters extends Component {
         super(props);
         this.state = {
             errMsg : '',
-            selectedKana: ['h_group1']
+            selectedGroups: this.props.selectedGroups
         }
         this.startGame = this.startGame.bind(this);
-        this.showKanaRows = this.showKanaRows.bind(this);
+        this.showGroupRows = this.showGroupRows.bind(this);
         this.toggleSelect = this.toggleSelect.bind(this);
         this.selectAll = this.selectAll.bind(this);
         this.selectNone = this.selectNone.bind(this);
     }
 
     getIndex(groupName) {
-        return this.state.selectedKana.indexOf(groupName);
+        return this.state.selectedGroups.indexOf(groupName);
     }
 
     isSelected(groupName) {
@@ -27,13 +27,13 @@ class ChooseCharacters extends Component {
 
     removeSelect(groupName) {
         if(this.getIndex(groupName)<0) return;
-        let newSelectedKana = this.state.selectedKana.slice();
+        let newSelectedGroups = this.state.selectedGroups.slice();
-        newSelectedKana.splice(this.getIndex(groupName), 1);
+        newSelectedGroups.splice(this.getIndex(groupName), 1);
-        this.setState({selectedKana: newSelectedKana});
+        this.setState({selectedGroups: newSelectedGroups});
     }
 
     addSelect(groupName) {
-        this.setState({errMsg: '', selectedKana: this.state.selectedKana.concat(groupName)});
+        this.setState({errMsg: '', selectedGroups: this.state.selectedGroups.concat(groupName)});
     }
 
     toggleSelect(groupName) {
@@ -43,29 +43,29 @@ class ChooseCharacters extends Component {
 
     selectAll(whichKana) {
         let thisKana = kanaDictionary[whichKana];
-        let newSelectedKana = this.state.selectedKana.slice();
+        let newSelectedGroups = this.state.selectedGroups.slice();
         Object.keys(thisKana).map(function(groupName) {
             if(!this.isSelected(groupName))
-                newSelectedKana.push(groupName);
+                newSelectedGroups.push(groupName);
         }, this);
-        this.setState({errMsg: '', selectedKana: newSelectedKana});
+        this.setState({errMsg: '', selectedGroups: newSelectedGroups});
     }
 
     selectNone(whichKana) {
-        let newSelectedKana = [];
+        let newSelectedGroups = [];
-        this.state.selectedKana.map(function(groupName) {
+        this.state.selectedGroups.map(function(groupName) {
             let mustBeRemoved = false;
             Object.keys(kanaDictionary[whichKana]).map(function(removableGroupName) {
                 if(removableGroupName===groupName)
                     mustBeRemoved = true;
             }, this);
             if(!mustBeRemoved)
-                newSelectedKana.push(groupName);
+                newSelectedGroups.push(groupName);
         }, this);
-        this.setState({selectedKana: newSelectedKana});
+        this.setState({selectedGroups: newSelectedGroups});
     }
 
-    showKanaRows(whichKana) {
+    showGroupRows(whichKana) {
         let thisKana = kanaDictionary[whichKana];
         return Object.keys(thisKana).map(function(groupName, idx) {
             return (
@@ -81,11 +81,11 @@ class ChooseCharacters extends Component {
     }
 
     startGame() {
-        if(this.state.selectedKana.length < 1) {
+        if(this.state.selectedGroups.length < 1) {
             this.setState({ errMsg: 'Choose at least one group!'});
             return;
         }
-        this.props.handleStartGame(this.state.selectedKana);
+        this.props.handleStartGame(this.state.selectedGroups);
     }
 
     render() {
@@ -104,9 +104,9 @@ class ChooseCharacters extends Component {
                 <div className="row">
                     <div className="col-sm-6">
                         <div className="panel panel-default">
-                            <div className="panel-heading">Hiragana <span className="pull-right">ひらがな</span></div>
+                            <div className="panel-heading">Hiragana · ひらがな<span className="pull-right">Progress</span></div>
                             <div className="panel-body selection-areas">
-                                {this.showKanaRows('hiragana')}
+                                {this.showGroupRows('hiragana')}
                             </div>
                             <div className="panel-footer text-center">
                                 <a href="javascript:;" onClick={()=>this.selectAll('hiragana')}>All</a> &nbsp;&middot;&nbsp; <a href="javascript:;" onClick={()=>this.selectNone('hiragana')}>None</a>
@@ -115,9 +115,9 @@ class ChooseCharacters extends Component {
                     </div>
                     <div className="col-sm-6">
                         <div className="panel panel-default">
-                            <div className="panel-heading">Katakana <span className="pull-right">カタカナ</span></div>
+                            <div className="panel-heading">Katakana · カタカナ<span className="pull-right">Progress</span></div>
                             <div className="panel-body selection-areas">
-                                {this.showKanaRows('katakana')}
+                                {this.showGroupRows('katakana')}
                             </div>
                             <div className="panel-footer text-center">
                                 <a href="javascript:;" onClick={()=>this.selectAll('katakana')}>All</a> &nbsp;&middot;&nbsp; <a href="javascript:;" onClick={()=>this.selectNone('katakana')}>None</a>

src/components/ChooseCharacters/ChooseCharacters.scss

@@ -11,6 +11,9 @@
     .panel-heading {
         font-weight: bold;
     }
+    .panel-heading span {
+        color: #aaa;
+    }
     .panel-footer a {
         text-decoration: none;
         color: #337ab7;
@@ -18,7 +21,6 @@
     .choose-row {
         font-size: 1em;
         padding: 5px;
-        user-select: none;
     }
     .choose-row:not(:last-child) {
         border-bottom: 1px #eee solid;

src/components/Game/Game.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { kanaDictionary } from '../../data/kanaDictionary';
+import './Game.scss';
+import ShowStage from './ShowStage';
+import Question from './Question';
+
+class Game extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            stage: 0,
+            showScreen: ''
+        }
+        this.showQuestion = this.showQuestion.bind(this);
+        this.stageUp = this.stageUp.bind(this);
+    }
+
+    stageUp() {
+        this.setState({stage: this.state.stage+1, showScreen: 'stage'});
+    }
+
+    showQuestion() {
+        this.setState({showScreen: 'question'})
+    }
+
+    componentWillMount() {
+        this.stageUp();
+    }
+
+    render() {
+        return (
+            <div>
+                { this.state.showScreen==='stage' ? <ShowStage handleShowQuestion={this.showQuestion} stage={this.state.stage} /> : '' }
+                { this.state.showScreen==='question' ? <Question handleStageUp={this.stageUp} stage={this.state.stage} decidedGroups={this.props.decidedGroups} /> : '' }
+            </div>
+        );
+    }
+}
+
+export default Game;

src/components/Game/Question.jsx

@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import { kanaDictionary } from '../../data/kanaDictionary';
+import { arrayContains, shuffle } from '../../data/helperFuncs';
+import './Question.scss';
+
+class Question extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            previousQuestion: {},
+            currentQuestion: ''
+        }
+    }
+
+    // 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]);
+        }
+        return randomizedKanas;
+        // console.log(this.askableCharacters);
+        //return this.askableCharacterKeys[Math.floor(Math.random() * this.askableCharacterKeys.length)];
+    }
+
+    removeFromAskable(question) {
+        console.log('here');
+        //console.log(this.getQuestionIndex(question));
+    }
+
+    setNewQuestion() {
+        let question = this.getRandomKanas(1);
+        this.setState({currentQuestion: question[0]});
+        //console.log(question);
+    }
+
+    setAllowedAnswers() {
+
+    }
+
+    initializeCharacters() {
+        this.askableCharacters = {};
+        this.askableCharacterKeys = [];
+        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']);
+                   
+                    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);
+                }
+            }, this);
+        }, this);
+        // console.log(this.askableCharacters);
+    }
+
+
+
+    componentWillMount() {
+    }
+
+    componentDidMount() {
+        this.initializeCharacters();
+        this.setNewQuestion();
+        this.setAnswerOptions();
+        this.setAllowedAnswers();
+    }
+
+    render() {
+        return (
+            <div className="text-center question">
+                <div className="big-character">{this.state.currentQuestion}</div>
+
+            </div>
+        );
+    }
+
+}
+
+export default Question;

src/components/Game/Question.scss

@@ -0,0 +1,6 @@
+.question {
+    .big-character {
+        font-size: 5em;
+    }
+    margin-top: 70px;
+}

src/components/Game/ShowStage.jsx

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import './ShowStage.scss';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+class ShowStage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            stageContent: ''
+        }
+        this.showStage = this.showStage.bind(this);
+        this.removeStage = this.removeStage.bind(this);
+    }
+
+    removeStage() {
+        this.setState({stageContent: ''});
+        clearTimeout(this.timeoutID);
+        this.timeoutID = setTimeout(this.props.handleShowQuestion, 1) // how soon we go to question (1000)
+    }
+
+    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'; }      
+        let stageContent = <div><h1>Stage {this.props.stage}</h1><h3>{stageDescription}</h3>{stageSecondaryDescription?<h4>{stageSecondaryDescription}</h4>:''}</div>; 
+        this.setState({stageContent: stageContent});
+    }
+
+    componentDidMount() {
+        this.timeoutID = setTimeout(this.removeStage, 1); // how soon we start fading out (1500)
+        this.showStage();
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeoutID);
+    }
+
+    render() {
+        return (
+            <div className="text-center show-stage">
+                <ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
+                    {this.state.stageContent}
+                </ReactCSSTransitionGroup>
+            </div>
+        );
+    }
+}
+
+export default ShowStage;

src/components/Game/ShowStage.scss

@@ -0,0 +1,24 @@
+.show-stage {
+    margin-top: 200px;
+    h3 {
+        margin-top: 30px;
+    }
+}
+
+.stage-enter {
+  opacity: 0.01;
+}
+
+.stage-enter.stage-enter-active {
+  opacity: 1;
+  transition: opacity 1s ease-in;
+}
+
+.stage-leave {
+  opacity: 1;
+}
+
+.stage-leave.stage-leave-active {
+  opacity: 0.01;
+  transition: opacity 1s ease-in;
+}

src/components/GameContainer/GameContainer.jsx

@@ -1,24 +1,34 @@
 import React, { Component } from 'react';
 import { kanaDictionary } from '../../data/kanaDictionary';
 import ChooseCharacters from '../ChooseCharacters/ChooseCharacters';
+import Game from '../Game/Game';
 
 class GameContainer extends Component {
     constructor(props) {
         super(props);
         this.startGame = this.startGame.bind(this);
+        this.state = {
+            decidedGroups: ['h_group1', 'h_group2']
+        }
     }
 
-    startGame(options) {
+    startGame(decidedGroups) {
         // console.log(options); // prints array
+        this.setState({decidedGroups: decidedGroups});
         this.props.handleStartGame();
     }
 
     render() {
-        let currentScreen = this.props.gameState==='chooseCharacters' ? <ChooseCharacters handleStartGame={this.startGame} nickName={this.props.nickName} /> :
-                            (this.props.gameState==='game' ? '<Game />' : '');
         return (
             <div>
-                {currentScreen}
+                { this.props.gameState==='chooseCharacters' ? 
+                    <ChooseCharacters selectedGroups={this.state.decidedGroups} 
+                                handleStartGame={this.startGame} 
+                                nickName={this.props.nickName} 
+                    /> : '' }
+                { this.props.gameState==='game' ? 
+                    <Game decidedGroups={this.state.decidedGroups} 
+                    /> : '' }
             </div>
         )
     }

src/components/Navbar/Navbar.jsx

@@ -7,7 +7,7 @@ class Navbar extends Component {
         switch(this.props.gameState) {
             case 'chooseCharacters':
             default:
-                leftLink = <li id="nav-kanaquiz"><a href="javascript:;">Kana Quiz <span>2</span></a></li>
+                leftLink = <li id="nav-kanaquiz"><p className="nav navbar-text">Kana Quiz <span>2</span></p></li>
                 break;
             case 'game':
                 leftLink = <li id="nav-choosecharacters"><a href="#" onClick={this.props.handleEndGame}><span className="glyphicon glyphicon-small glyphicon-arrow-left"></span> Back to menu</a></li>

src/components/Navbar/Navbar.scss

@@ -17,11 +17,10 @@
 .nav a:hover {
   color: #bbb !important;
 }
-#nav-kanaquiz a, #nav-kanaquiz {
+.navbar-text {
   color: #fff !important;
-  span {
+  cursor: default;
-    color: #fff !important;
+  margin-bottom: 0;
-  }
 }
 #nav-kanaquiz a:hover {
   cursor: default;

src/data/helperFuncs.js

@@ -0,0 +1,16 @@
+export function arrayContains(needle, arrhaystack) {
+    return (arrhaystack.indexOf(needle) > -1);
+}
+
+export function shuffle(array) {
+    var i = 0
+        , j = 0
+        , temp = null
+
+    for (i = array.length - 1; i > 0; i -= 1) {
+        j = Math.floor(Math.random() * (i + 1))
+        temp = array[i]
+        array[i] = array[j]
+        array[j] = temp
+    }
+}