Go to file
fritzsenpai 85ea7f8938 Fix image deletion to remove files from disk
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
2025-09-25 20:43:57 -05:00
audio Initial commit: Task Challenge Game v1.4 2025-09-25 19:41:06 -05:00
images Fix image deletion to remove files from disk 2025-09-25 20:43:57 -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 Fix desktop application errors 2025-09-25 20:17:30 -05:00
game.js Fix image deletion to remove files from disk 2025-09-25 20:43:57 -05:00
gameData.js Initial commit: Task Challenge Game v1.4 2025-09-25 19:41:06 -05:00
index.html Final interface cleanup and improvements 2025-09-25 20:28:48 -05:00
main.js Refactor to desktop application with Electron 2025-09-25 20:07:45 -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 Refactor to desktop application with Electron 2025-09-25 20:07:45 -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 Integrate desktop file manager with UI 2025-09-25 20:11:10 -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]