Fix: Replace Blocking Alert with Professional Timer Warning System

[ChinmayOnGithub]

Fixes #69

Description

This PR addresses the blocking alert issue that occurs when the game timer reaches 10 seconds. The current implementation uses a browser alert() which freezes the entire game and blocks all user interactions. While the timer pauses during the alert, players cannot interact with the cards, creating a poor user experience and disrupting the game flow.

Solution

Replaced the blocking alert with a professional, non-blocking visual warning system that provides clear feedback without interrupting gameplay:

• Timer Display: Changes to red color and pulses with a smooth 1.4s animation cycle
• Timer Bar: Transitions to red gradient with synchronized pulsing effect
• Screen Vignette: Subtle red glow around screen edges (2s cycle) creates urgency without blocking content
• Audio Feedback: Single warning beep plays at 10 seconds
• Automatic Cleanup: All visual effects stop when timer reaches zero or game resets
• Theme Support: Fully compatible with both dark and light themes with adjusted colors and intensities

Screenshots

Before	After

Technical Implementation

Files Modified:

• src/js/app.js - Timer warning logic and cleanup handlers
• src/css/styles.css - Visual effects and animations

Key Changes:

• Removed blocking alert() call at line 180
• Added CSS class toggles for warning states
• Implemented cleanup in stopTimer() and resetTimer() functions
• Added theme-aware CSS animations with proper keyframes
• Used CSS-only animations for optimal performance (GPU accelerated)

Code Statistics:

• JavaScript: ~15 lines modified/added
• CSS: ~110 lines added (new styles)
• Total: ~125 lines changed

Testing Performed

• Warning correctly triggers at 10 seconds remaining
• All visual effects stop when timer reaches zero
• Effects properly reset when starting a new game
• Functionality verified in both dark and light themes
• No console errors or warnings
• Smooth animation performance with no frame drops
• Timer continues running without interruption
• Players can interact with cards throughout the warning period

Benefits

• Improved user experience with non-blocking feedback
• Uninterrupted gameplay (no frozen UI)
• Better accessibility with multi-sensory feedback (visual + audio)
• Performance optimized with CSS animations
• Maintains code quality with proper cleanup

---

Hacktoberfest 2025
Please accept this PR under hacktoberfest label.

[ChinmayOnGithub]

@avinash201199 Can you look into this one as well?
Its UX fix.
Please use accept under hacktoberfest label