
This is not just a game — it's a technical showcase. Built from scratch without frameworks, this project demonstrates clean architecture, class-based encapsulation, and professional testing standards for frontend apps.
💼 Recruiter & Freelance Note: This repo is designed to represent my skills in test-driven development, clean class architecture, DOM/UI separation, and real-world production practices — all with no frameworks. Hire skill, not fluff.
Category | Description |
---|---|
🏋️ Gameplay | Fully interactive Rock Paper Scissors logic vs AI |
📉 Score System | First to 5 wins, match result displayed |
🦜 UI/UX | Hover animations, responsive mobile design, blur modal for result |
🤖 OOP Structure | Game split into GameLogic & GameUI classes for testability |
✅ Reset Logic | Scores and UI are resettable instantly |
🔧 Accessibility | Clear ARIA-compliant structure and keyboard navigability |
⚖️ Testing | Full unit and integration test coverage with Vitest + jsdom |
-
Validates all core logic methods
-
Mock-based isolation for
GameUI
-
Includes:
checkWin()
tests for draw/human/computer wingameOver()
scenarios for each win stateplayHandler()
flow and internal call validation
-
DOM is mocked in
beforeEach
-
Tests:
liveScore()
correctnessresultBox()
modal displayresetUI()
behavior
-
Real DOM event testing
-
Simulates user clicks for Rock, Paper, Scissors
-
Validates:
- Game flow triggers
liveFeedback
and modal updates- Reset behavior
- ✅ 100% test coverage on core logic
- ✅ All DOM interactions simulated
Stack | Role |
---|---|
JavaScript (ES6) | Core logic, modular imports, classes |
HTML5 + Semantic Tags | Accessibility, SEO, structure |
CSS3 | Grid, Flexbox, hover effects, mobile responsiveness |
Vitest | Fast unit + integration test runner |
jsdom | Simulated browser for DOM testing |
OOP + SOLID | Design principles for class interaction |
rock-paper-scissors-js/
├── index.html # Semantic structure & interaction roots
├── style.css # CSS animations, responsiveness, layout
├── main.js # Bootstrap, event binding, game entrypoint
├── Javascript/
│ ├── GameLogic.js # Pure logic class: rules, state, outcome
│ └── GameUI.js # DOM-only class: renders feedback, modal
├── __tests__/
│ ├── GameLogic.test.js
│ ├── GameUI.test.js
│ └── main.test.js
├── assets/ # Game images: rock/paper/scissors
└── .gitignore # Clean repo structure
# Clone the repo
https://github.com/umarSiddique010/rock-paper-scissors-js.git
# Move to project
cd rock-paper-scissors-js
# Install dev deps
npm install
# Run test suite
npm test
- OOP: Used encapsulated
GameLogic
andGameUI
- SOLID: Each class has a single responsibility
- No tight coupling: UI mockable in logic tests
- Used
Vitest
withmockImplementation
for logic - Simulated DOM environment via
jsdom
- Validated interaction and isolation
- CSS transitions + scaling animations
- Blur background modal for results
- Mobile responsive layout using media queries
- Modern ES modules
- Fully ESM-compatible test runner
- VS Code support and script automation
Md Umar Siddique