From a7e521512b15dde30c9ede26a0c1bddb2fe527c6 Mon Sep 17 00:00:00 2001 From: Antti Pilto Date: Fri, 29 Jul 2016 21:39:23 +0300 Subject: [PATCH] expand character select --- src/components/App/App.jsx | 27 ++++- src/components/App/App.scss | 2 +- .../ChooseCharacters/CharacterRow.jsx | 29 +++++ .../ChooseCharacters/ChooseCharacters.jsx | 108 ++++++++++++++++++ .../ChooseCharacters/ChooseCharacters.scss | 38 ++++++ .../GameContainer/GameContainer.jsx | 25 ++++ src/components/Navbar/Navbar.jsx | 15 ++- src/components/Navbar/Navbar.scss | 25 +++- 8 files changed, 258 insertions(+), 11 deletions(-) create mode 100644 src/components/ChooseCharacters/CharacterRow.jsx create mode 100644 src/components/ChooseCharacters/ChooseCharacters.jsx create mode 100644 src/components/ChooseCharacters/ChooseCharacters.scss create mode 100644 src/components/GameContainer/GameContainer.jsx diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx index f71ae6a..3c16805 100644 --- a/src/components/App/App.jsx +++ b/src/components/App/App.jsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import AuthService from '../../utils/AuthService' import './App.scss'; import Navbar from '../Navbar/Navbar'; +import GameContainer from '../GameContainer/GameContainer'; const options = {}; const auth = new AuthService(__AUTH0_CLIENT_ID__, __AUTH0_DOMAIN__, options); @@ -11,6 +12,7 @@ class App extends Component { super(props); this.state = { isAuthenticated: this.isAuthenticated(), + gameState: 'chooseCharacters' /*profile: auth.getProfile()*/ } auth.on('profile_updated', (newProfile) => { @@ -19,6 +21,8 @@ class App extends Component { }) this.logout = this.logout.bind(this); this.getNickName = this.getNickName.bind(this); + this.startGame = this.startGame.bind(this); + this.endGame = this.endGame.bind(this); } isAuthenticated() { @@ -29,19 +33,38 @@ class App extends Component { return auth.getProfile() && auth.getProfile().hasOwnProperty('nickname')?auth.getProfile().nickname:''; } + startGame() { + this.setState({gameState: 'game'}); + } + + endGame() { + this.setState({gameState: 'chooseCharacters'}); + } + logout() { auth.logout(); this.setState({isAuthenticated: this.isAuthenticated()}); } render() { - let loginButton = !this.state.isAuthenticated ? + let loginButton = !this.state.isAuthenticated ? : ''; return (
- +
+
{loginButton}
diff --git a/src/components/App/App.scss b/src/components/App/App.scss index 20b35af..276d68d 100644 --- a/src/components/App/App.scss +++ b/src/components/App/App.scss @@ -20,5 +20,5 @@ body { padding: 6px 15px; } .game { - padding-top: 80px; + padding-top: 70px; } \ No newline at end of file diff --git a/src/components/ChooseCharacters/CharacterRow.jsx b/src/components/ChooseCharacters/CharacterRow.jsx new file mode 100644 index 0000000..692be6c --- /dev/null +++ b/src/components/ChooseCharacters/CharacterRow.jsx @@ -0,0 +1,29 @@ +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 = ( +
+ {strCharacters} +
+ ); + + return ( +
+ {chooseRow} +
+ ); + } +} + +export default CharacterRow; \ No newline at end of file diff --git a/src/components/ChooseCharacters/ChooseCharacters.jsx b/src/components/ChooseCharacters/ChooseCharacters.jsx new file mode 100644 index 0000000..606d094 --- /dev/null +++ b/src/components/ChooseCharacters/ChooseCharacters.jsx @@ -0,0 +1,108 @@ +import React, { Component } from 'react'; +import './ChooseCharacters.scss'; +import CharacterRow from './CharacterRow'; + +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 hiraganaItems = { + group1: { a: 'あ', i: 'い', u: 'う', e: 'え', o: 'お' }, + group2: { ka: 'か', ki: 'き', ku: 'く', ke: 'け', ko: 'こ' } +}*/ + +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: 'こ' } + ] + } + ] + } + this.startGame = this.startGame.bind(this); + this.toggleGroup = this.toggleGroup.bind(this); + this.showHiraganaRows = this.showHiraganaRows.bind(this); + } + + showHiraganaRows() { + return (this.state.hiraganaItems.map(function(groups) { + return Object.keys(groups).map(function(group) { + return groups[group].map(function(item) { + return + }); + }); + })) + } + + toggleGroup(e) { + console.log('event: '+e); + } + + startGame() { + this.props.handleStartGame('foo'); + } + + render() { + return ( +
+
+
+
+
+

Welcome to Kana Quiz{this.props.nickName !== '' && typeof this.props.nickName !== 'undefined'?', '+this.props.nickName:''}!

+

Please choose the groups of characters that you'd like to be studying.

+
+
+
+
+
+
+
+
Hiragana (ひらがな)
+
+ {this.showHiraganaRows()} +
+ +
+
+
+
+
Katakana (カタカナ)
+
+
+
+
+
+ ) + } +} + +export default ChooseCharacters; \ No newline at end of file diff --git a/src/components/ChooseCharacters/ChooseCharacters.scss b/src/components/ChooseCharacters/ChooseCharacters.scss new file mode 100644 index 0000000..5db9571 --- /dev/null +++ b/src/components/ChooseCharacters/ChooseCharacters.scss @@ -0,0 +1,38 @@ +.welcome { + p:last-child { + margin-bottom: 0; + } + h4 { + margin-top: 0; + } +} +.choose-characters +{ + .panel-heading { + font-weight: bold; + } + .choose-row { + font-size: 1.1em; + border-bottom: 1px #eee solid; + padding: 5px; + } + .choose-row:hover { + background-color: #f4f4f4; + cursor: pointer; + } + .choose-row:last-child { + border-bottom: 0px; + } + .glyphicon { + font-size: 0.9em; + } + .glyphicon-check { + color: green; + } + .glyphicon-unchecked { + color: #ccc; + } + .selection-areas { + padding: 7px; + } +} \ No newline at end of file diff --git a/src/components/GameContainer/GameContainer.jsx b/src/components/GameContainer/GameContainer.jsx new file mode 100644 index 0000000..fe2ec86 --- /dev/null +++ b/src/components/GameContainer/GameContainer.jsx @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; +import ChooseCharacters from '../ChooseCharacters/ChooseCharacters'; + +class GameContainer extends Component { + constructor(props) { + super(props); + this.startGame = this.startGame.bind(this); + } + + startGame(options) { + this.props.handleStartGame(); + } + + render() { + let currentScreen = this.props.gameState==='chooseCharacters' ? : + (this.props.gameState==='game' ? '' : ''); + return ( +
+ {currentScreen} +
+ ) + } +} + +export default GameContainer; \ No newline at end of file diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 9fc69e5..f81c73d 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -3,15 +3,24 @@ import './Navbar.scss'; class Navbar extends Component { render() { + let leftLink; + switch(this.props.gameState) { + case 'chooseCharacters': + default: + leftLink = + break; + case 'game': + leftLink = + } let profileButton = this.props.isAuthenticated ? - {this.props.nickName} : - Log in; + Log out : + Log in; return (