Project Labyrinth - Camilla #205
Conversation
There was a problem hiding this comment.
I really like the style of your game. Everything kind of gives me the feeling of being in an adventure mystery in a desert far far away. Love it! Each design choice ties everything nicely together. Love the images and the type effect. Great job!
The responsitivity is really nice as well. I checked it in a couple of different sizes and in my mobile and it looked great and had a fluid responsitivty which I think is nice!
Overall, the code is well structured and divided into good sized components. However, I think it would improve readability if you broke out some styled components from the JS code and added it to a separate file. Especially for the Game.js, which becomes quite long and the "core code" is found way down at the bottom.
Really nice job!
| Technologies used: | ||
| React, | ||
| Redux Toolkit, | ||
| JavaScript, | ||
| Styled Components, | ||
| TypeIt, | ||
| UUID (Universally Unique Identifier). |
There was a problem hiding this comment.
Great readme! I really like that you list the technologies and features that you have used.
| <meta property="og:title" content="The labyrinth game"> | ||
| <meta property="og:description" content="Can you find your way through the labyrinth?"> | ||
| <meta property="og:image" content="%PUBLIC_URL%/assets/OG-img.png"> | ||
| <meta property="og:image:alt" content="Labyrinth"> |
There was a problem hiding this comment.
Excellent use of OG tags and favicon! Love that you found a labyrinth icon :D
| <GlobalStyles /> | ||
| <Provider store={store}> | ||
| <Screen /> | ||
| </Provider> |
There was a problem hiding this comment.
Nice keeping the App.js clean by only having the Styles, Store and a Screen component.
| const isStartScreen = useSelector((store) => store.game.isStartScreen); | ||
| const isEndScreen = useSelector((store) => store.game.isEndScreen); |
There was a problem hiding this comment.
Good way of getting conditions to use in your conditionals!
| default: // Fall back img | ||
| return `url(${process.env.PUBLIC_URL}/assets/archway-step1.png)`; |
There was a problem hiding this comment.
Great idea to use a fall back image if none of the conditions are met!
| backdrop-filter: blur(4.9px); | ||
| -webkit-backdrop-filter: blur(4.9px); |
| const dispatch = useDispatch(); | ||
| const loadingState = useSelector((store) => store.game.isLoading); | ||
| const isGameOver = currentLocation.actions && currentLocation.actions.length === 0; | ||
| const [isExpanded, setIsExpanded] = useState(false); |
| const isStartScreen = useSelector((store) => store.game.isStartScreen); | ||
|
|
||
| const handleUserNameSubmitted = () => { | ||
| dispatch(hideStartScreen()); |
| placeholder="Enter name..." | ||
| required |
There was a problem hiding this comment.
Nice work making it intuitive. We get feedback when we try to enter an empty value.
| }, | ||
| reducers: { | ||
| setUserName: (store) => { | ||
| store.username = uuidv4(); |
There was a problem hiding this comment.
So it does not matter what name the user types in? It will be randomly selected? I think it works for this application, but could be a good thing to look into if we were to re-use the username. Could we add the unique ID as an addition to the username instead of completely replacing ut?
No description provided.