Welcome to the Adventure! Daniel & Carol #211
Conversation
There was a problem hiding this comment.
Overall such a great job with this project! The code looks very clean and it is easy to follow. The components is easily named so you get an understanding to what they are supposed to do.
The one thing that could make it even more clear would be to pick one styling option to go with thorough out the project.
As said you have done a great job and we are impressed with how clean the code looks. Bee proud!
| <Container> | ||
| {loading ? ( | ||
| <Loading /> | ||
| ) : username === '' ? ( | ||
| <LandingPage /> | ||
| ) : ( | ||
| <GameBoard /> | ||
| )} |
| // src/backgroundImages.js | ||
| const backgroundImages = { | ||
| '0,0': '/assets/img2.jpg', | ||
| '1,0': '/assets/img3.jpg', | ||
| '1,1': 'assets/img4.jpg', | ||
| '0,1': 'assets/img5.jpg', | ||
| '0,2': 'assets/img6.jpg', | ||
| '0,3': 'assets/img7.jpg', | ||
| '1,3': 'assets/img8.jpg' | ||
| }; | ||
|
|
||
| export default backgroundImages; |
There was a problem hiding this comment.
Clean and nicely done to keep this in its own component!
| window.location.reload(); | ||
| }; | ||
|
|
||
| const currentBackground = game && backgroundImages[coordinates]; |
There was a problem hiding this comment.
Nice solution with the different backgrounds! 👍🏼
| } | ||
|
|
There was a problem hiding this comment.
Over all great work with the styling and you have mostly used styled components with you have done excellently. Could you to next project try to make the styling uniformly?
| .animation { | ||
| -webkit-animation: slidein 25s; | ||
| animation: slidein 25s; | ||
|
|
||
| -webkit-animation-fill-mode: forwards; | ||
| animation-fill-mode: forwards; | ||
|
|
||
| -webkit-animation-iteration-count: infinite; | ||
| animation-iteration-count: infinite; | ||
|
|
||
| -webkit-animation-direction: side; | ||
| animation-direction: side ; | ||
| } |
There was a problem hiding this comment.
We actually can't see this animation witch is sad. It would be cool to see how this would look like?
| const Background = styled.div` | ||
| background-image: url('/assets/img1.jpg'); | ||
| background-size: cover; | ||
| background-position: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| padding: 0; | ||
| `; |
https://master--jocular-shortbread-a62247.netlify.app/