improve choosechacters

src/components/App/App.jsx

@@ -48,7 +48,7 @@ class App extends Component {
 
     render() {
         let loginButton = !this.state.isAuthenticated ?
-            <button className="btn btn-info login-button" onClick={auth.login.bind(this)}>Log in to save your progress!</button> : '';
+            <p className="login-button"><a href="#" onClick={auth.login.bind(this)}>Log in to save your progress!</a></p> : '';
 
         return (
             <div>
@@ -58,14 +58,16 @@ class App extends Component {
                         gameState={this.state.gameState}
                         handleEndGame={this.endGame} 
                 />
-                <div className="container game">
+                <div className="outercontainer">
-                    <GameContainer
+                    <div className="container game">
-                            isAuthenticated={this.state.isAuthenticated}
+                        <GameContainer
-                            nickName={this.getNickName()}
+                                isAuthenticated={this.state.isAuthenticated}
-                            gameState={this.state.gameState}
+                                nickName={this.getNickName()}
-                            handleStartGame={this.startGame} 
+                                gameState={this.state.gameState}
-                    />
+                                handleStartGame={this.startGame} 
-                    <div className="row text-center">{loginButton}</div>
+                        />
+                        <div className="row text-center">{loginButton}</div>
+                    </div>
                 </div>
             </div>
         )

src/components/App/App.scss

@@ -5,19 +5,29 @@ html {
 body {
     min-height: 100%;
     font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
-    background-color: #f5f5f5;
+    background-color: #e5e5e5;
     color: #111;
 }
+.outercontainer {
+    background-color: #f5f5f5;
+    padding-bottom: 20px;
+    border-bottom: 1px #dadada solid;
+    min-height: 690px;
+}
 .container {
     margin: 0 auto;
-    max-width: 1024px;
+    max-width: 968px;
 }
 .row {
     margin: 0;
 }
 .login-button {
-    font-size: 2.0rem;
+    font-size: 1.3em;
-    padding: 6px 15px;
+    margin-top: 15px;
+    margin-bottom: 0;
+    a {
+        color: #888;
+    }
 }
 .game {
     padding-top: 70px;

src/components/ChooseCharacters/CharacterGroup.jsx

@@ -1,28 +1,63 @@
 import React, { Component } from 'react';
 
 class CharacterGroup extends Component {
-    render() {
+    constructor(props) {
-        let strRomajiCharacters = '';
+        super(props);
-        Object.keys(this.props.characters).map(function(character) {
+        this.state = {
-            strRomajiCharacters+=character+' · ';
+            shownChars : '',
-        });
+        }
-        strRomajiCharacters = strRomajiCharacters.slice(0, -2);
+        this.changeShownChars = this.changeShownChars.bind(this);
+    }
 
-        let chooseRow = (
+    changeShownChars(newString, e) {
+        this.setState({shownChars: newString})
+    }
+
+    getShowableCharacters(whichKana) {
+        let strRomajiCharacters = '';
+        let strKanaCharacters = '';
+        if(this.props.groupName!='h_group11' && this.props.groupName!='k_group11') {
+            Object.keys(this.props.characters).map(function(character) {
+                strRomajiCharacters+=this.props.characters[character][0]+' · ';
+                strKanaCharacters+=character+' · ';
+            }, this);
+            strRomajiCharacters = strRomajiCharacters.slice(0, -2);
+            strKanaCharacters = strKanaCharacters.slice(0, -2);
+        }
+        else if(this.props.groupName=='h_group11') {
+            strRomajiCharacters = 'ga · ba · da · kya · sha... (58 characters)';
+            strKanaCharacters = 'ぎ · ば · だ · きゃ · しゃ... (58 characters)';
+        }
+        else if(this.props.groupName=='k_group11') {
+            strRomajiCharacters = 'ga · ba · da · kya · sha... (58 characters)';
+            strKanaCharacters = 'ガ · バ · ダ · キャ · シャ... (58 characters)';
+        }
+        if(whichKana=='romaji') return strRomajiCharacters;
+        else return strKanaCharacters;
+    }
+
+    componentWillMount() {
+        this.changeShownChars(this.getShowableCharacters('romaji'));
+    }
+
+    render() {
+        return (
             <div className="choose-row"
-                onClick={()=>this.props.handleToggleSelect(this.props.groupName)}>
+                onClick={()=>{
+                    this.props.handleToggleSelect(this.props.groupName);
+                    this.changeShownChars(this.getShowableCharacters('romaji'));
+                }}
+                onMouseDown={()=>this.changeShownChars(this.getShowableCharacters('kana'))}
+                onMouseOut={()=>this.changeShownChars(this.getShowableCharacters('romaji'))}
+                onTouchStart={()=>this.changeShownChars(this.getShowableCharacters('kana'))}
+                onTouchEnd={()=>this.changeShownChars(this.getShowableCharacters('romaji'))}
+                >
                 <span className={this.props.selected ?
                     'glyphicon glyphicon-small glyphicon-check' :
-                    'glyphicon glyphicon-small glyphicon-unchecked'}></span> {strRomajiCharacters}
+                    'glyphicon glyphicon-small glyphicon-unchecked'}></span> {this.state.shownChars}
                 <span className="pull-right success-percent">0 %</span>
             </div>
         );
-
-        return (
-            <div>
-                {chooseRow}
-            </div>
-        );
     }
 }
 

src/components/ChooseCharacters/ChooseCharacters.jsx

@@ -1,62 +1,20 @@
 import React, { Component } from 'react';
-
+import { kanaDictionary } from '../../data/kanaDictionary';
 import './ChooseCharacters.scss';
 import CharacterGroup from './CharacterGroup';
-/*
-let kanaArray = [
-        'あ','い','う','え','お',
-        'か','き','く','け','こ',
-        'さ','し','す','せ','そ',
-        'た','ち','つ','て','と',
-        'な','に','ぬ','ね','の',
-        'は','ひ','ふ','へ','ほ',
-        'ま','み','む','め','も',
-        'や','ゆ','よ',
-        'ら','り','る','れ','ろ',
-        'わ','を','ん'
-];
-let romajiArray = [
-        'a','i','u','e','o',
-        'ka','ki','ku','ke','ko',
-        'sa','shi','su','se','so',
-        'ta','chi','tsu','te','to',
-        'na','ni','nu','ne','no',
-        'ha','hi','fu','he','ho',
-        'ma','mi','mu','me','mo',
-        'ya','yu','yo',
-        'ra','ri','ru','re','ro',
-        '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 acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu' };
 
 class ChooseCharacters extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            selectedKana: ['h_group1'],
+            errMsg : '',
-            kana : kanaDictionary
+            selectedKana: ['h_group1']
-        };
+        }
         this.startGame = this.startGame.bind(this);
         this.showKanaRows = this.showKanaRows.bind(this);
         this.toggleSelect = this.toggleSelect.bind(this);
+        this.selectAll = this.selectAll.bind(this);
+        this.selectNone = this.selectNone.bind(this);
     }
 
     getIndex(groupName) {
@@ -67,25 +25,48 @@ class ChooseCharacters extends Component {
         return this.getIndex(groupName) > -1 ? true : false;
     }
 
-    removeSelect(index) {
+    removeSelect(groupName) {
+        if(this.getIndex(groupName)<0) return;
         let newSelectedKana = this.state.selectedKana.slice();
-        newSelectedKana.splice(index, 1);
+        newSelectedKana.splice(this.getIndex(groupName), 1);
         this.setState({selectedKana: newSelectedKana});
     }
 
     addSelect(groupName) {
-        this.setState({selectedKana: this.state.selectedKana.concat(groupName)});
+        this.setState({errMsg: '', selectedKana: this.state.selectedKana.concat(groupName)});
     }
 
     toggleSelect(groupName) {
-        console.log('toggling '+groupName);
+        if(this.getIndex(groupName) > -1) this.removeSelect(groupName);
-        let index = this.getIndex(groupName);
-        if(index > -1) this.removeSelect(index);
         else this.addSelect(groupName);
     }
 
+    selectAll(whichKana) {
+        let thisKana = kanaDictionary[whichKana];
+        let newSelectedKana = this.state.selectedKana.slice();
+        Object.keys(thisKana).map(function(groupName) {
+            if(!this.isSelected(groupName))
+                newSelectedKana.push(groupName);
+        }, this);
+        this.setState({errMsg: '', selectedKana: newSelectedKana});
+    }
+
+    selectNone(whichKana) {
+        let newSelectedKana = [];
+        this.state.selectedKana.map(function(groupName) {
+            let mustBeRemoved = false;
+            Object.keys(kanaDictionary[whichKana]).map(function(removableGroupName) {
+                if(removableGroupName===groupName)
+                    mustBeRemoved = true;
+            }, this);
+            if(!mustBeRemoved)
+                newSelectedKana.push(groupName);
+        }, this);
+        this.setState({selectedKana: newSelectedKana});
+    }
+
     showKanaRows(whichKana) {
-        let thisKana = this.state.kana[whichKana];
+        let thisKana = kanaDictionary[whichKana];
         return Object.keys(thisKana).map(function(groupName, idx) {
             return (
                 <CharacterGroup
@@ -100,7 +81,11 @@ class ChooseCharacters extends Component {
     }
 
     startGame() {
-        this.props.handleStartGame('foo');
+        if(this.state.selectedKana.length < 1) {
+            this.setState({ errMsg: 'Choose at least one group!'});
+            return;
+        }
+        this.props.handleStartGame(this.state.selectedKana);
     }
 
     render() {
@@ -119,22 +104,30 @@ class ChooseCharacters extends Component {
                 <div className="row">
                     <div className="col-sm-6">
                         <div className="panel panel-default">
-                            <div className="panel-heading">Hiragana (ひらがな)</div>
+                            <div className="panel-heading">Hiragana <span className="pull-right">ひらがな</span></div>
                             <div className="panel-body selection-areas">
                                 {this.showKanaRows('hiragana')}
                             </div>
-                            <div className="panel-footer text-center"><a href="javascript:;">All</a> &middot; <a href="javascript:;">None</a></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>
+                            </div>
                         </div>
                     </div>
                     <div className="col-sm-6">
                         <div className="panel panel-default">
-                            <div className="panel-heading">Katakana (カタカナ)</div>
+                            <div className="panel-heading">Katakana <span className="pull-right">カタカナ</span></div>
                             <div className="panel-body selection-areas">
                                 {this.showKanaRows('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>
+                            </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 className="col-xs-12 text-center">
+                        {this.state.errMsg!=''?(<div className="error-message">{this.state.errMsg}</div>):''}
+                        <button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button>
+                    </div>
                 </div>
             </div>
         );

src/components/ChooseCharacters/ChooseCharacters.scss

@@ -11,13 +11,24 @@
     .panel-heading {
         font-weight: bold;
     }
+    .panel-footer a {
+        text-decoration: none;
+        color: #337ab7;
+    }
     .choose-row {
         font-size: 1em;
-        border-bottom: 1px #eee solid;
         padding: 5px;
+        user-select: none;
+    }
+    .choose-row:not(:last-child) {
+        border-bottom: 1px #eee solid;
+    }
+    @media (min-width: 768px) {
+        .choose-row:hover {
+            background-color: #f4f4f4;
+        }
     }
     .choose-row:hover {
-        background-color: #f4f4f4;
         cursor: pointer;
     }
     .glyphicon {
@@ -32,7 +43,11 @@
     .selection-areas {
         padding: 7px;
     }
+    .success-percent {
+        color: #ccc;
+    }
 }
-.success-percent {
+.error-message {
-    color: #ccc;
+    color: #d9534f;
+    padding-bottom: 10px;
 }

src/components/GameContainer/GameContainer.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { kanaDictionary } from '../../data/kanaDictionary';
 import ChooseCharacters from '../ChooseCharacters/ChooseCharacters';
 
 class GameContainer extends Component {
@@ -8,6 +9,7 @@ class GameContainer extends Component {
     }
 
     startGame(options) {
+        // console.log(options); // prints array
         this.props.handleStartGame();
     }
 

src/components/Navbar/Navbar.scss

@@ -9,7 +9,7 @@
     }
 }
 .navbar-inverse {
-    background-color: #444;
+    background-color: #333;
 }
 .nav a {
   color: #fff !important;

src/data/kanaDictionary.js

@@ -0,0 +1,84 @@
+/* export let kanaDictionary_romajifirst = {
+    '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' : {
+    }
+}; */
+
+export let kanaDictionary = {
+    'hiragana' : {
+        'h_group1': { characters: { 'あ': ['a'], 'い': ['i'], 'う': ['u'], 'え': ['e'], 'お': ['o'] } },
+        'h_group2': { characters: { 'か': ['ka'], 'き': ['ki'], 'く': ['ku'], 'け': ['ke'], 'こ': ['ko'] } },
+        'h_group3': { characters: { 'さ': ['sa'], 'し': ['shi','si'], 'す': ['su'], 'せ': ['se'], 'そ': ['so'] } },
+        'h_group4': { characters: { 'た': ['ta'], 'ち': ['chi','ti'], 'つ': ['tsu','tu'], 'て': ['te'], 'と': ['to'] } },
+        'h_group5': { characters: { 'な': ['na'], 'に': ['ni'], 'ぬ': ['nu'], 'ね': ['ne'], 'の': ['no'] } },
+        'h_group6': { characters: { 'は': ['ha'], 'ひ': ['hi'], 'ふ': ['fu','hu'], 'へ': ['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','o'], 'ん': ['n'] } },
+        'h_group11': { characters: { 'が': ['ga'], 'ぎ': ['gi'], 'ぐ': ['gu'], 'げ': ['ge'], 'ご': ['go'], 'ざ': ['za'], 'じ': ['ji','zi'], 'ず': ['zu','du'], 'ぜ': ['ze'], 'ぞ': ['zo'], 'だ': ['da'], 'ぢ': ['ji','di','dzi'], 'づ': ['zu','dzu'], 'で': ['de'], 'ど': ['do'], 'ば': ['ba'], 'び': ['bi'], 'ぶ': ['bu'], 'べ': ['be'], 'ぼ': ['bo'], 'ぱ': ['pa'], 'ぴ': ['pi'], 
+        'ぷ': ['pu'], 'ぺ': ['pe'], 'ぽ': ['po'], 'きゃ': ['kya'], 'きゅ': ['kyu'], 'きょ': ['kyo'], 'しゃ': ['sha','sya'], 'しゅ': ['shu','syu'], 'しょ': ['sho','syo'], 'ちゃ': ['cha','cya'], 'ちゅ': ['chu','cyu'], 'ちょ': ['cho','cyo'], 'にゃ': ['nya'], 'にゅ': ['nyu'], 'にょ': ['nyo'], 'ひゃ': ['hya'], 'ひゅ': ['hyu'], 'ひょ': ['hyo'], 'みゃ': ['mya'], 'みゅ': ['myu'], 'みょ': ['myo'], 'りゃ': ['rya'], 'りゅ': ['ryu'], 'りょ': ['ryo'], 'ぎゃ': ['gya'], 'ぎゅ': ['gyu'], 'ぎょ': ['gyo'], 'じゃ': ['ja','jya'], 'じゅ': ['ju','jyu'], 'じょ': ['jo','jyo'], 'びゃ': ['bya'], 'びゅ': ['byu'], 'びょ': ['byo'], 'ぴゃ': ['pya'], 'ぴゅ': ['pyu'], 'ぴょ': ['pyo'] } }
+    },
+    'katakana' : {
+        'k_group1': { characters: { 'ア': ['a'], 'イ': ['i'], 'ウ': ['u'], 'エ': ['e'], 'オ': ['o'] } },
+        'k_group2': { characters: { 'カ': ['ka'], 'キ': ['ki'], 'ク': ['ku'], 'ケ': ['ke'], 'コ': ['ko'] } },
+        'k_group3': { characters: { 'サ': ['sa'], 'シ': ['shi','si'], 'ス': ['su'], 'セ': ['se'], 'ソ': ['so'] } },
+        'k_group4': { characters: { 'タ': ['ta'], 'チ': ['chi','ti'], 'ツ': ['tsu','tu'], 'テ': ['te'], 'ト': ['to'] } },
+        'k_group5': { characters: { 'ナ': ['na'], 'ニ': ['ni'], 'ヌ': ['nu'], 'ネ': ['ne'], 'ノ': ['no'] } },
+        'k_group6': { characters: { 'ハ': ['ha'], 'ヒ': ['hi'], 'フ': ['fu','hu'], 'ヘ': ['he'], 'ホ': ['ho'] } },
+        'k_group7': { characters: { 'マ': ['ma'], 'ミ': ['mi'], 'ム': ['mu'], 'メ': ['me'], 'モ': ['mo'] } },
+        'k_group8': { characters: { 'ヤ': ['ya'], 'ユ': ['yu'], 'ヨ': ['yo'] } },
+        'k_group9': { characters: { 'ラ': ['ra'], 'リ': ['ri'], 'ル': ['ru'], 'レ': ['re'], 'ロ': ['ro'] } },
+        'k_group10': { characters: { 'ワ': ['wa'], 'ヲ': ['wo','o'], 'ン': ['n'] } },
+        'k_group11': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'], 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'], 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'], 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'], 'パ': ['pa'], 'ピ': ['pi'], 
+        'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'], 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'], 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'], 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'], 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'], 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'], 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'], 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'], 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'], 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'], 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'], 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
+    }
+};
+
+// If answer is wrong, let's check if the answer is a key here, and compare the value to the correct answer
+// export let acceptedAlternatives = { 'si': 'shi', 'ti': 'chi', 'tu': 'tsu', 'hu': 'fu', 'o': 'wo',
+                                    // 'zi': 'ji', 'di': 'ji', 'du': 'zu', 'sya': 'sha', 'syu': 'shu', 'syo': 'sho',
+                                    // 'cya': 'cha', 'cyu': 'chu', 'cyo': 'cho', 'jya': 'ja', 'jyu': 'ju', 'jyo': 'jo' };
+
+
+
+// export let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu', 'wo': 'o',
+//                                     'ji': 'zi', 'ji':  };
+
+/*
+let kanaArray = [
+        'あ','い','う','え','お',
+        'か','き','く','け','こ',
+        'さ','し','す','せ','そ',
+        'た','ち','つ','て','と',
+        'な','に','ぬ','ね','の',
+        'は','ひ','ふ','へ','ほ',
+        'ま','み','む','め','も',
+        'や','ゆ','よ',
+        'ら','り','る','れ','ろ',
+        'わ','を','ん'
+];
+let romajiArray = [
+        'a','i','u','e','o',
+        'ka','ki','ku','ke','ko',
+        'sa','shi','su','se','so',
+        'ta','chi','tsu','te','to',
+        'na','ni','nu','ne','no',
+        'ha','hi','fu','he','ho',
+        'ma','mi','mu','me','mo',
+        'ya','yu','yo',
+        'ra','ri','ru','re','ro',
+        'wa','wo','n'
+];
+*/