{
this.props.handleToggleSelect(this.props.groupName);
this.changeShownChars(this.getShowableCharacters('romaji'));
diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx
index 5a9fc74..420f6d9 100644
--- a/src/components/ChooseCharacters/ChooseCharacters.jsx
+++ b/src/components/ChooseCharacters/ChooseCharacters.jsx
@@ -9,7 +9,8 @@ class ChooseCharacters extends Component {
super(props);
this.state = {
errMsg : '',
- selectedGroups: this.props.selectedGroups
+ selectedGroups: this.props.selectedGroups,
+ showAlternatives: []
}
this.startGame = this.startGame.bind(this);
this.showGroupRows = this.showGroupRows.bind(this);
@@ -52,6 +53,16 @@ class ChooseCharacters extends Component {
this.setState({errMsg: '', selectedGroups: newSelectedGroups});
}
+ selectAllAlternative(whichKana) {
+ let thisKana = kanaDictionary[whichKana];
+ let newSelectedGroups = this.state.selectedGroups.slice();
+ Object.keys(thisKana).map(function(groupName) {
+ if(groupName.endsWith("_a"))
+ newSelectedGroups.push(groupName);
+ }, this);
+ this.setState({errMsg: '', selectedGroups: newSelectedGroups});
+ }
+
selectNone(whichKana) {
let newSelectedGroups = [];
this.state.selectedGroups.map(function(groupName) {
@@ -66,19 +77,98 @@ class ChooseCharacters extends Component {
this.setState({selectedGroups: newSelectedGroups});
}
- showGroupRows(whichKana) {
- let thisKana = kanaDictionary[whichKana];
- return Object.keys(thisKana).map(function(groupName, idx) {
- return (
-
= 0)
+ newShowAlternatives.splice(idx, 1);
+ else
+ newShowAlternatives.push(whichKana)
+ this.setState({showAlternatives: newShowAlternatives});
+ }
+
+ getSelectedAlternatives(whichKana) {
+ return this.state.selectedGroups.filter(groupName => {
+ return groupName.startsWith(whichKana == 'hiragana' ? 'h_' : 'k_') &&
+ groupName.endsWith('_a');
+ }).length;
+ }
+
+ getAmountOfAlternatives(whichKana) {
+ return Object.keys(kanaDictionary[whichKana]).filter(groupName => {
+ return groupName.endsWith("_a");
+ }).length;
+ }
+
+ alternativeToggleRow(whichKana, showAlternatives) {
+ let checkBtn = "glyphicon glyphicon-small glyphicon-"
+ let status;
+ if(this.getSelectedAlternatives(whichKana) >= this.getAmountOfAlternatives(whichKana))
+ status = 'check';
+ else if(this.getSelectedAlternatives(whichKana) > 0)
+ status = 'check half';
+ else
+ status = 'unchecked'
+ checkBtn += status
+
+ return this.toggleAlternative(whichKana)}
+ className="choose-row"
+ >
+ {
+ if(status == 'check')
+ this.selectNoneAlternative(whichKana);
+ else if(status == 'check half')
+ this.selectAllAlternative(whichKana);
+ else if(status == 'unchecked')
+ this.selectAllAlternative(whichKana);
+ e.stopPropagation();
+ }}
+ >
+ {
+ showAlternatives ? ▲
+ : ▼
+ }
+ Alternative characters (ga · ba · kya · sha..)
+
+ }
+
+ showGroupRows(whichKana, showAlternatives) {
+ const thisKana = kanaDictionary[whichKana];
+ let rows = [];
+ Object.keys(thisKana).forEach(function(groupName, idx) {
+ if(groupName.endsWith("group11_a"))
+ rows.push(this.alternativeToggleRow(whichKana, showAlternatives));
+
+ if(!groupName.endsWith("a") || showAlternatives) {
+ rows.push(
- );
+ />);
+ }
}, this);
+
+ return rows;
}
startGame() {
@@ -107,10 +197,12 @@ class ChooseCharacters extends Component {
Hiragana · ひらがな
- {this.showGroupRows('hiragana')}
+ {this.showGroupRows('hiragana', this.state.showAlternatives.indexOf('hiragana') >= 0)}