+
-
+
+
+
+
+
+
-
+
+
- '''.replace('{version}', config.app_version)
+ '''
+ return (html
+ .replace('__CSS_VERSION__', css_version)
+ .replace('__JS_VERSION__', js_version)
+ .replace('{version}', config.app_version))
def run_server(host='0.0.0.0', port=5000):
diff --git a/ports/RGSX/static/css/accessibility.css b/ports/RGSX/static/css/accessibility.css
new file mode 100644
index 0000000..99e71e8
--- /dev/null
+++ b/ports/RGSX/static/css/accessibility.css
@@ -0,0 +1,241 @@
+/* ===== ACCESSIBILITY & FOCUS MANAGEMENT ===== */
+
+/* Focus visible - show focus for keyboard navigation only */
+:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+:focus-visible {
+ outline: 3px solid var(--color-primary);
+ outline-offset: 2px;
+ border-radius: var(--radius-sm);
+}
+
+/* Skip to main content link (keyboard accessible) */
+.skip-to-main {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: var(--color-primary);
+ color: white;
+ padding: var(--spacing-md) var(--spacing-lg);
+ text-decoration: none;
+ z-index: var(--z-tooltip);
+ border-radius: var(--radius-sm);
+}
+
+.skip-to-main:focus {
+ top: 0;
+}
+
+/* Visually hidden but accessible to screen readers */
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+/* ===== LOADING SKELETONS ===== */
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--color-bg-secondary) 0%,
+ var(--color-bg-tertiary) 50%,
+ var(--color-bg-secondary) 100%
+ );
+ background-size: 1000px 100%;
+ animation: shimmer 2s infinite;
+}
+
+.skeleton-card {
+ background: var(--color-bg-primary);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ margin-bottom: var(--spacing-lg);
+ border: 1px solid var(--color-border-light);
+}
+
+.skeleton-card::before {
+ content: '';
+ display: block;
+ width: 100%;
+ height: 200px;
+ background: var(--color-bg-secondary);
+ border-radius: var(--radius-md);
+ margin-bottom: var(--spacing-md);
+ animation: shimmer 2s infinite;
+}
+
+.skeleton-card::after {
+ content: '';
+ display: block;
+ width: 80%;
+ height: 16px;
+ background: var(--color-bg-secondary);
+ border-radius: var(--radius-sm);
+ animation: shimmer 2s infinite;
+}
+
+.skeleton-text {
+ height: 1em;
+ background: var(--color-bg-secondary);
+ border-radius: var(--radius-sm);
+ margin: var(--spacing-md) 0;
+ animation: shimmer 2s infinite;
+}
+
+.skeleton-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--color-bg-secondary);
+ display: inline-block;
+ animation: shimmer 2s infinite;
+}
+
+/* Grid of skeleton cards */
+.skeleton-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: var(--spacing-lg);
+ margin-bottom: var(--spacing-2xl);
+}
+
+/* ===== BUTTON & LINK ACCESSIBILITY ===== */
+
+button, a[role="button"], input[type="button"], input[type="submit"] {
+ position: relative;
+ transition: all var(--transition-base);
+ border: none;
+ font-family: inherit;
+ font-size: inherit;
+ cursor: pointer;
+}
+
+/* Disabled state */
+button:disabled,
+[role="button"][aria-disabled="true"],
+input[type="button"]:disabled,
+input[type="submit"]:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+/* Ensure buttons have minimum touch target (44x44px WCAG) */
+button, a[role="button"] {
+ min-height: 44px;
+ min-width: 44px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-md) var(--spacing-lg);
+}
+
+/* ===== FORM ACCESSIBILITY ===== */
+
+label {
+ display: block;
+ margin-bottom: var(--spacing-sm);
+ font-weight: 500;
+ color: var(--color-text-primary);
+}
+
+input, select, textarea {
+ font-family: inherit;
+ font-size: inherit;
+ padding: var(--spacing-md);
+ border: 2px solid var(--color-border);
+ border-radius: var(--radius-md);
+ transition: border-color var(--transition-base);
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+ border-color: var(--color-primary);
+ outline: none;
+}
+
+/* Error state for inputs */
+input[aria-invalid="true"],
+select[aria-invalid="true"],
+textarea[aria-invalid="true"] {
+ border-color: var(--color-danger);
+}
+
+/* ===== MODAL & DIALOG ACCESSIBILITY ===== */
+
+[role="dialog"],
+.modal {
+ z-index: var(--z-modal);
+}
+
+[role="dialog"]::backdrop,
+.modal-backdrop {
+ background-color: var(--color-overlay-bg);
+ z-index: var(--z-modal-backdrop);
+}
+
+/* Ensure modal is positioned and styled appropriately */
+[role="dialog"] {
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-lg);
+ background: var(--color-bg-primary);
+ padding: var(--spacing-2xl);
+ max-height: 90vh;
+ overflow-y: auto;
+ box-shadow: var(--shadow-xl);
+}
+
+/* ===== HIGH CONTRAST SUPPORT ===== */
+
+@media (prefers-contrast: more) {
+ button,
+ a[role="button"],
+ input[type="button"],
+ input[type="submit"] {
+ border: 3px solid currentColor;
+ font-weight: bold;
+ }
+
+ input,
+ select,
+ textarea {
+ border-width: 3px;
+ }
+
+ :focus-visible {
+ outline-width: 4px;
+ }
+}
+
+/* ===== REDUCED MOTION SUPPORT ===== */
+
+@media (prefers-reduced-motion: reduce) {
+ .skeleton,
+ .skeleton-card::before,
+ .skeleton-card::after,
+ .skeleton-text,
+ .skeleton-avatar {
+ animation: none;
+ background: var(--color-bg-secondary);
+ }
+}
diff --git a/ports/RGSX/static/css/app.css b/ports/RGSX/static/css/app.css
new file mode 100644
index 0000000..1c2c382
--- /dev/null
+++ b/ports/RGSX/static/css/app.css
@@ -0,0 +1,426 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: #333;
+ min-height: 100vh;
+ padding: 20px;
+}
+.container {
+ max-width: 90%;
+ margin: 0 auto;
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+ overflow: hidden;
+}
+header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 30px;
+ text-align: center;
+ position: relative;
+}
+header h1 { font-size: 2.5em; margin-bottom: 10px; }
+header p { opacity: 0.9; font-size: 1.1em; }
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+/* Navigation mobile dans le header */
+.mobile-tabs {
+ display: none;
+ justify-content: space-around;
+ padding: 15px 10px 10px 10px;
+ gap: 5px;
+}
+.mobile-tab {
+ flex: 1;
+ background: rgba(255,255,255,0.2);
+ border: none;
+ color: white;
+ padding: 12px 5px;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 24px;
+ transition: all 0.3s;
+ backdrop-filter: blur(10px);
+}
+.mobile-tab:hover {
+ background: rgba(255,255,255,0.3);
+}
+.mobile-tab.active {
+ background: rgba(255,255,255,0.4);
+ transform: scale(1.1);
+}
+
+.tabs {
+ display: flex;
+ background: #f5f5f5;
+ border-bottom: 2px solid #ddd;
+}
+.tab {
+ flex: 1;
+ padding: 15px;
+ text-align: center;
+ cursor: pointer;
+ background: #f5f5f5;
+ border: none;
+ font-size: 16px;
+ color: #333;
+ transition: all 0.3s;
+}
+.tab:hover { background: #e0e0e0; }
+.tab.active {
+ background: white;
+ border-bottom: 3px solid #667eea;
+ font-weight: bold;
+}
+.tab.support-btn {
+ margin-left: auto;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-radius: 20px;
+ padding: 8px 20px;
+}
+.tab.support-btn:hover {
+ background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+ transform: scale(1.05);
+}
+
+.content {
+ padding: 30px;
+ min-height: 400px;
+}
+.loading {
+ text-align: center;
+ padding: 50px;
+ font-size: 1.2em;
+ color: #666;
+}
+
+.platform-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+}
+.platform-card {
+ background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+ padding: 20px;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: transform 0.3s, box-shadow 0.3s;
+ text-align: center;
+}
+.platform-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.4);
+}
+.platform-card img {
+ width: 200px;
+ height: 200px;
+ object-fit: contain;
+ margin-bottom: 15px;
+ filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
+}
+.platform-card h3 {
+ margin-bottom: 10px;
+ color: white;
+ font-size: 1.1em;
+ min-height: 2.5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.platform-card .count {
+ background: #667eea;
+ color: white;
+ padding: 5px 15px;
+ border-radius: 20px;
+ display: inline-block;
+ margin-top: 10px;
+}
+
+.search-box {
+ margin-bottom: 20px;
+ position: relative;
+}
+.search-box input {
+ width: 100%;
+ padding: 12px 45px 12px 15px;
+ border: 2px solid #ddd;
+ border-radius: 8px;
+ font-size: 16px;
+ transition: border-color 0.3s;
+ background: white;
+ color: #333;
+}
+.search-box input:focus {
+ outline: none;
+ border-color: #667eea;
+}
+.search-box .search-icon {
+ position: absolute;
+ right: 15px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #999;
+ font-size: 18px;
+}
+.search-box .clear-search {
+ position: absolute;
+ right: 45px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: #dc3545;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ display: none;
+ font-size: 14px;
+ line-height: 1;
+}
+.search-box .clear-search:hover {
+ background: #c82333;
+}
+
+.sort-btn {
+ background: #e0e0e0;
+ color: #333;
+ border: 2px solid #999;
+ padding: 8px 12px;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.9em;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+.sort-btn:hover {
+ background: #d0d0d0;
+ border-color: #666;
+}
+.sort-btn.active {
+ background: #667eea;
+ color: white;
+ border-color: #667eea;
+}
+
+.filter-section {
+ margin-top: 12px;
+ margin-bottom: 12px;
+ padding: 12px;
+ background: #f5f5f5;
+ border-radius: 8px;
+}
+.filter-row {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-bottom: 8px;
+}
+.filter-row:last-child {
+ margin-bottom: 0;
+}
+.filter-label {
+ font-weight: bold;
+ margin-right: 4px;
+
+}
+.region-btn {
+ background: #e0e0e0;
+ color: #333;
+ border: 2px solid #999;
+ padding: 6px 12px;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.85em;
+ font-weight: 500;
+ transition: all 0.2s;
+}
+.region-btn:hover {
+ background: #d0d0d0;
+ border-color: #666;
+}
+.region-btn.active {
+ background: #28a745;
+ color: white;
+ border-color: #28a745;
+}
+.region-btn.excluded {
+ background: #dc3545;
+ color: white;
+ border-color: #dc3545;
+}
+.filter-checkbox {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 0.9em;
+ color: #333;
+}
+.filter-checkbox input[type="checkbox"] {
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+}
+
+.games-list {
+ max-height: 600px;
+ overflow-y: auto;
+}
+.game-item {
+ background: #f9f9f9;
+ padding: 15px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: background 0.2s;
+}
+.game-item:hover { background: #f0f0f0; }
+.game-name { font-weight: 500; flex: 1; }
+.game-size {
+ background: #667eea;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 5px;
+ font-size: 0.9em;
+ margin-right: 10px;
+}
+.download-btn {
+ background: transparent;
+ color: #28a745;
+ border: none;
+ padding: 8px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1.5em;
+ transition: all 0.2s;
+ min-width: 40px;
+}
+.download-btn:hover {
+ background: rgba(40, 167, 69, 0.1);
+ transform: scale(1.1);
+}
+.download-btn:disabled {
+ color: #6c757d;
+ cursor: not-allowed;
+}
+
+.back-btn {
+ background: #667eea;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 8px;
+ cursor: pointer;
+ margin-bottom: 20px;
+ font-size: 16px;
+}
+.back-btn:hover { background: #5568d3; }
+
+.info-grid {
+ display: grid;
+ gap: 15px;
+}
+.info-item {
+ background: #f9f9f9;
+ padding: 15px;
+ border-radius: 8px;
+ border-left: 4px solid #667eea;
+}
+.info-item strong { display: block; margin-bottom: 5px; color: #667eea; }
+
+.history-item {
+ background: #f9f9f9;
+ padding: 15px;
+ margin-bottom: 10px;
+ border-radius: 8px;
+ border-left: 4px solid #28a745;
+}
+.history-item.error { border-left-color: #dc3545; }
+
+/* Media Queries pour responsive */
+@media (max-width: 768px) {
+ body {
+ padding: 10px;
+ }
+ .container {
+ border-radius: 0;
+ }
+ header {
+ padding: 20px 20px 10px 20px;
+ }
+ header h1 {
+ font-size: 1.8em;
+ }
+ .tabs {
+ display: none;
+ }
+ .mobile-tabs {
+ display: flex;
+ }
+ .content {
+ padding: 15px;
+ }
+ .platform-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 15px;
+ }
+ .platform-card {
+ padding: 15px;
+ }
+ .platform-card img {
+ width: 80px;
+ height: 80px;
+ }
+ .platform-card h3 {
+ font-size: 0.9em;
+ min-height: 2em;
+ }
+ .game-item {
+ flex-wrap: wrap;
+ padding: 10px;
+ }
+ .game-name {
+ font-size: 0.9em;
+ flex: 1 1 100%;
+ margin-bottom: 8px;
+ }
+ .download-btn-group {
+ display: flex;
+ gap: 4px;
+ }
+}
+
+@media (max-width: 480px) {
+ header h1 {
+ font-size: 1.5em;
+ }
+ .platform-grid {
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 10px;
+ }
+ .platform-card {
+ padding: 10px;
+ }
+ .platform-card img {
+ width: 60px;
+ height: 60px;
+ }
+ .platform-card h3 {
+ font-size: 0.85em;
+ }
+ .platform-card .count {
+ font-size: 0.8em;
+ padding: 3px 10px;
+ }
+}
diff --git a/ports/RGSX/static/css/theme.css b/ports/RGSX/static/css/theme.css
new file mode 100644
index 0000000..74c824a
--- /dev/null
+++ b/ports/RGSX/static/css/theme.css
@@ -0,0 +1,120 @@
+/* ===== THEMING SYSTEM WITH CSS CUSTOM PROPERTIES ===== */
+/* This file defines the color scheme and can be easily swapped for alternative themes */
+
+:root {
+ /* Primary Colors - Brand Identity */
+ --color-primary: #667eea;
+ --color-primary-dark: #764ba2;
+ --color-primary-light: #8b9dff;
+ --color-primary-rgb: 102, 126, 234;
+
+ /* Secondary Colors - Accents */
+ --color-success: #28a745;
+ --color-warning: #ffc107;
+ --color-danger: #dc3545;
+ --color-info: #17a2b8;
+
+ /* Neutral Colors - Layout & Typography */
+ --color-bg-primary: #ffffff;
+ --color-bg-secondary: #f5f5f5;
+ --color-bg-tertiary: #f9f9f9;
+ --color-text-primary: #333333;
+ --color-text-secondary: #666666;
+ --color-text-muted: #999999;
+ --color-text-inverse: #ffffff;
+
+ /* Border & Divider Colors */
+ --color-border: #dddddd;
+ --color-border-light: #eeeeee;
+ --color-divider: #e0e0e0;
+
+ /* Semantic Colors */
+ --color-card-bg: #2c3e50;
+ --color-card-border: #34495e;
+ --color-overlay-bg: rgba(0, 0, 0, 0.7);
+ --color-overlay-light: rgba(0, 0, 0, 0.3);
+
+ /* Gradients */
+ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+ --gradient-reverse: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
+
+ /* Shadows */
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
+ --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
+
+ /* Spacing Scale */
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 12px;
+ --spacing-lg: 16px;
+ --spacing-xl: 20px;
+ --spacing-2xl: 30px;
+ --spacing-3xl: 40px;
+
+ /* Border Radius */
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+ --radius-xl: 16px;
+
+ /* Transitions */
+ --transition-fast: 0.2s ease-in-out;
+ --transition-base: 0.3s ease-in-out;
+ --transition-slow: 0.5s ease-in-out;
+
+ /* Typography */
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ --font-size-xs: 0.75rem;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ --font-size-2xl: 1.5rem;
+ --font-size-3xl: 2.5rem;
+
+ /* Z-index Scale */
+ --z-dropdown: 100;
+ --z-sticky: 200;
+ --z-fixed: 300;
+ --z-modal-backdrop: 400;
+ --z-modal: 500;
+ --z-notification: 600;
+ --z-tooltip: 700;
+}
+
+/* ===== DARK MODE SUPPORT ===== */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-bg-primary: #1a1a1a;
+ --color-bg-secondary: #2d2d2d;
+ --color-bg-tertiary: #3a3a3a;
+ --color-text-primary: #e0e0e0;
+ --color-text-secondary: #b0b0b0;
+ --color-text-muted: #808080;
+ --color-border: #404040;
+ --color-border-light: #3a3a3a;
+ }
+}
+
+/* ===== HIGH CONTRAST MODE SUPPORT ===== */
+@media (prefers-contrast: more) {
+ :root {
+ --color-primary: #0043b3;
+ --color-primary-dark: #002e7a;
+ --color-text-primary: #000000;
+ --color-text-secondary: #333333;
+ --color-border: #000000;
+ --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5);
+ }
+}
+
+/* ===== REDUCED MOTION SUPPORT ===== */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
diff --git a/ports/RGSX/static/js/accessibility.js b/ports/RGSX/static/js/accessibility.js
new file mode 100644
index 0000000..90b4536
--- /dev/null
+++ b/ports/RGSX/static/js/accessibility.js
@@ -0,0 +1,194 @@
+/**
+ * Accessibility Utilities Module
+ * Handles keyboard navigation, focus management, and ARIA updates
+ */
+
+const A11y = {
+ /**
+ * Manage focus trap for modals (keep focus within modal)
+ */
+ trapFocus(element) {
+ const focusableElements = element.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+ );
+ const firstElement = focusableElements[0];
+ const lastElement = focusableElements[focusableElements.length - 1];
+
+ element.addEventListener('keydown', (e) => {
+ if (e.key !== 'Tab') return;
+
+ if (e.shiftKey) {
+ if (document.activeElement === firstElement) {
+ lastElement.focus();
+ e.preventDefault();
+ }
+ } else {
+ if (document.activeElement === lastElement) {
+ firstElement.focus();
+ e.preventDefault();
+ }
+ }
+ });
+
+ // Set initial focus to first element
+ firstElement?.focus();
+ },
+
+ /**
+ * Restore focus to element after modal closes
+ */
+ savedFocusElement: null,
+
+ saveFocus() {
+ this.savedFocusElement = document.activeElement;
+ },
+
+ restoreFocus() {
+ if (this.savedFocusElement && this.savedFocusElement.focus) {
+ this.savedFocusElement.focus();
+ }
+ },
+
+ /**
+ * Announce changes to screen readers with live regions
+ */
+ announceToScreenReader(message, priority = 'polite') {
+ let liveRegion = document.querySelector(`[role="status"][aria-live="${priority}"]`);
+
+ if (!liveRegion) {
+ liveRegion = document.createElement('div');
+ liveRegion.setAttribute('role', 'status');
+ liveRegion.setAttribute('aria-live', priority);
+ liveRegion.className = 'sr-only';
+ document.body.appendChild(liveRegion);
+ }
+
+ liveRegion.textContent = message;
+
+ // Clear after announcement
+ setTimeout(() => {
+ liveRegion.textContent = '';
+ }, 3000);
+ },
+
+ /**
+ * Handle Enter/Space key on clickable elements
+ */
+ makeKeyboardClickable(element, callback) {
+ element.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ callback();
+ }
+ });
+ },
+
+ /**
+ * Arrow key navigation for grids
+ */
+ setupGridNavigation(gridSelector) {
+ const grid = document.querySelector(gridSelector);
+ if (!grid) return;
+
+ const items = Array.from(grid.children);
+ const colCount = Math.ceil(Math.sqrt(items.length));
+
+ items.forEach((item, index) => {
+ item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+
+ item.addEventListener('keydown', (e) => {
+ let newIndex = index;
+
+ switch (e.key) {
+ case 'ArrowLeft':
+ newIndex = index === 0 ? items.length - 1 : index - 1;
+ e.preventDefault();
+ break;
+ case 'ArrowRight':
+ newIndex = index === items.length - 1 ? 0 : index + 1;
+ e.preventDefault();
+ break;
+ case 'ArrowUp':
+ newIndex = Math.max(0, index - colCount);
+ e.preventDefault();
+ break;
+ case 'ArrowDown':
+ newIndex = Math.min(items.length - 1, index + colCount);
+ e.preventDefault();
+ break;
+ case 'Home':
+ newIndex = 0;
+ e.preventDefault();
+ break;
+ case 'End':
+ newIndex = items.length - 1;
+ e.preventDefault();
+ break;
+ default:
+ return;
+ }
+
+ items[index].setAttribute('tabindex', '-1');
+ items[newIndex].setAttribute('tabindex', '0');
+ items[newIndex].focus();
+ });
+ });
+ },
+
+ /**
+ * Update ARIA attributes for dynamic content
+ */
+ updateAriaLabel(element, label) {
+ element.setAttribute('aria-label', label);
+ },
+
+ updateAriaLive(element, region = 'polite') {
+ element.setAttribute('aria-live', region);
+ element.setAttribute('aria-atomic', 'true');
+ },
+
+ /**
+ * Set loading state with ARIA
+ */
+ setLoadingState(element, isLoading) {
+ if (isLoading) {
+ element.setAttribute('aria-busy', 'true');
+ element.setAttribute('disabled', 'true');
+ } else {
+ element.removeAttribute('aria-busy');
+ element.removeAttribute('disabled');
+ }
+ },
+
+ /**
+ * Create accessible loading skeleton
+ */
+ createSkeletonLoader(containerId, itemCount = 6) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+
+ container.innerHTML = '';
+ for (let i = 0; i < itemCount; i++) {
+ const skeleton = document.createElement('div');
+ skeleton.className = 'skeleton-card';
+ skeleton.setAttribute('aria-hidden', 'true');
+ container.appendChild(skeleton);
+ }
+ },
+
+ /**
+ * Remove skeleton loader
+ */
+ removeSkeletonLoader(containerId) {
+ const container = document.getElementById(containerId);
+ if (!container) return;
+
+ const skeletons = container.querySelectorAll('.skeleton-card');
+ skeletons.forEach(s => s.remove());
+ }
+};
+
+// Export for use in app.js
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = A11y;
+}
diff --git a/ports/RGSX/static/js/app.js b/ports/RGSX/static/js/app.js
new file mode 100644
index 0000000..6c7fa69
--- /dev/null
+++ b/ports/RGSX/static/js/app.js
@@ -0,0 +1,2199 @@
+ // ===== VARIABLES GLOBALES =====
+ let currentPlatform = null;
+ let currentGameSort = 'name_asc'; // Type de tri actuel: 'name_asc', 'name_desc', 'size_asc', 'size_desc'
+ let currentGames = []; // Stocke les jeux actuels pour le tri
+ let lastProgressUpdate = Date.now();
+ let autoRefreshTimeout = null;
+ let progressInterval = null;
+ let queueInterval = null;
+ let translations = {}; // Contiendra toutes les traductions
+ let trackedDownloads = (() => {
+ // Charger depuis localStorage ou initialiser
+ try {
+ const stored = localStorage.getItem('trackedDownloads');
+ return stored ? JSON.parse(stored) : {};
+ } catch (e) {
+ return {};
+ }
+ })();
+
+ // ===== TOAST NOTIFICATIONS =====
+ function showToast(message, type = 'info', duration = 3000) {
+ // Créer le conteneur de toasts s'il n'existe pas
+ let toastContainer = document.getElementById('toast-container');
+ if (!toastContainer) {
+ toastContainer = document.createElement('div');
+ toastContainer.id = 'toast-container';
+ toastContainer.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 9999;
+ pointer-events: none;
+ max-width: 400px;
+ `;
+ document.body.appendChild(toastContainer);
+ }
+
+ // Créer l'élément toast
+ const toast = document.createElement('div');
+ const colors = {
+ 'success': '#28a745',
+ 'error': '#dc3545',
+ 'warning': '#ffc107',
+ 'info': '#17a2b8'
+ };
+ const icons = {
+ 'success': '✅',
+ 'error': '❌',
+ 'warning': '⚠️',
+ 'info': 'ℹ️'
+ };
+
+ toast.style.cssText = `
+ background: ${colors[type] || colors['info']};
+ color: white;
+ padding: 16px 20px;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+ animation: slideIn 0.3s ease-out;
+ pointer-events: auto;
+ font-weight: 500;
+ max-width: 100%;
+ word-wrap: break-word;
+ `;
+
+ toast.textContent = `${icons[type] || ''} ${message}`;
+ toastContainer.appendChild(toast);
+
+ // Auto-remove après duration
+ if (duration > 0) {
+ setTimeout(() => {
+ toast.style.animation = 'slideOut 0.3s ease-in';
+ setTimeout(() => {
+ toast.remove();
+ }, 300);
+ }, duration);
+ }
+
+ return toast;
+ }
+
+ // Ajouter les styles d'animation s'ils n'existent pas
+ if (!document.getElementById('toast-styles')) {
+ const style = document.createElement('style');
+ style.id = 'toast-styles';
+ style.textContent = `
+ @keyframes slideIn {
+ from {
+ transform: translateX(400px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ }
+ @keyframes slideOut {
+ from {
+ transform: translateX(0);
+ opacity: 1;
+ }
+ to {
+ transform: translateX(400px);
+ opacity: 0;
+ }
+ }
+ `;
+ document.head.appendChild(style);
+ }
+
+ // Charger les traductions au démarrage
+ async function loadTranslations() {
+ try {
+ const response = await fetch('/api/translations');
+ const data = await response.json();
+ if (data.success) {
+ translations = data.translations;
+ console.log('Traductions chargées:', data.language, Object.keys(translations).length, 'clés');
+ }
+ } catch (error) {
+ console.error('Erreur chargement traductions:', error);
+ }
+ }
+
+ // Fonction helper pour obtenir une traduction avec paramètres
+ function t(key, ...params) {
+ let text = translations[key] || key;
+ // Remplacer {0}, {1}, etc. par les paramètres (sans regex pour éviter les erreurs)
+ params.forEach((param, index) => {
+ text = text.split('{' + index + '}').join(param);
+ });
+ // Convertir les \\n en vrais sauts de ligne pour les alertes
+ text = text.replace(/\\\\n/g, '\\n');
+ return text;
+ }
+
+ // Appliquer les traductions à tous les éléments marqués
+ function applyTranslations() {
+ // Mettre à jour le titre de la page
+ document.title = '🎮 ' + t('web_title');
+
+ // Traduire tous les éléments avec data-translate
+ document.querySelectorAll('[data-translate]').forEach(el => {
+ const key = el.getAttribute('data-translate');
+ el.textContent = t(key);
+ });
+
+ // Traduire tous les attributs title avec data-translate-title
+ document.querySelectorAll('[data-translate-title]').forEach(el => {
+ const key = el.getAttribute('data-translate-title');
+ el.title = t(key);
+ });
+
+ // Traduire tous les placeholders avec data-translate-placeholder
+ document.querySelectorAll('[data-translate-placeholder]').forEach(el => {
+ const key = el.getAttribute('data-translate-placeholder');
+ el.placeholder = t(key);
+ });
+ }
+
+ // ===== FONCTIONS UTILITAIRES =====
+
+ // Fonction pour mettre à jour la liste des jeux (clear cache)
+ async function updateGamesList() {
+ if (!confirm(t('web_update_title') + '\\n\\nThis will clear the cache and reload all games data.\\nThis may take a few moments.')) {
+ return;
+ }
+
+ try {
+ // Afficher un message de chargement
+ const container = document.querySelector('.content');
+ const originalContent = container.innerHTML;
+ container.innerHTML = 'RGSX Web Interface
v{version}
-
-
+
+
-
+
+
-
-
-
-
-
-
-
+ 🔄 ' + t('web_update_title') + '
' + t('web_update_message') + '
' + t('web_update_wait') + '
';
+
+ // Résumé
+ const totalResults = platformsMatch.length + gamesMatch.length;
+ html += `
';
+ searchResults.innerHTML = html;
+
+ } catch (error) {
+ console.error('Erreur recherche:', error);
+ const searchResults = document.getElementById('search-results');
+ if (searchResults) {
+ searchResults.innerHTML = `🔍 ${totalResults} ${t('web_search_results')} "${term}"
`; + + if (totalResults === 0) { + html += `${t('web_no_results')}
`; + } + + // Afficher les systèmes correspondants + if (platformsMatch.length > 0) { + html += `🎮 ${t('web_platforms')} (${platformsMatch.length})
`; + html += '';
+
+ platformsMatch.forEach(platform => {
+ const imageUrl = '/api/platform-image/' + encodeURIComponent(platform.platform_name);
+ html += `
+
';
+ }
+
+ // Afficher les jeux correspondants (groupés par système)
+ if (gamesMatch.length > 0) {
+ html += `
+ 
+
+ `;
+ });
+
+ html += '${platform.platform_name}
+${platform.games_count} ${t('web_games')}
+🎯 ${t('web_games')} (${gamesMatch.length})
`; + + // Grouper les jeux par plateforme + const gamesByPlatform = {}; + gamesMatch.forEach(game => { + if (!gamesByPlatform[game.platform]) { + gamesByPlatform[game.platform] = []; + } + gamesByPlatform[game.platform].push(game); + }); + + // Afficher chaque groupe + for (const [platformName, games] of Object.entries(gamesByPlatform)) { + html += ` +
+
+ `;
+ }
+ }
+
+ html += '+ 📁 ${platformName} (${games.length}) +
+
+ `;
+
+ games.forEach((game, idx) => {
+ const downloadTitle = t('web_download');
+ html += `
+
+
+
+ `;
+ });
+
+ html += `
+ ${game.game_name}
+
+ ${game.size ? `${game.size}` : ''}
+
+
+
+
+
+ ❌ ${t('web_error_search')}: ${error.message}
`; + } + } + }, 300); // Attendre 300ms après la dernière frappe + } + + // Filter state: Map of region -> 'include' or 'exclude' + let regionFilters = new Map(); + + // Region priority order for "One ROM Per Game" (customizable) + let regionPriorityOrder = JSON.parse(localStorage.getItem('regionPriorityOrder')) || + ['USA', 'Canada', 'World', 'Europe', 'Japan', 'Other']; + + // Helper: Extract region(s) from game name - returns array of regions + function getGameRegions(gameName) { + const name = gameName.toUpperCase(); + const regions = []; + + // Common region patterns - check all, not just first match + // Handle both "(USA)" and "(USA, Europe)" formats + if (name.includes('USA') || name.includes('US)')) regions.push('USA'); + if (name.includes('EUROPE') || name.includes('EU)')) regions.push('Europe'); + if (name.includes('JAPAN') || name.includes('JP)') || name.includes('JPN)')) regions.push('Japan'); + if (name.includes('WORLD')) regions.push('World'); + + // Check for other regions + if (name.match(/\b(AUSTRALIA|ASIA|KOREA|BRAZIL|CHINA|RUSSIA|SCANDINAVIA|SPAIN|FRANCE|GERMANY|ITALY)\b/)) { + if (!regions.includes('Other')) regions.push('Other'); + } + + // If no region found, classify as Other + if (regions.length === 0) regions.push('Other'); + + // Debug log for multi-region games + if (regions.length > 1 && gameName.includes('Game Guru')) { + console.log('getGameRegions:', gameName, '->', regions); + } + + return regions; + } + + // Helper: Check if game is non-release version + function isNonReleaseGame(gameName) { + const name = gameName.toUpperCase(); + // Match parentheses or brackets containing these keywords + // Using [^\)] instead of .* to avoid catastrophic backtracking + const nonReleasePatterns = [ + /\([^\)]*BETA[^\)]*\)/, + /\([^\)]*DEMO[^\)]*\)/, + /\([^\)]*PROTO[^\)]*\)/, + /\([^\)]*SAMPLE[^\)]*\)/, + /\([^\)]*KIOSK[^\)]*\)/, + /\([^\)]*PREVIEW[^\)]*\)/, + /\([^\)]*TEST[^\)]*\)/, + /\([^\)]*DEBUG[^\)]*\)/, + /\([^\)]*ALPHA[^\)]*\)/, + /\([^\)]*PRE-RELEASE[^\)]*\)/, + /\([^\)]*PRERELEASE[^\)]*\)/, + /\([^\)]*UNFINISHED[^\)]*\)/, + /\([^\)]*WIP[^\)]*\)/, + /\[[^\]]*BETA[^\]]*\]/, + /\[[^\]]*DEMO[^\]]*\]/, + /\[[^\]]*TEST[^\]]*\]/ + ]; + return nonReleasePatterns.some(pattern => pattern.test(name)); + } + + // Helper: Get base game name (strip regions, versions, etc. but preserve disc numbers) + function getBaseGameName(gameName) { + let base = gameName; + + // Remove file extensions + base = base.replace(/\.(zip|7z|rar|gz|iso)$/i, ''); + + // Extract disc/disk number if present (before removing parentheses) + let discInfo = ''; + const discMatch = base.match(/\(Dis[ck]\s*(\d+)\)/i) || + base.match(/\[Dis[ck]\s*(\d+)\]/i) || + base.match(/Dis[ck]\s*(\d+)/i) || + base.match(/\(CD\s*(\d+)\)/i) || + base.match(/CD\s*(\d+)/i); + if (discMatch) { + discInfo = ` Disc ${discMatch[1]}`; + } + + // Remove parenthetical content (regions, languages, versions, etc.) + base = base.replace(/\([^)]*\)/g, ''); + base = base.replace(/\[[^\]]*\]/g, ''); + + // Normalize whitespace + base = base.replace(/\s+/g, ' ').trim(); + + // Re-append disc info + base = base + discInfo; + + return base; + } + + // Helper: Get region priority for one-rom-per-game (lower = better) + function getRegionPriority(gameName) { + const name = gameName.toUpperCase(); + + // Find the first matching region in priority order + for (let i = 0; i < regionPriorityOrder.length; i++) { + const region = regionPriorityOrder[i].toUpperCase(); + if (region === 'USA' && name.includes('USA')) return i; + if (region === 'CANADA' && name.includes('CANADA')) return i; + if (region === 'WORLD' && name.includes('WORLD')) return i; + if (region === 'EUROPE' && (name.includes('EUROPE') || name.includes('EU)'))) return i; + if (region === 'JAPAN' && (name.includes('JAPAN') || name.includes('JP)') || name.includes('JPN)'))) return i; + } + + return regionPriorityOrder.length; // Other regions (lowest priority) + } + + // Save region priority order to localStorage + function saveRegionPriorityOrder() { + localStorage.setItem('regionPriorityOrder', JSON.stringify(regionPriorityOrder)); + updateRegionPriorityDisplay(); + } + + // Update the display of current region priority order + function updateRegionPriorityDisplay() { + const display = document.getElementById('region-priority-display'); + if (display) { + display.textContent = regionPriorityOrder.join(' → '); + } + } + + // Move region up in priority (decrease index = higher priority) + function moveRegionUp(region) { + const idx = regionPriorityOrder.indexOf(region); + if (idx > 0) { + [regionPriorityOrder[idx], regionPriorityOrder[idx-1]] = + [regionPriorityOrder[idx-1], regionPriorityOrder[idx]]; + saveRegionPriorityOrder(); + renderRegionPriorityConfig(); + } + } + + // Move region down in priority (increase index = lower priority) + function moveRegionDown(region) { + const idx = regionPriorityOrder.indexOf(region); + if (idx >= 0 && idx < regionPriorityOrder.length - 1) { + [regionPriorityOrder[idx], regionPriorityOrder[idx+1]] = + [regionPriorityOrder[idx+1], regionPriorityOrder[idx]]; + saveRegionPriorityOrder(); + renderRegionPriorityConfig(); + } + } + + // Reset region priority to default + function resetRegionPriority() { + regionPriorityOrder = ['USA', 'Canada', 'World', 'Europe', 'Japan', 'Other']; + saveRegionPriorityOrder(); + renderRegionPriorityConfig(); + } + + // Render region priority configuration UI + function renderRegionPriorityConfig() { + const container = document.getElementById('region-priority-config'); + if (!container) return; + + let html = 'Configure Region Priority Order:
';
+ html += '';
+
+ regionPriorityOrder.forEach((region, idx) => {
+ html += `
+
';
+ html += '
+ ${idx + 1}.
+ ${region}
+
+
+
+ `;
+ });
+
+ html += '';
+ html += '';
+ html += '';
+ html += '
';
+
+ container.innerHTML = html;
+ updateRegionPriorityDisplay();
+ }
+
+ // Show region priority configuration modal
+ function showRegionPriorityConfig() {
+ const modal = document.getElementById('region-priority-modal');
+ if (modal) {
+ modal.style.display = 'flex';
+ renderRegionPriorityConfig();
+ }
+ }
+
+ // Close region priority configuration modal
+ function closeRegionPriorityModal() {
+ const modal = document.getElementById('region-priority-modal');
+ if (modal) {
+ modal.style.display = 'none';
+ }
+ applyAllFilters(); // Re-apply filters with new priority
+ }
+
+ // Toggle region filter: none → include (green) → exclude (red) → none
+ function toggleRegionFilter(region) {
+ const btn = document.querySelector(`.region-btn[data-region="${region}"]`);
+
+ if (!regionFilters.has(region)) {
+ // None → Include
+ regionFilters.set(region, 'include');
+ if (btn) {
+ btn.classList.add('active');
+ btn.classList.remove('excluded');
+ }
+ } else if (regionFilters.get(region) === 'include') {
+ // Include → Exclude
+ regionFilters.set(region, 'exclude');
+ if (btn) {
+ btn.classList.remove('active');
+ btn.classList.add('excluded');
+ }
+ } else {
+ // Exclude → None
+ regionFilters.delete(region);
+ if (btn) {
+ btn.classList.remove('active');
+ btn.classList.remove('excluded');
+ }
+ }
+
+ applyAllFilters();
+ }
+
+ // Apply all filters
+ function applyAllFilters() {
+ const searchInput = document.getElementById('game-search');
+ const searchTerm = searchInput ? searchInput.value : '';
+ const hideNonRelease = document.getElementById('hide-non-release')?.checked || false;
+ const regexMode = document.getElementById('regex-mode')?.checked || false;
+
+ const items = document.querySelectorAll('.game-item');
+ let visibleCount = 0;
+ let hiddenByRegion = 0;
+ let hiddenByNonRelease = 0;
+ let hiddenBySearch = 0;
+
+ // Prepare search pattern
+ let searchPattern = null;
+ if (searchTerm && regexMode) {
+ try {
+ searchPattern = new RegExp(searchTerm, 'i');
+ } catch (e) {
+ // Invalid regex, fall back to plain text
+ searchPattern = null;
+ }
+ }
+
+ items.forEach(item => {
+ const name = item.querySelector('.game-name').textContent;
+ let visible = true;
+
+ // Apply search filter
+ if (searchTerm) {
+ if (regexMode && searchPattern) {
+ if (!searchPattern.test(name)) {
+ visible = false;
+ hiddenBySearch++;
+ }
+ } else {
+ if (!name.toLowerCase().includes(searchTerm.toLowerCase())) {
+ visible = false;
+ hiddenBySearch++;
+ }
+ }
+ }
+
+ // Apply region filters
+ if (visible && regionFilters.size > 0) {
+ const gameRegions = getGameRegions(name);
+
+ // Get included and excluded regions
+ const includedRegions = Array.from(regionFilters.entries())
+ .filter(([_, mode]) => mode === 'include')
+ .map(([region, _]) => region);
+ const excludedRegions = Array.from(regionFilters.entries())
+ .filter(([_, mode]) => mode === 'exclude')
+ .map(([region, _]) => region);
+
+ // Debug log for Game Guru
+ if (name.includes('Game Guru')) {
+ console.log('Filtering Game Guru:', {
+ name,
+ gameRegions,
+ includedRegions,
+ excludedRegions,
+ willShow: gameRegions.some(region => includedRegions.includes(region))
+ });
+ }
+
+ // If there are include filters, game must match at least one of them
+ if (includedRegions.length > 0) {
+ if (!gameRegions.some(region => includedRegions.includes(region))) {
+ visible = false;
+ hiddenByRegion++;
+ }
+ }
+
+ // If there are exclude filters, game must NOT match any of them
+ if (visible && excludedRegions.length > 0) {
+ if (gameRegions.some(region => excludedRegions.includes(region))) {
+ visible = false;
+ hiddenByRegion++;
+ }
+ }
+ }
+
+ // Apply non-release filter
+ if (visible && hideNonRelease) {
+ if (isNonReleaseGame(name)) {
+ visible = false;
+ hiddenByNonRelease++;
+ }
+ }
+
+ item.style.display = visible ? '' : 'none';
+ if (visible) visibleCount++;
+ });
+
+ // Apply one-rom-per-game filter (after other filters)
+ const oneRomPerGame = document.getElementById('one-rom-per-game')?.checked || false;
+ if (oneRomPerGame) {
+ // Group currently visible games by base name
+ const gameGroups = new Map();
+
+ items.forEach(item => {
+ if (item.style.display !== 'none') {
+ const name = item.querySelector('.game-name').textContent;
+ const baseName = getBaseGameName(name);
+
+ if (!gameGroups.has(baseName)) {
+ gameGroups.set(baseName, []);
+ }
+ gameGroups.get(baseName).push({ item, name });
+ }
+ });
+
+ // For each group, show only best region
+ let hiddenByDuplicates = 0;
+ gameGroups.forEach((games, baseName) => {
+ if (games.length > 1) {
+ // Sort by region priority (lower = better)
+ games.sort((a, b) => getRegionPriority(a.name) - getRegionPriority(b.name));
+
+ // Hide all except the best one
+ games.forEach((game, idx) => {
+ if (idx > 0) {
+ game.item.style.display = 'none';
+ visibleCount--;
+ hiddenByDuplicates++;
+ }
+ });
+ }
+ });
+ }
+
+ // Update clear button
+ const clearBtn = document.getElementById('clear-games-search');
+ if (clearBtn) {
+ clearBtn.style.display = searchTerm ? 'block' : 'none';
+ }
+
+ // Update filter status
+ const statusDiv = document.getElementById('filter-status');
+ if (statusDiv) {
+ let statusParts = [`Showing ${visibleCount} of ${items.length} games`];
+
+ if (regionFilters.size > 0) {
+ const included = Array.from(regionFilters.entries())
+ .filter(([_, mode]) => mode === 'include')
+ .map(([region, _]) => region);
+ const excluded = Array.from(regionFilters.entries())
+ .filter(([_, mode]) => mode === 'exclude')
+ .map(([region, _]) => region);
+
+ if (included.length > 0) {
+ statusParts.push(`Including: ${included.join(', ')}`);
+ }
+ if (excluded.length > 0) {
+ statusParts.push(`Excluding: ${excluded.join(', ')}`);
+ }
+ }
+
+ if (hideNonRelease) {
+ statusParts.push(`Hiding demos/betas/protos`);
+ }
+ if (regexMode && searchTerm) {
+ statusParts.push(`Regex mode`);
+ }
+ statusDiv.textContent = statusParts.join(' • ');
+ }
+
+ return visibleCount;
+ }
+
+ // Legacy function for backwards compatibility
+ function filterGames(searchTerm) {
+ return applyAllFilters();
+ }
+
+ // Trier les jeux
+ function sortGames(sortType) {
+ currentGameSort = sortType;
+ const items = Array.from(document.querySelectorAll('.game-item'));
+ const gamesList = document.querySelector('.games-list');
+
+ // Trier les éléments
+ items.sort((a, b) => {
+ const nameA = a.querySelector('.game-name').textContent.toLowerCase();
+ const nameB = b.querySelector('.game-name').textContent.toLowerCase();
+ const sizeElemA = a.querySelector('.game-size');
+ const sizeElemB = b.querySelector('.game-size');
+
+ // Extraire la taille en Mo (normalisée)
+ const getSizeInMo = (sizeElem) => {
+ if (!sizeElem) return 0;
+ const text = sizeElem.textContent;
+ // Les tailles sont maintenant normalisées: "100 Mo" ou "2.5 Go"
+ const match = text.match(/([0-9.]+)\\s*(Mo|Go)/i);
+ if (!match) return 0;
+ let size = parseFloat(match[1]);
+ // Convertir Go en Mo pour comparaison
+ if (match[2].toUpperCase() === 'GO') {
+ size *= 1024;
+ }
+ return size;
+ };
+
+ switch(sortType) {
+ case 'name_asc':
+ return nameA.localeCompare(nameB);
+ case 'name_desc':
+ return nameB.localeCompare(nameA);
+ case 'size_asc':
+ return getSizeInMo(sizeElemA) - getSizeInMo(sizeElemB);
+ case 'size_desc':
+ return getSizeInMo(sizeElemB) - getSizeInMo(sizeElemA);
+ default:
+ return 0;
+ }
+ });
+
+ // Réafficher les éléments dans l'ordre
+ gamesList.innerHTML = '';
+ items.forEach(item => {
+ gamesList.appendChild(item);
+ });
+
+ // Mettre à jour les boutons de tri
+ document.querySelectorAll('.sort-btn').forEach(btn => {
+ btn.classList.remove('active');
+ });
+ document.querySelector(`[data-sort="${sortType}"]`)?.classList.add('active');
+ }
+
+ // Charger les plateformes
+ async function loadPlatforms() {
+ const container = document.getElementById('platforms-content');
+ container.innerHTML = '⏳ ' + t('web_loading_platforms') + '
';
+
+ try {
+ const response = await fetch('/api/platforms');
+ const data = await response.json();
+
+ if (!data.success) throw new Error(data.error);
+
+ if (data.platforms.length === 0) {
+ container.innerHTML = '' + t('web_no_platforms') + '
'; + return; + } + + // Construire le HTML avec les traductions + let searchPlaceholder = t('web_search_platform'); + let html = ` +
+
+
+
+
+ `;
+
+ // Ajouter chaque plateforme
+ data.platforms.forEach(p => {
+ let gameCountText = t('web_game_count', '📦', p.games_count || 0);
+ html += `
+
';
+ container.innerHTML = html;
+
+ } catch (error) {
+ let errorMsg = t('web_error');
+ container.innerHTML = `
+ })
+
+ `;
+ });
+
+ html += '
+ ${p.platform_name}
+${gameCountText}
+ ${errorMsg}: ${error.message}
`; + } + } + + // Charger les jeux d'une plateforme + async function loadGames(platform, updateHistory = true) { + currentPlatform = platform; + const container = document.getElementById('platforms-content'); + container.innerHTML = '⏳ ' + t('web_loading_games') + '
';
+
+ // Mettre à jour l'URL et l'historique
+ if (updateHistory) {
+ const url = `/platform/${encodeURIComponent(platform)}`;
+ const state = { tab: 'platforms', platform: platform };
+ window.history.pushState(state, '', url);
+ }
+
+ try {
+ const response = await fetch('/api/games/' + encodeURIComponent(platform));
+ const data = await response.json();
+
+ if (!data.success) throw new Error(data.error);
+
+ // Construire le HTML avec les traductions
+ let backText = t('web_back_platforms');
+ let gameCountText = t('web_game_count', '', data.count);
+ let searchPlaceholder = t('web_search_game');
+ let downloadTitle = t('web_download');
+ let sortLabel = t('web_sort');
+ let sortNameAsc = t('web_sort_name_asc');
+ let sortNameDesc = t('web_sort_name_desc');
+ let sortSizeAsc = t('web_sort_size_asc');
+ let sortSizeDesc = t('web_sort_size_desc');
+
+ let html = `
+
+ ${platform} ${gameCountText}
+
+
+
+
+
+
+
+
+ ${t('web_filter_region')}:
+
+
+
+
+
+
+
+
+
+
+
+
+ ${sortLabel}:
+
+
+
+
+
+
+ `;
+
+ // Ajouter chaque jeu
+ data.games.forEach((g, idx) => {
+ html += `
+
+ `;
+ container.innerHTML = html;
+
+ // Appliquer le tri par défaut (A-Z)
+ sortGames(currentGameSort);
+
+ } catch (error) {
+ let backText = t('web_back');
+ let errorMsg = t('web_error');
+ container.innerHTML = `
+
+
+ ${g.name}
+ ${g.size ? `${g.size}` : ''}
+
+ `;
+ });
+
+ html += `
+
+
+
+
+ ${errorMsg}: ${error.message}
+ `; + } + } + + // Retour aux plateformes avec historique + function goBackToPlatforms() { + window.history.pushState({ tab: 'platforms' }, '', '/'); + loadPlatforms(); + } + + // Télécharger un jeu + async function downloadGame(platform, gameName, gameIndex) { + const btn = event.target; + btn.disabled = true; + btn.textContent = '⏳'; + btn.title = t('web_download') + '...'; + const mode = arguments.length > 3 ? arguments[3] : 'now'; + try { + // Préparer le body de la requête + const requestBody = { platform: platform }; + if (typeof gameIndex === 'number' && gameIndex >= 0) { + requestBody.game_index = gameIndex; + } else { + requestBody.game_name = gameName; + } + requestBody.mode = mode; + const response = await fetch('/api/download', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(requestBody) + }); + const data = await response.json(); + if (data.success) { + btn.textContent = '✅'; + btn.title = t('web_download') + ' ✓'; + btn.style.color = '#28a745'; + + // Afficher un toast de succès (pas de redirection de page) + const toastMsg = mode === 'queue' + ? `📋 "${gameName}" ajouté à la queue` + : `⬇️ Téléchargement de "${gameName}" lancé`; + showToast(toastMsg, 'success', 3000); + + } else { + throw new Error(data.error || t('web_error_unknown')); + } + } catch (error) { + btn.textContent = '❌'; + btn.title = t('web_error'); + btn.style.color = '#dc3545'; + showToast(`Erreur: ${error.message}`, 'error', 5000); + } finally { + setTimeout(() => { + btn.disabled = false; + btn.textContent = '⬇️'; + btn.title = t('web_download'); + btn.style.color = ''; + }, 3000); + } + } + + // Annuler un téléchargement + async function cancelDownload(url, btn) { + if (!confirm(t('web_confirm_cancel'))) { + return; + } + + btn.disabled = true; + btn.textContent = '⏳'; + + try { + const response = await fetch('/api/cancel', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ url: url }) + }); + + const data = await response.json(); + + if (data.success) { + btn.textContent = '✅'; + btn.style.color = '#28a745'; + + // Recharger la liste après un court délai + setTimeout(() => { + loadProgress(); + }, 500); + } else { + throw new Error(data.error || t('web_error_unknown')); + } + } catch (error) { + btn.textContent = '❌'; + btn.style.color = '#dc3545'; + alert(t('web_error_download', error.message)); + btn.disabled = false; + } + } + + // Charger la progression + async function loadProgress(autoRefresh = true) { + const container = document.getElementById('downloads-content'); + + // Arrêter l'ancien interval si existant + if (progressInterval) { + clearInterval(progressInterval); + progressInterval = null; + } + + try { + const response = await fetch('/api/progress'); + const data = await response.json(); + + // Mettre à jour le timestamp de dernière mise à jour + lastProgressUpdate = Date.now(); + + console.log('[DEBUG] /api/progress response:', data); + console.log('[DEBUG] downloads keys:', Object.keys(data.downloads || {})); + + if (!data.success) throw new Error(data.error); + + const downloads = Object.entries(data.downloads); + + if (downloads.length === 0) { + container.innerHTML = '' + t('web_no_downloads') + '
'; + return; + } + + container.innerHTML = downloads.map(([url, info]) => { + const percent = info.progress_percent || 0; + const downloaded = info.downloaded_size || 0; + const total = info.total_size || 0; + const status = info.status || 'En cours'; + const speed = info.speed || 0; + + // Utiliser game_name si disponible, sinon extraire de l'URL + let fileName = info.game_name || 'Téléchargement'; + if (!info.game_name) { + try { + fileName = decodeURIComponent(url.split('/').pop()); + } catch (e) { + fileName = url.split('/').pop(); + } + } + + // Afficher la plateforme si disponible + const platformInfo = info.platform ? ' (' + info.platform + ')' : ''; + + return ` +
+
+ `;
+ }).join('');
+
+ // Rafraîchir automatiquement toutes les 500ms pour progression fluide
+ // Créer le setInterval seulement si autoRefresh est true ET qu'il n'existe pas déjà
+ if (autoRefresh && downloads.length > 0 && !progressInterval) {
+ progressInterval = setInterval(async () => {
+ const downloadsTab = document.getElementById('downloads-content');
+ if (downloadsTab && downloadsTab.style.display !== 'none') {
+ // Rafraîchir juste les données sans recréer le setInterval
+ try {
+ const response = await fetch('/api/progress');
+ const data = await response.json();
+
+ // Mettre à jour le timestamp
+ lastProgressUpdate = Date.now();
+
+ if (!data.success) throw new Error(data.error);
+
+ const downloads = Object.entries(data.downloads);
+
+ if (downloads.length === 0) {
+ container.innerHTML = '
+ 📥 ${fileName}${platformInfo}
+
+
+
+
+
+
+ ${status} - ${percent.toFixed(1)}%
+ ${speed > 0 ? speed.toFixed(2) + ' Mo/s' : ''}
+
+ ${total > 0 ? `${(downloaded / 1024 / 1024).toFixed(1)} Mo / ${(total / 1024 / 1024).toFixed(1)} Mo
` : ''}
+
+ 📅 Démarré: ${info.timestamp || 'N/A'}
+
+ ' + t('web_no_downloads') + '
'; + clearInterval(progressInterval); + progressInterval = null; + return; + } + + container.innerHTML = downloads.map(([url, info]) => { + const percent = info.progress_percent || 0; + const downloaded = info.downloaded_size || 0; + const total = info.total_size || 0; + const status = info.status || 'En cours'; + const speed = info.speed || 0; + + let fileName = info.game_name || 'Téléchargement'; + if (!info.game_name) { + try { + fileName = decodeURIComponent(url.split('/').pop()); + } catch (e) { + fileName = url.split('/').pop(); + } + } + + const platformInfo = info.platform ? ' (' + info.platform + ')' : ''; + + return ` +
+
+ `;
+ }).join('');
+ } catch (error) {
+ console.error('[ERROR] Rafraîchissement progression:', error);
+ }
+ } else {
+ clearInterval(progressInterval);
+ progressInterval = null;
+ }
+ }, 500);
+ }
+ } catch (error) {
+ container.innerHTML = `
+ 📥 ${fileName}${platformInfo}
+
+
+
+
+
+
+ ${status} - ${percent.toFixed(1)}%
+ ${speed > 0 ? speed.toFixed(2) + ' Mo/s' : ''}
+
+ ${total > 0 ? `${(downloaded / 1024 / 1024).toFixed(1)} Mo / ${(total / 1024 / 1024).toFixed(1)} Mo
` : ''}
+
+ 📅 Démarré: ${info.timestamp || 'N/A'}
+
+ Erreur: ${error.message}
`; + } + } + + // Charger la file d'attente + async function loadQueue() { + const container = document.getElementById('queue-content'); + + try { + const response = await fetch('/api/queue'); + const data = await response.json(); + + if (!data.success) throw new Error(data.error); + + const queue = data.queue || []; + const isActive = data.active || false; + + let html = '';
+
+ // Afficher l'état actif
+ if (isActive) {
+ html += '
';
+ container.innerHTML = html;
+
+ } catch (error) {
+ container.innerHTML = `';
+ html += '⏳ ' + t('web_queue_active_download') + '';
+ html += '
';
+ } else {
+ html += '';
+ html += '✓ ' + t('web_queue_no_active') + '';
+ html += '
';
+ }
+
+ // Afficher la queue
+ if (queue.length === 0) {
+ html += '' + t('web_queue_empty') + '
'; + } else { + html += '' + t('web_queue_title') + ' (' + queue.length + ')
'; + html += '';
+ queue.forEach((item, idx) => {
+ const gameName = item.game_name || 'Unknown';
+ const platform = item.platform || 'N/A';
+ const status = item.status || 'Queued';
+ html += `
+
';
+
+ // Bouton pour vider la queue
+ html += '';
+ }
+
+ html += '
+
+ `;
+ });
+ html += '
+ ${idx + 1}. 📁 ${gameName}
+
+
+
+ Platform: ${platform} | Status: ${status}
+
+ ❌ ${t('web_error')}: ${error.message}
`; + } + } + + // Supprimer un élément de la queue + async function removeFromQueue(taskId, btn) { + if (!confirm(t('web_confirm_remove_queue'))) { + return; + } + + try { + const response = await fetch('/api/queue/remove', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ task_id: taskId }) + }); + const data = await response.json(); + if (data.success) { + btn.style.color = '#28a745'; + btn.textContent = '✅'; + setTimeout(() => { loadQueue(); }, 500); + } else { + alert(t('web_error') + ': ' + data.error); + } + } catch (error) { + alert(t('web_error') + ': ' + error.message); + } + } + + // Vider la queue + async function clearQueue() { + if (!confirm(t('web_confirm_clear_queue'))) { + return; + } + + try { + const response = await fetch('/api/queue/clear', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({}) + }); + const data = await response.json(); + if (data.success) { + alert(t('web_queue_cleared')); + loadQueue(); + } else { + alert(t('web_error') + ': ' + data.error); + } + } catch (error) { + alert(t('web_error') + ': ' + error.message); + } + } + + // Checker les téléchargements terminés pour afficher les toasts + async function checkCompletedDownloads() { + try { + const response = await fetch('/api/history'); + const data = await response.json(); + + if (!data.success || !data.history) return; + + // Parcourir l'historique récent pour détecter les complétions + data.history.slice(0, 10).forEach(entry => { + const gameKey = `${entry.platform}_${entry.game_name}`; + const status = entry.status || ''; + + // Si ce téléchargement n'était pas tracké et il est maintenant complété/erreur/etc + if (!trackedDownloads[gameKey]) { + if (status === 'Download_OK' || status === 'Completed') { + showToast(`✅ "${entry.game_name}" téléchargé avec succès!`, 'success', 4000); + trackedDownloads[gameKey] = 'completed'; + } else if (status === 'Erreur' || status === 'error') { + showToast(`❌ Erreur lors du téléchargement de "${entry.game_name}"`, 'error', 5000); + trackedDownloads[gameKey] = 'error'; + } else if (status === 'Already_Present') { + showToast(`ℹ️ "${entry.game_name}" était déjà présent`, 'info', 3000); + trackedDownloads[gameKey] = 'already_present'; + } else if (status === 'Canceled') { + // Ne pas afficher de toast pour les téléchargements annulés + trackedDownloads[gameKey] = 'canceled'; + } + } + }); + + // Sauvegarder dans localStorage + localStorage.setItem('trackedDownloads', JSON.stringify(trackedDownloads)); + + // Nettoyer les vieux téléchargements (garder seulement les 50 derniers) + const keys = Object.keys(trackedDownloads); + if (keys.length > 100) { + // Supprimer les 50 plus anciens + keys.slice(0, 50).forEach(key => { + delete trackedDownloads[key]; + }); + localStorage.setItem('trackedDownloads', JSON.stringify(trackedDownloads)); + } + } catch (error) { + console.error('[DEBUG] Erreur checkCompletedDownloads:', error); + } + } + + // Charger l'historique + async function loadHistory() { + const container = document.getElementById('history-content'); + container.innerHTML = '⏳ Chargement...
';
+
+ try {
+ const response = await fetch('/api/history');
+ const data = await response.json();
+
+ if (!data.success) throw new Error(data.error);
+
+ if (data.history.length === 0) {
+ container.innerHTML = '' + t('web_history_empty') + '
'; + return; + } + + // Pré-charger les traductions + const platformLabel = t('web_history_platform'); + const sizeLabel = t('web_history_size'); + const statusCompleted = t('web_history_status_completed'); + const statusError = t('web_history_status_error'); + const statusCanceled = t('history_status_canceled'); + const statusAlreadyPresent = t('status_already_present'); + const statusQueued = t('download_queued'); + const statusDownloading = t('download_in_progress'); + + container.innerHTML = data.history.map(h => { + const status = h.status || ''; + const isError = status === 'Erreur' || status === 'error'; + const isCanceled = status === 'Canceled'; + const isAlreadyPresent = status === 'Already_Present'; + const isQueued = status === 'Queued'; + const isDownloading = status === 'Downloading' || status === 'Téléchargement' || status === 'Downloading' || + status === 'Connecting' || status === 'Extracting' || status.startsWith('Try '); + const isSuccess = status === 'Download_OK' || status === 'Completed'; + + // Déterminer l'icône et la couleur + let statusIcon = '✅'; // par défaut succès + let statusColor = '#28a745'; // vert + let statusText = statusCompleted; + + if (isError) { + statusIcon = '❌'; + statusColor = '#dc3545'; // rouge + statusText = statusError; + } else if (isCanceled) { + statusIcon = '⏸️'; + statusColor = '#ffc107'; // orange + statusText = statusCanceled; + } else if (isAlreadyPresent) { + statusIcon = 'ℹ️'; + statusColor = '#17a2b8'; // bleu clair + statusText = statusAlreadyPresent; + } else if (isQueued) { + statusIcon = '📋'; + statusColor = '#6c757d'; // gris (en attente) + statusText = statusQueued; + } else if (isDownloading) { + statusIcon = '⬇️'; + statusColor = '#007bff'; // bleu (en cours) + statusText = statusDownloading; + } + + const totalMo = h.total_size ? (h.total_size / 1024 / 1024).toFixed(1) : 'N/A'; + const platform = h.platform || 'N/A'; + const timestamp = h.timestamp || 'N/A'; + + // Debug: log le timestamp pour vérifier + if (!h.timestamp) { + console.log('[DEBUG] Timestamp manquant pour:', h.game_name, 'Object:', h); + } + + return ` +
+
+ `;
+ }).join('') + `
+
+
+ ${h.message ? `
+ ${statusIcon} ${h.game_name || 'Inconnu'}
+
+
+ 📦 ${platformLabel}: ${platform}
+
+
+ 💾 ${sizeLabel}: ${totalMo} Mo
+
+
+ 📅 Date: ${timestamp}
+
+
+
+ ${statusText}
+
+
+ ${h.message}
` : ''}
+
+
+
+ `;
+ } catch (error) {
+ container.innerHTML = `${t('web_error')}: ${error.message}
`; + } + } + + // Vider l'historique + async function clearHistory() { + if (!confirm(t('web_history_clear') + '?\\n\\nThis action cannot be undone.')) { + return; + } + + try { + const response = await fetch('/api/clear-history', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + + const data = await response.json(); + + if (data.success) { + alert('✅ ' + t('web_history_cleared')); + loadHistory(); // Recharger l\\'historique + } else { + throw new Error(data.error || t('web_error_unknown')); + } + } catch (error) { + alert('❌ ' + t('web_error_clear_history', error.message)); + } + } + + // Charger les settings + async function loadSettings() { + const container = document.getElementById('settings-content'); + container.innerHTML = '⏳ Chargement...
';
+
+ try {
+ // Charger les settings et les infos système en parallèle
+ const [settingsResponse, systemInfoResponse] = await Promise.all([
+ fetch('/api/settings'),
+ fetch('/api/system_info')
+ ]);
+
+ const settingsData = await settingsResponse.json();
+ const systemInfoData = await systemInfoResponse.json();
+
+ if (!settingsData.success) throw new Error(settingsData.error);
+
+ const settings = settingsData.settings;
+ const info = settingsData.system_info;
+ const systemInfo = systemInfoData.success ? systemInfoData.system_info : null;
+
+ // Pré-charger les traductions
+ const osLabel = t('web_settings_os');
+ const platformsCountLabel = t('web_settings_platforms_count');
+ const showUnsupportedLabel = t('web_settings_show_unsupported');
+ const allowUnknownLabel = t('web_settings_allow_unknown');
+
+ // Construire la section d'informations système détaillées
+ let systemInfoHTML = '';
+ if (systemInfo && (systemInfo.model || systemInfo.cpu_model)) {
+ systemInfoHTML = `
+ 🖥️ System Information
+
+ ${systemInfo.model ? `
+
+ `;
+ }
+
+ container.innerHTML = `
+
+ 💻 Model
+ ${systemInfo.model}
+
+ ` : ''}
+ ${systemInfo.system ? `
+
+ 🐧 System
+ ${systemInfo.system}
+
+ ` : ''}
+ ${systemInfo.architecture ? `
+
+ ⚙️ Architecture
+ ${systemInfo.architecture}
+
+ ` : ''}
+ ${systemInfo.cpu_model ? `
+
+ 🔧 CPU Model
+ ${systemInfo.cpu_model}
+
+ ` : ''}
+ ${systemInfo.cpu_cores ? `
+
+ 🧮 CPU Cores
+ ${systemInfo.cpu_cores}
+
+ ` : ''}
+ ${systemInfo.cpu_max_frequency ? `
+
+ ⚡ CPU Frequency
+ ${systemInfo.cpu_max_frequency}
+
+ ` : ''}
+ ${systemInfo.cpu_features ? `
+
+ ✨ CPU Features
+ ${systemInfo.cpu_features}
+
+ ` : ''}
+ ${systemInfo.temperature ? `
+
+ 🌡️ Temperature
+ ${systemInfo.temperature}
+
+ ` : ''}
+ ${systemInfo.available_memory && systemInfo.total_memory ? `
+
+ 💾 Memory
+ ${systemInfo.available_memory} / ${systemInfo.total_memory}
+
+ ` : ''}
+ ${systemInfo.display_resolution ? `
+
+ 🖥️ Display Resolution
+ ${systemInfo.display_resolution}
+
+ ` : ''}
+ ${systemInfo.display_refresh_rate ? `
+
+ 🔄 Refresh Rate
+ ${systemInfo.display_refresh_rate}
+
+ ` : ''}
+ ${systemInfo.data_partition_format ? `
+
+ 💽 Partition Format
+ ${systemInfo.data_partition_format}
+
+ ` : ''}
+ ${systemInfo.data_partition_space ? `
+
+ 💿 Available Space
+ ${systemInfo.data_partition_space}
+
+ ` : ''}
+ ${systemInfo.network_ip ? `
+
+ 🌐 Network IP
+ ${systemInfo.network_ip}
+
+ ` : ''}
+
+ 🎮 ${platformsCountLabel}
+ ${info.platforms_count}
+
+ ℹ️ ${t('web_settings_title')}
+ + ${systemInfoHTML} + +RGSX Configuration ⚙️
+ +
+
+
+
+
+
+
+
+
+
+
+ Current: ${info.roms_folder} ${settings.roms_folder ? '(custom)' : '(default)'}
+
+
+
+ `;
+
+ // Mettre à jour l'affichage de la valeur du font scale en temps réel
+ document.getElementById('setting-font-scale').addEventListener('input', function(e) {
+ const label = e.target.previousElementSibling;
+ label.textContent = `🔤 ${t('web_settings_font_scale')} (${e.target.value})`;
+ });
+
+ } catch (error) {
+ container.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${t('web_error')}: ${error.message}
`; + } + } + + // Sauvegarder les settings + async function saveSettings() { + try { + const settings = { + language: document.getElementById('setting-language').value, + music_enabled: document.getElementById('setting-music').checked, + accessibility: { + font_scale: parseFloat(document.getElementById('setting-font-scale').value) + }, + display: { + grid: document.getElementById('setting-grid').value, + font_family: document.getElementById('setting-font-family').value + }, + symlink: { + enabled: document.getElementById('setting-symlink').checked + }, + sources: { + mode: document.getElementById('setting-sources-mode').value, + custom_url: document.getElementById('setting-custom-url').value + }, + show_unsupported_platforms: document.getElementById('setting-show-unsupported').checked, + allow_unknown_extensions: document.getElementById('setting-allow-unknown').checked, + roms_folder: document.getElementById('setting-roms-folder').value.trim() + }; + + const response = await fetch('/api/settings', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ settings: settings }) + }); + + const data = await response.json(); + + if (data.success) { + // Afficher le dialogue de confirmation de redémarrage + showRestartDialog(); + } else { + throw new Error(data.error || t('web_error_unknown')); + } + } catch (error) { + alert('❌ ' + t('web_error_save_settings', error.message)); + } + } + + // Afficher le dialogue de confirmation de redémarrage + function showRestartDialog() { + // Créer le dialogue modal + const modal = document.createElement('div'); + modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000;'; + + const dialog = document.createElement('div'); + dialog.style.cssText = 'background: white; padding: 30px; border-radius: 10px; max-width: 500px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);'; + + const title = document.createElement('h2'); + title.textContent = t('web_restart_confirm_title'); + title.style.cssText = 'margin: 0 0 20px 0; color: #333;'; + + const message = document.createElement('p'); + message.textContent = t('web_restart_confirm_message'); + message.style.cssText = 'margin: 0 0 30px 0; color: #666; line-height: 1.5;'; + + const buttonContainer = document.createElement('div'); + buttonContainer.style.cssText = 'display: flex; gap: 10px; justify-content: flex-end;'; + + const btnNo = document.createElement('button'); + btnNo.textContent = t('web_restart_no'); + btnNo.style.cssText = 'padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;'; + btnNo.onclick = () => { + modal.remove(); + alert('✅ ' + t('web_settings_saved')); + }; + + const btnYes = document.createElement('button'); + btnYes.textContent = t('web_restart_yes'); + btnYes.style.cssText = 'padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;'; + btnYes.onclick = async () => { + modal.remove(); + await restartApplication(); + }; + + buttonContainer.appendChild(btnNo); + buttonContainer.appendChild(btnYes); + + dialog.appendChild(title); + dialog.appendChild(message); + dialog.appendChild(buttonContainer); + modal.appendChild(dialog); + document.body.appendChild(modal); + } + + // Redémarrer l'application + async function restartApplication() { + try { + const response = await fetch('/api/restart', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + + const data = await response.json(); + + if (data.success) { + alert('✅ ' + t('web_restart_success')); + } else { + throw new Error(data.error || t('web_error_unknown')); + } + } catch (error) { + alert('❌ ' + t('web_restart_error', error.message)); + } + } + + // Générer un fichier ZIP de support + async function generateSupportZip() { + try { + // Afficher un message de chargement + const loadingMsg = t('web_support_generating'); + const originalButton = event ? event.target : null; + if (originalButton) { + originalButton.disabled = true; + originalButton.innerHTML = '⏳ ' + loadingMsg; + } + + // Appeler l'API pour générer le ZIP + const response = await fetch('/api/support', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); + + if (!response.ok) { + const data = await response.json(); + throw new Error(data.error || t('web_error_unknown')); + } + + // Télécharger le fichier + const blob = await response.blob(); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + + // Extraire le nom du fichier depuis les headers + const contentDisposition = response.headers.get('Content-Disposition'); + let filename = 'rgsx_support.zip'; + if (contentDisposition) { + const matches = /filename="?([^"]+)"?/.exec(contentDisposition); + if (matches && matches[1]) { + filename = matches[1]; + } + } + + a.download = filename; + document.body.appendChild(a); + a.click(); + window.URL.revokeObjectURL(url); + document.body.removeChild(a); + + // Afficher le message d'instructions + alert(t('web_support_title') + '\\n\\n' + t('web_support_message')); + + // Restaurer le bouton + if (originalButton) { + originalButton.disabled = false; + originalButton.innerHTML = '🆘 ' + t('web_support'); + } + + } catch (error) { + console.error('Erreur génération support:', error); + alert('❌ ' + t('web_support_error', error.message)); + + // Restaurer le bouton en cas d'erreur + const originalButton = event ? event.target : null; + if (originalButton) { + originalButton.disabled = false; + originalButton.innerHTML = '🆘 ' + t('web_support'); + } + } + } + + // Navigateur de répertoires pour ROMs folder + let currentBrowsePath = ''; + let browseInitialized = false; + + async function browseRomsFolder() { + try { + // Récupérer le chemin actuel de l'input SEULEMENT au premier appel + if (!browseInitialized) { + const inputValue = document.getElementById('setting-roms-folder').value.trim(); + if (inputValue) { + currentBrowsePath = inputValue; + } + browseInitialized = true; + } + + const response = await fetch(`/api/browse-directories?path=${encodeURIComponent(currentBrowsePath)}`); + const data = await response.json(); + + if (!data.success) { + throw new Error(data.error || 'Erreur lors du listage des répertoires'); + } + + // Créer une modal pour afficher les répertoires + const modal = document.createElement('div'); + modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;'; + + const content = document.createElement('div'); + content.style.cssText = 'background: white; border-radius: 10px; padding: 20px; max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto;'; + + // Titre avec chemin actuel + const title = document.createElement('h2'); + title.textContent = '📂 ' + t('web_browse_title'); + title.style.marginBottom = '10px'; + content.appendChild(title); + + const pathDisplay = document.createElement('div'); + pathDisplay.style.cssText = 'background: #f0f0f0; padding: 10px; border-radius: 5px; margin-bottom: 15px; word-break: break-all; font-family: monospace; font-size: 14px;'; + pathDisplay.textContent = data.current_path || t('web_browse_select_drive'); + content.appendChild(pathDisplay); + + // Boutons d'action + const buttonContainer = document.createElement('div'); + buttonContainer.style.cssText = 'display: flex; gap: 10px; justify-content: flex-end;'; + + // Bouton parent - afficher si parent_path n'est pas null (même si c'est une chaîne vide pour revenir aux lecteurs) + if (data.parent_path !== null && data.parent_path !== undefined) { + const parentBtn = document.createElement('button'); + parentBtn.textContent = data.parent_path === '' ? '💾 ' + t('web_browse_drives') : '⬆️ ' + t('web_browse_parent'); + parentBtn.style.cssText = 'flex: 1; padding: 10px; background: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;'; + parentBtn.onclick = () => { + currentBrowsePath = data.parent_path; + modal.remove(); + browseRomsFolder(); + }; + buttonContainer.appendChild(parentBtn); + } + + // Bouton sélectionner ce dossier + if (data.current_path) { + const selectBtn = document.createElement('button'); + selectBtn.textContent = '✅ ' + t('web_browse_select'); + selectBtn.style.cssText = 'flex: 2; padding: 10px; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;'; + selectBtn.onclick = () => { + document.getElementById('setting-roms-folder').value = data.current_path; + currentBrowsePath = ''; + browseInitialized = false; + modal.remove(); + + // Afficher une alerte informant qu'il faut redémarrer + alert('⚠️ ' + t('web_browse_alert_restart', data.current_path)); + }; + buttonContainer.appendChild(selectBtn); + } + + // Bouton annuler + const cancelBtn = document.createElement('button'); + cancelBtn.textContent = '❌ ' + t('web_browse_cancel'); + cancelBtn.style.cssText = 'flex: 1; padding: 10px; background: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold;'; + cancelBtn.onclick = () => { + currentBrowsePath = ''; + browseInitialized = false; + modal.remove(); + }; + buttonContainer.appendChild(cancelBtn); + + content.appendChild(buttonContainer); + + // Liste des répertoires + const dirList = document.createElement('div'); + dirList.style.cssText = 'max-height: 400px; overflow-y: auto; border: 2px solid #ddd; border-radius: 5px;'; + + if (data.directories.length === 0) { + const emptyMsg = document.createElement('div'); + emptyMsg.style.cssText = 'padding: 20px; text-align: center; color: #666;'; + emptyMsg.textContent = t('web_browse_empty'); + dirList.appendChild(emptyMsg); + } else { + data.directories.forEach(dir => { + const dirItem = document.createElement('div'); + dirItem.style.cssText = 'padding: 12px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s;'; + dirItem.onmouseover = () => dirItem.style.background = '#f0f0f0'; + dirItem.onmouseout = () => dirItem.style.background = 'white'; + + const icon = document.createElement('span'); + icon.textContent = dir.is_drive ? '💾' : '📁'; + icon.style.fontSize = '20px'; + + const name = document.createElement('span'); + name.textContent = dir.name; + name.style.flex = '1'; + + dirItem.appendChild(icon); + dirItem.appendChild(name); + + dirItem.onclick = () => { + currentBrowsePath = dir.path; + modal.remove(); + browseRomsFolder(); + }; + + dirList.appendChild(dirItem); + }); + } + + content.appendChild(dirList); + modal.appendChild(content); + document.body.appendChild(modal); + + // Fermer avec clic en dehors + modal.onclick = (e) => { + if (e.target === modal) { + currentBrowsePath = ''; + browseInitialized = false; + modal.remove(); + } + }; + + } catch (error) { + alert('❌ ' + t('web_error_browse', error.message)); + } + } + + // Initialisation au démarrage + async function init() { + await loadTranslations(); // Charger les traductions + applyTranslations(); // Appliquer les traductions à l'interface + loadPlatforms(); // Charger les plateformes + updateRegionPriorityDisplay(); // Update initial display + + // Vérifier les téléchargements complétés toutes les 2 secondes + setInterval(checkCompletedDownloads, 2000); + } + + // Lancer l'initialisation + init(); + \ No newline at end of file