working checkboxes

src/components/ChooseCharacters/CharacterGroup.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+class CharacterGroup extends Component {
+    render() {
+        let strRomajiCharacters = '';
+        Object.keys(this.props.characters).map(function(character) {
+            strRomajiCharacters+=character+' · ';
+        });
+        strRomajiCharacters = strRomajiCharacters.slice(0, -2);
+
+        let chooseRow = (
+            <div className="choose-row"
+                onClick={()=>this.props.handleToggleSelect(this.props.groupName)}>
+                <span className={this.props.selected ?
+                    'glyphicon glyphicon-small glyphicon-check' :
+                    'glyphicon glyphicon-small glyphicon-unchecked'}></span> {strRomajiCharacters}
+                <span className="pull-right success-percent">0 %</span>
+            </div>
+        );
+
+        return (
+            <div>
+                {chooseRow}
+            </div>
+        );
+    }
+}
+
+export default CharacterGroup;

src/components/ChooseCharacters/CharacterRow.jsx

@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-
-class CharacterRow extends Component {
-    render() {
-        let strCharacters = '';
-        this.props.characters.map(function(items) {
-            Object.keys(items).map(function(item) {
-                if(item!='selected') strCharacters+=item+', ';
-            }); 
-        });
-        strCharacters = strCharacters.slice(0, -2);
-
-        let chooseRow = (
-            <div className="choose-row">
-                <span className={this.props.selected ? 
-                    'glyphicon glyphicon-small glyphicon-check' :
-                    'glyphicon glyphicon-small glyphicon-unchecked'}></span> {strCharacters}
-            </div>
-        );
-
-        return (
-            <div>
-                {chooseRow}
-            </div>
-        );
-    }
-}
-
-export default CharacterRow;

src/components/ChooseCharacters/ChooseCharacters.jsx

@@ -1,69 +1,102 @@
 import React, { Component } from 'react';
-import './ChooseCharacters.scss';
-import CharacterRow from './CharacterRow';
 
+import './ChooseCharacters.scss';
+import CharacterGroup from './CharacterGroup';
+/*
 let kanaArray = [
-        "あ","い","う","え","お",
+        'あ','い','う','え','お',
-        "か","き","く","け","こ",
+        'か','き','く','け','こ',
-        "さ","し","す","せ","そ",
+        'さ','し','す','せ','そ',
-        "た","ち","つ","て","と",
+        'た','ち','つ','て','と',
-        "な","に","ぬ","ね","の",
+        'な','に','ぬ','ね','の',
-        "は","ひ","ふ","へ","ほ",
+        'は','ひ','ふ','へ','ほ',
-        "ま","み","む","め","も",
+        'ま','み','む','め','も',
-        "や","ゆ","よ",
+        'や','ゆ','よ',
-        "ら","り","る","れ","ろ",
+        'ら','り','る','れ','ろ',
-        "わ","を","ん"
+        'わ','を','ん'
 ];
 let romajiArray = [
-        "a","i","u","e","o",
+        'a','i','u','e','o',
-        "ka","ki","ku","ke","ko",
+        'ka','ki','ku','ke','ko',
-        "sa","shi","su","se","so",
+        'sa','shi','su','se','so',
-        "ta","chi","tsu","te","to",
+        'ta','chi','tsu','te','to',
-        "na","ni","nu","ne","no",
+        'na','ni','nu','ne','no',
-        "ha","hi","fu","he","ho",
+        'ha','hi','fu','he','ho',
-        "ma","mi","mu","me","mo",
+        'ma','mi','mu','me','mo',
-        "ya","yu","yo",
+        'ya','yu','yo',
-        "ra","ri","ru","re","ro",
+        'ra','ri','ru','re','ro',
-        "wa","wo","n"
+        'wa','wo','n'
 ];
+*/
+let 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': {}
+};
 
