Linda and Sofies forest path #5
Conversation
added stuff
There was a problem hiding this comment.
Cool site! We enjoyed your maze!
We feel that you meet the requirements, maybe you could guide the user a little bit more. You made the maze harder UX-vise by moving the buttons for example. (Check our comment below =))
The images take a while to load and could probably be smaller without sacrificing quality.
Well done this week! And go Team Moon!
/Martin & Etna
public/forest-title.png
Outdated
There was a problem hiding this comment.
Very Indiana Jones! =)
/Martin & Etna
| }; | ||
|
|
||
| changeBackgroundImage(coordinates); | ||
| }, [coordinates]); |
There was a problem hiding this comment.
Nice approach to changing the backgrounds! We did the same thing ;)
/Martin & Etna
| }} | ||
| > | ||
| {action.direction} | ||
| </button> |
There was a problem hiding this comment.
For future projects you might want to sort the map so that the same direction ends up in the same place. Like north always being on top for example. You could for example use {action.direction} as a class name to target specific buttons with CSS.
You can also call it a feature, not a bug, because it makes the maze a little harder =D
/Martin & Etna
| alert("Please set a username. Thx!"); | ||
| } else { | ||
| fetchStart(userName); | ||
| } |
There was a problem hiding this comment.
Nice that you check for a Username!
/Martin & Etna
src/components/UserInput.jsx
Outdated
| className="input-field" | ||
| id="user-input" | ||
| type="text" | ||
| placeholder="chose something rare" |
There was a problem hiding this comment.
Small typo =) We think it should be "Choose"
Good to have that instruction for the user. But what is rare?
/Martin & Etna
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify({ | ||
| username: userName, |
There was a problem hiding this comment.
Here you could make the username unique in some way to let the user type in what they want. You could add a random number after the username, or the current date as a string, for example.
const uniqueUsername = username + Date.now();
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
username: uniqueUsername,
/Martin & Etna
|
|
||
| if (!response.ok) { | ||
| throw new Error( | ||
| "Failed to Start your adventure. Please reload the page." |
There was a problem hiding this comment.
We like the themed error message. Very cool!
/Martin & Etna
| } | ||
|
|
||
| .action-button:hover { | ||
| background: linear-gradient(to top, #4a6741, #374f2f, #22311d); |
There was a problem hiding this comment.
Since it's the same background as for the button you don't need to specify it again for the hover-state.
/Martin & Etna
src/styles/Header.css
Outdated
| margin-top: 50px; | ||
| height: auto; | ||
| width: 350px; ; | ||
| } |
There was a problem hiding this comment.
Did you want to put the image in the center? In that case you need to use display: flex on the parent div ( .header-image{} ). There is also a stray ; on line 7.
You could probably do this, if you want it centered:
.header-image {
display: flex;
justify-content: center;
align-items: center;
}
.header-image img {
margin-top: 50px;
height: auto;
width: 350px;
}
/Martin & Etna
src/styles/UserInput.css
Outdated
| } | ||
|
|
||
| .background-picture { | ||
| background-image: url("startPage.jpg"); |
There was a problem hiding this comment.
Picture not showing up when you load the page. Is it a broken path? =S
/Martin & Etna
| <div className="action-box"> | ||
| <p>{description}</p> | ||
|
|
||
| {actions.map((action) => ( |
There was a problem hiding this comment.
Would be nice if you also shared the descriptions of the different directions to help guide the user what to choose
| }; | ||
|
|
||
| return ( | ||
| <> |
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify({ | ||
| username: userName, |
| set({ start: data }); | ||
| set({ gameFlow: true }); | ||
| set({ actions: data.actions }); | ||
| set({ description: data.description }); | ||
| set({ coordinates: data.coordinates }); |
| set({ loading: true }); | ||
| set({ gameFlow: true }); |
| set({ actions: data.actions }); | ||
| set({ description: data.description }); | ||
| set({ coordinates: data.coordinates }); |
| </div> | ||
| ); | ||
| <> | ||
| {gameFlow ? <DisplayLabyrinth /> : <UserInput />} |
There was a problem hiding this comment.
I don't understand the name of this state to be honest 👀 Is it supposed to be like a hasStartedGame kind of variable?
Netlify link
https://forest-path-of-deployment-horror.netlify.app/
Collaborators
[linda-f, SofieFerrari]