it works!
This commit is contained in:
Antti Pilto
parent
79805945cc
commit
a861c5aa55
1
.babelrc
1
.babelrc
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"presets" : ["@babel/preset-env", "@babel/preset-react"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('precss'),
|
||||
require('autoprefixer')
|
||||
]
|
||||
}
|
||||
|
|
@ -1,66 +1,68 @@
|
|||
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);
|
||||
}
|
||||
state = {
|
||||
show: false,
|
||||
entered: false
|
||||
}
|
||||
|
||||
removeStage() {
|
||||
this.setState({stageContent: ''});
|
||||
clearTimeout(this.timeoutID);
|
||||
this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
|
||||
}
|
||||
componentDidMount() {
|
||||
this.setState({show: true});
|
||||
if(this.props.stage <= 4)
|
||||
this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
|
||||
window.scrollTo(0,0);
|
||||
}
|
||||
|
||||
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>);
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timeoutID);
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
removeStage = () => {
|
||||
this.setState({show: false});
|
||||
clearTimeout(this.timeoutID);
|
||||
this.timeoutID = setTimeout(this.props.handleShowQuestion, 1000) // how soon we go to question (1000)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if(this.props.stage<=4)
|
||||
this.timeoutID = setTimeout(this.removeStage, 1200); // how soon we start fading out (1500)
|
||||
this.showStage();
|
||||
window.scrollTo(0,0);
|
||||
}
|
||||
showStage() {
|
||||
let stageDescription;
|
||||
let stageSecondaryDescription = false;
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.timeoutID);
|
||||
}
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ReactCSSTransitionGroup transitionName="stage" transitionEnterTimeout={900} transitionLeaveTimeout={900}>
|
||||
{this.state.stageContent}
|
||||
</ReactCSSTransitionGroup>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ShowStage;
|
||||
export default ShowStage;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ import Bootstrap from './assets/stylesheets/bootstrap.min.css';
|
|||
import App from './components/App/App';
|
||||
|
||||
let element = React.createElement(App, {});
|
||||
render(element, document.querySelector('.app'));
|
||||
render(element, document.querySelector('.app'));
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue