Rock-Paper-Scissors-Game

Solution retrospective
What I'm Most Proud Of...
Clean Architecture & Code Organization:
The implementation uses a well-structured class-based approach with the RockPaperScissors
class that encapsulates all game logic, making the code maintainable and easy to understand.
Responsive Design:
The CSS implementation includes comprehensive mobile-first responsive design with detailed breakpoints (768px, 375px) that ensure the game works well across all device sizes.
Complete Feature Implementation:
Successfully implemented all core features including:
-
Game logic with proper win/lose/tie detection.
-
Score persistence using localStorage.
-
Smooth transitions between game phases.
-
Interactive rules modal.
-
Keyboard accessibility (ESC key to close modal),
-
Visual Fidelity:
The styling closely matches the Frontend Mentor design specifications with proper gradients, shadows, and layout positioning.
What I Would Do Differently Next Time.
Enhanced Animation & Feedback:
Add more visual feedback like:
- Animated transitions when switching between selection and result phases.
- Winner highlight effects with pulsing or glow animations.
- Delayed reveal of the house choice to build suspense.
Better Error Handling:
Implement more robust error handling for:
- localStorage access issues.
- Missing SVG icons.
- Browser compatibility checks.
Code Optimization:
- Extract magic numbers (like choice dimensions, delays) into constants.
- Create a more modular event handling system.
- Add JSDoc comments for better code documentation.
Accessibility Improvements:
- Add ARIA labels for screen readers.
- Implement focus management for keyboard navigation.
- Include sound effects with audio controls.
Extended Features:
- Add the bonus Rock, Paper, Scissors, Lizard, Spock variant.
- Implement game statistics (wins/losses over time).
- Add difficulty levels or tournament modes.
Responsive Design Complexity
Problem: Creating a layout that works across desktop, tablet, and mobile while maintaining the triangular arrangement of choices.
My Solution: I Used CSS Grid with careful breakpoint management:
Desktop: 2-column grid with rock spanning both columns
Mobile: Single column with reordered elements for better UX
Implemented mobile-first approach with progressive enhancement
The key to overcoming these challenges was breaking the problem into smaller, manageable pieces and implementing a clean separation of concerns between presentation, state management, and game logic.
What specific areas of your project would you like help with?Accessibility Improvements
Error Handling: The code currently has minimal error handling.
My Specific questions would be:
- How to handle cases where SVG icons fail to load?
- What to do if localStorage is disabled or full?
- How to gracefully handle DOM manipulation errors?
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Jonathan Peters's solution.
Join 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