COMPLETE: Remove annoyance management + implement theme system

REMOVED ANNOYANCE MANAGEMENT:
- Deleted entire annoyance-management-screen from index.html
- Removed manage-annoyance-btn from start screen navigation
- Deleted all annoyance management methods from game.js:
  - showAnnoyanceManagement()
  - setupAnnoyanceManagementEventListeners()
  - showAnnoyanceTab()
  - saveAllAnnoyanceSettings()
  - loadAnnoyanceSettings()
  - getCurrentAnnoyanceTab()
- Updated remaining method references to work without annoyance tabs

 ORGANIZED HENTAI IMAGES:
- Hentai images already properly organized in assets/hentai/ directory
- Pornstar images confirmed in assets/pornstars/ directory
- Updated default image paths to use assets/hentai/ subdirectory

 IMPLEMENTED THEME SYSTEM:
- Added theme dropdown to options menu with 3 options:
  -  Hentai (default)
  -  Pornstars
  -  None (hides all side images)
- Created JavaScript theme switching functionality:
  - applyTheme() function dynamically updates image paths
  - Saves theme preference to localStorage
  - Loads saved theme on page load
  - Maps character positions to correct image numbers
- Updated character-side elements to use theme-based paths

 RESULT: Clean interface with working theme system
- Annoyance management completely removed from UI and code
- Side images now dynamically switch between hentai/pornstars/none
- Theme preference persisted across sessions
- No broken references or dead UI elements
This commit is contained in:
dilgenfritz 2025-11-08 18:30:17 -06:00
parent 1c129de6f6
commit c674f60c1d
2 changed files with 66 additions and 124 deletions

View File

