diff --git a/src/components/ChooseCharacters/CharacterGroup.jsx b/src/components/ChooseCharacters/CharacterGroup.jsx index a8a16bf..5ded6a0 100644 --- a/src/components/ChooseCharacters/CharacterGroup.jsx +++ b/src/components/ChooseCharacters/CharacterGroup.jsx @@ -32,7 +32,9 @@ class CharacterGroup extends Component { render() { return ( -
{ this.props.handleToggleSelect(this.props.groupName); this.changeShownChars(this.getShowableCharacters('romaji')); @@ -50,4 +52,4 @@ class CharacterGroup extends Component { } } -export default CharacterGroup; \ No newline at end of file +export default CharacterGroup; diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx index 047e4fc..ee8cf2e 100644 --- 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
this.toggleAlternative(whichKana)} + key={'alt_toggle_' + whichKana + postfix} + onClick={() => this.toggleAlternative(whichKana, postfix)} className="choose-row" > { 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(); }} > { - showAlternatives ? + show ? : } - Alternative characters (ga · ba · kya..) + { + postfix == '_a' ? 'Alternative characters (ga · ba · kya..)' : + 'Look-a-like characters' + }
} - 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(
Katakana · カタカナ
- {this.showGroupRows('katakana', this.state.showAlternatives.indexOf('katakana') >= 0)} + {this.showGroupRows('katakana', this.state.showAlternatives.indexOf('katakana') >= 0, this.state.showSimilars.indexOf('katakana') >= 0)}
this.selectAll('katakana')}>All  ·