Major UX enhancement with full window resize support and responsive layouts:
## Enhanced Electron Window Configuration:
- Explicitly enabled resizable and maximizable options
- Improved default window size handling
- Better titleBar integration for native controls
- Maintained minimum size constraints (800x600)
## � Window State Memory System:
- Automatically saves and restores window size, position, and maximized state
- State persisted in userData/window-state.json
- Graceful fallback to defaults if saved state is invalid
- Real-time state saving on resize, move, maximize/unmaximize events
## Comprehensive Responsive Design:
### Layout Improvements:
- Increased max-width from 800px to 1400px for larger screens
- Added min-width constraints to prevent layout breaking
- Centered container with appropriate margins
### Media Query Breakpoints:
- **Large Screens (1200px+)**: Multi-column layouts, larger fonts, better space utilization
- **Medium Screens (900-1199px)**: Balanced layouts with flexible button arrangements
- **Small Screens (<899px)**: Compact layouts while maintaining usability
- **Ultra-wide (1600px+)**: Enhanced gallery layouts with more columns
- **Retina/High-DPI**: Enhanced shadows and visual polish
### Smart Layout Adaptations:
- Main action buttons: Row layout on larger screens, column on smaller
- Game mode selection: Grid layout on wide screens, stacked on narrow
- Image/Audio galleries: Dynamic column counts based on available space
- Task display: Optimal sizing for different screen sizes
- Management screens: Better use of horizontal space
## User Experience Benefits:
- Window size preferences remembered between sessions
- Better space utilization on all screen sizes
- Improved readability and usability at different resolutions
- Native window controls work properly (maximize, resize corners)
- Professional desktop app experience with proper window management
## Technical Implementation:
- Window state JSON persistence in user data directory
- Event-driven state saving (resize, move, maximize events)
- CSS Grid and Flexbox for responsive layouts
- Media queries for different screen size optimizations
- Maintains backward compatibility with existing layouts
**Now the app works beautifully at any window size! **
Critical fix for timed and score target game modes:
Issue:
- Game was ending when all tasks were shown regardless of game mode
- Timed and score target modes should continue cycling through tasks
- Only 'complete-all' mode should end when all tasks are finished
Fix:
- Updated loadMainTask() to check gameMode before ending game
- Complete-all mode: Ends game when all tasks completed (original behavior)
- Timed/Score modes: Reset usedMainTasks array and continue cycling
- Added console logging for task cycling in non-complete-all modes
Now game modes work correctly:
Complete All: Ends when all tasks finished
Timed Challenge: Cycles through tasks until time runs out
Score Target: Cycles through tasks until target score reached
This enables proper infinite task cycling for time-based and score-based challenges!
Complete game mode system with dynamic UI and win conditions:
## Three Game Modes:
### 1. Complete All Tasks (Default)
- Finish every main task in the game
- Original gameplay experience
- Game ends when all tasks completed
### 2. Timed Challenge
- Race against the clock to complete as many tasks as possible
- Configurable time limits: 5, 10, 15, 20, or 30 minutes
- Countdown timer with color warnings (red < 30s, orange < 60s)
- Game ends when time runs out
### 3. Score Target
- Reach a target score to win
- Configurable targets: 500, 1000, 1500, 2000, or 3000 points
- Game ends immediately when target reached
- Strategic gameplay focusing on high-value tasks
## Enhanced UI Features:
### Game Mode Selection:
- Beautiful radio button interface on start screen
- Mode-specific configuration options (time/score targets)
- Dynamic show/hide of relevant settings
- Visual feedback with hover effects and selection states
### Smart Timer Display:
- Elapsed time for Complete All and Score Target modes
- Countdown timer for Timed Challenge mode
- Color-coded time warnings (red/orange when running low)
- Dynamic timer status indicators
### Dynamic Game Over Screen:
- Mode-specific victory messages and titles
- Shows selected game mode in final stats
- Different celebration text based on completion reason
- Comprehensive final statistics display
## Technical Implementation:
### Game State Enhancement:
- Added gameMode, timeLimit, scoreTarget to gameState
- Proper game state reset handling for all modes
- Mode persistence and configuration management
### Win Condition Logic:
- Score target checking on task completion
- Timer countdown with automatic game end
- Complete-all detection (existing functionality preserved)
- Multiple end game reasons ('time', 'score-target', 'complete-all')
### Event System:
- Game mode selection event listeners
- Dynamic configuration updates
- Real-time UI state management
- Mode-specific timer updates
**Ready to challenge yourself in 3 different ways! **
Enhance image selection to prevent repeats until all images are exhausted:
## New Game State Tracking:
- Added usedTaskImages array to gameState
- Added usedConsequenceImages array to gameState
- Tracks which specific images have been displayed
## Smart Image Selection Logic:
1. **Filter Available Images**: Remove already-used images from selection pool
2. **Prevent Repeats**: Only select from images that haven't been shown yet
3. **Auto-Reset**: When all images exhausted, reset tracking and allow repeats
4. **Separate Tracking**: Task and consequence images tracked independently
## Enhanced User Experience:
- Users see all their images before any repeats occur
- Better variety and rotation through image collections
- Automatic cycling ensures no image is permanently excluded
- Visual feedback shows progression (X/Y images used)
## Technical Implementation:
- getRandomImage() enhanced with usage tracking
- Image identification works with both string paths and metadata objects
- Maintains compatibility with existing disabled images system
- Preserves all existing custom image functionality
## Console Logging:
- Shows when image cycles reset: 'All [type] images have been shown, resetting for repeat cycle'
- Tracks usage progression: 'Selected [type] image: [name] (X/Y used)'
- Helps users understand image rotation system
**Now images will cycle through the entire collection before repeating!**
Simplify MusicManager to use only custom audio files:
Changes:
1. MusicManager Constructor:
- Initialize tracks array as empty instead of with 4 hardcoded tracks
- Custom tracks loaded immediately by loadCustomTracks()
- No more built-in vs custom track distinction needed
2. refreshCustomTracks() Method:
- Simply clear tracks array since no built-in tracks exist
- Reload custom tracks without filtering logic
- Cleaner implementation without isBuiltIn property logic
Benefits:
Music player now shows only user's imported background music
Simpler codebase without hardcoded audio references
All tracks are treated equally as custom content
No need to maintain separate built-in/custom track categories
The music player will now be populated entirely from the user's
imported background audio files through the audio management system.
Complete integration of custom audio files with existing music player:
## Core Integration Features:
1. **Extended Track System:**
- Built-in tracks marked with isBuiltIn: true
- Custom tracks marked with isCustom: true
- MusicManager now loads custom background music from storage
- Automatic filtering of enabled custom tracks
2. **Dynamic Track Loading:**
- loadCustomTracks(): Loads enabled background music into MusicManager
- refreshCustomTracks(): Updates track list when audio files change
- Auto-refresh when audio gallery is loaded/updated
- Maintains backwards compatibility with built-in tracks
3. **Enhanced Track Selector:**
- updateTrackSelector(): Rebuilds dropdown with all available tracks
- Custom tracks labeled as '(Custom)' in selector
- Handles track list changes without breaking current playback
- Auto-resets to first track if current track becomes unavailable
4. **Seamless Integration:**
- Custom background music appears alongside built-in tracks
- All existing music controls work with custom tracks (play/pause, loop, shuffle, volume)
- Track selector automatically updates when importing/deleting audio
- No changes needed to existing playback logic
## User Experience:
Import background music Automatically appears in music player dropdown
Enable/disable audio Updates music player track list immediately
Delete audio Safely removes from player and resets if needed
All music controls work seamlessly with custom tracks
Visual distinction between built-in and custom tracks
## Technical Implementation:
- MusicManager.tracks array now includes custom audio files
- Automatic synchronization between audio management and music player
- Smart track indexing that survives add/remove operations
- Integrated with existing storage system and settings persistence
**Custom background music now fully integrated with the header music player!**
Critical property mismatch fix:
Root Cause:
- Audio objects stored in customAudio have 'name' property (from desktop-file-manager.js)
- But UI templates and functions were looking for 'filename' property
- This caused audio files to never be found for deletion or enable/disable
Fixed Components:
1. HTML Template (loadAudioCategory):
- data-filename now uses audio.name instead of audio.filename
- Display filename now uses audio.name
- onchange handler now passes audio.name
2. Deletion Logic (deleteSelectedAudio):
- Search logic now looks for audio.name === filename
- Removed incorrect audio.filename references
3. Storage Operations:
- removeAudioFromStorage now filters by audio.name
- toggleAudioEnabled now finds files by audio.name
4. Consistency:
- All audio operations now use consistent 'name' property
- Matches the actual storage structure from import process
This fixes:
Audio file deletion (files can now be found in storage)
Enable/disable toggles (files can be located properly)
Storage operations (consistent property references)
UI display consistency (proper filename display)
Audio deletion should now work correctly.
Fixes for audio deletion functionality:
1. Async Handling Fix:
- Made deleteSelectedAudio() async function
- Replaced forEach with Promise.all() for proper async handling
- deletedCount was not updating correctly due to async timing issues
- Now waits for all deletion promises to complete before showing results
2. Enhanced Error Handling:
- Added try/catch around Promise.all()
- Better error messages for failed deletions
- Separate handling for no deletions vs errors
3. Debug Logging:
- Added console logs to track audio file lookup process
- Logs storage contents and search parameters
- Helps identify why files aren't being found for deletion
- Shows actual audioFile object found in storage
4. Improved User Feedback:
- Shows specific count of successful deletions
- Warning when no files are deleted
- Error notification for deletion failures
This should resolve the deletion timing issues and provide better insight into any remaining problems.
Critical bug fix for audio deletion:
Issue:
- deleteSelectedAudio() was passing category and filename to deleteAudio()
- deleteAudio() expects full file path as first parameter
- This caused deletion attempts on directory paths like 'C:\Users\drew\webGame\background'
- Result: ENOENT errors trying to delete directories instead of files
Fix:
- Look up full audio file path from storage before calling deleteAudio()
- Handle both string and object audio storage formats
- Pass correct audioPath parameter to deleteAudio(audioPath, category)
- Enhanced removeAudioFromStorage() to handle both storage formats properly
Changes:
- deleteSelectedAudio(): Find full path from storage before deletion
- removeAudioFromStorage(): Support both string paths and object formats
- Proper error handling when audio file not found in storage
- Maintains backward compatibility with different storage formats
Now audio deletion works correctly:
Finds correct file paths from storage
Deletes actual audio files from disk
Removes storage references properly
No more ENOENT directory deletion errors
Critical fix for audio management:
- Added missing audio IPC functions to preload.js
- selectAudio: File dialog for selecting audio files
- readAudioDirectory: Directory scanning with title formatting
- copyAudio: File copying for audio import
Issue:
- Audio IPC handlers existed in main.js but weren't exposed to renderer
- selectAndImportAudio() calls were failing with 'undefined function' errors
- Upload functionality was broken due to missing API bridge
Fix:
- Exposed all three audio IPC functions in electronAPI context bridge
- Audio import buttons now have access to required backend functionality
- Maintains consistency with existing image API pattern
Now audio management fully functional:
File selection dialogs work
Directory scanning operational
File copying and import functional
Ready for user testing
Clean up console.log statements added during troubleshooting:
- Removed logging from showImageManagement()
- Removed logging from setupImageManagementEventListeners()
- Removed logging from loadImageGallery()
- Removed logging from updateImageGalleryControls()
Production ready - no more debug console spam.
Root cause fix:
- startGame() was calling showScreen('image-management-screen') directly
- This bypassed setupImageManagementEventListeners() and loadImageGallery()
- Changed to call showImageManagement() instead which properly initializes the screen
- showImageManagement() sets up all event listeners and loads gallery correctly
Issue sequence:
1. App starts with no images
2. User immediately clicks 'Start Game'
3. startGame() detects no images available
4. Called showScreen() directly No event listeners Freeze
5. Now calls showImageManagement() Full setup Works perfectly
Fix tested scenario:
- Start app Navigate to manage images Back home Start game (was working)
- Start app Immediately click Start game (now fixed - was freezing)
The freeze only happened on immediate startup because the screen wasn't properly initialized.
Major performance improvements:
- Replaced expensive DOM cloning/replacing in setupImageManagementEventListeners()
- Used direct onclick assignments instead of clone/replace operations
- Added imageManagementListenersAttached flag to prevent duplicate listener attachment
- Simplified updateImageGalleryControls() to use direct onclick assignment
- Added comprehensive logging to track function execution flow
- Reset listener flag when showing image management screen for fresh attachment
Performance fixes:
- Eliminated heavy DOM manipulation that was causing UI freeze
- Reduced memory overhead from constant node cloning
- Prevented listener duplication without expensive DOM operations
- Faster event listener setup with direct property assignment
The freeze was caused by the expensive cloneNode() and replaceChild() operations
being performed on every screen load, creating performance bottlenecks.
Critical fix for desktop startup:
- Fixed startGame() function to properly handle new customImages object format
- Previously trying to call .length on object instead of array
- Added proper backward compatibility checking for both old array and new object formats
- Added comprehensive logging to debug image management screen freeze
- Now correctly counts custom images from both task and consequence categories
Fixes error where:
- User clicks Start Game with no images
- Game redirects to image management screen but freezes
- TypeError: customImages.length when customImages is {task: [], consequence: []}
Error resolved with proper object structure handling and logging.
Critical fix for desktop mode:
- Updated deleteSelectedImages() to actually delete image files from disk
- Desktop mode now uses fileManager.deleteImage() to remove physical files
- Added proper category detection (task/consequence) for file deletion
- Enhanced error handling for file deletion operations
- Added different success messages for desktop vs web mode
- Maintains backward compatibility with web mode (storage-only deletion)
Previously:
- Images imported to images/tasks/ and images/consequences/ directories
- Deletion only removed references from localStorage
- Files remained on disk, causing clutter and storage waste
Now:
- Desktop deletion removes both file references AND physical files
- Clean filesystem management with no orphaned files
- Proper feedback about file vs reference deletion
- Robust error handling for file system operations
Visual improvements:
- Removed filename display from under images for cleaner look
- Removed 'Custom' badge to reduce visual clutter
- Added hover tooltip showing filename when mouse over image
- Simplified image-info section to only show enable/disable controls
- Cleaned up unused isCustom variable logic
Benefits:
- Much cleaner, more minimalist image gallery appearance
- Filename information still accessible via hover tooltip
- Less visual noise - focus on the images themselves
- Enable/disable functionality remains prominent and clear
- More professional gallery layout similar to modern image managers
Interface simplification:
- Removed bulk selection checkboxes from image items
- Restored original click-to-select behavior for image selection
- Users can now click directly on images to select/deselect them
- Select All/Deselect All buttons now work by directly modifying image classes
- Kept Enable/Disable checkbox functionality unchanged
Benefits:
- Cleaner visual interface with fewer checkboxes
- More intuitive selection - click on image to select it
- Reduced visual clutter while maintaining all functionality
- Same bulk operations (select all, deselect all, delete selected) still work
- Original UX restored where selection was visual highlight, not checkbox
- Fixed updateImageCount() function to handle new customImages data structure
- Added compatibility for both old (array) and new (object) customImages format
- Function now properly handles { task: [], consequence: [] } structure
- Prevents TypeError when toggling image enabled/disabled states
Error was occurring when:
- User clicked checkbox to enable/disable images
- updateImageCount() tried to spread customImages as array
- But customImages was object with task/consequence properties
Fix ensures compatibility with both data formats for smooth migration.
Interface updates:
- Removed 'Open Image Folders' button - functionality wasn't implemented
- Updated Storage Info to show desktop vs web-specific information
- Desktop mode now shows unlimited storage info with file system details
- Web mode shows traditional browser storage limitations
Storage Info improvements:
- Shows image counts by category (tasks/consequences)
- Desktop version highlights unlimited storage benefits
- Clearer information about native file system vs browser storage
- Better visual organization with emojis and sections
.gitignore updates:
- Added comprehensive image file exclusions (jpg, png, gif, webp, etc.)
- Added audio file exclusions (mp3, wav, ogg, m4a, etc.)
- Excluded user imported images directories (images/tasks/*, images/consequences/*)
- Prevents user content from being committed to repo
Benefits:
- Cleaner interface with fewer non-functional buttons
- Context-aware storage information based on platform
- Better repository hygiene by excluding user content files
- Changed updateImageGalleryControls() to loadImageGallery() in import handlers
- Now gallery refreshes automatically after importing task or consequence images
- Also fixed scan button to refresh gallery after directory scanning
- No more need to navigate away and back to see newly imported images
Gallery now updates immediately showing:
- Newly imported images in the correct category tabs
- Updated image counts and selections
- Real-time visual feedback for successful imports
Major Changes:
- Convert web game to cross-platform desktop app using Electron
- Add complete desktop file management system
- Implement native file dialogs and unlimited storage
- Create secure IPC bridge for file operations
New Files Added:
- main.js: Electron main process with native OS integration
- preload.js: Secure IPC bridge between main and renderer
- desktop-file-manager.js: Full file system access and operations
- package.json: Electron dependencies and build configuration
- setup.bat/setup.sh: Installation scripts for all platforms
- README-DESKTOP.md: Comprehensive desktop application guide
Desktop Features:
- Native file import dialogs (no browser limitations)
- Unlimited disk space for image storage
- Direct folder access and file management
- Cross-platform builds (Windows/Mac/Linux)
- Full offline functionality
- Native performance without web constraints
Benefits:
- Solves browser security sandbox limitations
- Unlimited image storage using file system
- Professional native application experience
- Easy installation and distribution
- True cross-platform compatibility
Core Features:
- Complete task management game with point system
- Theme system with multiple visual styles
- Background music with playlist controls
- Comprehensive keyboard shortcuts (Enter/Ctrl/Shift+Ctrl/Space/P/M/H/Escape)
Image Management System:
- Categorized upload system (Task/Consequence images)
- High-quality image processing (1600x1200, 95% quality)
- Batch operations (select all, delete multiple)
- Storage quota management (50 image limit)
- Support for JPG/PNG/WebP up to 20MB
Technical Architecture:
- DataManager class for localStorage management
- TaskChallengeGame main controller
- Canvas-based image compression
- Cross-browser compatibility
- No dependencies - pure HTML/CSS/JS
Data Management:
- Local storage with auto-migration
- Export/import functionality
- Statistics tracking
- Game state persistence
fritzsenpai