@ -39,16 +39,16 @@
<div class="game-container">
<!-- Side Characters -->
<div class="character-side left" style="background-image: url('assets/1.png'); top: 15%;"></div>
<div class="character-side right" style="background-image: url('assets/11.png'); top: 20%;"></div>
<div class="character-side left" style="background-image: url('assets/3.png'); top: 35%; left: -40px;"></div>
<div class="character-side right" style="background-image: url('assets/4.png'); top: 40%; right: -40px;"></div>
<div class="character-side left" style="background-image: url('assets/5.png'); top: 55%; left: -30px;"></div>
<div class="character-side right" style="background-image: url('assets/6.png'); top: 60%; right: -35px;"></div>
<div class="character-side left" style="background-image: url('assets/7.png'); top: 75%; left: -35px;"></div>
<div class="character-side right" style="background-image: url('assets/8.png'); top: 80%; right: -30px;"></div>
<div class="character-side left" style="background-image: url('assets/9.png'); top: 90%; left: -25px;"></div>
<div class="character-side right" style="background-image: url('assets/10.png'); top: 95%; right: -25px;"></div>
<div class="character-side left" style="background-image: url('assets/hentai/1.png'); top: 15%;"></div>
<div class="character-side right" style="background-image: url('assets/hentai/11.png'); top: 20%;"></div>
<div class="character-side left" style="background-image: url('assets/hentai/3.png'); top: 35%; left: -40px;"></div>
<div class="character-side right" style="background-image: url('assets/hentai/4.png'); top: 40%; right: -40px;"></div>
<div class="character-side left" style="background-image: url('assets/hentai/5.png'); top: 55%; left: -30px;"></div>
<div class="character-side right" style="background-image: url('assets/hentai/6.png'); top: 60%; right: -35px;"></div>
<div class="character-side left" style="background-image: url('assets/hentai/7.png'); top: 75%; left: -35px;"></div>
<div class="character-side right" style="background-image: url('assets/hentai/8.png'); top: 80%; right: -30px;"></div>
<div class="character-side left" style="background-image: url('assets/hentai/9.png'); top: 90%; left: -25px;"></div>
<div class="character-side right" style="background-image: url('assets/hentai/10.png'); top: 95%; right: -25px;"></div>
<!-- Game Header -->
<header class="game-header hero-header">
@ -174,8 +174,6 @@
<!-- Secondary Action Buttons -->
<div class="main-actions">
<button id="user-profile-btn" class="btn btn-secondary">👤 Profile</button>
<button id="manage-annoyance-btn" class="btn btn-secondary">😈 Annoyance</button>
</div>
<!-- Options Menu -->
@ -184,9 +182,11 @@
<div id="options-menu" class="options-menu" style="display: none;">
<!-- Theme Selector -->
<div class="option-item theme-selector">
<label for="theme-dropdown" class="option-label">Choose Your Vibe:</label>
<label for="theme-dropdown" class="option-label">Choose Your Theme:</label>
<select id="theme-dropdown" class="theme-dropdown">
<option value="balanced-purple" selected>💜 Balanced Purple (Default)</option>
<option value="hentai" selected>🎭 Hentai</option>
<option value="pornstars">⭐ Pornstars</option>
<option value="none">🚫 None</option>
</select>
</div>
@ -799,58 +799,6 @@
</div>
</div>
<!-- Annoyance Management Screen -->
<div id="annoyance-management-screen" class="screen">
<h2>😈 Annoyance Management</h2>
<p>Manage message import/export and data settings.</p>
<p><strong>Note:</strong> Flash messages and popup images have been moved to Quick Play settings.</p>
<!-- Import/Export Content -->
<div class="annoyance-section">
<h3>📁 Import & Export</h3>
<div class="import-export-controls">
<div class="control-section">
<h4>💾 Export Messages</h4>
<div class="export-options">
<button id="export-all-messages-btn" class="btn btn-primary">Export All Messages</button>
<button id="export-enabled-messages-btn" class="btn btn-secondary">Export Enabled Only</button>
<button id="export-custom-messages-btn" class="btn btn-info">Export Custom Only</button>
</div>
<p class="help-text">Export your messages as a JSON file for backup or sharing</p>
</div>
<div class="control-section">
<h4><EFBFBD> Import Messages</h4>
<div class="import-options">
<button id="import-messages-btn" class="btn btn-success">Import Messages</button>
<input type="file" id="import-messages-file" accept=".json" style="display: none;">
<div class="import-mode">
<label>Import Mode:</label>
<div class="radio-group">
<label><input type="radio" name="importMode" value="merge" checked> Merge with existing</label>
<label><input type="radio" name="importMode" value="replace"> Replace all messages</label>
</div>
</div>
</div>
<p class="help-text">Import messages from a JSON file</p>
</div>
<div class="control-section">
<h4>🔄 Reset Options</h4>
<div class="reset-options">
<button id="reset-to-defaults-btn" class="btn btn-warning">Reset to Default Messages</button>
<button id="clear-all-messages-btn" class="btn btn-danger">Clear All Messages</button>
</div>
<p class="help-text danger">⚠️ Reset operations cannot be undone!</p>
</div>
</div>
</div>
</div>
<div class="management-buttons">
<button id="back-to-start-from-annoyance-btn" class="btn btn-secondary">Back to Start</button>
<button id="save-annoyance-settings" class="btn btn-primary">Save All Settings</button>
</div>
</div>
<!-- Library Screen -->
<div id="library-screen" class="screen">
<h2>📚 Media Library</h2>
@ -1325,8 +1273,53 @@
<script src="src/utils/desktop-file-manager.js"></script>
<script src="src/core/game.js"></script>
<script>
// Theme switching functionality
function applyTheme(theme) {
console.log('Applying theme:', theme);
const characterSides = document.querySelectorAll('.character-side');
characterSides.forEach((element, index) => {
if (theme === 'none') {
element.style.display = 'none';
} else {
element.style.display = 'block';
// Map element positions to image numbers
const imageNumbers = [1, 11, 3, 4, 5, 6, 7, 8, 9, 10];
const imageNumber = imageNumbers[index];
if (imageNumber) {
const imagePath = `assets/${theme}/${imageNumber}.png`;
element.style.backgroundImage = `url('${imagePath}')`;
}
}
});
// Save theme preference
localStorage.setItem('selectedTheme', theme);
}
// Initialize theme dropdown functionality
function initializeThemeDropdown() {
const themeDropdown = document.getElementById('theme-dropdown');
if (themeDropdown) {
// Load saved theme preference
const savedTheme = localStorage.getItem('selectedTheme') || 'hentai';
themeDropdown.value = savedTheme;
applyTheme(savedTheme);
// Handle theme changes
themeDropdown.addEventListener('change', (e) => {
applyTheme(e.target.value);
});
}
}
// Initialize application when page loads
window.addEventListener('load', () => {
// Initialize theme dropdown
initializeThemeDropdown();
setTimeout(() => {
if (window.forceFixGame) {
window.forceFixGame();

View File

@ -1830,8 +1830,7 @@ class TaskChallengeGame {
// Photo gallery management
safeAddListener('photo-gallery-btn', 'click', () => this.showPhotoGallery());
// Annoyance management - main button and basic controls
safeAddListener('manage-annoyance-btn', 'click', () => this.showAnnoyanceManagement());
// Load saved theme
this.loadSavedTheme();
@ -7359,48 +7358,7 @@ TaskChallengeGame.prototype.savePhotoSettings = function() {
this.webcamManager.showNotification('Photo settings saved', 'success');
};
// Annoyance Management Methods - Phase 2: Advanced Message Management
TaskChallengeGame.prototype.showAnnoyanceManagement = function() {
this.showScreen('annoyance-management-screen');
this.setupAnnoyanceManagementEventListeners();
this.loadAnnoyanceSettings();
this.showAnnoyanceTab('messages'); // Default to messages tab
};
TaskChallengeGame.prototype.setupAnnoyanceManagementEventListeners = function() {
// Back button
const backBtn = document.getElementById('back-to-start-from-annoyance-btn');
if (backBtn) {
backBtn.onclick = () => this.showScreen('start-screen');
}
// Save settings button
const saveBtn = document.getElementById('save-annoyance-settings');
if (saveBtn) {
saveBtn.onclick = () => this.saveAllAnnoyanceSettings();
}
// Tab navigation
document.getElementById('messages-tab').onclick = () => this.showAnnoyanceTab('messages');
this.setupImportExportTabListeners();
};
TaskChallengeGame.prototype.showAnnoyanceTab = function(tabName) {
// Update tab buttons
document.querySelectorAll('.annoyance-tab').forEach(tab => tab.classList.remove('active'));
document.getElementById(`${tabName}-tab`).classList.add('active');
// Update tab content
document.querySelectorAll('.annoyance-tab-content').forEach(content => content.classList.remove('active'));
document.getElementById(`${tabName}-tab-content`).classList.add('active');
// Load tab-specific content
switch(tabName) {
case 'import-export':
this.loadImportExportTab();
break;
}
};
// Messages Tab Management
TaskChallengeGame.prototype.setupMessagesTabListeners = function() {
@ -8293,7 +8251,8 @@ TaskChallengeGame.prototype.handleMessageImport = function(event) {
if (result.success) {
this.showNotification(`✅ Successfully imported ${result.imported} messages (${result.total} total)`, 'success');
if (this.getCurrentAnnoyanceTab() === 'messages') {
// Refresh message list if needed
if (typeof this.refreshMessageList === 'function') {
this.refreshMessageList();
}
} else {
@ -8313,7 +8272,8 @@ TaskChallengeGame.prototype.resetMessagesToDefaults = function() {
if (confirm('Reset to default messages? This will remove all custom messages and cannot be undone.')) {
const result = this.flashMessageManager.resetToDefaults();
this.showNotification(`✅ Reset to ${result.messages} default messages`, 'success');
if (this.getCurrentAnnoyanceTab() === 'messages') {
// Refresh message list if needed
if (typeof this.refreshMessageList === 'function') {
this.refreshMessageList();
}
}
@ -8323,7 +8283,8 @@ TaskChallengeGame.prototype.clearAllMessages = function() {
if (confirm('Clear ALL messages? This will remove every message and cannot be undone. You will need to import messages to use the flash message system.')) {
this.flashMessageManager.updateMessages([]);
this.showNotification('⚠️ All messages cleared', 'warning');
if (this.getCurrentAnnoyanceTab() === 'messages') {
// Refresh message list if needed
if (typeof this.refreshMessageList === 'function') {
this.refreshMessageList();
}
}
@ -8337,19 +8298,7 @@ TaskChallengeGame.prototype.updateFlashMessageSetting = function(setting, value)
console.log(`Updated flash message setting: ${setting} = ${value}`);
};
TaskChallengeGame.prototype.saveAllAnnoyanceSettings = function() {
this.showNotification('✅ All annoyance settings saved!', 'success');
};
TaskChallengeGame.prototype.loadAnnoyanceSettings = function() {
// This method is called when the annoyance screen first loads
// Individual tabs will load their specific settings when shown
};
TaskChallengeGame.prototype.getCurrentAnnoyanceTab = function() {
const activeTab = document.querySelector('.annoyance-tab.active');
return activeTab ? activeTab.id.replace('-tab', '') : 'messages';
};
TaskChallengeGame.prototype.downloadFile = function(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });