Go to file
fritzsenpai 4e8e08c51e Fix audio import functionality: Add missing IPC API exposure
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
2025-09-25 21:31:40 -05:00
audio Initial commit: Task Challenge Game v1.4 2025-09-25 19:41:06 -05:00
images Fix game freeze with no images loaded 2025-09-25 21:03:12 -05:00
.gitignore Final interface cleanup and improvements 2025-09-25 20:28:48 -05:00
README-DESKTOP.md Refactor to desktop application with Electron 2025-09-25 20:07:45 -05:00
README.md Initial commit: Task Challenge Game v1.4 2025-09-25 19:41:06 -05:00
desktop-file-manager.js Implement Phase 1: Desktop Audio Management Infrastructure 2025-09-25 21:19:58 -05:00
game.js Implement Phase 2: Complete Audio Management UI 2025-09-25 21:27:21 -05:00
gameData.js Initial commit: Task Challenge Game v1.4 2025-09-25 19:41:06 -05:00
index.html Implement Phase 2: Complete Audio Management UI 2025-09-25 21:27:21 -05:00
main.js Implement Phase 1: Desktop Audio Management Infrastructure 2025-09-25 21:19:58 -05:00
package-lock.json Integrate desktop file manager with UI 2025-09-25 20:11:10 -05:00
package.json Refactor to desktop application with Electron 2025-09-25 20:07:45 -05:00
preload.js Fix audio import functionality: Add missing IPC API exposure 2025-09-25 21:31:40 -05:00
setup.bat Refactor to desktop application with Electron 2025-09-25 20:07:45 -05:00
setup.sh Refactor to desktop application with Electron 2025-09-25 20:07:45 -05:00
styles.css Implement Phase 2: Complete Audio Management UI 2025-09-25 21:27:21 -05:00

README.md

Task Challenge Game

A web-based task management game with customizable images, themes, and comprehensive image management system.

Features

🎮 Game Features

  • Task Management System: Complete tasks to earn points
  • Consequence System: Skip tasks face consequences
  • Multiple Difficulty Levels: Easy, Medium, Hard tasks with different point values
  • Game Statistics: Track completion rates, points, and performance
  • Pause/Resume Functionality: Full game state management
  • Keyboard Shortcuts: Quick controls for power users

🎨 Customization

  • Theme System: Multiple visual themes (midnight, ocean, forest, etc.)
  • Background Music: 4 music tracks with loop/shuffle controls
  • Volume Control: Adjustable audio settings
  • Image Management: Upload and manage custom task/consequence images

🖼️ Advanced Image System

  • Categorized Images: Separate task and consequence image pools
  • High-Quality Processing: 1600x1200 resolution with 95% JPEG quality
  • Smart Compression: Automatic resizing for optimal storage
  • Batch Operations: Upload multiple images, select/delete in bulk
  • Storage Management: 50 image limit with quota monitoring
  • Format Support: JPG, PNG, WebP image formats up to 20MB

🛠️ Technical Features

  • Local Storage: All data stored locally in browser
  • Responsive Design: Works on desktop and mobile
  • Cross-Browser Compatible: Modern browser support
  • No Backend Required: Pure client-side application

Getting Started

Quick Start

  1. Open index.html in a modern web browser
  2. Choose your theme and start playing
  3. Upload custom images through the Image Management screen

Local Development

# Clone the repository
git clone [repository-url]
cd webGame

# Serve locally (recommended)
python -m http.server 8000
# OR
npx serve .

# Open browser to http://localhost:8000

File Structure

webGame/
├── index.html              # Main game interface
├── game.js                # Core game logic and image management
├── styles.css             # All styling and themes
├── images/
│   ├── tasks/             # Default task images
│   ├── consequences/      # Default consequence images
│   └── cached/            # User-uploaded processed images
├── audio/                 # Background music files
└── README.md             # This file

Image Management

Upload Process

  1. Navigate to Image Management screen
  2. Switch between "Task Images" and "Consequence Images" tabs
  3. Click "Upload Images" to select files
  4. Images are automatically processed and optimized

Storage System

  • Quality: High-quality compression (1600x1200, 95% JPEG quality)
  • Limits: 50 total images to prevent storage issues
  • Categories: Separate pools for tasks vs consequences
  • Formats: Supports JPG, PNG, WebP up to 20MB each

Management Features

  • Enable/Disable: Control which images appear in game
  • Bulk Operations: Select all, delete multiple images
  • Storage Info: Monitor usage and get cleanup suggestions

Game Controls

Mouse Controls

  • Click buttons for all game actions
  • Select/deselect images in management screens

Keyboard Shortcuts

  • Enter: Complete current task
  • Ctrl: Skip current task
  • Shift+Ctrl: Mercy skip (if available)
  • Space/P: Pause/resume game
  • M: Toggle background music
  • H: Show help
  • Escape: Close dialogs/go back

Development History

Recent Updates (v1.4)

  • Implemented categorized image system (Task/Consequence separation)
  • Enhanced image processing with higher quality compression
  • Added storage quota management and limits
  • Fixed tab switching and individual image selection
  • Improved error handling and user feedback
  • Added batch upload and management features

Technical Architecture

  • DataManager Class: Centralized localStorage management
  • TaskChallengeGame Class: Main game logic and state management
  • Image Processing: Canvas-based compression and optimization
  • Event System: Comprehensive keyboard and mouse event handling
  • Theme System: CSS-based visual customization

Browser Compatibility

  • Chrome/Chromium (recommended)
  • Firefox
  • Safari
  • Edge
  • ⚠️ IE11+ (limited support)

Contributing

Development Setup

  1. Clone repository
  2. Use local server for testing (file:// protocol has limitations)
  3. Test across different browsers
  4. Follow existing code structure and commenting style

Code Organization

  • game.js: Main game logic, image management, data persistence
  • styles.css: All styling including themes and responsive design
  • index.html: Clean semantic HTML structure

Version History

  • v1.0: Initial implementation with basic game mechanics
  • v1.1: Added theme system and music controls
  • v1.2: Implemented image upload and management
  • v1.3: Enhanced image processing and categorization
  • v1.4: Added storage management and quota limits (current)

License

[Add your preferred license here]