A professional, feature-rich multiplayer game score tracking application with a modern, premium UI/UX design.
score_tracker/
├── index.html # Main HTML file with semantic structure
├── css/
│ └── styles.css # All styling and animations
├── js/
│ ├── app.js # Application entry point
│ ├── gameState.js # Game logic and state management
│ └── uiController.js # UI updates and event handling
├── assets/ # Images, icons, etc. (future use)
└── README.md # This file
✅ Professional Multi-File Architecture
- Separated concerns: HTML, CSS, JavaScript modules
- Game logic decoupled from UI
- Easy to maintain and scale
✅ Premium UI/UX
- Modern glassmorphism design with backdrop blur
- Animated glowing effects and smooth transitions
- Responsive design (desktop to mobile)
- Advanced animations (shimmer, pulse, glow effects)
✅ Seamless Gameplay
- Quick preset point buttons (+1, +2, +3, +5, +10, -1)
- Enter key support for fast input
- Real-time score updates
- Turn history with timestamps
✅ Game Features
- Unlimited players (up to 10 recommended)
- Customizable winning score
- Turn history with logs
- Skip turn functionality
- Progress percentage indicators
- Live leaderboard
-
Open the application:
- Open
index.htmlin a modern web browser - Or use a local server:
python -m http.serverornpx http-server
- Open
-
Set up the game:
- Enter winning score (default: 30)
- Enter number of players (2-10)
- Click "Set Player Names"
- Enter player names
- Click "Start Game"
-
Play:
- Click preset buttons or enter custom points
- Click "Submit Turn" or press Enter
- View live scores and turn history
- Winner is declared when score reaches winning score
-
New Game:
- Click "Reset Game" to start over
- Primary: Neon Cyan (#00ffff)
- Accent: Gold (#ffd700)
- Secondary: Purple (#9a00ff)
- Success: Green (#00ff41)
- Alert: Red (#ff1155)
- Background: Dark Blue (#0a0e27)
- Glassmorphism with backdrop blur
- Neon glow shadows
- Shimmer animations on cards
- Pulse effects on borders
- Smooth cubic-bezier transitions
- Responsive hover states
- Heading Font: Orbitron (futuristic, bold)
- Body Font: Space Mono (clean monospace)
- Professional letter-spacing and line-height
- Desktop (>1200px): Two-column layout with sidebar
- Tablet (768px-1200px): Single column responsive
- Mobile (<768px): Touch-friendly buttons and inputs
- Small Mobile (<480px): Optimized for narrow screens
- HTML5: Semantic markup
- CSS3: Modern features (grid, flexbox, animations)
- Vanilla JavaScript: No dependencies, modular architecture
- Browser Support: Chrome, Firefox, Safari, Edge (modern versions)
The GameState class handles:
- Player initialization and management
- Score tracking and updates
- Turn history management
- Winner detection
- Leaderboard generation
The UIController class manages:
- DOM element references
- Event listeners
- Screen transitions
- Form validation
- Real-time UI updates
- Pure game logic
- No DOM dependencies
- Easily testable
- Can be used standalone
- DOM manipulation
- Event handling
- User interaction logic
- Screen management
- Initialization
- Module coordination
- Entry point
✅ Separation of Concerns ✅ DRY (Don't Repeat Yourself) ✅ Single Responsibility Principle ✅ Responsive Design ✅ Accessibility considerations ✅ Performance optimized ✅ Clean code standards
- Local storage for game history
- Dark/Light theme toggle
- Sound effects and notifications
- Export game statistics
- Multiplayer online support
- Custom themes and colors
- Game presets (dice games, card games, etc.)
- Performance metrics and statistics
Created for INDUSTRY MINDS - ICET
For issues or questions, please contact the development team.
Version: 1.0.0
Last Updated: November 2025
Status: Production Ready