a3x/kana
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added a group for difficult katakana characters

Browse source
This commit is contained in:
Antti Pilto 2018-10-01 19:29:41 +03:00
parent 098f16d944
commit cd906d31ca
3 changed files with 58 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/ChooseCharacters/CharacterGroup.jsx
View file

@ -32,7 +32,9 @@ class CharacterGroup extends Component {
render() { render() {
return ( 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={()=>{ onClick={()=>{
this.props.handleToggleSelect(this.props.groupName); this.props.handleToggleSelect(this.props.groupName);
this.changeShownChars(this.getShowableCharacters('romaji')); this.changeShownChars(this.getShowableCharacters('romaji'));
@ -50,4 +52,4 @@ class CharacterGroup extends Component {
} }
} }
export default CharacterGroup; export default CharacterGroup;

60
src/components/ChooseCharacters/ChooseCharacters.jsx
View file

@ -10,7 +10,8 @@ class ChooseCharacters extends Component {
this.state = { this.state = {
errMsg : '', errMsg : '',
selectedGroups: this.props.selectedGroups, selectedGroups: this.props.selectedGroups,
showAlternatives: [] showAlternatives: [],
showSimilars: []
} }
this.toggleSelect = this.toggleSelect.bind(this); this.toggleSelect = this.toggleSelect.bind(this);
this.startGame = this.startGame.bind(this); this.startGame = this.startGame.bind(this);
@ -75,71 +76,80 @@ class ChooseCharacters extends Component {
this.setState({selectedGroups: newSelectedGroups}); this.setState({selectedGroups: newSelectedGroups});
} }
toggleAlternative(whichKana) { toggleAlternative(whichKana, postfix) {
const idx = this.state.showAlternatives.indexOf(whichKana); let show = postfix == '_a' ? this.state.showAlternatives : this.state.showSimilars;
let newShowAlternatives = this.state.showAlternatives; const idx = show.indexOf(whichKana);
if(idx >= 0) if(idx >= 0)
newShowAlternatives.splice(idx, 1); show.splice(idx, 1);
else else
newShowAlternatives.push(whichKana) show.push(whichKana)
this.setState({showAlternatives: newShowAlternatives}); 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 this.state.selectedGroups.filter(groupName => {
return groupName.startsWith(whichKana == 'hiragana' ? 'h_' : 'k_') && return groupName.startsWith(whichKana == 'hiragana' ? 'h_' : 'k_') &&
groupName.endsWith('_a'); groupName.endsWith(postfix);
}).length; }).length;
} }
getAmountOfAlternatives(whichKana) { getAmountOfAlternatives(whichKana, postfix) {
return Object.keys(kanaDictionary[whichKana]).filter(groupName => { return Object.keys(kanaDictionary[whichKana]).filter(groupName => {
return groupName.endsWith("_a"); return groupName.endsWith(postfix);
}).length; }).length;
} }
alternativeToggleRow(whichKana, showAlternatives) { alternativeToggleRow(whichKana, postfix, show) {
let checkBtn = "glyphicon glyphicon-small glyphicon-" let checkBtn = "glyphicon glyphicon-small glyphicon-"
let status; let status;
if(this.getSelectedAlternatives(whichKana) >= this.getAmountOfAlternatives(whichKana)) if(this.getSelectedAlternatives(whichKana, postfix) >= this.getAmountOfAlternatives(whichKana, postfix))
status = 'check'; status = 'check';
else if(this.getSelectedAlternatives(whichKana) > 0) else if(this.getSelectedAlternatives(whichKana, postfix) > 0)
status = 'check half'; status = 'check half';
else else
status = 'unchecked' status = 'unchecked'
checkBtn += status checkBtn += status
return <div return <div
key={'alt_toggle_' + whichKana} key={'alt_toggle_' + whichKana + postfix}
onClick={() => this.toggleAlternative(whichKana)} onClick={() => this.toggleAlternative(whichKana, postfix)}
className="choose-row" className="choose-row"
> >
<span <span
className={checkBtn} className={checkBtn}
onClick={ e => { onClick={ e => {
if(status == 'check') if(status == 'check')
this.selectNone(whichKana, true); this.selectNone(whichKana, postfix == '_a', postfix == '_s');
else if(status == 'check half' || status == 'unchecked') else if(status == 'check half' || status == 'unchecked')
this.selectAll(whichKana, true); this.selectAll(whichKana, postfix == '_a', postfix == '_s');
e.stopPropagation(); e.stopPropagation();
}} }}
></span> ></span>
{ {
showAlternatives ? <span className="toggle-caret">&#9650;</span> show ? <span className="toggle-caret">&#9650;</span>
: <span className="toggle-caret">&#9660;</span> : <span className="toggle-caret">&#9660;</span>
} }
Alternative characters (ga · ba · kya..) {
postfix == '_a' ? 'Alternative characters (ga · ba · kya..)' :
'Look-a-like characters'
}
</div> </div>
} }
showGroupRows(whichKana, showAlternatives) { showGroupRows(whichKana, showAlternatives, showSimilars = false) {
const thisKana = kanaDictionary[whichKana]; const thisKana = kanaDictionary[whichKana];
let rows = []; let rows = [];
Object.keys(thisKana).forEach((groupName, idx) => { Object.keys(thisKana).forEach((groupName, idx) => {
if(groupName.endsWith("group11_a")) if(groupName == "h_group11_a" || groupName == "k_group13_a")
rows.push(this.alternativeToggleRow(whichKana, showAlternatives)); 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 rows.push(<CharacterGroup
key={idx} key={idx}
groupName={groupName} groupName={groupName}
@ -193,7 +203,7 @@ class ChooseCharacters extends Component {
<div className="panel panel-default"> <div className="panel panel-default">
<div className="panel-heading">Katakana · カタカナ</div> <div className="panel-heading">Katakana · カタカナ</div>
<div className="panel-body selection-areas"> <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>
<div className="panel-footer text-center"> <div className="panel-footer text-center">
<a href="javascript:;" onClick={()=>this.selectAll('katakana')}>All</a> &nbsp;&middot;&nbsp; <a href="javascript:;" <a href="javascript:;" onClick={()=>this.selectAll('katakana')}>All</a> &nbsp;&middot;&nbsp; <a href="javascript:;"

36
src/data/kanaDictionary.js
View file

@ -16,7 +16,7 @@ export const kanaDictionary = {
'h_group14_a': { characters: { 'ば': ['ba'], 'び': ['bi'], 'ぶ': ['bu'], 'べ': ['be'], 'ぼ': ['bo'] } }, 'h_group14_a': { characters: { 'ば': ['ba'], 'び': ['bi'], 'ぶ': ['bu'], 'べ': ['be'], 'ぼ': ['bo'] } },
'h_group15_a': { characters: { 'ぱ': ['pa'], 'ぴ': ['pi'], 'ぷ': ['pu'], 'ぺ': ['pe'], 'ぽ': ['po'] } }, 'h_group15_a': { characters: { 'ぱ': ['pa'], 'ぴ': ['pi'], 'ぷ': ['pu'], 'ぺ': ['pe'], 'ぽ': ['po'] } },
'h_group16_a': { characters: { 'きゃ': ['kya'], 'きゅ': ['kyu'], 'きょ': ['kyo'], 'しゃ': ['sha','sya'], 'しゅ': ['shu','syu'], 'しょ': ['sho','syo'] } }, '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_group18_a': { characters: { 'ひゃ': ['hya'], 'ひゅ': ['hyu'], 'ひょ': ['hyo'], 'みゃ': ['mya'], 'みゅ': ['myu'], 'みょ': ['myo'] } },
'h_group19_a': { characters: { 'りゃ': ['rya'], 'りゅ': ['ryu'], 'りょ': ['ryo'], 'ぎゃ': ['gya'], 'ぎゅ': ['gyu'], 'ぎょ': ['gyo'] } }, 'h_group19_a': { characters: { 'りゃ': ['rya'], 'りゅ': ['ryu'], 'りょ': ['ryo'], 'ぎゃ': ['gya'], 'ぎゅ': ['gyu'], 'ぎょ': ['gyo'] } },
'h_group20_a': { characters: { 'じゃ': ['ja','jya'], 'じゅ': ['ju','jyu'], 'じょ': ['jo','jyo'], 'びゃ': ['bya'], 'びゅ': ['byu'], 'びょ': ['byo'] } }, '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_group8': { characters: { 'ヤ': ['ya'], 'ユ': ['yu'], 'ヨ': ['yo'] } },
'k_group9': { characters: { 'ラ': ['ra'], 'リ': ['ri'], 'ル': ['ru'], 'レ': ['re'], 'ロ': ['ro'] } }, 'k_group9': { characters: { 'ラ': ['ra'], 'リ': ['ri'], 'ル': ['ru'], 'レ': ['re'], 'ロ': ['ro'] } },
'k_group10': { characters: { 'ワ': ['wa'], 'ヲ': ['wo','o'], 'ン': ['n'] } }, 'k_group10': { characters: { 'ワ': ['wa'], 'ヲ': ['wo','o'], 'ン': ['n'] } },
'k_group11_a': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'] } }, 'k_group11_s': { characters: { 'シ': ['shi','si'], 'ツ': ['tsu','tu'], 'ソ': ['so'], 'ン': ['n'], 'ノ': ['no'] } },
'k_group12_a': { characters: { 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'] } }, 'k_group12_s': { characters: { 'ウ': ['u'], 'フ': ['fu','hu'], 'ワ': ['wa'], 'ラ': ['ra'], 'ス': ['su'], 'ヌ': ['nu'], 'ヲ': ['wo','o'] } },
'k_group13_a': { characters: { 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'] } }, 'k_group13_a': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'] } },
'k_group14_a': { characters: { 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'] } }, 'k_group14_a': { characters: { 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'] } },
'k_group15_a': { characters: { 'パ': ['pa'], 'ピ': ['pi'], 'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'] } }, 'k_group15_a': { characters: { 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'] } },
'k_group16_a': { characters: { 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'] } }, 'k_group16_a': { characters: { 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'] } },
'k_group17_a': { characters: { 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'] } }, 'k_group17_a': { characters: { 'パ': ['pa'], 'ピ': ['pi'], 'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'] } },
'k_group18_a': { characters: { 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'] } }, 'k_group18_a': { characters: { 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'] } },
'k_group19_a': { characters: { 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'] } }, 'k_group19_a': { characters: { 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'] } },
'k_group20_a': { characters: { 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'] } }, 'k_group20_a': { characters: { 'チャ': ['cha','cya','tya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'] } },
'k_group21_a': { characters: { 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'] } }, 'k_group21_a': { characters: { 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'] } },
'k_group22_a': { characters: { 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'] } }, 'k_group22_a': { characters: { 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'] } },
'k_group23_a': { characters: { 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'] } }, 'k_group23_a': { characters: { 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'] } },
'k_group24_a': { characters: { 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'] } }, 'k_group24_a': { characters: { 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'] } },
'k_group25_a': { characters: { 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'] } }, 'k_group25_a': { characters: { 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'] } },
'k_group26_a': { characters: { 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } } 'k_group26_a': { characters: { 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'] } },
'k_group27_a': { characters: { 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'] } },
'k_group28_a': { characters: { 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
} }
}; };