A Redux labyrinth #193
A Redux labyrinth #193
Conversation
There was a problem hiding this comment.
Really nice job Sofia (and especially in such short amount of time)! I really like the vibe of design you chose and if think it's really suitable for the content of text from the API. You made it feel like an adventure!
One thing to look into is to add a unique identifier for the nameInput that starts the game since it's a shared API. Sometimes you're a sent directly to the last coordinate of the game directly. I think that either a timestamp or a UUID-package could work.
But overall an amazing job!
| const initialState = { | ||
| user: '', | ||
| isStarted: false, | ||
| description: '', |
There was a problem hiding this comment.
Since your changing the state of loading and and it's in the reducer i think it would be good to define it in the initialstate
| fetch('https://labyrinth.technigo.io/action', move) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| dispatch(game.actions.setDescription(data)) | ||
| }) |
There was a problem hiding this comment.
Look into how you are passing move here if the state is really being updated since it doesn't dispatch anywhere
| const DirectionSection = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| ` | ||
|
|
||
| const MoveBtn = styled.button` | ||
| font-family: 'JetBrains Mono', monospace; | ||
| background-color: #000; | ||
| border-radius: 5px; | ||
| padding: 5px 10px; | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| margin-bottom: 20px; | ||
| color: #F8E152; | ||
| border: 2px dotted #F8E152; | ||
|
|
||
| &:hover { | ||
| background-color: #F8E152; | ||
| color: #000; | ||
| } | ||
| @media (min-width: 668px) { | ||
| font-size: 1.2rem; |
There was a problem hiding this comment.
Take a look at the placement of the styling and if maybe it should be moved outside the useEffect to make the code a bit easier to follow
| .main-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-bottom: 30px; | ||
| } | ||
| .spinner { |
There was a problem hiding this comment.
I'm not sure about this, but I would look in to best practices and how it's considered to use different kinds of styling in the same project. Maybe it's okay when trying to set a layout!
| useEffect(() => { | ||
| const handleKeyDown = (event) => { | ||
| switch (event.keyCode) { | ||
| case 37: // left arrow | ||
| dispatch(nextMove('west')); | ||
| break; | ||
| case 38: // up arrow | ||
| dispatch(nextMove('north')); | ||
| break; | ||
| case 39: // right arrow | ||
| dispatch(nextMove('east')); | ||
| break; | ||
| case 40: // down arrow | ||
| dispatch(nextMove('south')); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| }; |
There was a problem hiding this comment.
Really nicely done with this switch statement an the use of the arrow keys!
| const StyledForm = styled.form` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| ` | ||
| const StyledInput = styled.input` | ||
| font-family: 'Ubuntu Mono', monospace; | ||
| background-color: #FEF5BD; | ||
| border: none; | ||
| padding: 7px 5px 7px 10px; | ||
| outline: none; | ||
| font-size: 1rem; | ||
| color: #000; |
There was a problem hiding this comment.
Really like the styling of the whole game and the old school adventure game-feel of it
| {loading && <Loading />} | ||
| {!loading && ( | ||
| <div> | ||
| {!gameStarted && <StartGame />} | ||
| {gameStarted && <Game />} | ||
| </div> |
| flex-direction: column; | ||
| align-items: center; | ||
| height: 100vh; | ||
| width: 100vw; |
There was a problem hiding this comment.
Great and responsive styling. Just take a look at mobile and width and what it might be that's causing a side scroll from 375px and smaller
There was a problem hiding this comment.
Could you take a screen-shot of the side scroll so I can see when it appears? I can't seem to recreate it in inspector.
| margin-bottom: 10px; | ||
| } | ||
| .direction-div p { | ||
| text-align: justify; |
There was a problem hiding this comment.
Really liked that you used justify instead of center here!
| <div key={action.direction} className="direction-div"> | ||
| <p>{action.description}</p> | ||
| <div> | ||
| <MoveBtn type="button" onClick={() => moveOnClick(action.direction)}>Go {action.direction}</MoveBtn> |
There was a problem hiding this comment.
Nicely done with the stretch goal of showing the direction in it's button
https://a-maze-ing-labyrinth.netlify.app