Go to file

fritzsenpai 6963250361 Enable much larger task images - almost fill the window Enhanced image scaling for maximum visual impact: ## Massive Image Scaling Upgrade: ### Dramatically Increased Size Limits: - Base Size: Now 70vh height (was 45vh), 90vw width (was 85vw) - Ultra-wide Screens: Up to 1500px wide, 1000px tall (was 900x700) - Large Screens: Up to 1200px wide, 800px tall (was 700x550) - Medium Screens: Up to 800px wide, 600px tall (was 500x400) - Small Screens: Up to 500px wide, 400px tall (was 400x300) ### Window Size Optimizations: - window-xl: 80vh height, 85vw width - nearly full screen - window-large: 75vh height, 88vw width - most of the screen - window-medium: 65vh height, 90vw width - large portion - window-small: 55vh height, 95vw width - efficient use of space ### Enhanced Container Support: - Container max-height increased to 85vh (was 70vh) - Better vertical space utilization - Full width containers for optimal centering - Dynamic minimum heights scale with window size ### Responsive Breakpoint Updates: - 1400px+: 75vh max height, 85vw width - huge images - 1000-1399px: 65vh max height, 88vw width - very large - 800-999px: 55vh max height, 92vw width - substantial size - <800px: 50vh max height, 95vw width - fills small windows ## User Experience: - Immersive Viewing: Images now dominate the screen appropriately - Better Detail Visibility: Much easier to see image details - Scalable Impact: Larger windows = dramatically larger images - Maintains Quality: Aspect ratios and sharpness preserved - Space Efficient: Takes full advantage of available screen real estate Images now fill most of the window for maximum visual impact!		2025-09-26 05:16:23 -05:00
audio	Implement 3 Game Modes: Complete All, Timed Challenge, and Score Target	2025-09-25 22:00:44 -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 dynamic task image resizing with hybrid approach	2025-09-26 05:12:46 -05:00
gameData.js	Initial commit: Task Challenge Game v1.4	2025-09-25 19:41:06 -05:00
index.html	Implement 3 Game Modes: Complete All, Timed Challenge, and Score Target	2025-09-25 22:00:44 -05:00
main.js	Implement comprehensive window resizing and responsive design	2025-09-26 05:07:25 -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	Enable much larger task images - almost fill the window	2025-09-26 05:16:23 -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

Open index.html in a modern web browser
Choose your theme and start playing
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

Navigate to Image Management screen
Switch between "Task Images" and "Consequence Images" tabs
Click "Upload Images" to select files
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

Clone repository
Use local server for testing (file:// protocol has limitations)
Test across different browsers
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]