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

it works!

Browse source
This commit is contained in:
Antti Pilto 2018-11-17 00:13:25 +02:00
parent 79805945cc
commit a861c5aa55
9 changed files with 11773 additions and 7416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.babelrc
View file

@ -1,3 +1,4 @@
{
"presets" : ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}

7338
npm-shrinkwrap.json generated
View file

File diff suppressed because it is too large Load diff

11645
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

39
package.json
View file

@ -5,7 +5,8 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development --host 0.0.0.0",
"s": "webpack --mode development --config webpack.config.js",
"start": "webpack-dev-server --open --mode development --host 0.0.0.0 --config webpack.config.js",
"mobile": "webpack-dev-server --open --mode development --host 0.0.0.0 --public 192.168.1.8:8080",
"build": "webpack --mode production"
},
@ -20,31 +21,31 @@
},
"homepage": "https://github.com/anzzstuff/kanaquiz#readme",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-react": "^7.0.0",
"autoprefixer": "^6.3.7",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"css-loader": "^0.27.3",
"file-loader": "^0.10.1",
"css-loader": "^1.0.1",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"postcss": "^5.0.21",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.14.1",
"postcss": "^7.0.5",
"postcss-loader": "^3.0.0",
"precss": "^3.1.2",
"react-hot-loader": "^4.3.12",
"style-loader": "^0.23.1",
"sw-precache-webpack-plugin": "^0.11.5",
"url-loader": "^0.5.7",
"webpack": "^4.24.0",
"url-loader": "^1.1.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"postcss": "^5.1.0",
"prop-types": "^15.5.8",
"react": "^15.2.1",
"react-addons-css-transition-group": "^15.3.0",
"react-dom": "^15.2.1",
"react-toggle-switch": "^2.1.2"
"prop-types": "^15.6.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-toggle-switch": "^3.0.4",
"react-transition-group": "^2.5.0"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}

90
src/components/Game/ShowStage.jsx
View file

@ -1,52 +1,17 @@
import React, { Component } from 'react';
import './ShowStage.scss';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
class ShowStage extends Component {
constructor(props) {
super(props);
this.state = {
stageContent: ''
}
this.showStage = this.showStage.bind(this);
this.removeStage = this.removeStage.bind(this);
}
removeStage() {
this.setState({stageContent: ''});
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
}
showStage() {
let stageDescription;
let stageSecondaryDescription = false;
if(this.props.stage==1) stageDescription = 'Choose one';
if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
if(this.props.stage==3) stageDescription = 'Write the answer';
if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
let stageContent = (<div className="text-center show-stage">
<h1>Stage {this.props.stage}</h1>
<h3>{stageDescription}</h3>
{stageSecondaryDescription?<h4>{stageSecondaryDescription}</h4>:''}
</div>);
if(this.props.stage==5) {
stageContent = (<div className="text-center show-end">
<h1>Congratulations!</h1>
<h3>You have passed all 4 stages.</h3>
<h4>Would you like to keep playing or go back to menu?</h4>
<p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
<p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
</div>)
}
this.setState({stageContent: stageContent});
state = {
show: false,
entered: false
}
componentDidMount() {
this.setState({show: true});
if(this.props.stage <= 4)
this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
this.showStage();
window.scrollTo(0,0);
}
@ -54,11 +19,48 @@ class ShowStage extends Component {
clearTimeout(this.timeoutID);
}
render() {
removeStage = () => {
this.setState({show: false});
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
}
showStage() {
let stageDescription;
let stageSecondaryDescription = false;
if(this.props.stage==1) stageDescription = 'Choose one';
else if(this.props.stage==2) { stageDescription = 'Choose one'; stageSecondaryDescription = 'Reverse'; }
else if(this.props.stage==3) stageDescription = 'Write the answer';
else if(this.props.stage==4) { stageDescription = 'Write the answer'; stageSecondaryDescription = 'Three at once'; }
else if(this.props.stage==5)
return (
<ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
{this.state.stageContent}
</ReactCSSTransitionGroup>
<div className="text-center show-end">
<h1>Congratulations!</h1>
<h3>You have passed all 4 stages.</h3>
<h4>Would you like to keep playing or go back to menu?</h4>
<p><button className="btn btn-danger keep-playing" onClick={()=>this.props.lockStage(4)}>Keep playing</button></p>
<p><button className="btn btn-danger back-to-menu" onClick={this.props.handleEndGame}>Back to menu</button></p>
</div>
);
return (
<div className="text-center show-stage">
<h1>Stage {this.props.stage}</h1>
<h3>{stageDescription}</h3>
{ stageSecondaryDescription ? <h4>{stageSecondaryDescription}</h4> : '' }
</div>
);
}
render() {
const content = this.showStage();
const { show } = this.state;
return (
<CSSTransition classNames="stage" timeout={{enter: 900, exit: 900}} in={show} unmountOnExit>
{state => content}
</CSSTransition>
);
}
}

4
src/components/Game/ShowStage.scss
View file

@ -30,11 +30,11 @@
transition: opacity 1s ease-in;
}
.stage-leave {
.stage-exit {
opacity: 1;
}
.stage-leave.stage-leave-active {
.stage-exit.stage-exit-active {
opacity: 0.01;
transition: opacity 1s ease-in;
}

44
webpack.config.js
View file

@ -1,12 +1,52 @@
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
loader: 'url-loader?limit=25000'
},
{
test: /\.(eot|ttf)$/,
loader: 'file-loader'
}
]
}