GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Integrate desktop file manager with UI 

Updates:
- Enhanced setupImageManagementEventListeners with desktop import buttons
- Added event handlers for Import Task Images and Import Consequence Images
- Integrated desktop file manager scanning with existing scan button
- Added desktop-specific CSS styling and responsive layouts
- Implemented desktop/web mode detection and UI adaptation

Desktop Features:
- Native file import dialogs for task and consequence images
- Seamless integration with existing image management system
- Desktop-optimized button layouts and hover effects
- Automatic UI adaptation based on Electron vs browser detection

UI Improvements:
- Enhanced button styling for desktop application
- Responsive upload controls with proper spacing
- Desktop-only elements hidden in web mode
- Professional desktop application appearance
This commit is contained in:
fritzsenpai 2025-09-25 20:11:10 -05:00
parent 8e7cf0d4bf
commit 1aed657e74
3 changed files with 4234 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
game.js
View File

@ -928,6 +928,11 @@ class TaskChallengeGame {
const taskImagesTab = document.getElementById('task-images-tab');
const consequenceImagesTab = document.getElementById('consequence-images-tab');
// Desktop-specific buttons
const importTaskBtn = document.getElementById('import-task-images-btn');
const importConsequenceBtn = document.getElementById('import-consequence-images-btn');
const openFoldersBtn = document.getElementById('open-image-folders-btn');
// Clone and replace to remove existing listeners
if (backBtn) {
const newBackBtn = backBtn.cloneNode(true);
@ -935,6 +940,47 @@ class TaskChallengeGame {
newBackBtn.addEventListener('click', () => this.showScreen('start-screen'));
}
// Desktop import buttons
if (importTaskBtn) {
const newImportTaskBtn = importTaskBtn.cloneNode(true);
importTaskBtn.parentNode.replaceChild(newImportTaskBtn, importTaskBtn);
newImportTaskBtn.addEventListener('click', async () => {
if (this.fileManager) {
await this.fileManager.selectAndImportImages('task');
this.updateImageGallery();
} else {
this.showNotification('Desktop file manager not available', 'warning');
}
});
}
if (importConsequenceBtn) {
const newImportConsequenceBtn = importConsequenceBtn.cloneNode(true);
importConsequenceBtn.parentNode.replaceChild(newImportConsequenceBtn, importConsequenceBtn);
newImportConsequenceBtn.addEventListener('click', async () => {
if (this.fileManager) {
await this.fileManager.selectAndImportImages('consequence');
this.updateImageGallery();
} else {
this.showNotification('Desktop file manager not available', 'warning');
}
});
}
if (openFoldersBtn) {
const newOpenFoldersBtn = openFoldersBtn.cloneNode(true);
openFoldersBtn.parentNode.replaceChild(newOpenFoldersBtn, openFoldersBtn);
newOpenFoldersBtn.addEventListener('click', async () => {
if (this.fileManager) {
await this.fileManager.openImageDirectory('task');
await this.fileManager.openImageDirectory('consequence');
} else {
this.showNotification('Desktop file manager not available', 'warning');
}
});
}
// Original web upload button (fallback)
if (uploadBtn) {
const newUploadBtn = uploadBtn.cloneNode(true);
uploadBtn.parentNode.replaceChild(newUploadBtn, uploadBtn);
@ -944,7 +990,16 @@ class TaskChallengeGame {
if (scanBtn) {
const newScanBtn = scanBtn.cloneNode(true);
scanBtn.parentNode.replaceChild(newScanBtn, scanBtn);
newScanBtn.addEventListener('click', () => this.scanForNewImages());
newScanBtn.addEventListener('click', async () => {
if (this.fileManager) {
// Use desktop file manager scanning
await this.fileManager.scanAllDirectories();
this.updateImageGallery();
} else {
// Fallback to web scanning
this.scanForNewImages();
}
});
}
if (clearCacheBtn) {

4098
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

80
styles.css
View File

@ -358,6 +358,86 @@ body {
50% { height: 16px; }
}
/* Desktop Application Styles */
.desktop-mode .upload-controls {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.desktop-mode .upload-controls .btn {
flex: 1;
min-width: 180px;
}
.desktop-only {
display: none;
}
.desktop-mode .desktop-only {
display: inline-block;
}
.desktop-feature {
display: none;
}
.desktop-mode .desktop-feature {
display: inline;
}
.web-feature {
display: inline;
}
.desktop-mode .web-feature {
display: none;
}
/* Enhanced button styling for desktop */
.desktop-mode .btn {
padding: 12px 20px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
transition: all 0.2s ease;
}
.desktop-mode .btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.desktop-mode .btn-primary {
background: linear-gradient(135deg, #007bff, #0056b3);
border: none;
color: white;
}
.desktop-mode .btn-warning {
background: linear-gradient(135deg, #ffc107, #e0a800);
border: none;
color: #212529;
}
/* Desktop-specific upload section */
.desktop-mode .upload-section h3 {
color: var(--primary-color);
margin-bottom: 15px;
font-size: 18px;
display: flex;
align-items: center;
gap: 8px;
}
.desktop-mode .upload-info {
font-size: 13px;
color: var(--text-secondary);
font-style: italic;
margin-top: 8px;
}
/* Responsive design for music controls */
@media (max-width: 768px) {
.game-header {