Added a group for difficult katakana characters

2018-10-01 19:29:41 +03:00 · 2018-10-01 19:29:41 +03:00 · cd906d31ca
parent 098f16d944
commit cd906d31ca
3 changed files with 58 additions and 44 deletions
--- a/src/components/ChooseCharacters/CharacterGroup.jsx
+++ b/src/components/ChooseCharacters/CharacterGroup.jsx
@ -32,7 +32,9 @@ class CharacterGroup extends Component {

    render() {
        return (
-            <div className={'choose-row' + (this.props.groupName.endsWith('_a') ? ' alt-row' : '')}
+            <div className={
+                'choose-row' + (this.props.groupName.endsWith('_a') || this.props.groupName.endsWith('_s') ? ' alt-row' : '')
+                }
                onClick={()=>{
                    this.props.handleToggleSelect(this.props.groupName);
                    this.changeShownChars(this.getShowableCharacters('romaji'));
@ -50,4 +52,4 @@ class CharacterGroup extends Component {
    }
 }

-export default CharacterGroup;
+export default CharacterGroup;
--- a/src/components/ChooseCharacters/ChooseCharacters.jsx
+++ b/src/components/ChooseCharacters/ChooseCharacters.jsx
@ -10,7 +10,8 @@ class ChooseCharacters extends Component {
        this.state = {
            errMsg : '',
            selectedGroups: this.props.selectedGroups,
-            showAlternatives: []
+            showAlternatives: [],
+            showSimilars: []
        }
        this.toggleSelect = this.toggleSelect.bind(this);
        this.startGame = this.startGame.bind(this);
@ -75,71 +76,80 @@ class ChooseCharacters extends Component {
        this.setState({selectedGroups: newSelectedGroups});
    }

-    toggleAlternative(whichKana) {
-        const idx = this.state.showAlternatives.indexOf(whichKana);
-        let newShowAlternatives = this.state.showAlternatives;
+    toggleAlternative(whichKana, postfix) {
+        let show = postfix == '_a' ? this.state.showAlternatives : this.state.showSimilars;
+        const idx = show.indexOf(whichKana);
        if(idx >= 0)
-            newShowAlternatives.splice(idx, 1);
+            show.splice(idx, 1);
        else
-            newShowAlternatives.push(whichKana)
-        this.setState({showAlternatives: newShowAlternatives});
+            show.push(whichKana)
+        if(postfix == '_a')
+            this.setState({showAlternatives: show});
+        if(postfix == '_s')
+            this.setState({showSimilars: show});
    }

-    getSelectedAlternatives(whichKana) {
+    getSelectedAlternatives(whichKana, postfix) {
        return this.state.selectedGroups.filter(groupName => {
            return groupName.startsWith(whichKana == 'hiragana' ? 'h_' : 'k_') &&
-                groupName.endsWith('_a');
+                groupName.endsWith(postfix);
        }).length;
    }

-    getAmountOfAlternatives(whichKana) {
+    getAmountOfAlternatives(whichKana, postfix) {
        return Object.keys(kanaDictionary[whichKana]).filter(groupName => {
-            return groupName.endsWith("_a");
+            return groupName.endsWith(postfix);
        }).length;
    }

-    alternativeToggleRow(whichKana, showAlternatives) {
+    alternativeToggleRow(whichKana, postfix, show) {
        let checkBtn = "glyphicon glyphicon-small glyphicon-"
        let status;
-        if(this.getSelectedAlternatives(whichKana) >= this.getAmountOfAlternatives(whichKana))
+        if(this.getSelectedAlternatives(whichKana, postfix) >= this.getAmountOfAlternatives(whichKana, postfix))
            status = 'check';
-        else if(this.getSelectedAlternatives(whichKana) > 0)
+        else if(this.getSelectedAlternatives(whichKana, postfix) > 0)
            status = 'check half';
        else
            status = 'unchecked'
        checkBtn += status

        return <div
-            key={'alt_toggle_' + whichKana}
-            onClick={() => this.toggleAlternative(whichKana)}
+            key={'alt_toggle_' + whichKana + postfix}
+            onClick={() => this.toggleAlternative(whichKana, postfix)}
            className="choose-row"
        >
            <span
                className={checkBtn}
                onClick={ e => {
                    if(status == 'check')
-                        this.selectNone(whichKana, true);
+                        this.selectNone(whichKana, postfix == '_a', postfix == '_s');
                    else if(status == 'check half' || status == 'unchecked')
-                        this.selectAll(whichKana, true);
+                        this.selectAll(whichKana, postfix == '_a', postfix == '_s');
                    e.stopPropagation();
                }}
            ></span>
            {
-                showAlternatives ? <span className="toggle-caret">&#9650;</span>
+                show ? <span className="toggle-caret">&#9650;</span>
                : <span className="toggle-caret">&#9660;</span>
            }
-            Alternative characters (ga · ba · kya..)
+            {
+                postfix == '_a' ? 'Alternative characters (ga · ba · kya..)' :
+                    'Look-a-like characters'
+            }
        </div>
    }

-    showGroupRows(whichKana, showAlternatives) {
+    showGroupRows(whichKana, showAlternatives, showSimilars = false) {
        const thisKana = kanaDictionary[whichKana];
        let rows = [];
        Object.keys(thisKana).forEach((groupName, idx) => {
-            if(groupName.endsWith("group11_a"))
-                rows.push(this.alternativeToggleRow(whichKana, showAlternatives));
+            if(groupName == "h_group11_a" || groupName == "k_group13_a")
+                rows.push(this.alternativeToggleRow(whichKana, "_a", showAlternatives));
+            if(groupName == "k_group11_s")
+                rows.push(this.alternativeToggleRow(whichKana, "_s", showSimilars));

-            if(!groupName.endsWith("a") || showAlternatives) {
+            if((!groupName.endsWith("a") || showAlternatives) &&
+               (!groupName.endsWith("s") || showSimilars)) {
                rows.push(<CharacterGroup
                    key={idx}
                    groupName={groupName}
@ -193,7 +203,7 @@ class ChooseCharacters extends Component {
                        <div className="panel panel-default">
                            <div className="panel-heading">Katakana · カタカナ</div>
                            <div className="panel-body selection-areas">
-                                {this.showGroupRows('katakana', this.state.showAlternatives.indexOf('katakana') >= 0)}
+                                {this.showGroupRows('katakana', this.state.showAlternatives.indexOf('katakana') >= 0, this.state.showSimilars.indexOf('katakana') >= 0)}
                            </div>
                            <div className="panel-footer text-center">
                                <a href="javascript:;" onClick={()=>this.selectAll('katakana')}>All</a> &nbsp;&middot;&nbsp; <a href="javascript:;"
--- a/src/data/kanaDictionary.js
+++ b/src/data/kanaDictionary.js
@ -16,7 +16,7 @@ export const kanaDictionary = {
        'h_group14_a': { characters: { 'ば': ['ba'], 'び': ['bi'], 'ぶ': ['bu'], 'べ': ['be'], 'ぼ': ['bo'] } },
        'h_group15_a': { characters: { 'ぱ': ['pa'], 'ぴ': ['pi'], 'ぷ': ['pu'], 'ぺ': ['pe'], 'ぽ': ['po'] } },
        'h_group16_a': { characters: { 'きゃ': ['kya'], 'きゅ': ['kyu'], 'きょ': ['kyo'], 'しゃ': ['sha','sya'], 'しゅ': ['shu','syu'], 'しょ': ['sho','syo'] } },
-        'h_group17_a': { characters: { 'ちゃ': ['cha','cya'], 'ちゅ': ['chu','cyu'], 'ちょ': ['cho','cyo'], 'にゃ': ['nya'], 'にゅ': ['nyu'], 'にょ': ['nyo'] } },
+        'h_group17_a': { characters: { 'ちゃ': ['cha','cya','tya'], 'ちゅ': ['chu','cyu'], 'ちょ': ['cho','cyo'], 'にゃ': ['nya'], 'にゅ': ['nyu'], 'にょ': ['nyo'] } },
        'h_group18_a': { characters: { 'ひゃ': ['hya'], 'ひゅ': ['hyu'], 'ひょ': ['hyo'], 'みゃ': ['mya'], 'みゅ': ['myu'], 'みょ': ['myo'] } },
        'h_group19_a': { characters: { 'りゃ': ['rya'], 'りゅ': ['ryu'], 'りょ': ['ryo'], 'ぎゃ': ['gya'], 'ぎゅ': ['gyu'], 'ぎょ': ['gyo'] } },
        'h_group20_a': { characters: { 'じゃ': ['ja','jya'], 'じゅ': ['ju','jyu'], 'じょ': ['jo','jyo'], 'びゃ': ['bya'], 'びゅ': ['byu'], 'びょ': ['byo'] } },
@ -33,21 +33,23 @@ export const kanaDictionary = {
        'k_group8': { characters: { 'ヤ': ['ya'], 'ユ': ['yu'], 'ヨ': ['yo'] } },
        'k_group9': { characters: { 'ラ': ['ra'], 'リ': ['ri'], 'ル': ['ru'], 'レ': ['re'], 'ロ': ['ro'] } },
        'k_group10': { characters: { 'ワ': ['wa'], 'ヲ': ['wo','o'], 'ン': ['n'] } },
-        'k_group11_a': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'] } },
-        'k_group12_a': { characters: { 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'] } },
-        'k_group13_a': { characters: { 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'] } },
-        'k_group14_a': { characters: { 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'] } },
-        'k_group15_a': { characters: { 'パ': ['pa'], 'ピ': ['pi'], 'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'] } },
-        'k_group16_a': { characters: { 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'] } },
-        'k_group17_a': { characters: { 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'] } },
-        'k_group18_a': { characters: { 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'] } },
-        'k_group19_a': { characters: { 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'] } },
-        'k_group20_a': { characters: { 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'] } },
-        'k_group21_a': { characters: { 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'] } },
-        'k_group22_a': { characters: { 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'] } },
-        'k_group23_a': { characters: { 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'] } },
-        'k_group24_a': { characters: { 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'] } },
-        'k_group25_a': { characters: { 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'] } },
-        'k_group26_a': { characters: { 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
+        'k_group11_s': { characters: { 'シ': ['shi','si'], 'ツ': ['tsu','tu'], 'ソ': ['so'], 'ン': ['n'], 'ノ': ['no'] } },
+        'k_group12_s': { characters: { 'ウ': ['u'], 'フ': ['fu','hu'], 'ワ': ['wa'], 'ラ': ['ra'], 'ス': ['su'], 'ヌ': ['nu'], 'ヲ': ['wo','o'] } },
+        'k_group13_a': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'] } },
+        'k_group14_a': { characters: { 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'] } },
+        'k_group15_a': { characters: { 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'] } },
+        'k_group16_a': { characters: { 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'] } },
+        'k_group17_a': { characters: { 'パ': ['pa'], 'ピ': ['pi'], 'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'] } },
+        'k_group18_a': { characters: { 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'] } },
+        'k_group19_a': { characters: { 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'] } },
+        'k_group20_a': { characters: { 'チャ': ['cha','cya','tya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'] } },
+        'k_group21_a': { characters: { 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'] } },
+        'k_group22_a': { characters: { 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'] } },
+        'k_group23_a': { characters: { 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'] } },
+        'k_group24_a': { characters: { 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'] } },
+        'k_group25_a': { characters: { 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'] } },
+        'k_group26_a': { characters: { 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'] } },
+        'k_group27_a': { characters: { 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'] } },
+        'k_group28_a': { characters: { 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
    }
 };