Skip to content

Instantly share code, notes, and snippets.

@drFabio
Created December 27, 2017 12:50
Show Gist options
  • Save drFabio/1e99f82dee3985dd94a9395345d41d41 to your computer and use it in GitHub Desktop.
Save drFabio/1e99f82dee3985dd94a9395345d41d41 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import styled from 'styled-components'
const BackGround = styled.div`
background-color: blue;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
text-align: center;
`
const GameOverText = styled.div`
color: white;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
`
const GameOverBackground = styled(BackGround)`
background-color: red;
`
const StartBackground = styled(BackGround)`
background-color: green;
`
const TopGrass = styled.div`
position: absolute;
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><polygon points='0,10 5,0 10,10 15,0 20,10 25,0 30,10' fill='DarkOliveGreen ' />
</svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><polygon points='0,10 5,0 10,10 15,0 20,10 25,0 30,10' fill='DarkOliveGreen' transform='rotate(180, 15, 5)' />
</svg>");
background-position: left bottom, left top;
background-size: 15vh auto;
background-repeat: repeat-x;
width: 100%;
height:100%;
z-index: 3;
`
export class Background extends Component {
constructor (props) {
super(props)
this.state = {
showGameOver: false
}
}
componentWillReceiveProps (nextProps) {
if (nextProps.gameOver && !this.props.gameOver) {
this._intervalId = setTimeout(() => {
console.log('setting timeout')
this.setState({showGameOver: true})
}, 2000)
}
if (nextProps.running && !this.props.running) {
clearInterval(this._intervalId)
this.setState({showGameOver: false})
}
}
render () {
if (this.props.gameOver && this.state.showGameOver) {
return (
<GameOverBackground {...this.props}>
<GameOverText>
<h1>Game Over!</h1>
<h2>Tente novamente (Enter)</h2>
</GameOverText>
</GameOverBackground>
)
}
if (!this.props.running && !this.props.gameOver) {
return (
<StartBackground>
<h1 key={'title'}>React Pato</h1>
<h4 key={'Instructions'} style={{marginTop: `10em`}}>Barra pula, ctrl/seta para baixo cai, direita acelera enter começa</h4>
{this.props.children}
</StartBackground>
)
}
return (
<BackGround {...this.props}>
{<TopGrass />}
{this.props.children}
</BackGround>
)
}
}
export default Background
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment