From 27dcb4dd6d2965a7484e122ec6ea2439440d49ab Mon Sep 17 00:00:00 2001 From: Antti Pilto Date: Sun, 31 Jul 2016 00:15:16 +0300 Subject: [PATCH] improve choosechacters --- src/components/App/App.jsx | 20 ++-- src/components/App/App.scss | 18 ++- .../ChooseCharacters/CharacterGroup.jsx | 65 +++++++--- .../ChooseCharacters/ChooseCharacters.jsx | 113 ++++++++---------- .../ChooseCharacters/ChooseCharacters.scss | 23 +++- .../GameContainer/GameContainer.jsx | 2 + src/components/Navbar/Navbar.scss | 2 +- src/data/kanaDictionary.js | 84 +++++++++++++ 8 files changed, 234 insertions(+), 93 deletions(-) create mode 100644 src/data/kanaDictionary.js diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index 3c16805..e75f29d 100644 --- a/src/components/App/App.jsx +++ b/src/components/App/App.jsx @@ -48,7 +48,7 @@ class App extends Component { render() { let loginButton = !this.state.isAuthenticated ? - : ''; +

Log in to save your progress!

: ''; return (
@@ -58,14 +58,16 @@ class App extends Component { gameState={this.state.gameState} handleEndGame={this.endGame} /> -
- -
{loginButton}
+
+
+ +
{loginButton}
+
) 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}
):''} + +
); diff --git a/src/components/ChooseCharacters/ChooseCharacters.scss b/src/components/ChooseCharacters/ChooseCharacters.scss index a200484..8b86190 100644 --- a/src/components/ChooseCharacters/ChooseCharacters.scss +++ b/src/components/ChooseCharacters/ChooseCharacters.scss @@ -11,13 +11,24 @@ .panel-heading { font-weight: bold; } + .panel-footer a { + text-decoration: none; + color: #337ab7; + } .choose-row { font-size: 1em; - border-bottom: 1px #eee solid; padding: 5px; + user-select: none; + } + .choose-row:not(:last-child) { + border-bottom: 1px #eee solid; + } + @media (min-width: 768px) { + .choose-row:hover { + background-color: #f4f4f4; + } } .choose-row:hover { - background-color: #f4f4f4; cursor: pointer; } .glyphicon { @@ -32,7 +43,11 @@ .selection-areas { padding: 7px; } + .success-percent { + color: #ccc; + } } -.success-percent { - color: #ccc; +.error-message { + color: #d9534f; + padding-bottom: 10px; } \ No newline at end of file diff --git a/src/components/GameContainer/GameContainer.jsx b/src/components/GameContainer/GameContainer.jsx index fe2ec86..0318bca 100644 --- a/src/components/GameContainer/GameContainer.jsx +++ b/src/components/GameContainer/GameContainer.jsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { kanaDictionary } from '../../data/kanaDictionary'; import ChooseCharacters from '../ChooseCharacters/ChooseCharacters'; class GameContainer extends Component { @@ -8,6 +9,7 @@ class GameContainer extends Component { } startGame(options) { + // console.log(options); // prints array this.props.handleStartGame(); } diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss index b48861c..9e10a4a 100644 --- a/src/components/Navbar/Navbar.scss +++ b/src/components/Navbar/Navbar.scss @@ -9,7 +9,7 @@ } } .navbar-inverse { - background-color: #444; + background-color: #333; } .nav a { color: #fff !important; diff --git a/src/data/kanaDictionary.js b/src/data/kanaDictionary.js new file mode 100644 index 0000000..2600ff5 --- /dev/null +++ b/src/data/kanaDictionary.js @@ -0,0 +1,84 @@ +/* export let kanaDictionary_romajifirst = { + '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' : { + } +}; */ + +export let kanaDictionary = { + 'hiragana' : { + 'h_group1': { characters: { 'あ': ['a'], 'い': ['i'], 'う': ['u'], 'え': ['e'], 'お': ['o'] } }, + 'h_group2': { characters: { 'か': ['ka'], 'き': ['ki'], 'く': ['ku'], 'け': ['ke'], 'こ': ['ko'] } }, + 'h_group3': { characters: { 'さ': ['sa'], 'し': ['shi','si'], 'す': ['su'], 'せ': ['se'], 'そ': ['so'] } }, + 'h_group4': { characters: { 'た': ['ta'], 'ち': ['chi','ti'], 'つ': ['tsu','tu'], 'て': ['te'], 'と': ['to'] } }, + 'h_group5': { characters: { 'な': ['na'], 'に': ['ni'], 'ぬ': ['nu'], 'ね': ['ne'], 'の': ['no'] } }, + 'h_group6': { characters: { 'は': ['ha'], 'ひ': ['hi'], 'ふ': ['fu','hu'], 'へ': ['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','o'], 'ん': ['n'] } }, + 'h_group11': { characters: { 'が': ['ga'], 'ぎ': ['gi'], 'ぐ': ['gu'], 'げ': ['ge'], 'ご': ['go'], 'ざ': ['za'], 'じ': ['ji','zi'], 'ず': ['zu','du'], 'ぜ': ['ze'], 'ぞ': ['zo'], 'だ': ['da'], 'ぢ': ['ji','di','dzi'], 'づ': ['zu','dzu'], 'で': ['de'], 'ど': ['do'], 'ば': ['ba'], 'び': ['bi'], 'ぶ': ['bu'], 'べ': ['be'], 'ぼ': ['bo'], 'ぱ': ['pa'], 'ぴ': ['pi'], + 'ぷ': ['pu'], 'ぺ': ['pe'], 'ぽ': ['po'], 'きゃ': ['kya'], 'きゅ': ['kyu'], 'きょ': ['kyo'], 'しゃ': ['sha','sya'], 'しゅ': ['shu','syu'], 'しょ': ['sho','syo'], 'ちゃ': ['cha','cya'], 'ちゅ': ['chu','cyu'], 'ちょ': ['cho','cyo'], 'にゃ': ['nya'], 'にゅ': ['nyu'], 'にょ': ['nyo'], 'ひゃ': ['hya'], 'ひゅ': ['hyu'], 'ひょ': ['hyo'], 'みゃ': ['mya'], 'みゅ': ['myu'], 'みょ': ['myo'], 'りゃ': ['rya'], 'りゅ': ['ryu'], 'りょ': ['ryo'], 'ぎゃ': ['gya'], 'ぎゅ': ['gyu'], 'ぎょ': ['gyo'], 'じゃ': ['ja','jya'], 'じゅ': ['ju','jyu'], 'じょ': ['jo','jyo'], 'びゃ': ['bya'], 'びゅ': ['byu'], 'びょ': ['byo'], 'ぴゃ': ['pya'], 'ぴゅ': ['pyu'], 'ぴょ': ['pyo'] } } + }, + 'katakana' : { + 'k_group1': { characters: { 'ア': ['a'], 'イ': ['i'], 'ウ': ['u'], 'エ': ['e'], 'オ': ['o'] } }, + 'k_group2': { characters: { 'カ': ['ka'], 'キ': ['ki'], 'ク': ['ku'], 'ケ': ['ke'], 'コ': ['ko'] } }, + 'k_group3': { characters: { 'サ': ['sa'], 'シ': ['shi','si'], 'ス': ['su'], 'セ': ['se'], 'ソ': ['so'] } }, + 'k_group4': { characters: { 'タ': ['ta'], 'チ': ['chi','ti'], 'ツ': ['tsu','tu'], 'テ': ['te'], 'ト': ['to'] } }, + 'k_group5': { characters: { 'ナ': ['na'], 'ニ': ['ni'], 'ヌ': ['nu'], 'ネ': ['ne'], 'ノ': ['no'] } }, + 'k_group6': { characters: { 'ハ': ['ha'], 'ヒ': ['hi'], 'フ': ['fu','hu'], 'ヘ': ['he'], 'ホ': ['ho'] } }, + 'k_group7': { characters: { 'マ': ['ma'], 'ミ': ['mi'], 'ム': ['mu'], 'メ': ['me'], 'モ': ['mo'] } }, + 'k_group8': { characters: { 'ヤ': ['ya'], 'ユ': ['yu'], 'ヨ': ['yo'] } }, + 'k_group9': { characters: { 'ラ': ['ra'], 'リ': ['ri'], 'ル': ['ru'], 'レ': ['re'], 'ロ': ['ro'] } }, + 'k_group10': { characters: { 'ワ': ['wa'], 'ヲ': ['wo','o'], 'ン': ['n'] } }, + 'k_group11': { characters: { 'ガ': ['ga'], 'ギ': ['gi'], 'グ': ['gu'], 'ゲ': ['ge'], 'ゴ': ['go'], 'ザ': ['za'], 'ジ': ['ji','zi'], 'ズ': ['zu','du'], 'ゼ': ['ze'], 'ゾ': ['zo'], 'ダ': ['da'], 'ヂ': ['ji','di','dzi'], 'ヅ': ['zu','dzu'], 'デ': ['de'], 'ド': ['do'], 'バ': ['ba'], 'ビ': ['bi'], 'ブ': ['bu'], 'ベ': ['be'], 'ボ': ['bo'], 'パ': ['pa'], 'ピ': ['pi'], + 'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'], 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'], 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'], 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'], 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'], 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'], 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'], 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'], 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'], 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'], 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'], 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } } + } +}; + +// If answer is wrong, let's check if the answer is a key here, and compare the value to the correct answer +// export let acceptedAlternatives = { 'si': 'shi', 'ti': 'chi', 'tu': 'tsu', 'hu': 'fu', 'o': 'wo', + // 'zi': 'ji', 'di': 'ji', 'du': 'zu', 'sya': 'sha', 'syu': 'shu', 'syo': 'sho', + // 'cya': 'cha', 'cyu': 'chu', 'cyo': 'cho', 'jya': 'ja', 'jyu': 'ju', 'jyo': 'jo' }; + + + +// export let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu', 'wo': 'o', +// 'ji': 'zi', 'ji': }; + +/* +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' +]; +*/