ADD: Webcam photo capture button to Quick Play
ADDED: Quick Play webcam functionality - Added Photo button to Quick Play header controls for easy access - Integrated WebcamManager with Quick Play for photo capture sessions - Simple one-photo session with progress tracking and user-friendly interface - Photos stored locally with user consent (privacy-first approach) IMPLEMENTED: XP rewards for webcam usage - 1 XP awarded for opening webcam (encourages feature usage) - 2 XP bonus awarded for completing photo session (total 3 XP per photo) - XP updates both session stats and game state for consistency - Console logging for debugging and user feedback FEATURES: Full webcam integration - Uses existing WebcamManager.js with startPhotoSessionWithProgress() - Photo session includes countdown timer, guidelines, and preview - Captured photos saved to localStorage with metadata - Event-driven completion handling with photoSessionComplete listener - Error handling for camera permissions and initialization failures RESULT: Easy photo capture during Quick Play sessions with XP rewards - Button available throughout gameplay for spontaneous photo capture - Maintains existing webcam functionality and privacy controls - Enhances engagement and provides additional XP earning opportunity
This commit is contained in:
dilgenfritz
parent
0615672872
commit
c93be4416e
|
|
@ -1,183 +0,0 @@
|
|||
# Annoyance Management System - Complete Settings Documentation
|
||||
|
||||
## Overview
|
||||
The "Annoyance Management" system (currently named, planned to be renamed to "Settings") is a configuration interface for importing and exporting message data.
|
||||
|
||||
## Tab Structure
|
||||
|
||||
### 1. 💬 Messages Tab
|
||||
**Purpose**: Manage motivational flash messages that appear during gameplay
|
||||
|
||||
#### Message Management
|
||||
- **Enable Flash Messages** (checkbox) - Master toggle for all flash messages
|
||||
- **Add Message Button** - Create new custom messages
|
||||
|
||||
#### Message Editor
|
||||
- **Message Text** (textarea, 200 char limit) - The actual message content
|
||||
- **Category** (dropdown):
|
||||
- 💪 Motivational
|
||||
- 🌟 Encouraging
|
||||
- 🏆 Achievement
|
||||
- 🔥 Persistence
|
||||
- ✨ Custom
|
||||
- **Priority** (dropdown):
|
||||
- Normal
|
||||
- High
|
||||
- Low
|
||||
|
||||
#### Message List Controls
|
||||
- **Category Filter** (dropdown) - Filter messages by category (All, Motivational, Encouraging, Achievement, Persistence, Custom)
|
||||
- **Show Disabled Messages** (checkbox) - Include disabled messages in list
|
||||
- **Message Stats Display** - Shows count of total/enabled/disabled messages
|
||||
|
||||
---
|
||||
|
||||
### 2. 🎨 Appearance Tab
|
||||
**Purpose**: Customize visual appearance of flash messages
|
||||
|
||||
#### Position & Animation
|
||||
- **Position** (dropdown):
|
||||
- Center
|
||||
- Top Center
|
||||
- Bottom Center
|
||||
- Top Left
|
||||
- Top Right
|
||||
- Bottom Left
|
||||
- Bottom Right
|
||||
- Center Left
|
||||
- Center Right
|
||||
- **Animation** (dropdown):
|
||||
- Fade
|
||||
- Slide
|
||||
- Bounce
|
||||
- Pulse
|
||||
|
||||
#### Visual Styling
|
||||
- **Font Size** (slider: 16px-48px, default: 24px)
|
||||
- **Opacity** (slider: 50%-100%, default: 90%)
|
||||
- **Text Color** (color picker, default: #ffffff)
|
||||
- **Background Color** (color picker, default: #007bff)
|
||||
|
||||
#### Controls
|
||||
- **Reset to Defaults Button** - Restore default appearance settings
|
||||
- **Preview Style Button** - Test current appearance settings
|
||||
|
||||
---
|
||||
|
||||
### 3. ⚡ Behavior Tab
|
||||
**Purpose**: Configure timing and behavior of flash messages
|
||||
|
||||
#### Core Behavior Settings
|
||||
- **Focus Interruption Chance** (slider: 0%-50%, default: 0%)
|
||||
- Chance for focus-hold interruptions during scenario adventures
|
||||
- 0% = disabled, max 50%
|
||||
- **Display Duration** (slider: 1.0s-10.0s, default: 3.0s)
|
||||
- **Interval Between Messages** (slider: 10s-300s, default: 45s)
|
||||
- **Random Variation** (slider: 0s-30s, default: ±5s)
|
||||
- Adds random time variation to prevent predictability
|
||||
|
||||
#### Advanced Options
|
||||
- **Enable Event-Based Messages** (checkbox, default: checked)
|
||||
- Show special messages for task completion, streaks, etc.
|
||||
- **Pause Timer on Message Hover** (checkbox, default: unchecked)
|
||||
- Pause message fade when hovering (useful for reading)
|
||||
|
||||
#### Testing
|
||||
- **Test Current Settings Button** - Preview behavior with current settings
|
||||
|
||||
---
|
||||
|
||||
### 4. 🖼️ Popup Images Tab
|
||||
**Purpose**: Configure punishment popups that appear when tasks are skipped
|
||||
|
||||
#### Master Control
|
||||
- **Enable Punishment Popups** (toggle switch)
|
||||
|
||||
#### Image Count Settings
|
||||
- **Count Mode** (dropdown):
|
||||
- Fixed Amount
|
||||
- Random (1-10)
|
||||
- Custom Range
|
||||
- **Number of Images** (slider: 1-40, default: 3) - for Fixed mode
|
||||
- **Custom Range** (number inputs) - Min: 1-20, Max: 2-40
|
||||
|
||||
#### Display Duration Settings
|
||||
- **Duration Mode** (dropdown):
|
||||
- Fixed Duration
|
||||
- Random (5-15s)
|
||||
- Custom Range
|
||||
- **Duration** (slider: 3s-30s, default: 8s) - for Fixed mode
|
||||
- **Custom Range** (number inputs) - Min: 2-20s, Max: 5-60s
|
||||
|
||||
#### Positioning & Layout
|
||||
- **Layout Style** (dropdown):
|
||||
- Random Positions
|
||||
- Cascading
|
||||
- Grid Layout
|
||||
- Center (stacked)
|
||||
- **Allow Overlapping** (toggle switch)
|
||||
|
||||
#### Size Settings
|
||||
- **Max Viewport Width** (slider: 20%-60%, default: 35%)
|
||||
- **Max Viewport Height** (slider: 20%-60%, default: 40%)
|
||||
- **Min Width** (number input: 150-400px, default: 200px)
|
||||
- **Max Width** (number input: 300-800px, default: 500px)
|
||||
- **Min Height** (number input: 100-300px, default: 150px)
|
||||
- **Max Height** (number input: 200-600px, default: 400px)
|
||||
|
||||
#### Visual Effects
|
||||
- **Fade In/Out Animation** (toggle switch)
|
||||
- **Blur Background** (toggle switch)
|
||||
- **Show Countdown Timer** (toggle switch)
|
||||
- **Prevent Manual Close** (toggle switch)
|
||||
|
||||
#### Testing & Status
|
||||
- **Test 1 Popup Button** - Test single popup
|
||||
- **Test Multiple Button** - Test multiple popups
|
||||
- **Clear All Button** - Remove all active popups
|
||||
- **Available Images Count** - Display count of available images
|
||||
- **Active Popups Count** - Display count of currently active popups
|
||||
|
||||
---
|
||||
|
||||
### 5. 📁 Import/Export
|
||||
**Purpose**: Backup, share, and manage message configurations
|
||||
|
||||
#### Export Options
|
||||
- **Export All Messages Button** - Export complete message set
|
||||
- **Export Enabled Only Button** - Export only active messages
|
||||
- **Export Custom Only Button** - Export only user-created messages
|
||||
|
||||
#### Import Options
|
||||
- **Import Messages Button** - Load messages from file
|
||||
- **File Input** - JSON file selection
|
||||
- **Import Mode** (radio buttons):
|
||||
- Merge with existing (default)
|
||||
- Replace all messages
|
||||
|
||||
#### Reset Options
|
||||
- **Reset to Default Messages Button** - Restore original message set
|
||||
- **Clear All Messages Button** - Remove all messages (⚠️ Warning: Cannot be undone)
|
||||
|
||||
---
|
||||
|
||||
## Global Controls
|
||||
- **Back to Start Button** - Return to main menu
|
||||
- **Save All Settings Button** - Apply and save all configuration changes
|
||||
|
||||
---
|
||||
|
||||
## Technical Notes
|
||||
- All settings are persisted to localStorage
|
||||
- Flash messages use the FlashMessageManager class
|
||||
- Popup images use the PopupImageManager class
|
||||
|
||||
- Import/Export uses JSON format for data portability
|
||||
- Settings are organized in a tabbed interface for better UX
|
||||
|
||||
## Recommended Improvements
|
||||
1. **Rename "Annoyance" to "Settings"** - More user-friendly terminology
|
||||
2. **Add tooltips** - Better explain complex settings
|
||||
3. **Preview functionality** - Real-time preview for all visual settings
|
||||
4. **Preset configurations** - Quick setup options for different use cases
|
||||
5. **Advanced scheduling** - Time-based message scheduling
|
||||
|
|
@ -53,6 +53,7 @@
|
|||
</div>
|
||||
<div class="nav-right quick-play-controls">
|
||||
<button id="back-to-home" class="btn btn-secondary">🏠 Home</button>
|
||||
<button id="quick-play-webcam-btn" class="btn btn-info" title="Take a photo with webcam">📸 Photo</button>
|
||||
<button id="force-exit" class="btn btn-danger" title="Force close application">❌ Force Exit</button>
|
||||
<button id="pause-game-btn" class="btn btn-secondary" style="display: none;">⏸️ Pause</button>
|
||||
</div>
|
||||
|
|
@ -1303,6 +1304,26 @@
|
|||
initializeTagSelectors();
|
||||
console.log('✅ Tag selectors initialized');
|
||||
|
||||
// Add webcam photo session completion listener
|
||||
document.addEventListener('photoSessionComplete', (event) => {
|
||||
console.log('📸 Photo session completed in Quick Play', event.detail);
|
||||
|
||||
// Award bonus XP for completing photo session (2 XP)
|
||||
const bonusXP = 2;
|
||||
if (sessionStats) {
|
||||
sessionStats.xp += bonusXP;
|
||||
updateSessionDisplay();
|
||||
}
|
||||
|
||||
// Update game state if available
|
||||
if (gameInstance && gameInstance.gameState) {
|
||||
gameInstance.gameState.xp = (gameInstance.gameState.xp || 0) + bonusXP;
|
||||
updateGameStatus({ xp: gameInstance.gameState.xp });
|
||||
}
|
||||
|
||||
console.log(`📸 Awarded ${bonusXP} bonus XP for completing photo session`);
|
||||
});
|
||||
|
||||
// Hide loading overlay
|
||||
setTimeout(() => {
|
||||
const loadingOverlay = document.getElementById('quick-play-loading');
|
||||
|
|
@ -1964,6 +1985,16 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Webcam photo button
|
||||
const webcamBtn = document.getElementById('quick-play-webcam-btn');
|
||||
if (webcamBtn) {
|
||||
webcamBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
console.log('Webcam photo button clicked');
|
||||
openQuickPlayWebcam();
|
||||
});
|
||||
}
|
||||
|
||||
// Setup screen interactions
|
||||
setupSetupScreenListeners();
|
||||
|
||||
|
|
@ -4213,6 +4244,59 @@
|
|||
}, 100); // Small delay to ensure cleanup completes
|
||||
}
|
||||
|
||||
async function openQuickPlayWebcam() {
|
||||
console.log('📸 Opening Quick Play webcam');
|
||||
|
||||
try {
|
||||
// Initialize webcam manager if not already done
|
||||
if (!window.webcamManager) {
|
||||
if (typeof WebcamManager !== 'undefined') {
|
||||
window.webcamManager = new WebcamManager(gameInstance);
|
||||
await window.webcamManager.init();
|
||||
} else {
|
||||
console.warn('WebcamManager not available');
|
||||
alert('📸 Webcam functionality not available. Please ensure camera permissions are granted.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Create simple photo session for Quick Play
|
||||
const sessionData = {
|
||||
type: 'quick-play-photo',
|
||||
requirements: {
|
||||
count: 1,
|
||||
description: 'Take a photo to document your Quick Play session'
|
||||
}
|
||||
};
|
||||
|
||||
// Start photo session
|
||||
const success = await window.webcamManager.startPhotoSessionWithProgress('quick-play', sessionData);
|
||||
|
||||
if (success) {
|
||||
console.log('✅ Webcam photo session started');
|
||||
|
||||
// Award XP for using webcam feature (1 XP)
|
||||
if (sessionStats) {
|
||||
sessionStats.xp += 1;
|
||||
updateSessionDisplay();
|
||||
}
|
||||
|
||||
// Update game state if available
|
||||
if (gameInstance && gameInstance.gameState) {
|
||||
gameInstance.gameState.xp = (gameInstance.gameState.xp || 0) + 1;
|
||||
updateGameStatus({ xp: gameInstance.gameState.xp });
|
||||
}
|
||||
|
||||
} else {
|
||||
console.warn('Failed to start webcam photo session');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error opening webcam:', error);
|
||||
alert('📸 Failed to open webcam. Please check camera permissions and try again.');
|
||||
}
|
||||
}
|
||||
|
||||
function showErrorDialog(message) {
|
||||
alert(`❌ Error: ${message}`);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue