This is one of the solutions to the Frontend Mentor's Rock, Paper, Scissors Challenge. *I did the challenge in bonus mode, which is basically adding "lizard" and "spock" to the game - a reference to Star Trek and a custom game that has been around in the geek community since 1998, created by Sam Kass, a software engineer. You can see the React code in the "src" folder.
See the real-time solution here.
This was a bit more of a challenge, since I wanted to animate some components and keep the dynamics of the page interactive and visually pleasing. I chose to use React for the additional libraries it provides and the dynamics through the components' states.
This challenge has a little more demanding specifications, since it is very dynamic and strict in its mechanics.
You can use whatever tools you want to complete the challenge.
Users must be able to
- See the elements on the screen from the device resolution without distortions (responsivity).
- Choose and interact with game components, resulting in a win or loss against a supposed "bot".
- Be able to access the rules easily and simply, without complications.
- Bonus: Adding "spock" and "lizard" to the game, as was the case.
I started the project in React and my first step was to build the base in JSX, I separated the color variables - that the challenge provides - in my "App.css" file and left the "index.css" file for more structural changes; like the minimum page size and that kind of responsiveness, and the font definition.
Then I gradually developed the app, I divided it into three parts: the header, the center (which encompasses the selection screen and the game screen itself) and the bottom (which on wider devices would become absolute and go to the bottom right corner, as the challenge asks in its example design). I went about developing the existing components in them, adjusting the individual responsiveness of each.
Once, close to finishing the visuals, I started developing the logic behind the game - which is quite easy, each hand beats two other hands and loses to the rest, except for itself, a chance that can be easily eliminated at the beginning of the function when comparing the two - and finished with some adjustments to the overall responsiveness.
- React
- Framer Motion
- The concept of "Mobile-First"
- CSS
- Font "Barlow Semi Condensed"
made by niloodev | Ezequiel Nilo
ANY TIPS OR FEEDBACK IS HIGHLY APPRECIATED! 🐸