Skip to content

Instantly share code, notes, and snippets.

@drFabio
Created December 27, 2017 13:02
Show Gist options
  • Save drFabio/d18cefc505a54fa1e97fc9c64e43e3a6 to your computer and use it in GitHub Desktop.
Save drFabio/d18cefc505a54fa1e97fc9c64e43e3a6 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import styled, {keyframes} from 'styled-components'
const gentlyRock = keyframes`
0% {transform:rotate(4deg);}
50% {transform:rotate(-4deg);}
100% {transform:rotate(4deg);}
`
const dead = keyframes`
0% {transform:rotate(0);}
50% {transform:rotate(180deg);}
100% {transform:rotate(360deg);}
`
const StyledImg = styled.img`
width: 100px;
height: 100px;
position: ${(props) => (props.running || props.gameOver) ? 'absolute' : 'relative' };
left: 0;
transition: top 0.2s;
z-index: 2;
animation: ${(props) => props.gameOver ? `${dead} linear 0.5s infinite` : ` ${gentlyRock} linear 0.4s infinite;` };
`
export class Player extends Component {
render () {
const svg = ``
return (
<StyledImg
{...this.props}
src="https://openclipart.org/download/75889/duck-line-art-pitr-Ducky-icon.svg" />
)
}
}
export default Player
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment