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

stage progress

Browse source
This commit is contained in:
Antti Pilto 2016-08-05 00:48:07 +03:00
parent 122a52c700
commit 011db14f38
8 changed files with 93 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/App/App.scss
View file

@ -31,4 +31,8 @@ body {
}
.game {
padding-top: 70px;
}
.glyphicon-none:before {
content: "\2122";
color: transparent !important;
}

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:1,
showScreen: ''
}
this.showQuestion = this.showQuestion.bind(this);

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

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { kanaDictionary } from '../../data/kanaDictionary';
import { quizSettings } from '../../data/quizSettings';
import { findRomajisAtKanaKey, removeFromArray, arrayContains, shuffle } from '../../data/helperFuncs';
import './Question.scss';
@ -10,7 +11,8 @@ class Question extends Component {
previousQuestion: [],
previousAnswer: '',
currentQuestion: [],
answerOptions: []
answerOptions: [],
stageProgress: 0
}
this.setNewQuestion = this.setNewQuestion.bind(this);
this.handleAnswer = this.handleAnswer.bind(this);
@ -64,6 +66,10 @@ class Question extends Component {
this.previousAnswer = answer;
this.setState({previousAnswer: this.previousAnswer});
this.previousAllowedAnswers = this.allowedAnswers;
if(this.isInAllowedAnswers(this.previousAnswer))
this.setState({stageProgress: this.state.stageProgress+1});
else
this.setState({stageProgress: this.state.stageProgress > 0 ? this.state.stageProgress-1 : 0});
this.setNewQuestion();
}
@ -104,18 +110,24 @@ class Question extends Component {
}
getPreviousResult() {
let resultString;
let resultString='';
// console.log(this.previousAnswer);
if(this.previousQuestion=='' || this.previousAnswer=='')
if(this.previousQuestion=='')
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>
else {
let rightAnswer = (this.props.stage==2?findRomajisAtKanaKey(this.previousQuestion)[0]:this.previousQuestion)+' = '+
this.previousAllowedAnswers[0];
if(this.isInAllowedAnswers(this.previousAnswer))
resultString = <div className="previous-result correct" title="Correct answer!"><span className="pull-left glyphicon glyphicon-none"></span>{rightAnswer}<span className="pull-right glyphicon glyphicon-ok"></span></div>
else
resultString = <div className="previous-result wrong" title="Wrong answer!"><span className="pull-left glyphicon glyphicon-none"></span>{rightAnswer}<span className="pull-right glyphicon glyphicon-remove"></span></div>
}
return resultString;
}
getStageProgress() {
}
isInAllowedAnswers(previousAnswer) {
// console.log(previousAnswer);
// console.log(this.allowedAnswers);
@ -136,17 +148,32 @@ class Question extends Component {
let btnClass = "btn btn-default answer-button";
if ('ontouchstart' in window)
btnClass += " no-hover"; // disables hover effect on touch screens
let stageProgressPercentage = Math.round((this.state.stageProgress/quizSettings.stageLength[this.props.stage])*100)+'%';
let stageProgressPercentageStyle = { width: stageProgressPercentage }
return (
<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}
answertype={this.getAnswerType()}
handleAnswer={this.handleAnswer} />
}, this)}
<div className="answer-container">
{this.state.answerOptions.map(function(answer, idx) {
return <AnswerButton answer={answer}
className={btnClass}
key={idx}
answertype={this.getAnswerType()}
handleAnswer={this.handleAnswer} />
}, this)}
</div>
<div className="progress">
<div className="progress-bar progress-bar-info"
role="progressbar"
aria-valuenow={this.state.stageProgress}
aria-valuemin="0"
aria-valuemax={quizSettings.stageLength[this.props.stage]}
style={stageProgressPercentageStyle}
>
<span>Stage {this.props.stage}</span>
</div>
</div>
</div>
);
}

42
src/components/Game/Question.scss
View file

