From 46b38b843f2f667895c8549d4d9490bed5ce07cc Mon Sep 17 00:00:00 2001 From: Antti Pilto Date: Wed, 3 Aug 2016 00:18:46 +0300 Subject: [PATCH] question advance --- src/components/Game/Question.jsx | 114 +++++++++++------- src/components/Game/Question.scss | 15 +++ .../GameContainer/GameContainer.jsx | 2 +- src/data/helperFuncs.js | 22 +++- 4 files changed, 105 insertions(+), 48 deletions(-) diff --git a/src/components/Game/Question.jsx b/src/components/Game/Question.jsx index f555265..8e6ac30 100644 --- a/src/components/Game/Question.jsx +++ b/src/components/Game/Question.jsx @@ -1,50 +1,61 @@ import React, { Component } from 'react'; import { kanaDictionary } from '../../data/kanaDictionary'; -import { arrayContains, shuffle } from '../../data/helperFuncs'; +import { removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs'; import './Question.scss'; class Question extends Component { constructor(props) { super(props); this.state = { - previousQuestion: {}, - currentQuestion: '' + previousQuestion: [], + previousAnswer: '', + currentQuestion: [], + answerOptions: [] } + this.setNewQuestion = this.setNewQuestion.bind(this); } - // getQuestionIndex(question) { - // return this.state.selectedGroups.indexOf(question); - // } - - // removeSelect(groupName) { - // if(this.getQuestionIndex(groupName)<0) return; - // let newSelectedGroups = this.state.selectedGroups.slice(); - // newSelectedGroups.splice(this.getIndex(groupName), 1); - // this.setState({selectedGroups: newSelectedGroups}); - // } - - getRandomKanas(amount) { - let randomizedKanas = []; - if(this.state.previousQuestion.length > 0) - removeFromAskable(this.state.previousQuestion); - shuffle(this.askableCharacterKeys); - for(let i = 0; i < amount; i++) { - randomizedKanas.push(this.askableCharacterKeys[i]); + getRandomKanas(amount, include, exclude) { + // console.log(this.askableKanaKeys); + let randomizedKanas = this.askableKanaKeys.slice(); + // console.log(randomizedKanas); + if(exclude && exclude.length > 0) randomizedKanas = removeFromArray(exclude, randomizedKanas); + if(include && include.length > 0) { + randomizedKanas = removeFromArray(include, randomizedKanas); + // console.log(randomizedKanas); + shuffle(randomizedKanas); + randomizedKanas = randomizedKanas.slice(0,amount-1); + randomizedKanas.push(include); + shuffle(randomizedKanas); + } + else { + shuffle(randomizedKanas); + randomizedKanas = randomizedKanas.slice(0,amount); } return randomizedKanas; - // console.log(this.askableCharacters); - //return this.askableCharacterKeys[Math.floor(Math.random() * this.askableCharacterKeys.length)]; + //return this.askableKanaKeys[Math.floor(Math.random() * this.askableKanaKeys.length)]; } - removeFromAskable(question) { - console.log('here'); - //console.log(this.getQuestionIndex(question)); + setPreviousQuestion() { + // console.log("settings previous"); + this.previousQuestion = this.currentQuestion; + this.setState({previousQuestion: this.previousQuestion}); } setNewQuestion() { - let question = this.getRandomKanas(1); - this.setState({currentQuestion: question[0]}); - //console.log(question); + 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.setState({currentQuestion: this.currentQuestion}); + this.setAnswerOptions(); + this.setAllowedAnswers(); + // console.log(this.currentQuestion); + } + + setAnswerOptions() { + this.answerOptions = this.getRandomKanas(3,this.currentQuestion[0],false); + this.setState({answerOptions: this.answerOptions}); + // console.log(this.answerOptions); } setAllowedAnswers() { @@ -52,51 +63,64 @@ class Question extends Component { } initializeCharacters() { - this.askableCharacters = {}; - this.askableCharacterKeys = []; + this.askableKanas = {}; + this.askableKanaKeys = []; + this.askableRomajis = []; + this.previousQuestion = ''; Object.keys(kanaDictionary).map(function(whichKana) { // console.log(whichKana); // 'hiragana' or 'katakana' Object.keys(kanaDictionary[whichKana]).map(function(groupName) { // console.log(groupName); // 'h_group1', ... // do we want to include this group? - if(arrayContains(groupName, this.props.decidedGroups)) { - // let's merge the group to our askableCharacters - this.askableCharacters = Object.assign(this.askableCharacters, kanaDictionary[whichKana][groupName]['characters']); - + 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.askableCharacterKeys.push(key); - kanaDictionary[whichKana][groupName]['characters'][key].map(function(romaji) { - console.log(romaji); - }, this); + 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); }, this); - // console.log(this.askableCharacters); + // console.log(this.askableKanas); } - componentWillMount() { + this.initializeCharacters(); } componentDidMount() { - this.initializeCharacters(); this.setNewQuestion(); - this.setAnswerOptions(); - this.setAllowedAnswers(); } render() { + let btnClass = "btn btn-default answer-button"; + if ('ontouchstart' in window) + btnClass += " no-hover"; // disables hover effect on touch screens return (
{this.state.currentQuestion}
- + {this.state.answerOptions.map(function(answer, idx) { + return ; + }, this)}
); } } +class AnswerButton extends Component { + 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 0874f6f..50fdad9 100644 --- a/src/components/Game/Question.scss +++ b/src/components/Game/Question.scss @@ -2,5 +2,20 @@ .big-character { font-size: 5em; } + .answer-button { + min-width: 90px; + font-size: 2em; + @media (min-width: 768px) { + margin: 30px 15px 10px; + } + @media (max-width: 768px) { + margin: 30px 5px 10px; + } + } + .no-hover { + /* disables hover effect on touch screens */ + 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 df877c2..8eabf15 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_group2'] + decidedGroups: ['h_group1', 'h_group3'] } } diff --git a/src/data/helperFuncs.js b/src/data/helperFuncs.js index 72d21fa..1a5826e 100644 --- a/src/data/helperFuncs.js +++ b/src/data/helperFuncs.js @@ -1,7 +1,25 @@ -export function arrayContains(needle, arrhaystack) { - return (arrhaystack.indexOf(needle) > -1); +export function arrayContains(needle, haystack) { + return (haystack.indexOf(needle) > -1) ? true : false; } +export function removeFromArray(needle, haystack) { + if(typeof needle === 'object') + needle = needle[0]; + + if(arrayContains(needle, haystack)) { + haystack.splice(haystack.indexOf(needle), 1); + } + return haystack; +} + +// export function getRandomFromArray(arr) { +// return arr[Math.floor(Math.random() * arr.length)]; +// } + +// export function getIndex(needle, haystack) { +// return haystack.indexOf(needle); +// } + export function shuffle(array) { var i = 0 , j = 0