Labyrinth App Andreas & Peki#197
Conversation
AnnikaSonnek
left a comment
AnnikaSonnek
left a comment
There was a problem hiding this comment.
This is a super nice project! The comments and sectioning made it easy to follow. It was cool to see that you've used some other techniques than we did. And I LOVE the design of the images, really cool! Well done!
| const coordinates = useSelector((store) => store.labyrinthMango.coordinates) | ||
| let imageToShow = null; | ||
|
|
||
| if (coordinates === '0,0') { |
There was a problem hiding this comment.
This was a nice way of displaying different images depending on where in the labyrinth you were. I see that you've set the imageToShow to null first. We returned the whole function (with switch case) as the background image. I'm wondering if this way (that you've done), of making the image a variable, instead might be a better way performance-wise.
| // Set user name and generate unique user ID | ||
| setUserName: (store, action) => { | ||
| const input = action.payload; | ||
| const userId = uuidv4(input); |
There was a problem hiding this comment.
What does this mean? const userId = uudv4(input) We only had username but I see you have username, name and userID, how does that work? Is it a way of making the username random?
|
|
||
| return ( | ||
| <GameWrapper> | ||
| {userName === '' ? <Startpage /> : <Gamepage />} {/* Ternary Operator */} |
There was a problem hiding this comment.
Oh, you used username in the ternary operator for rendering the game components. Smart!
| export const Gamepage = () => { | ||
| // Set up hooks for dispatch and store | ||
| const dispatch = useDispatch() | ||
| const description = useSelector((store) => store.labyrinthMango.description) |
There was a problem hiding this comment.
I see you stored all values in separate properties in the store. We decided to store the current position into one single object, that we called currentPosition. That way, we only needed one useSelector to get that object that held all the information. If you want less code, that might be a possible way of doing it. :)
| // /////////////// COMPONENT //////////////////////// // | ||
|
|
||
| export const Loader = () => { | ||
| // /////////////// OUTCOME //////////////////////// // |
There was a problem hiding this comment.
I like the different sections! It makes it really easy to read the code!!
|
|
||
| // /////////////// GLOBAL //////////////////////// // | ||
|
|
||
| export const GlobalRules = createGlobalStyle` |
There was a problem hiding this comment.
I saw that you hade these rendered in the App-component. I've never seen that before? What would be the benefit compared to having these rules in index.css? (Sorry for a lot of questions hahah! I'm just very curious!)
| return ( | ||
| <GameWrapper> | ||
| <CoordImage src={hej15} alt="Displayed" /> | ||
| <Protip src={protip} alt="Displayed" /> |
There was a problem hiding this comment.
I really LIKE this little floating circle! Reminds me of your portfolio!
| {history.length === 0 ? `Welcome, ${name}.` : ''} {/* name comes from the state */} | ||
| <p>"{description}"</p> | ||
| </DescriptionWrapper> | ||
| <DirectionWrapper id={moves.length <= 1 ? 'oneMove' : 'twoMoves'}> {/* styling for 1or2 buttons from gamepage.styled */} |
There was a problem hiding this comment.
I'm curious of what is happening here. What is the id? I understand that the styling has to do if there are two or one button.
3 participants
No description provided.