Frontend Mentor - Rock, Paper, Scissors, Lizard, Spock

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges allow you to improve your skills in a real-life workflow.

The challenge

Your challenge is to build out this Rock, Paper, Scissors game and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:

• View the optimal layout for the game depending on their device's screen size
• Play Rock, Paper, Scissors against the computer
• Maintain the state of the score after refreshing the browser (optional)
• Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

Rules

If the player wins, they gain 1 point. If the computer wins, the player loses one point.

Bonus

• Scissors beats Paper
• Paper beats Rock
• Rock beats Lizard
• Lizard beats Spock
• Spock beats Scissors
• Scissors beats Lizard
• Paper beats Spock
• Rock beats Scissors
• Lizard beats Paper
• Spock beats Rock

Not sure what Rock, Paper, Scissors, Lizard, Spock is? Check out this clip from The Big Bang Theory.

Giving feedback

Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.

This challenge is completely free. Please share it with anyone who will find it useful for practice.

Have fun building! 🚀

Built With

bento-starter

👉 [https://github.com/kefranabg/bento-starter)

🍱 bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications using tools like Vue.js, Firebase, Progressive Web Apps support, dynamic offline support... The goal of this project is to provide a powerful and well configured stack (with CI/CD, hosting...) so you can focus on writing your web application very quickly.

As this project is a template project and not a CLI, you have access to the entire app configuration so you can change it according to your needs.

Demo

👉 [https://rpsls-b4af9.web.app/)

Install the PWA demo from Google Play Store 👉 RPSLS Google Play Store

Lighthouse score :

Optional preconfigured Github Actions workflow :

• ✔️ Check tests and quality
• ⚙️ Build the project
• 🚀 Deploy to firebase hosting

The stack is made up of :

• 🤘 Vue.js : front-end framework
• 🔧 Vue-cli : standard tooling for vue.js development
• 🔁 Vuex : state management
• 💾 Firestore : cloud NoSQL Database
• 🏠 Firebase hosting : fast and secure web hosting
• 👤 Firebase authentication : for easy authentication
• 📱 PWA : progressive web app support
• 💄 Prettier : code formatting rules
• 🚨 Eslint : control code quality
• ✅ Jest : unit testing
• ✅ Cypress : e2e testing
• 🔍 Vue head : meta description per page
• 📄 [Optional]prerender spa plugin : pages prerendering
• 💚 [Optional]circleci : continuous integration/deployment
• 📦 [Optional]bundlesize : control your js bundles sizes

App embedded features :

• 👤 Google authentication
• 📴 Offline support (dynamic & static caching)
• 🆕 New version available prompt on new app deployments
• ➕ Add to home screen prompt for ios & android
• ↩️ Smart redirection for auth protected routes
• ✨ Products page example to demonstrate app data management with firestore and vuex
• 💪 Better PWA support for all browsers with PWACompat