Added mods version selector

Added mods version selector

GUI/js/mods.js

@@ -78,6 +78,20 @@ function setupModsEventListeners() {
       }
     });
   }
+
+  const browseContainer = document.getElementById('browseModsList');
+  if (browseContainer) {
+    browseContainer.addEventListener('click', (e) => {
+      const installBtn = e.target.closest('[data-install-mod-id]');
+      if (installBtn) {
+        const modId = installBtn.getAttribute('data-install-mod-id');
+        const mod = browseMods.find(m => m.id == modId);
+        if (mod) {
+          openVersionSelectModal(mod);
+        }
+      }
+    });
+  }
 }
 
 function openMyModsModal() {
@@ -295,13 +309,6 @@ function displayBrowseMods(mods) {
   }
 
   browseContainer.innerHTML = mods.map(mod => createBrowseModCard(mod)).join('');
-
-  mods.forEach(mod => {
-    const installBtn = document.getElementById(`install-${mod.id}`);
-    if (installBtn) {
-      installBtn.addEventListener('click', () => downloadAndInstallMod(mod));
-    }
-  });
 }
 
 function createBrowseModCard(mod) {
@@ -350,12 +357,12 @@ function createBrowseModCard(mod) {
           ${window.i18n ? window.i18n.t('mods.view') : 'VIEW'}
         </button>
         ${!isInstalled ?
-      `<button id="install-${mod.id}" class="mod-btn-toggle bg-primary text-black hover:bg-primary/80">
-            <i class="fas fa-download"></i>
+      `<button data-install-mod-id=\"${mod.id}\" class=\"mod-btn-toggle bg-primary text-black hover:bg-primary/80\">
+            <i class=\"fas fa-download\"></i>
             ${window.i18n ? window.i18n.t('mods.install') : 'INSTALL'}
           </button>` :
-      `<button class="mod-btn-toggle bg-white/10 text-white" disabled>
-            <i class="fas fa-check"></i>
+      `<button class=\"mod-btn-toggle bg-white/10 text-white\" disabled>
+            <i class=\"fas fa-check\"></i>
             ${window.i18n ? window.i18n.t('mods.installed') : 'INSTALLED'}
           </button>`
     }
@@ -364,6 +371,104 @@ function createBrowseModCard(mod) {
   `;
 }
 
+let currentSelectedMod = null;
+
+function openVersionSelectModal(mod) {
+  currentSelectedMod = mod;
+  const modal = document.getElementById('versionSelectModal');
+  const closeBtn = document.getElementById('closeVersionModal');
+  const versionList = document.getElementById('versionList');
+  
+  if (modal) {
+    modal.style.display = 'flex';
+    modal.classList.add('active');
+    
+    const closeHandler = () => {
+      modal.classList.remove('active');
+      setTimeout(() => {
+        modal.style.display = 'none';
+      }, 300);
+      currentSelectedMod = null;
+    };
+    
+    if (closeBtn) {
+      closeBtn.onclick = closeHandler;
+    }
+    modal.onclick = (e) => {
+      if (e.target === modal) closeHandler();
+    };
+    
+    loadModVersions(mod.id, versionList);
+  }
+}
+
+async function loadModVersions(modId, container) {
+  container.innerHTML = `
+    <div class="loading-versions">
+      <i class="fas fa-spinner fa-spin fa-2x" style="margin-bottom: 10px; display: block;"></i>
+      <span>Loading versions...</span>
+    </div>
+  `;
+  
+  try {
+    const versions = await window.electronAPI.getModFiles(modId);
+    
+    if (!versions || versions.length === 0) {
+      container.innerHTML = `<div class="p-4 text-center text-gray-400" style="padding: 2rem;">No versions found for this mod.</div>`;
+      return;
+    }
+    
+    // Sort versions by date desc (API returns desc but ensure)
+    versions.sort((a, b) => new Date(b.fileDate) - new Date(a.fileDate));
+    
+    container.innerHTML = versions.map(file => `
+      <div class="version-item">
+        <div class="version-info">
+          <div class="version-name">${file.displayName}</div>
+          <div class="version-meta">
+            <span><i class="fas fa-calendar"></i> ${new Date(file.fileDate).toLocaleDateString()}</span>
+            <span><i class="fas fa-download"></i> ${formatNumber(file.downloadCount)}</span>
+            <span><i class="fas fa-file-archive"></i> ${(file.fileLength / 1024 / 1024).toFixed(2)} MB</span>
+          </div>
+        </div>
+        <div class="version-actions">
+          <button class="btn-install" data-file-id="${file.id}">
+            Install
+          </button>
+        </div>
+      </div>
+    `).join('');
+
+    // Add event listeners securely
+    container.querySelectorAll('.btn-install').forEach((btn, index) => {
+      const file = versions[index]; // Map index to file data
+      btn.onclick = () => installVersion(file);
+    });
+    
+  } catch (error) {
+    console.error('Error loading versions:', error);
+    container.innerHTML = `<div class="p-4 text-center text-red-400" style="padding: 2rem;">Error loading versions.<br><small>${error.message}</small></div>`;
+  }
+}
+
+async function installVersion(file) {
+  if (!currentSelectedMod) return;
+  
+  const modal = document.getElementById('versionSelectModal');
+  modal.style.display = 'none';
+  
+  const modInfo = {
+    ...currentSelectedMod,
+    fileId: file.id,
+    downloadUrl: file.downloadUrl,
+    fileName: file.fileName,
+    fileSize: file.fileLength
+  };
+  
+  await downloadAndInstallMod(modInfo);
+  currentSelectedMod = null;
+}
+
 async function downloadAndInstallMod(modInfo) {
   try {
     const downloadMsg = window.i18n ? window.i18n.t('notifications.modsDownloading').replace('{name}', modInfo.name) : `Downloading ${modInfo.name}...`;
@@ -762,7 +867,10 @@ window.modsManager = {
   closeMyModsModal,
   viewModPage,
   loadInstalledMods,
-  loadBrowseMods
+  loadBrowseMods,
+  openVersionSelectModal
 };
 
-document.addEventListener('DOMContentLoaded', initModsManager);
+// Remove auto-init since we are now calling it from script.js explicitly
+// which guarantees order and environment readiness
+// document.addEventListener('DOMContentLoaded', initModsManager);

GUI/js/script.js

@@ -2,7 +2,7 @@ import './ui.js';
 import './install.js';
 import './launcher.js';
 import './news.js';
-import './mods.js';
+import { initModsManager } from './mods.js';
 import './players.js';
 import './settings.js';
 import './logs.js';
@@ -15,6 +15,12 @@ let i18nInitialized = false;
   
   if (document.readyState === 'complete' || document.readyState === 'interactive') {
     updateLanguageSelector();
+    initModsManager();
+  } else {
+    document.addEventListener('DOMContentLoaded', () => {
+      updateLanguageSelector();
+      initModsManager();
+    });
   }
 })();