working checkboxes
This commit is contained in:
Antti Pilto
parent
a7e521512b
commit
3a7144d7ae
29
src/components/ChooseCharacters/CharacterGroup.jsx
Normal file
29
src/components/ChooseCharacters/CharacterGroup.jsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class CharacterGroup extends Component {
|
||||
render() {
|
||||
let strRomajiCharacters = '';
|
||||
Object.keys(this.props.characters).map(function(character) {
|
||||
strRomajiCharacters+=character+' · ';
|
||||
});
|
||||
strRomajiCharacters = strRomajiCharacters.slice(0, -2);
|
||||
|
||||
let chooseRow = (
|
||||
<div className="choose-row"
|
||||
onClick={()=>this.props.handleToggleSelect(this.props.groupName)}>
|
||||
<span className={this.props.selected ?
|
||||
'glyphicon glyphicon-small glyphicon-check' :
|
||||
'glyphicon glyphicon-small glyphicon-unchecked'}></span> {strRomajiCharacters}
|
||||
<span className="pull-right success-percent">0 %</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{chooseRow}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CharacterGroup;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class CharacterRow extends Component {
|
||||
render() {
|
||||
let strCharacters = '';
|
||||
this.props.characters.map(function(items) {
|
||||
Object.keys(items).map(function(item) {
|
||||
if(item!='selected') strCharacters+=item+', ';
|
||||
});
|
||||
});
|
||||
strCharacters = strCharacters.slice(0, -2);
|
||||
|
||||
let chooseRow = (
|
||||
<div className="choose-row">
|
||||
<span className={this.props.selected ?
|
||||
'glyphicon glyphicon-small glyphicon-check' :
|
||||
'glyphicon glyphicon-small glyphicon-unchecked'}></span> {strCharacters}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{chooseRow}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CharacterRow;
|
||||
|
|
@ -1,69 +1,102 @@
|
|||
import React, { Component } from 'react';
|
||||
import './ChooseCharacters.scss';
|
||||
import CharacterRow from './CharacterRow';
|
||||
|
||||
import './ChooseCharacters.scss';
|
||||
import CharacterGroup from './CharacterGroup';
|
||||
/*
|
||||
let kanaArray = [
|
||||
"あ","い","う","え","お",
|
||||
"か","き","く","け","こ",
|
||||
"さ","し","す","せ","そ",
|
||||
"た","ち","つ","て","と",
|
||||
"な","に","ぬ","ね","の",
|
||||
"は","ひ","ふ","へ","ほ",
|
||||
"ま","み","む","め","も",
|
||||
"や","ゆ","よ",
|
||||
"ら","り","る","れ","ろ",
|
||||
"わ","を","ん"
|
||||
'あ','い','う','え','お',
|
||||
'か','き','く','け','こ',
|
||||
'さ','し','す','せ','そ',
|
||||
'た','ち','つ','て','と',
|
||||
'な','に','ぬ','ね','の',
|
||||
'は','ひ','ふ','へ','ほ',
|
||||
'ま','み','む','め','も',
|
||||
'や','ゆ','よ',
|
||||
'ら','り','る','れ','ろ',
|
||||
'わ','を','ん'
|
||||
];
|
||||
let romajiArray = [
|
||||
"a","i","u","e","o",
|
||||
"ka","ki","ku","ke","ko",
|
||||
"sa","shi","su","se","so",
|
||||
"ta","chi","tsu","te","to",
|
||||
"na","ni","nu","ne","no",
|
||||
"ha","hi","fu","he","ho",
|
||||
"ma","mi","mu","me","mo",
|
||||
"ya","yu","yo",
|
||||
"ra","ri","ru","re","ro",
|
||||
"wa","wo","n"
|
||||
'a','i','u','e','o',
|
||||
'ka','ki','ku','ke','ko',
|
||||
'sa','shi','su','se','so',
|
||||
'ta','chi','tsu','te','to',
|
||||
'na','ni','nu','ne','no',
|
||||
'ha','hi','fu','he','ho',
|
||||
'ma','mi','mu','me','mo',
|
||||
'ya','yu','yo',
|
||||
'ra','ri','ru','re','ro',
|
||||
'wa','wo','n'
|
||||
];
|
||||
*/
|
||||
let kanaDictionary =
|
||||
{
|
||||
'hiragana' : {
|
||||
'h_group1': { characters: { 'a': 'あ', 'i': 'い', 'u': 'う', 'e': 'え', 'o': 'お' } },
|
||||
'h_group2': { characters: { 'ka': 'か', 'ki': 'き', 'ku': 'く', 'ke': 'け', 'ko': 'こ' } },
|
||||
'h_group3': { characters: { 'sa': 'さ', 'shi': 'し', 'su': 'す', 'se': 'せ', 'so': 'そ' } },
|
||||
'h_group4': { characters: { 'ta': 'た', 'chi': 'ち', 'tsu': 'つ', 'te': 'て' , 'to': 'と' } },
|
||||
'h_group5': { characters: { 'na': 'な', 'ni': 'に', 'nu': 'ぬ', 'ne': 'ね', 'no': 'の' } },
|
||||
'h_group6': { characters: { 'ha': 'は', 'hi': 'ひ', 'fu': 'ふ', 'he': 'へ', 'ho': 'ほ' } },
|
||||
'h_group7': { characters: { 'ma': 'ま', 'mi': 'み', 'mu': 'む', 'me': 'め', 'mo': 'も' } },
|
||||
'h_group8': { characters: { 'ya': 'や', 'yu': 'ゆ', 'yo': 'よ' } },
|
||||
'h_group9': { characters: { 'ra': 'ら', 'ri': 'り', 'ru': 'る', 're': 'れ', 'ro': 'ろ' } },
|
||||
'h_group10': { characters: { 'wa': 'わ', 'wo': 'を', 'n': 'ん' } }
|
||||
},
|
||||
'katakana': {}
|
||||
};
|
||||
|
||||
/*let hiraganaItems = {
|
||||
group1: { a: 'あ', i: 'い', u: 'う', e: 'え', o: 'お' },
|
||||
group2: { ka: 'か', ki: 'き', ku: 'く', ke: 'け', ko: 'こ' }
|
||||
}*/
|
||||
let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu' };
|
||||
|
||||
class ChooseCharacters extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hiraganaItems: [
|
||||
{
|
||||
group1: [
|
||||
{ selected: true, a: 'あ', i: 'い', u: 'う', e: 'え', o: 'お' }
|
||||
],
|
||||
group2: [
|
||||
{ selected: false, ka: 'か', ki: 'き', ku: 'く', ke: 'け', ko: 'こ' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
selectedKana: ['h_group1'],
|
||||
kana : kanaDictionary
|
||||
};
|
||||
this.startGame = this.startGame.bind(this);
|
||||
this.toggleGroup = this.toggleGroup.bind(this);
|
||||
this.showHiraganaRows = this.showHiraganaRows.bind(this);
|
||||
this.showKanaRows = this.showKanaRows.bind(this);
|
||||
this.toggleSelect = this.toggleSelect.bind(this);
|
||||
}
|
||||
|
||||
showHiraganaRows() {
|
||||
return (this.state.hiraganaItems.map(function(groups) {
|
||||
return Object.keys(groups).map(function(group) {
|
||||
return groups[group].map(function(item) {
|
||||
return <CharacterRow characters={groups[group]} selected={item.selected} />
|
||||
});
|
||||
});
|
||||
}))
|
||||
getIndex(groupName) {
|
||||
return this.state.selectedKana.indexOf(groupName);
|
||||
}
|
||||
|
||||
toggleGroup(e) {
|
||||
console.log('event: '+e);
|
||||
isSelected(groupName) {
|
||||
return this.getIndex(groupName) > -1 ? true : false;
|
||||
}
|
||||
|
||||
removeSelect(index) {
|
||||
let newSelectedKana = this.state.selectedKana.slice();
|
||||
newSelectedKana.splice(index, 1);
|
||||
this.setState({selectedKana: newSelectedKana});
|
||||
}
|
||||
|
||||
addSelect(groupName) {
|
||||
this.setState({selectedKana: this.state.selectedKana.concat(groupName)});
|
||||
}
|
||||
|
||||
toggleSelect(groupName) {
|
||||
console.log('toggling '+groupName);
|
||||
let index = this.getIndex(groupName);
|
||||
if(index > -1) this.removeSelect(index);
|
||||
else this.addSelect(groupName);
|
||||
}
|
||||
|
||||
showKanaRows(whichKana) {
|
||||
let thisKana = this.state.kana[whichKana];
|
||||
return Object.keys(thisKana).map(function(groupName, idx) {
|
||||
return (
|
||||
<CharacterGroup
|
||||
key={idx}
|
||||
groupName={groupName}
|
||||
selected={this.isSelected(groupName)}
|
||||
characters={thisKana[groupName].characters}
|
||||
handleToggleSelect={this.toggleSelect}
|
||||
/>
|
||||
);
|
||||
}, this);
|
||||
}
|
||||
|
||||
startGame() {
|
||||
|
|
@ -88,7 +121,7 @@ class ChooseCharacters extends Component {
|
|||
<div className="panel panel-default">
|
||||
<div className="panel-heading">Hiragana (ひらがな)</div>
|
||||
<div className="panel-body selection-areas">
|
||||
{this.showHiraganaRows()}
|
||||
{this.showKanaRows('hiragana')}
|
||||
</div>
|
||||
<div className="panel-footer text-center"><a href="javascript:;">All</a> · <a href="javascript:;">None</a></div>
|
||||
</div>
|
||||
|
|
@ -96,12 +129,15 @@ class ChooseCharacters extends Component {
|
|||
<div className="col-sm-6">
|
||||
<div className="panel panel-default">
|
||||
<div className="panel-heading">Katakana (カタカナ)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-body selection-areas">
|
||||
{this.showKanaRows('katakana')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xs-12 text-center"><button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
.choose-row {
|
||||
font-size: 1.1em;
|
||||
font-size: 1em;
|
||||
border-bottom: 1px #eee solid;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -20,9 +20,6 @@
|
|||
background-color: #f4f4f4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choose-row:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.glyphicon {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -35,4 +32,7 @@
|
|||
.selection-areas {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
.success-percent {
|
||||
color: #ccc;
|
||||
}
|
||||
|
|
@ -48,7 +48,6 @@ module.exports = {
|
|||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress:{
|
||||
screw_ie8: true,
|
||||
warnings: false
|
||||
},
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue