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

1st stage

This commit is contained in:
Antti Pilto 2016-08-04 00:50:38 +03:00
parent 46b38b843f
commit 122a52c700
5 changed files with 111 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Game/Game.jsx
View File

@ -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);

89
src/components/Game/Question.jsx
View File

@ -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 = <div className="previous-result none">Let's go! Which character is this?</div>
else if(this.isInAllowedAnswers(this.previousAnswer))
resultString = <div className="previous-result correct">Correct!</div>
else
resultString = <div className="previous-result wrong">Wrong!</div>
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 (
<div className="text-center question">
<div className="big-character">{this.state.currentQuestion}</div>
<div className="text-center question col-xs-12">
{this.getPreviousResult()}
<div className="big-character">{this.getShowableQuestion()}</div>
{this.state.answerOptions.map(function(answer, idx) {
return <AnswerButton answer={answer} className={btnClass} key={idx} onClick={this.setNewQuestion} />;
return <AnswerButton answer={answer}
className={btnClass}
key={idx}
answertype={this.getAnswerType()}
handleAnswer={this.handleAnswer} />
}, this)}
</div>
);
@ -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 (
<button className={this.props.className}>{this.props.answer}</button>;
)
<button className={this.props.className} onClick={()=>this.props.handleAnswer(this.getShowableAnswer())}>{this.getShowableAnswer()}</button>
);
}
}
export default Question;

24
src/components/Game/Question.scss
View File

@ -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;
}

2
src/components/GameContainer/GameContainer.jsx
View File

@ -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']
}
}

20
src/data/helperFuncs.js
View File

@ -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)];
// }