From 122a52c7002d6c7ec7504270e5cf0928ce5b9080 Mon Sep 17 00:00:00 2001 From: Antti Pilto Date: Thu, 4 Aug 2016 00:50:38 +0300 Subject: [PATCH] 1st stage --- src/components/Game/Game.jsx | 2 +- src/components/Game/Question.jsx | 89 ++++++++++++++----- src/components/Game/Question.scss | 24 ++++- .../GameContainer/GameContainer.jsx | 2 +- src/data/helperFuncs.js | 20 +++++ 5 files changed, 111 insertions(+), 26 deletions(-) diff --git a/src/components/Game/Game.jsx b/src/components/Game/Game.jsx index 9cb50fb..f14d685 100644 --- a/src/components/Game/Game.jsx +++ b/src/components/Game/Game.jsx @@ -8,7 +8,7 @@ class Game extends Component { constructor(props) { super(props); this.state = { - stage: 0, + stage:0, showScreen: '' } this.showQuestion = this.showQuestion.bind(this); diff --git a/src/components/Game/Question.jsx b/src/components/Game/Question.jsx index 8e6ac30..d11ae74 100644 --- a/src/components/Game/Question.jsx +++ b/src/components/Game/Question.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { kanaDictionary } from '../../data/kanaDictionary'; -import { removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs'; +import { findRomajisAtKanaKey, removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs'; import './Question.scss'; class Question extends Component { @@ -13,6 +13,7 @@ class Question extends Component { answerOptions: [] } this.setNewQuestion = this.setNewQuestion.bind(this); + this.handleAnswer = this.handleAnswer.bind(this); } getRandomKanas(amount, include, exclude) { @@ -24,28 +25,20 @@ class Question extends Component { randomizedKanas = removeFromArray(include, randomizedKanas); // console.log(randomizedKanas); shuffle(randomizedKanas); - randomizedKanas = randomizedKanas.slice(0,amount-1); + randomizedKanas = randomizedKanas.slice(0, amount-1); randomizedKanas.push(include); shuffle(randomizedKanas); } else { shuffle(randomizedKanas); - randomizedKanas = randomizedKanas.slice(0,amount); + randomizedKanas = randomizedKanas.slice(0, amount); } return randomizedKanas; //return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)]; } - setPreviousQuestion() { - // console.log("settings previous"); - this.previousQuestion = this.currentQuestion; - this.setState({previousQuestion: this.previousQuestion}); - } - setNewQuestion() { - if(this.props.stage<=2) document.activeElement.blur(); // reset answer button's :active - if(this.currentQuestion) this.setPreviousQuestion(); - this.currentQuestion = this.getRandomKanas(1,false,this.previousQuestion); + this.currentQuestion = this.getRandomKanas(1, false, this.previousQuestion); this.setState({currentQuestion: this.currentQuestion}); this.setAnswerOptions(); this.setAllowedAnswers(); @@ -53,13 +46,25 @@ class Question extends Component { } setAnswerOptions() { - this.answerOptions = this.getRandomKanas(3,this.currentQuestion[0],false); + this.answerOptions = this.getRandomKanas(3, this.currentQuestion[0], false); this.setState({answerOptions: this.answerOptions}); // console.log(this.answerOptions); } setAllowedAnswers() { + if(this.props.stage==1) this.allowedAnswers = findRomajisAtKanaKey(this.currentQuestion); + if(this.props.stage==2) this.allowedAnswers = this.currentQuestion; + // console.log("allowed answers: "+this.allowedAnswers); + } + handleAnswer(answer) { + if(this.props.stage<=2) document.activeElement.blur(); // reset answer button's :active + this.previousQuestion = this.currentQuestion; + this.setState({previousQuestion: this.previousQuestion}); + this.previousAnswer = answer; + this.setState({previousAnswer: this.previousAnswer}); + this.previousAllowedAnswers = this.allowedAnswers; + this.setNewQuestion(); } initializeCharacters() { @@ -67,6 +72,7 @@ class Question extends Component { this.askableKanaKeys = []; this.askableRomajis = []; this.previousQuestion = ''; + this.previousAnswer = ''; Object.keys(kanaDictionary).map(function(whichKana) { // console.log(whichKana); // 'hiragana' or 'katakana' Object.keys(kanaDictionary[whichKana]).map(function(groupName) { @@ -75,15 +81,10 @@ class Question extends Component { if(arrayContains(groupName, this.props.decidedGroups)) { // let's merge the group to our askableKanas this.askableKanas = Object.assign(this.askableKanas, kanaDictionary[whichKana][groupName]['characters']); - Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) { // let's add all askable kana keys to array this.askableKanaKeys.push(key); this.askableRomajis.push(kanaDictionary[whichKana][groupName]['characters'][key][0]); - // console.log(kanaDictionary[whichKana][groupName]['characters'][key][0]); - // kanaDictionary[whichKana][groupName]['characters'][key].map(function(romaji) { - // console.log(romaji); - // }, this); }, this); } }, this); @@ -91,6 +92,37 @@ class Question extends Component { // console.log(this.askableKanas); } + getAnswerType() { + if(this.props.stage==2) return 'kana'; + else return 'romaji'; + } + + getShowableQuestion() { + if(this.getAnswerType()=='kana') + return findRomajisAtKanaKey(this.state.currentQuestion)[0]; + else return this.state.currentQuestion; + } + + getPreviousResult() { + let resultString; + // console.log(this.previousAnswer); + if(this.previousQuestion=='' || this.previousAnswer=='') + resultString =
Let's go! Which character is this?
+ else if(this.isInAllowedAnswers(this.previousAnswer)) + resultString =
Correct!
+ else + resultString =
Wrong!
+ + return resultString; + } + + isInAllowedAnswers(previousAnswer) { + // console.log(previousAnswer); + // console.log(this.allowedAnswers); + if(arrayContains(previousAnswer, this.previousAllowedAnswers)) + return true; + else return false; + } componentWillMount() { this.initializeCharacters(); @@ -105,10 +137,15 @@ class Question extends Component { if ('ontouchstart' in window) btnClass += " no-hover"; // disables hover effect on touch screens return ( -
-
{this.state.currentQuestion}
+
+ {this.getPreviousResult()} +
{this.getShowableQuestion()}
{this.state.answerOptions.map(function(answer, idx) { - return ; + return }, this)}
); @@ -117,10 +154,16 @@ class Question extends Component { } class AnswerButton extends Component { + getShowableAnswer() { + if(this.props.answertype=='romaji') + return findRomajisAtKanaKey(this.props.answer)[0]; + else return this.props.answer; + } + render() { return ( - ; - ) + + ); } } export default Question; \ No newline at end of file diff --git a/src/components/Game/Question.scss b/src/components/Game/Question.scss index 50fdad9..ebd0bb8 100644 --- a/src/components/Game/Question.scss +++ b/src/components/Game/Question.scss @@ -1,4 +1,27 @@ .question { + .previous-result{ + max-width: 340px; + padding: 8px; + margin: 50px auto 30px; + } + .none { + background-color: #888; + color: #f5f5f5; + } + .correct { + color: #f5f5f5; + background-color: #080; + } + .wrong { + color: #f5f5f5; + background-color: #800; + } + .previous-result-none { + max-width: 340px; + padding: 6px; + margin: 30px auto; + color: #f5f5f5; + } .big-character { font-size: 5em; } @@ -17,5 +40,4 @@ background-color: #fff; border-color: #ccc; } - margin-top: 70px; } \ No newline at end of file diff --git a/src/components/GameContainer/GameContainer.jsx b/src/components/GameContainer/GameContainer.jsx index 8eabf15..7b4c298 100644 --- a/src/components/GameContainer/GameContainer.jsx +++ b/src/components/GameContainer/GameContainer.jsx @@ -8,7 +8,7 @@ class GameContainer extends Component { super(props); this.startGame = this.startGame.bind(this); this.state = { - decidedGroups: ['h_group1', 'h_group3'] + decidedGroups: ['h_group3'] } } diff --git a/src/data/helperFuncs.js b/src/data/helperFuncs.js index 1a5826e..32ac2bb 100644 --- a/src/data/helperFuncs.js +++ b/src/data/helperFuncs.js @@ -1,3 +1,5 @@ +import { kanaDictionary } from './kanaDictionary'; + export function arrayContains(needle, haystack) { return (haystack.indexOf(needle) > -1) ? true : false; } @@ -12,6 +14,24 @@ export function removeFromArray(needle, haystack) { return haystack; } +export function findRomajisAtKanaKey(needle) { + let romaji = []; + Object.keys(kanaDictionary).map(function(whichKana) { + // console.log(whichKana); // 'hiragana' or 'katakana' + Object.keys(kanaDictionary[whichKana]).map(function(groupName) { + // console.log(groupName); // 'h_group1', ... + // return kanaDictionary[whichKana][groupName]['characters'][this.props.answer]; + Object.keys(kanaDictionary[whichKana][groupName]['characters']).map(function(key) { + if(key==needle) { + // console.log(kanaDictionary[whichKana][groupName]['characters'][key]); + romaji = kanaDictionary[whichKana][groupName]['characters'][key]; + } + }, this); + }, this); + }, this); + // console.log(romaji); + return romaji; +} // export function getRandomFromArray(arr) { // return arr[Math.floor(Math.random() * arr.length)]; // }