Fully Responsive Rock Paper Scissors Lizard Spock Game with Animations
Design comparison
Solution retrospective
My solution is not pixel-perfect by any means, But I am still proud of the result. The code is not so clean. I don't think, that I have used Angular's full capabilities, and I think, that some positionings could be done better. Still, the layout (in my opinion) looks great, it is fully responsive (on any resolution from 200px width to full desktop), has advanced animations (buttons moving), and works just fine. One part where I could've improved my code is to use top and left positions on the buttons, instead of transitioning. Then there would be no curved-moving button animation. But I figured it out late and didn't want to rewrite the whole thing.
Let me know if you find any bugs, or have any suggestions how to improve. :)
Community feedback
- @Chanda-AbdulPosted over 1 year ago
👋 Hey there! Congratulations on completing your project. Overall, everything looks amazing and functions well. I appreciate that you were able to incorporate tests.
Here are some suggestions to help improve your code and align with Angular best practices:
- Consider using TypeScript to provide abstractions in your code. Instead of hard coding paper, rock, and scissors directly into the template, you could create an
opponent.model.ts
file to abstract this data. By abstracting the data, it would greatly enhance scalability and readability. Similar to this
const opponent: [string, boolean] = [ { name: 'rock', bonus: false }, { name: 'paper', bonus: false }, { name: 'scissors', bonus: false }, { name: 'lizard', bonus: true }, { name: 'spock', bonus: true }, ];
- When accessing the data in your template, consider using Angular pipes to format and transform the values. Pipes are a powerful feature in Angular that can help with data manipulation and presentation. Utilizing pipes will make your code more modular and easier to maintain.
<ul class="opp"> <li *ngFor"let opp in opponents"> {{opp.name | capitalize}} <span *ngIf="opp.bonus === true">bonus</span> </li> </ul>
- To encapsulate all the game play functionality, consider creating a service. This service can hold the logic for game rules, scoring, and other related functionality. Additionally, you can leverage RxJS observables to keep track of the game results and opponents. Observables provide a reactive way of handling asynchronous events, which can be beneficial for real-time updates and data synchronization.
By incorporating these suggestions, you'll be following Angular conventions and best practices, making your code more maintainable and scalable.
Keep up the great work, and if you have any questions or need further clarification, feel free to reach out. Happy coding!
Marked as helpful0@oroszlanoloPosted over 1 year agoThanks @Chanda-Abdul, Your feedback was helpful. I will keep these in mind in the future.
0 - Consider using TypeScript to provide abstractions in your code. Instead of hard coding paper, rock, and scissors directly into the template, you could create an
Please log in to post a comment
Log in with GitHubJoin our Discord community
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