Initial commit: Task Challenge Game v1.4
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
This commit is contained in:
commit
1879a8970f
|
|
@ -0,0 +1,30 @@
|
|||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
|
||||
# Browser cache and temp files
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# IDE files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
|
||||
# Node modules (if we add any)
|
||||
node_modules/
|
||||
|
||||
# User-specific cached images (we may want to exclude these)
|
||||
# images/cached/*.jpg
|
||||
# images/cached/*.png
|
||||
# images/cached/*.jpeg
|
||||
# images/cached/*.webp
|
||||
|
||||
# Backup files
|
||||
*.bak
|
||||
*~
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
# 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
|
||||
```bash
|
||||
# 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]
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,31 @@
|
|||
# Audio Files for Task Challenge Game
|
||||
|
||||
## Current Audio Tracks
|
||||
|
||||
This directory contains 4 background music tracks:
|
||||
|
||||
1. **Colorful-Flowers(chosic.com).mp3** - Upbeat and energetic music
|
||||
2. **New-Beginnings-chosic.com_.mp3** - Ambient and inspiring music
|
||||
3. **storm-clouds-purpple-cat(chosic.com).mp3** - Intense and dramatic music
|
||||
4. **Tokyo-Music-Walker-Brunch-For-Two-chosic.com_.mp3** - Calm and peaceful music
|
||||
|
||||
## Audio Integration
|
||||
|
||||
These tracks are automatically integrated into the game's music system:
|
||||
- **Colorful Flowers**: Motivating upbeat track for energy
|
||||
- **New Beginnings**: Ambient background for focus
|
||||
- **Storm Clouds**: Intense track for challenge moments
|
||||
- **Brunch For Two**: Calm and relaxing atmosphere
|
||||
|
||||
## Music Controls
|
||||
|
||||
Players can:
|
||||
- Toggle music on/off with the 🎵 button
|
||||
- See the current track name in the header
|
||||
- Music automatically loops and pauses with game state
|
||||
|
||||
## Audio Specifications
|
||||
- Format: MP3
|
||||
- Files loop automatically during gameplay
|
||||
- Volume: Game sets to 30% by default for comfortable listening
|
||||
- Source: chosic.com (royalty-free music)
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,145 @@
|
|||
// Game data - tasks and consequences
|
||||
const gameData = {
|
||||
// Main tasks - these are the primary challenges
|
||||
mainTasks: [
|
||||
{
|
||||
id: 1,
|
||||
text: "Do 20 jumping jacks",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Write down 3 things you're grateful for",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "Call a friend or family member",
|
||||
difficulty: "Medium"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "Organize your desk or workspace",
|
||||
difficulty: "Medium"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: "Take 10 deep breaths",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: "Read for 15 minutes",
|
||||
difficulty: "Medium"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
text: "Do a 5-minute stretch routine",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
text: "Write in a journal for 10 minutes",
|
||||
difficulty: "Medium"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
text: "Listen to your favorite song and dance",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
text: "Make your bed perfectly",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
text: "Drink a full glass of water",
|
||||
difficulty: "Easy"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
text: "Compliment someone genuinely",
|
||||
difficulty: "Medium"
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
text: "Do 50 push-ups (or modified push-ups)",
|
||||
difficulty: "Hard"
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
text: "Meditate for 20 minutes",
|
||||
difficulty: "Hard"
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
text: "Clean and organize an entire room",
|
||||
difficulty: "Hard"
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
text: "Learn 10 new words in a foreign language",
|
||||
difficulty: "Hard"
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
text: "Write a one-page story or essay",
|
||||
difficulty: "Hard"
|
||||
}
|
||||
],
|
||||
|
||||
// Consequence tasks - these are triggered when main tasks are skipped
|
||||
consequenceTasks: [
|
||||
{
|
||||
id: 101,
|
||||
text: "Do 30 push-ups (or modified push-ups)"
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
text: "Clean the bathroom mirror and sink"
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
text: "Stand on one foot for 2 minutes"
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
text: "Write 'I will not skip tasks' 20 times"
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
text: "Hold a plank position for 1 minute"
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
text: "Recite the alphabet backwards"
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
text: "Do 50 jumping jacks"
|
||||
},
|
||||
{
|
||||
id: 108,
|
||||
text: "Wash 5 dishes by hand"
|
||||
},
|
||||
{
|
||||
id: 109,
|
||||
text: "Memorize and recite a short poem"
|
||||
},
|
||||
{
|
||||
id: 110,
|
||||
text: "Vacuum one room completely"
|
||||
}
|
||||
],
|
||||
|
||||
// Image directory configuration
|
||||
taskImageDirectory: "images/tasks/",
|
||||
consequenceImageDirectory: "images/consequences/",
|
||||
supportedImageFormats: ['.jpg', '.jpeg', '.png', '.gif'],
|
||||
discoveredTaskImages: [], // Will be populated automatically
|
||||
discoveredConsequenceImages: [], // Will be populated automatically
|
||||
|
||||
// Placeholder images for tasks that don't have specific images
|
||||
defaultImage: "images/placeholder.jpg"
|
||||
};
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!-- Images Directory for Task Challenge Game -->
|
||||
<!-- 🎲 AUTOMATIC IMAGE DISCOVERY - Just drop images here! -->
|
||||
|
||||
## How It Works:
|
||||
The game automatically finds and uses ANY images you put in this folder!
|
||||
|
||||
## Supported Formats:
|
||||
- **JPG** (.jpg)
|
||||
- **JPEG** (.jpeg)
|
||||
- **PNG** (.png)
|
||||
- **GIF** (.gif) - Animated GIFs work too! 🎬
|
||||
|
||||
## Super Simple Usage:
|
||||
1. **Drop any images** into this `images/` folder
|
||||
2. **Use any filenames** you want - the game will find them
|
||||
3. **Start the game** - it will randomly select from your images
|
||||
|
||||
## Examples of what you can name your files:
|
||||
- `photo1.jpg`, `photo2.png`, `photo3.jpeg`, `funny.gif`
|
||||
- `cat.jpg`, `dog.png`, `sunset.jpeg`, `dance.gif`
|
||||
- `a.jpg`, `b.jpg`, `c.jpg`, `animated.gif`
|
||||
- `1.png`, `2.png`, `3.png`, `party.gif`
|
||||
- `random_image.jpg`, `my_pic.png`, `cool_animation.gif`
|
||||
- **ANY NAME YOU WANT!**
|
||||
|
||||
## Recommendations:
|
||||
- **Image Size**: 200x200 pixels works best
|
||||
- **GIFs**: Keep file sizes reasonable for smooth gameplay
|
||||
- **Add at least 3-5 images** for variety
|
||||
- **More images = more surprises!**
|
||||
- **Mix static and animated** for visual variety
|
||||
|
||||
## No Images?
|
||||
If no images are found, the game creates a placeholder automatically.
|
||||
|
||||
## That's it!
|
||||
No coding required - just add images and GIFs and play! 🎮✨
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
# Consequence Images Directory ⚠️
|
||||
|
||||
## Purpose:
|
||||
Images in this folder are used for **CONSEQUENCE TASKS** only (when you skip a main task).
|
||||
|
||||
## What Goes Here:
|
||||
- **Warning/Serious Images**: Photos that convey "you skipped, now face the consequence"
|
||||
- **Dramatic Images**: More intense or serious imagery
|
||||
- **Punishment Theme**: Images that match the consequence vibe
|
||||
|
||||
## Supported Formats:
|
||||
- JPG, JPEG, PNG, GIF (including animated GIFs)
|
||||
|
||||
## Examples:
|
||||
- Stern faces
|
||||
- Red warning signs
|
||||
- Dramatic scenes
|
||||
- "Oops" or "Uh oh" imagery
|
||||
- Serious expressions
|
||||
- Challenge-themed images
|
||||
|
||||
## Sample Filenames to Try:
|
||||
- `punishment1.jpg`
|
||||
- `consequence2.png`
|
||||
- `penalty3.gif`
|
||||
- `warning.jpg`
|
||||
- `oops.png`
|
||||
- `uhoh.gif`
|
||||
- `serious.jpg`
|
||||
|
||||
## File Naming:
|
||||
Use any filename you want - the game auto-discovers all supported image files!
|
||||
|
||||
## Fallback:
|
||||
If no consequence images are found, the game will use task images as a backup.
|
||||
|
||||
**Note**: These images appear when you skip tasks, so they should feel more serious or challenging than your regular task images! 😬
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"tasks": [
|
||||
"20210414_212141_1.jpg",
|
||||
"20210414_212151.jpg",
|
||||
"20210414_212157.jpg",
|
||||
"20210414_212202.jpg",
|
||||
"20210414_212317.jpg",
|
||||
"20210414_212317_1.jpg",
|
||||
"20210414_212332.jpg",
|
||||
"20210414_212406.jpg",
|
||||
"20210414_212442.jpg",
|
||||
"20210414_212442_1.jpg",
|
||||
"20210414_212450.jpg",
|
||||
"20210414_212455.jpg",
|
||||
"20210414_212500.jpg",
|
||||
"20210414_212506.jpg",
|
||||
"20210414_212545.jpg",
|
||||
"20210414_212600.jpg",
|
||||
"20210414_212602.jpg",
|
||||
"20210414_212602_1.jpg",
|
||||
"20210414_212756.jpg",
|
||||
"20210414_212802.jpg",
|
||||
"20210414_212812.jpg",
|
||||
"20210414_212814.jpg",
|
||||
"20210414_212815.jpg",
|
||||
"20210414_212824.jpg",
|
||||
"20210414_212831.jpg",
|
||||
"20210414_212831_1.jpg",
|
||||
"20210414_212832.jpg",
|
||||
"20210414_212905.jpg",
|
||||
"20210414_212923.jpg",
|
||||
"20210414_212927.jpg",
|
||||
"20210414_212929.jpg",
|
||||
"20210414_212929_1.jpg",
|
||||
"20210414_212935.jpg",
|
||||
"20210414_212949.jpg",
|
||||
"20210414_213001.jpg",
|
||||
"20210414_213003.jpg",
|
||||
"20210414_213030.jpg",
|
||||
"20210414_213033.jpg",
|
||||
"20210414_213035.jpg",
|
||||
"20210414_213046.jpg",
|
||||
"20210414_213049.jpg",
|
||||
"20210414_213051.jpg"
|
||||
],
|
||||
"consequences": [
|
||||
"IMG_20210226_212725.jpg",
|
||||
"IMG_20210226_212742.jpg",
|
||||
"IMG_6347_1.png",
|
||||
"IMG_6578.png",
|
||||
"IMG_6585.png",
|
||||
"IMG_6586.png"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# Task Images Directory 🎯
|
||||
|
||||
## Purpose:
|
||||
Images in this folder are used for **MAIN TASKS** only.
|
||||
|
||||
## What Goes Here:
|
||||
- **Positive/Fun Images**: Photos that feel encouraging or motivating
|
||||
- **Neutral Images**: General photos that work with any task
|
||||
- **Your Current Photos**: Move your existing photos here!
|
||||
|
||||
## Supported Formats:
|
||||
- JPG, JPEG, PNG, GIF (including animated GIFs)
|
||||
|
||||
## Examples:
|
||||
- Happy photos
|
||||
- Nature scenes
|
||||
- Fun activities
|
||||
- Motivational images
|
||||
- Cute animals
|
||||
- Beautiful landscapes
|
||||
|
||||
## Current Images:
|
||||
The game will look for your existing photos here. You can:
|
||||
1. **Move** your current photos from `images/` to `images/tasks/`
|
||||
2. **Copy** them (game checks both locations for backward compatibility)
|
||||
3. **Add new** task-appropriate images
|
||||
|
||||
## File Naming:
|
||||
Use any filename you want - the game auto-discovers all supported image files!
|
||||
|
||||
**Note**: These images appear when you get regular tasks, so pick images that feel positive and encouraging! 🌟
|
||||
|
|
@ -0,0 +1,381 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Task Challenge Game</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
<!-- Game Header -->
|
||||
<header class="game-header">
|
||||
<h1>Task Challenge</h1>
|
||||
<div class="timer-container">
|
||||
<span class="timer-label">Time:</span>
|
||||
<span id="timer" class="timer">00:00</span>
|
||||
<span id="timer-status" class="timer-status"></span>
|
||||
</div>
|
||||
<div class="music-controls">
|
||||
<button id="music-toggle" class="music-btn" title="Play/Pause Music">🎵</button>
|
||||
<button id="loop-btn" class="music-btn" title="Loop Off">🔁</button>
|
||||
<button id="shuffle-btn" class="music-btn" title="Shuffle Off">🔀</button>
|
||||
<select id="track-selector" class="track-dropdown" title="Select Music Track">
|
||||
<option value="0">Colorful Flowers</option>
|
||||
<option value="1">New Beginnings</option>
|
||||
<option value="2">Storm Clouds</option>
|
||||
<option value="3">Brunch For Two</option>
|
||||
</select>
|
||||
<div class="volume-control">
|
||||
<span class="volume-icon">🔊</span>
|
||||
<input type="range" id="volume-slider" min="0" max="100" value="30" class="volume-slider" title="Volume">
|
||||
<span class="volume-percent" id="volume-percent">30%</span>
|
||||
</div>
|
||||
<span class="music-status" id="music-status">Music: Off</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Game Content -->
|
||||
<main class="game-content">
|
||||
<!-- Start Screen -->
|
||||
<div id="start-screen" class="screen active">
|
||||
<h2>Ready to Start?</h2>
|
||||
<p>Complete tasks, but beware of skipping - there are consequences!</p>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div id="start-screen-status" class="status-message" style="display: none;"></div>
|
||||
|
||||
<!-- Theme Selector -->
|
||||
<div class="theme-selector">
|
||||
<label for="theme-dropdown" class="theme-label">Choose Your Vibe:</label>
|
||||
<select id="theme-dropdown" class="theme-dropdown">
|
||||
<option value="ocean">🌊 Ocean Blue</option>
|
||||
<option value="sunset">🌅 Warm Sunset</option>
|
||||
<option value="forest">🌲 Nature Green</option>
|
||||
<option value="midnight">🌙 Midnight Dark</option>
|
||||
<option value="pastel">🌸 Soft Pastel</option>
|
||||
<option value="neon">⚡ Neon Cyber</option>
|
||||
<option value="autumn">🍂 Autumn Vibes</option>
|
||||
<option value="monochrome">⚫ Monochrome</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Data Management -->
|
||||
<div class="data-controls">
|
||||
<button id="export-btn" class="btn btn-secondary" title="Export Save File">
|
||||
<span class="btn-text">💾 Export</span>
|
||||
<span class="btn-loading" style="display: none;">⏳ Exporting...</span>
|
||||
</button>
|
||||
<button id="import-btn" class="btn btn-secondary" title="Import Save File">
|
||||
<span class="btn-text">📁 Import</span>
|
||||
<span class="btn-loading" style="display: none;">⏳ Importing...</span>
|
||||
</button>
|
||||
<input type="file" id="import-file" accept=".json" style="display: none;">
|
||||
<button id="stats-btn" class="btn btn-secondary" title="View Statistics">📊 Stats</button>
|
||||
<button id="help-btn" class="btn btn-secondary" title="Keyboard Shortcuts & Help">❓ Help</button>
|
||||
</div>
|
||||
|
||||
<button id="start-btn" class="btn btn-primary">Start Game</button>
|
||||
<button id="manage-tasks-btn" class="btn btn-secondary">Manage Tasks</button>
|
||||
<button id="manage-images-btn" class="btn btn-secondary">Manage Images</button>
|
||||
</div>
|
||||
|
||||
<!-- Task Management Screen -->
|
||||
<div id="task-management-screen" class="screen">
|
||||
<h2>Manage Your Tasks</h2>
|
||||
|
||||
<!-- Add New Task Section -->
|
||||
<div class="task-editor-section">
|
||||
<h3>Add New Task</h3>
|
||||
<div class="task-input-group">
|
||||
<label for="new-task-text">Task Description:</label>
|
||||
<textarea id="new-task-text" placeholder="Enter your task description..." rows="3"></textarea>
|
||||
</div>
|
||||
<div class="task-input-group">
|
||||
<label for="new-task-type">Task Type:</label>
|
||||
<select id="new-task-type">
|
||||
<option value="main">Main Task</option>
|
||||
<option value="consequence">Consequence Task</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="task-input-group" id="difficulty-input-group">
|
||||
<label for="new-task-difficulty">Difficulty:</label>
|
||||
<select id="new-task-difficulty">
|
||||
<option value="Easy">🟢 Easy (1 point)</option>
|
||||
<option value="Medium" selected>🟡 Medium (3 points)</option>
|
||||
<option value="Hard">🔴 Hard (5 points)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="add-task-btn" class="btn btn-success">Add Task</button>
|
||||
</div>
|
||||
|
||||
<!-- Existing Tasks Section -->
|
||||
<div class="task-list-section">
|
||||
<h3>Your Tasks</h3>
|
||||
<div class="task-tabs">
|
||||
<button id="main-tasks-tab" class="tab-btn active">Main Tasks</button>
|
||||
<button id="consequence-tasks-tab" class="tab-btn">Consequence Tasks</button>
|
||||
</div>
|
||||
|
||||
<div id="main-tasks-list" class="task-list active">
|
||||
<!-- Main tasks will be populated here -->
|
||||
</div>
|
||||
|
||||
<div id="consequence-tasks-list" class="task-list">
|
||||
<!-- Consequence tasks will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="management-buttons">
|
||||
<button id="back-to-start-btn" class="btn btn-secondary">Back to Start</button>
|
||||
<button id="reset-tasks-btn" class="btn btn-warning">Reset to Defaults</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Management Screen -->
|
||||
<div id="image-management-screen" class="screen">
|
||||
<h2>Manage Your Images</h2>
|
||||
|
||||
<!-- Upload Section -->
|
||||
<div class="upload-section">
|
||||
<h3>Add New Images</h3>
|
||||
<div class="upload-controls">
|
||||
<button id="upload-images-btn" class="btn btn-primary">📁 Upload Images</button>
|
||||
<input type="file" id="image-upload-input" accept="image/*" multiple style="display: none;">
|
||||
<span class="upload-info">Supported formats: JPG, PNG, GIF, WebP</span>
|
||||
</div>
|
||||
<div class="directory-controls">
|
||||
<button id="scan-directories-btn" class="btn btn-secondary">🔍 Scan Directories for New Images</button>
|
||||
<button id="clear-image-cache-btn" class="btn btn-outline">🗑️ Clear Image Cache</button>
|
||||
<button id="storage-info-btn" class="btn btn-outline">📊 Storage Info</button>
|
||||
<span class="scan-info">Scans images/tasks/ and images/consequences/ folders</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Gallery Section -->
|
||||
<div class="gallery-section">
|
||||
<div class="gallery-header">
|
||||
<h3>Current Images</h3>
|
||||
<div class="gallery-controls">
|
||||
<button id="select-all-images-btn" class="btn btn-small">Select All</button>
|
||||
<button id="deselect-all-images-btn" class="btn btn-small">Deselect All</button>
|
||||
<button id="delete-selected-btn" class="btn btn-danger btn-small">Delete Selected</button>
|
||||
<span class="image-count">Loading images...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image Tabs -->
|
||||
<div class="image-tabs">
|
||||
<button id="task-images-tab" class="tab-btn active">Task Images</button>
|
||||
<button id="consequence-images-tab" class="tab-btn">Consequence Images</button>
|
||||
</div>
|
||||
|
||||
<div id="task-images-gallery" class="image-gallery active">
|
||||
<!-- Task images will be populated here -->
|
||||
</div>
|
||||
|
||||
<div id="consequence-images-gallery" class="image-gallery">
|
||||
<!-- Consequence images will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="management-buttons">
|
||||
<button id="back-to-start-from-images-btn" class="btn btn-secondary">Back to Start</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Screen -->
|
||||
<div id="game-screen" class="screen">
|
||||
<div class="task-container">
|
||||
<div class="task-type">
|
||||
<span id="task-type-indicator">MAIN TASK</span>
|
||||
<span id="task-difficulty" class="task-difficulty">MEDIUM</span>
|
||||
<span id="task-points" class="task-points">+3 pts</span>
|
||||
</div>
|
||||
|
||||
<div class="task-image-container">
|
||||
<img id="task-image" src="" alt="Task Image" class="task-image">
|
||||
</div>
|
||||
|
||||
<div class="task-text-container">
|
||||
<h3 id="task-text" class="task-text">Loading task...</h3>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button id="complete-btn" class="btn btn-success">Complete</button>
|
||||
<button id="skip-btn" class="btn btn-warning">Skip</button>
|
||||
<button id="mercy-skip-btn" class="btn btn-danger" style="display: none;">
|
||||
<span id="mercy-skip-text">Mercy Skip</span>
|
||||
<span id="mercy-skip-cost" class="mercy-cost"></span>
|
||||
</button>
|
||||
<button id="pause-btn" class="btn btn-info">Pause</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Score:</span>
|
||||
<span id="score" class="stat-value">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Completed:</span>
|
||||
<span id="completed-count" class="stat-value">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Skipped:</span>
|
||||
<span id="skipped-count" class="stat-value">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Consequences:</span>
|
||||
<span id="consequence-count" class="stat-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paused Screen -->
|
||||
<div id="paused-screen" class="screen">
|
||||
<h2>Game Paused</h2>
|
||||
<p>Take a break! Click resume when ready.</p>
|
||||
<button id="resume-btn" class="btn btn-primary">Resume</button>
|
||||
<button id="quit-btn" class="btn btn-secondary">Quit Game</button>
|
||||
</div>
|
||||
|
||||
<!-- Game Over Screen -->
|
||||
<div id="game-over-screen" class="screen">
|
||||
<h2>Game Complete!</h2>
|
||||
<div id="final-stats" class="final-stats">
|
||||
<p>Final Score: <span id="final-score"></span> points</p>
|
||||
<p>Final Time: <span id="final-time"></span></p>
|
||||
<p>Tasks Completed: <span id="final-completed"></span></p>
|
||||
<p>Tasks Skipped: <span id="final-skipped"></span></p>
|
||||
<p>Consequence Tasks: <span id="final-consequences"></span></p>
|
||||
</div>
|
||||
<button id="play-again-btn" class="btn btn-primary">Play Again</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="gameData.js"></script>
|
||||
<script src="game.js"></script>
|
||||
<!-- Statistics Modal -->
|
||||
<div id="stats-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>📊 Game Statistics</h2>
|
||||
<span class="close" id="close-stats">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>Games Played</h3>
|
||||
<div class="stat-value" id="stat-games">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Tasks Completed</h3>
|
||||
<div class="stat-value" id="stat-completed">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Best Score</h3>
|
||||
<div class="stat-value" id="stat-score">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Current Streak</h3>
|
||||
<div class="stat-value" id="stat-streak">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Completion Rate</h3>
|
||||
<div class="stat-value" id="stat-rate">0%</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Hours Played</h3>
|
||||
<div class="stat-value" id="stat-hours">0.0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-actions">
|
||||
<button id="reset-stats-btn" class="btn btn-warning">Reset Statistics</button>
|
||||
<button id="export-stats-btn" class="btn btn-secondary">
|
||||
<span class="btn-text">Export Stats Only</span>
|
||||
<span class="btn-loading" style="display: none;">⏳ Exporting...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Menu Modal -->
|
||||
<div id="help-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>⌨️ Keyboard Shortcuts & Help</h2>
|
||||
<span class="close" id="close-help">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="help-section">
|
||||
<h3>🎮 Game Controls</h3>
|
||||
<div class="shortcut-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">Enter</span>
|
||||
<span class="shortcut-action">Complete Current Task</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">Ctrl</span>
|
||||
<span class="shortcut-action">Skip Task (get consequence task)</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">Shift+Ctrl</span>
|
||||
<span class="shortcut-action">Mercy Skip (spend points to avoid consequence)</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">Space</span>
|
||||
<span class="shortcut-action">Pause/Resume Game</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">P</span>
|
||||
<span class="shortcut-action">Pause/Resume Game</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-section">
|
||||
<h3>🎵 Music Controls</h3>
|
||||
<div class="shortcut-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">M</span>
|
||||
<span class="shortcut-action">Toggle Music On/Off</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-section">
|
||||
<h3>🧭 Navigation</h3>
|
||||
<div class="shortcut-list">
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">Escape</span>
|
||||
<span class="shortcut-action">Close Modals / Back / Pause Game</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<span class="shortcut-key">H</span>
|
||||
<span class="shortcut-action">Show/Hide This Help Menu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-section">
|
||||
<h3>💡 Tips</h3>
|
||||
<ul class="help-tips">
|
||||
<li>Use Enter and Ctrl for lightning-fast task progression</li>
|
||||
<li>Ctrl gives you a consequence task - complete it to save points!</li>
|
||||
<li>Shift+Ctrl spends points for mercy skip - use strategically</li>
|
||||
<li>Choose your skipping strategy: face the consequence or pay points</li>
|
||||
<li>Shortcuts are disabled when typing in input fields</li>
|
||||
<li>The game auto-saves when paused and offers to resume</li>
|
||||
<li>Export your progress regularly to avoid data loss</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue