Added a group for difficult katakana characters
This commit is contained in:
Antti Pilto
parent
098f16d944
commit
cd906d31ca
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">▲</span>
|
||||
show ? <span className="toggle-caret">▲</span>
|
||||
: <span className="toggle-caret">▼</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> · <a href="javascript:;"
|
||||
|
|
|
|||
|
|
@ -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'] } }
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue