-
Notifications
You must be signed in to change notification settings - Fork 0
/
Dino.js
37 lines (29 loc) · 902 Bytes
/
Dino.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import dinoImage from '../public/images/dinosaur.png';
const DinoContainer = styled.div`
position: absolute;
bottom: 0;
left: 50px;
width: 50px;
height: 50px;
background: url(${dinoImage}) no-repeat center/contain;
transition: transform 0.2s;
`;
const Dino = () => {
const [isJumping, setIsJumping] = useState(false);
const handleKeyPress = (e) => {
if (e.key === ' ' || e.key === 'ArrowUp') {
setIsJumping(true);
setTimeout(() => setIsJumping(false), 500);
}
};
useEffect(() => {
window.addEventListener('keydown', handleKeyPress);
return () => {
window.removeEventListener('keydown', handleKeyPress);
};
}, []);
return <DinoContainer style={{ transform: isJumping ? 'translateY(-150px)' : 'translateY(0)' }} />;
};
export default Dino;