Looking to hire developers?
I made this a PWA(which means it's fully installable on your phone or computer) where you can play either Grizzly, Cowboy, Ninja or Rock, Paper, Scissors.
I made custom pictures for Rules slider for GCN with Figma.
Please tell me your thoughts and commentary!
@ApplePieGiraffe
Posted
Greetings, Diarrah! 👋
Amazing work on this challenge! 🙌 You added a pretty awesome twist to this challenge and the animations and transitions of elements make it even cooler! 🤩 Making it a PWA is also a pretty sweet idea! Nice job!!! 👍
Keep coding (and happy coding, too)! 😁
@creadordeloscielos
Posted
Excellent, it is incredible what you can do, I am learning and I would like to be at your level. which I think is not impossible but it does require a lot of work and effort and dedication. Greetings from Mexico 🌮🌮🌮
@RocTanweer
Posted
Hello 👋 Really nice work 👍 One day I will make something like that too..! Will you tell me how you gave the downloading feature to it please?
@Diarrah
Posted
@RocTanweer it's called a PWA. This is how I did it: https://www.youtube.com/watch?v=bQkCTI_8c84&list=WL&index=95&t=948s
@mattstuddert
Posted
Great to see you posting another solution, Diarrah! Love that you've added your own spin on it providing the two different game modes. Also, building it as a PWA and including the animations are excellent touches 🙌
Your React code looks good, although I'd say it could be broken down a little bit more to "componentise" and separate out your code further. For example, your Battleground.js component is pretty big with quite a bit of logic.
Also, you're setting the click listeners on div elements, which aren't interactive. This means the game is currently inaccessible to anyone using anything other than a mouse/trackpad to play. Using interactive elements like button as the triggers would be a big improvement 🙂
I hope you enjoyed the challenge! Did you learn anything new while working through the project?
@Diarrah
Posted
@mattstuddert I'm confused on what you mean about the eventListeners on the div. When I play on my phone it works just fine as well.
@mattstuddert
Posted
@Diarrah sorry, I should have also mentioned phones in that list! In the Battleground.js component you're using this to select the elements to apply click listeners to: document.querySelectorAll('.battleground__weapon'). These elements are all div elements, which are not interactive elements. This means the game is inaccessible to anyone navigating using a keyboard or other assistive technologies. As front-end developers, a big part of our job is to build accessible interfaces. If you try navigating the game using your keyboard you'll see it's not possible to select the different options.
@vytkuklys
Posted
Hey Diarrah,
I am just here to write that this is one cool piece of work right here. Also here to thank you for inspiring a couple of intriguing ideas through your work. And to ask you for the names of the tools that you used on your project because your code seems to be encompassing some fanciness that I am clearly not yet aware of
Best of Luck!
@Diarrah
Posted
@vytkuklys Thanks man! It looks a lot more impressive than it is lol. The only real other tool I used was Figma - it's a thing that let's you edit/make SVGs (this is what I used for the GCN rules swiper. Also, I used SwiperJS to make that little rules swiper thing. The only other thing I used was ReactJS.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