@ -1,23 +1,40 @@
.question {
.progress {
position: relative;
background-color: #ddd;
height: 30px;
@media (max-width: 768px) {
max-width: 360px;
margin: 0 auto;
}
}
.progress span {
position: absolute;
top: 5px;
color: #444;
display: block;
width: 100%;
}
.previous-result{
max-width: 340px;
max-width: 360px;
padding: 8px;
margin: 50px auto 30px;
margin: 30px auto 28px;
border-radius: 3px;
}
.none {
background-color: #888;
background-color: #aaa;
color: #f5f5f5;
}
.correct {
color: #f5f5f5;
background-color: #080;
background-color: #5cb85c;
}
.wrong {
color: #f5f5f5;
background-color: #800;
background-color: #d9534f;
}
.previous-result-none {
max-width: 340px;
max-width: 360px;
padding: 6px;
margin: 30px auto;
color: #f5f5f5;
@ -25,15 +42,16 @@
.big-character {
font-size: 5em;
}
.answer-container {
max-width: 360px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.answer-button {
min-width: 90px;
font-size: 2em;
@media (min-width: 768px) {
margin: 30px 15px 10px;
}
@media (max-width: 768px) {
margin: 30px 5px 10px;
}
margin: 30px 0 60px;
}
.no-hover {
/* disables hover effect on touch screens */

3
src/components/Navbar/Navbar.jsx
View file

@ -23,7 +23,6 @@ class Navbar extends Component {
{leftLink}
</ul>
<ul className="nav navbar-nav navbar-right">
<li id="nav-settings"><a href="#"><span className="glyphicon glyphicon-small glyphicon-cog"></span> Settings</a></li>
<li id="nav-profile">{profileButton}</li>
</ul>
</div>
@ -32,6 +31,8 @@ class Navbar extends Component {
)
}
}
// <li id="nav-settings"><a href="#"><span className="glyphicon glyphicon-small glyphicon-cog"></span><span className="hidden-nano"> Settings</span></a></li>
// <div>{this.props.profile.hasOwnProperty('user_id')?this.props.profile.name+' is logged in':'not logged in'}</div>
// <ul className="nav navbar-nav">
// <li id="nav-about"><a href="#menu">&lt; Back to menu</a></li>

5
src/components/Navbar/Navbar.scss
View file

@ -11,6 +11,11 @@
.navbar-inverse {
background-color: #333;
}
.hidden-nano {
@media (max-width: 390px) {
display: none;
}
}
.nav a {
color: #fff !important;
}

56
src/data/kanaDictionary.js
View file

@ -1,21 +1,4 @@
/* export let kanaDictionary_romajifirst = {
'hiragana' : {
'h_group1': { characters: { 'a': 'あ', 'i': 'い', 'u': 'う', 'e': 'え', 'o': 'お' } },
'h_group2': { characters: { 'ka': 'か', 'ki': 'き', 'ku': 'く', 'ke': 'け', 'ko': 'こ' } },
'h_group3': { characters: { 'sa': 'さ', 'shi': 'し', 'su': 'す', 'se': 'せ', 'so': 'そ' } },
'h_group4': { characters: { 'ta': 'た', 'chi': 'ち', 'tsu': 'つ', 'te': 'て' , 'to': 'と' } },
'h_group5': { characters: { 'na': 'な', 'ni': 'に', 'nu': 'ぬ', 'ne': 'ね', 'no': 'の' } },
'h_group6': { characters: { 'ha': 'は', 'hi': 'ひ', 'fu': 'ふ', 'he': 'へ', 'ho': 'ほ' } },
'h_group7': { characters: { 'ma': 'ま', 'mi': 'み', 'mu': 'む', 'me': 'め', 'mo': 'も' } },
'h_group8': { characters: { 'ya': 'や', 'yu': 'ゆ', 'yo': 'よ' } },
'h_group9': { characters: { 'ra': 'ら', 'ri': 'り', 'ru': 'る', 're': 'れ', 'ro': 'ろ' } },
'h_group10': { characters: { 'wa': 'わ', 'wo': 'を', 'n': 'ん' } },
},
'katakana' : {
}
}; */
export let kanaDictionary = {
export const kanaDictionary = {
'hiragana' : {
'h_group1': { characters: { 'あ': ['a'], 'い': ['i'], 'う': ['u'], 'え': ['e'], 'お': ['o'] } },
'h_group2': { characters: { 'か': ['ka'], 'き': ['ki'], 'く': ['ku'], 'け': ['ke'], 'こ': ['ko'] } },
@ -45,40 +28,3 @@ export let kanaDictionary = {
'プ': ['pu'], 'ペ': ['pe'], 'ポ': ['po'], 'キャ': ['kya'], 'キュ': ['kyu'], 'キョ': ['kyo'], 'シャ': ['sha','sya'], 'シュ': ['shu','syu'], 'ショ': ['sho','syo'], 'チャ': ['cha','cya'], 'チュ': ['chu','cyu'], 'チョ': ['cho','cyo'], 'ニャ': ['nya'], 'ニュ': ['nyu'], 'ニョ': ['nyo'], 'ヒャ': ['hya'], 'ヒュ': ['hyu'], 'ヒョ': ['hyo'], 'ミャ': ['mya'], 'ミュ': ['myu'], 'ミョ': ['myo'], 'リャ': ['rya'], 'リュ': ['ryu'], 'リョ': ['ryo'], 'ギャ': ['gya'], 'ギュ': ['gyu'], 'ギョ': ['gyo'], 'ジャ': ['ja','jya'], 'ジュ': ['ju','jyu'], 'ジョ': ['jo','jyo'], 'ビャ': ['bya'], 'ビュ': ['byu'], 'ビョ': ['byo'], 'ピャ': ['pya'], 'ピュ': ['pyu'], 'ピョ': ['pyo'] } }
}
};
// If answer is wrong, let's check if the answer is a key here, and compare the value to the correct answer
// export let acceptedAlternatives = { 'si': 'shi', 'ti': 'chi', 'tu': 'tsu', 'hu': 'fu', 'o': 'wo',
// 'zi': 'ji', 'di': 'ji', 'du': 'zu', 'sya': 'sha', 'syu': 'shu', 'syo': 'sho',
// 'cya': 'cha', 'cyu': 'chu', 'cyo': 'cho', 'jya': 'ja', 'jyu': 'ju', 'jyo': 'jo' };
// export let acceptedAlternatives = { 'shi': 'si', 'chi': 'ti', 'tsu': 'tu', 'fu': 'hu', 'wo': 'o',
// 'ji': 'zi', 'ji': };
/*
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'
];
*/

8
src/data/quizSettings.js Normal file
View file

@ -0,0 +1,8 @@
export const quizSettings = {
stageLength : {
1: 20,
2: 20,
3: 20,
4: 20
}
};