tloth / freddie-and-annas-glamour Goto Github PK

Line 22, I like it.
{position === 'left' ? <Flower1 /> : <Flower2 />} 👍

• Create an avatar svg (that can be rendered twice, each the mirror of the other)
• Make a responsive background image
• Append an 'arm' behind the avatar svg, which will act as the retractable arm
• Append a flower to the end of this retractable arm
• When the user's action key is pressed, this arm will extend using CSS keyframes
• When the arm is fully extended, the flower's visibility is set to 0
• When the arm is fully subtended, the flower's visibility is set to 1

I love yo lil svg bodies! 👫👭👬

At the moment it's hardcoded in. It might be nice to select your user and see it update with your picture

The avatars have our images. I like to feel targeted in that way.

I kept clicking the click me button and it speeds up your time, maybe hide this button when it is initially clicked so it can't be clicked again 🏃‍♀️

You made your api call in the avatar component. Seeing as you'll need the data from that call in both the avatar and timebar components it might make a bit more sense to make it at the top level and pass down the data to both components

It may just be that you haven't gotten around to using them yet but there are a couple of unused imports such as in Avatar.js (lines 6, 7) and when you destructured userData on line 19 you didn't use followers 🧚‍♂️

Nice use of the functional update form to avoid getting stuck with the the same value of count in the event listener 👍

You probably don't want to create the timeout inside your state update function. I think this would work if you create the timeout outside, then pass a function that updates state in as the timeout callback. So every x seconds your state update runs

• Write a fetch function to access the Github API
• Create an input field to choose the two flower-friends we want to see
• Update the 'data' state to render the two members' images and names from Github
• Render a loading wheel until the images are ready to render
• Implement error handling and React testing

• Add a state (and setState) function to store the user's 'energy' value
• Render different stages of the 'energy bar' meter depending on the energy's state
• Decrement the energy's state every unit of time (e.g. three seconds?)
• The initial energy 'state' correlates with the amount of Github followers the user has
• Once the energy's state is 'zero', the user can no longer give any more flowers
• When both user's energy state is 'zero', the game ends

e.g. Avatar.js can have Avatar.css
Then import "./Avatar.css" in the Avatar.js file.
Means you can have styling specifically for that file.
also ✨modularisation ✨ ...

• Render a flower svg in the hands of both users' avatar
• When the user presses a certain key, their avatar's arm extends with the flower
• Each user has a different keybind
• Only one arm can be extended at any given time
• When the arm is fully extended, the flower disappears from the avatar's hand
• When the arm is fully extended, a new flower appears on their flower pile and their flower count increments.
• When the arm is fully subtended, a new flower appears in the avatar's hand
• At the end of the game, the user with the higher flower count wins