-/*let hiraganaItems = {
+let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu' };
-    group1: { a: 'あ', i: 'い', u: 'う', e: 'え', o: 'お' },
-    group2: { ka: 'か', ki: 'き', ku: 'く', ke: 'け', ko: 'こ' }
-}*/
 
 class ChooseCharacters extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            hiraganaItems: [
+            selectedKana: ['h_group1'],
-                {
+            kana : kanaDictionary
-                    group1: [
+        };
-                        { selected: true, a: 'あ', i: 'い', u: 'う', e: 'え', o: 'お' }
-                    ],
-                    group2: [
-                        { selected: false, ka: 'か', ki: 'き', ku: 'く', ke: 'け', ko: 'こ' }
-                    ]
-                }
-            ]
-        }
         this.startGame = this.startGame.bind(this);
-        this.toggleGroup = this.toggleGroup.bind(this);
+        this.showKanaRows = this.showKanaRows.bind(this);
-        this.showHiraganaRows = this.showHiraganaRows.bind(this);
+        this.toggleSelect = this.toggleSelect.bind(this);
     }
 
-    showHiraganaRows() {
+    getIndex(groupName) {
-        return (this.state.hiraganaItems.map(function(groups) {
+        return this.state.selectedKana.indexOf(groupName);
-            return Object.keys(groups).map(function(group) {
-                return groups[group].map(function(item) {
-                    return <CharacterRow characters={groups[group]} selected={item.selected} />
-                });
-            });
-        }))
     }
 
-    toggleGroup(e) {
+    isSelected(groupName) {
-        console.log('event: '+e);
+        return this.getIndex(groupName) > -1 ? true : false;
+    }
+
+    removeSelect(index) {
+        let newSelectedKana = this.state.selectedKana.slice();
+        newSelectedKana.splice(index, 1);
+        this.setState({selectedKana: newSelectedKana});
+    }
+
+    addSelect(groupName) {
+        this.setState({selectedKana: this.state.selectedKana.concat(groupName)});
+    }
+
+    toggleSelect(groupName) {
+        console.log('toggling '+groupName);
+        let index = this.getIndex(groupName);
+        if(index > -1) this.removeSelect(index);
+        else this.addSelect(groupName);
+    }
+
+    showKanaRows(whichKana) {
+        let thisKana = this.state.kana[whichKana];
+        return Object.keys(thisKana).map(function(groupName, idx) {
+            return (
+                <CharacterGroup
+                    key={idx}
+                    groupName={groupName}
+                    selected={this.isSelected(groupName)}
+                    characters={thisKana[groupName].characters}
+                    handleToggleSelect={this.toggleSelect}
+                />
+            );
+        }, this);
     }
 
     startGame() {
@@ -88,7 +121,7 @@ class ChooseCharacters extends Component {
                         <div className="panel panel-default">
                             <div className="panel-heading">Hiragana (ひらがな)</div>
                             <div className="panel-body selection-areas">
-                                {this.showHiraganaRows()}
+                                {this.showKanaRows('hiragana')}
                             </div>
                             <div className="panel-footer text-center"><a href="javascript:;">All</a> &middot; <a href="javascript:;">None</a></div>
                         </div>
@@ -96,12 +129,15 @@ class ChooseCharacters extends Component {
                     <div className="col-sm-6">
                         <div className="panel panel-default">
                             <div className="panel-heading">Katakana (カタカナ)</div>
+                            <div className="panel-body selection-areas">
+                                {this.showKanaRows('katakana')}
+                            </div>
                         </div>
                     </div>
                     <div className="col-xs-12 text-center"><button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button></div>
                 </div>
             </div>
-        )
+        );
     }
 }
 

src/components/ChooseCharacters/ChooseCharacters.scss

@@ -12,7 +12,7 @@
         font-weight: bold;
     }
     .choose-row {
-        font-size: 1.1em;
+        font-size: 1em;
         border-bottom: 1px #eee solid;
         padding: 5px;
     }
@@ -20,9 +20,6 @@
         background-color: #f4f4f4;
         cursor: pointer;
     }
-    .choose-row:last-child {
-        border-bottom: 0px;
-    }
     .glyphicon {
         font-size: 0.9em;
     }
@@ -36,3 +33,6 @@
         padding: 7px;
     }
 }
+.success-percent {
+    color: #ccc;
+}

webpack.config.prod.js

@@ -48,7 +48,6 @@ module.exports = {
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({
             compress:{
-                screw_ie8: true,
                 warnings: false
             },
         }),