a3x/kana
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

before removing login

Browse source
This commit is contained in:
Antti Pilto 2016-08-13 19:19:32 +03:00
parent 03a69f276e
commit 613449a82c
7 changed files with 92 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -41,6 +41,7 @@
"jwt-decode": "^2.1.0",
"postcss": "^5.1.0",
"react": "^15.2.1",
"react-dom": "^15.2.1"
"react-dom": "^15.2.1",
"react-toggle-switch": "^2.1.2"
}
}

2
src/components/App/App.jsx
View file

@ -13,7 +13,7 @@ class App extends Component {
super(props);
this.state = {
isAuthenticated: this.isAuthenticated(),
gameState: 'game'
gameState: 'chooseCharacters'
}
auth.on('profile_updated', (newProfile) => {
this.setState({isAuthenticated: this.isAuthenticated()});

8
src/components/ChooseCharacters/ChooseCharacters.jsx
View file

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import Switch from 'react-toggle-switch';
import { kanaDictionary } from '../../data/kanaDictionary';
import './ChooseCharacters.scss';
import CharacterGroup from './CharacterGroup';
@ -124,7 +125,12 @@ class ChooseCharacters extends Component {
</div>
</div>
</div>
<div className="col-xs-12 text-center">
<div className="col-sm-3 col-xs-12 pull-right">
<span className="pull-right lock">Lock to stage &nbsp;
{this.props.isLocked?<input className="stage-choice" type="number" min="1" max="4" maxLength="1" size="1" onChange={(e)=>this.props.lockStage(e.target.value, true)} value={this.props.stage} />:''}
<Switch onClick={()=>this.props.lockStage(1)} on={this.props.isLocked} /></span>
</div>
<div className="col-sm-offset-3 col-sm-6 col-xs-12 text-center">
{this.state.errMsg!=''?(<div className="error-message">{this.state.errMsg}</div>):''}
<button className="btn btn-danger startgame-button" onClick={this.startGame}>Start the Quiz!</button>
</div>

49
src/components/ChooseCharacters/ChooseCharacters.scss
View file

@ -53,3 +53,52 @@
color: #d9534f;
padding-bottom: 10px;
}
.lock {
color: #888;
margin-bottom: 10px;
}
.stage-choice {
border: 1px solid #999;
padding-left: 5px;
border-radius: 5px;
margin-right: 5px;
outline: none;
}
.switch {
border: 1px solid #ccc;
background: #e5e5e5;
width: 44px;
height: 19px;
border-radius: 13px;
cursor: pointer;
display: inline-block;
float: right;
margin-top: 1px;
}
.switch-toggle {
border: 1px solid #999;
box-shadow: 1px 1px 1px #ccc;
width: 19px;
height: 17px;
left: 0;
border-radius: 12px;
background: #eee;
position: relative;
transition: left .2s ease-in-out;
}
.switch.on {
border: 1px solid #4da94f;
background: #5cb85c;
}
.switch.on .switch-toggle {
left: 23px;
border: 1px solid #b8ffb2;
background: #b8ffb2;
}
.switch.disabled {
cursor: not-allowed;
}

14
src/components/Game/Game.jsx
View file

@ -8,8 +8,6 @@ class Game extends Component {
constructor(props) {
super(props);
this.state = {
stage:0,
isLocked: false,
showScreen: ''
}
this.showQuestion = this.showQuestion.bind(this);
@ -18,11 +16,13 @@ class Game extends Component {
}
stageUp() {
this.setState({stage: this.state.stage+1, showScreen: 'stage'});
this.props.stageUp();
this.setState({showScreen: 'stage'});
}
lockStage(stage) {
this.setState({stage: stage, showScreen: 'question', isLocked: true});
this.setState({showScreen: 'question'});
this.props.lockStage(stage);
}
showQuestion() {
@ -30,14 +30,14 @@ class Game extends Component {
}
componentWillMount() {
this.stageUp();
this.setState({showScreen: 'stage'});
}
render() {
return (
<div>
{ this.state.showScreen==='stage' ? <ShowStage lockStage={this.lockStage} handleShowQuestion={this.showQuestion} handleEndGame={this.props.handleEndGame} stage={this.state.stage} /> : '' }
{ this.state.showScreen==='question' ? <Question isLocked={this.state.isLocked} handleStageUp={this.stageUp} stage={this.state.stage} decidedGroups={this.props.decidedGroups} /> : '' }
{ this.state.showScreen==='stage' ? <ShowStage lockStage={this.lockStage} handleShowQuestion={this.showQuestion} handleEndGame={this.props.handleEndGame} stage={this.props.stage} /> : '' }
{ this.state.showScreen==='question' ? <Question isLocked={this.props.isLocked} handleStageUp={this.stageUp} stage={this.props.stage} decidedGroups={this.props.decidedGroups} /> : '' }
</div>
);
}

4
src/components/Game/Question.jsx
View file

@ -77,7 +77,7 @@ class Question extends Component {
this.allowedAnswers.push(answer.join(''));
}, this);
}
console.log(this.allowedAnswers);
// console.log(this.allowedAnswers);
}
handleAnswer(answer) {
@ -215,7 +215,7 @@ class Question extends Component {
aria-valuemax={quizSettings.stageLength[this.props.stage]}
style={stageProgressPercentageStyle}
>
<span>Stage {this.props.stage}</span>
<span>Stage {this.props.stage} {this.props.isLocked?' (Locked)':''}</span>
</div>
</div>
</div>

25
src/components/GameContainer/GameContainer.jsx
View file

@ -8,16 +8,32 @@ class GameContainer extends Component {
super(props);
this.startGame = this.startGame.bind(this);
this.state = {
stage:1,
isLocked: false,
decidedGroups: ['h_group3']
}
this.stageUp = this.stageUp.bind(this);
this.lockStage = this.lockStage.bind(this);
}
startGame(decidedGroups) {
// console.log(options); // prints array
this.setState({decidedGroups: decidedGroups});
this.props.handleStartGame();
}
stageUp() {
this.setState({stage: this.state.stage+1});
}
lockStage(stage, forceLock) {
stage = parseInt(stage) || 1;
if(stage<1 || stage>4) stage=1;
if(forceLock)
this.setState({stage: stage, isLocked: true});
else
this.setState({stage: stage, isLocked: !this.state.isLocked});
}
render() {
return (
<div>
@ -26,10 +42,17 @@ class GameContainer extends Component {
handleStartGame={this.startGame}
isAuthenticated={this.props.isAuthenticated}
nickName={this.props.nickName}
stage={this.state.stage}
isLocked={this.state.isLocked}
lockStage={this.lockStage}
/> : '' }
{ this.props.gameState==='game' ?
<Game decidedGroups={this.state.decidedGroups}
handleEndGame={this.props.handleEndGame}
stageUp={this.stageUp}
stage={this.state.stage}
isLocked={this.state.isLocked}
lockStage={this.lockStage}
/> : '' }
</div>
)