@@ -58,14 +58,16 @@ class App extends Component {
gameState={this.state.gameState}
handleEndGame={this.endGame}
/>
-
)
diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 276d68d..0aeb350 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -5,19 +5,29 @@ html {
body {
min-height: 100%;
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
- background-color: #f5f5f5;
+ background-color: #e5e5e5;
color: #111;
}
+.outercontainer {
+ background-color: #f5f5f5;
+ padding-bottom: 20px;
+ border-bottom: 1px #dadada solid;
+ min-height: 690px;
+}
.container {
margin: 0 auto;
- max-width: 1024px;
+ max-width: 968px;
}
.row {
margin: 0;
}
.login-button {
- font-size: 2.0rem;
- padding: 6px 15px;
+ font-size: 1.3em;
+ margin-top: 15px;
+ margin-bottom: 0;
+ a {
+ color: #888;
+ }
}
.game {
padding-top: 70px;
diff --git a/src/components/ChooseCharacters/CharacterGroup.jsx b/src/components/ChooseCharacters/CharacterGroup.jsx
index 2ed4cc6..3a48ba9 100644
--- a/src/components/ChooseCharacters/CharacterGroup.jsx
+++ b/src/components/ChooseCharacters/CharacterGroup.jsx
@@ -1,28 +1,63 @@
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);
+ constructor(props) {
+ super(props);
+ this.state = {
+ shownChars : '',
+ }
+ this.changeShownChars = this.changeShownChars.bind(this);
+ }
- let chooseRow = (
+ changeShownChars(newString, e) {
+ this.setState({shownChars: newString})
+ }
+
+ getShowableCharacters(whichKana) {
+ let strRomajiCharacters = '';
+ let strKanaCharacters = '';
+ if(this.props.groupName!='h_group11' && this.props.groupName!='k_group11') {
+ Object.keys(this.props.characters).map(function(character) {
+ strRomajiCharacters+=this.props.characters[character][0]+' · ';
+ strKanaCharacters+=character+' · ';
+ }, this);
+ strRomajiCharacters = strRomajiCharacters.slice(0, -2);
+ strKanaCharacters = strKanaCharacters.slice(0, -2);
+ }
+ else if(this.props.groupName=='h_group11') {
+ strRomajiCharacters = 'ga · ba · da · kya · sha... (58 characters)';
+ strKanaCharacters = 'ぎ · ば · だ · きゃ · しゃ... (58 characters)';
+ }
+ else if(this.props.groupName=='k_group11') {
+ strRomajiCharacters = 'ga · ba · da · kya · sha... (58 characters)';
+ strKanaCharacters = 'ガ · バ · ダ · キャ · シャ... (58 characters)';
+ }
+ if(whichKana=='romaji') return strRomajiCharacters;
+ else return strKanaCharacters;
+ }
+
+ componentWillMount() {
+ this.changeShownChars(this.getShowableCharacters('romaji'));
+ }
+
+ render() {
+ return (
this.props.handleToggleSelect(this.props.groupName)}>
+ onClick={()=>{
+ this.props.handleToggleSelect(this.props.groupName);
+ this.changeShownChars(this.getShowableCharacters('romaji'));
+ }}
+ onMouseDown={()=>this.changeShownChars(this.getShowableCharacters('kana'))}
+ onMouseOut={()=>this.changeShownChars(this.getShowableCharacters('romaji'))}
+ onTouchStart={()=>this.changeShownChars(this.getShowableCharacters('kana'))}
+ onTouchEnd={()=>this.changeShownChars(this.getShowableCharacters('romaji'))}
+ >
{strRomajiCharacters}
+ 'glyphicon glyphicon-small glyphicon-unchecked'}> {this.state.shownChars}
0 %
);
-
- return (
-
- {chooseRow}
-
- );
}
}
diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx
index 992521c..cbbca61 100644
--- a/src/components/ChooseCharacters/ChooseCharacters.jsx
+++ b/src/components/ChooseCharacters/ChooseCharacters.jsx
@@ -1,62 +1,20 @@
import React, { Component } from 'react';
-
+import { kanaDictionary } from '../../data/kanaDictionary';
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'
-];
-*/
-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 acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu' };
class ChooseCharacters extends Component {
constructor(props) {
super(props);
this.state = {
- selectedKana: ['h_group1'],
- kana : kanaDictionary
- };
+ errMsg : '',
+ selectedKana: ['h_group1']
+ }
this.startGame = this.startGame.bind(this);
this.showKanaRows = this.showKanaRows.bind(this);
this.toggleSelect = this.toggleSelect.bind(this);
+ this.selectAll = this.selectAll.bind(this);
+ this.selectNone = this.selectNone.bind(this);
}
getIndex(groupName) {
@@ -67,25 +25,48 @@ class ChooseCharacters extends Component {
return this.getIndex(groupName) > -1 ? true : false;
}
- removeSelect(index) {
+ removeSelect(groupName) {
+ if(this.getIndex(groupName)<0) return;
let newSelectedKana = this.state.selectedKana.slice();
- newSelectedKana.splice(index, 1);
+ newSelectedKana.splice(this.getIndex(groupName), 1);
this.setState({selectedKana: newSelectedKana});
}
addSelect(groupName) {
- this.setState({selectedKana: this.state.selectedKana.concat(groupName)});
+ this.setState({errMsg: '', selectedKana: this.state.selectedKana.concat(groupName)});
}
toggleSelect(groupName) {
- console.log('toggling '+groupName);
- let index = this.getIndex(groupName);
- if(index > -1) this.removeSelect(index);
+ if(this.getIndex(groupName) > -1) this.removeSelect(groupName);
else this.addSelect(groupName);
}
+ selectAll(whichKana) {
+ let thisKana = kanaDictionary[whichKana];
+ let newSelectedKana = this.state.selectedKana.slice();
+ Object.keys(thisKana).map(function(groupName) {
+ if(!this.isSelected(groupName))
+ newSelectedKana.push(groupName);
+ }, this);
+ this.setState({errMsg: '', selectedKana: newSelectedKana});
+ }
+
+ selectNone(whichKana) {
+ let newSelectedKana = [];
+ this.state.selectedKana.map(function(groupName) {
+ let mustBeRemoved = false;
+ Object.keys(kanaDictionary[whichKana]).map(function(removableGroupName) {
+ if(removableGroupName===groupName)
+ mustBeRemoved = true;
+ }, this);
+ if(!mustBeRemoved)
+ newSelectedKana.push(groupName);
+ }, this);
+ this.setState({selectedKana: newSelectedKana});
+ }
+
showKanaRows(whichKana) {
- let thisKana = this.state.kana[whichKana];
+ let thisKana = kanaDictionary[whichKana];
return Object.keys(thisKana).map(function(groupName, idx) {
return (
-
Hiragana (ひらがな)
+
Hiragana ひらがな
{this.showKanaRows('hiragana')}
-
+
-
Katakana (カタカナ)
+
Katakana カタカナ
{this.showKanaRows('katakana')}
+
-
+
+ {this.state.errMsg!=''?(
{this.state.errMsg}
):''}
+
+