Add Featured Servers page to GUI

2026-02-26 10:21:45 -03:00 · 2026-01-29 19:00:13 +01:00
parent 5039bcdadf
commit 22ea2f56d3
4 changed files with 825 additions and 410 deletions
--- a/GUI/js/featured.js
+++ b/GUI/js/featured.js
@@ -0,0 +1,165 @@
+// Featured Servers Management
+const FEATURED_SERVERS_API = 'https://assets.authbp.xyz/featured.json';
+
+/**
+ * Load and display featured servers
+ */
+async function loadFeaturedServers() {
+  const featuredContainer = document.getElementById('featuredServersList');
+  const myServersContainer = document.getElementById('myServersList');
+  
+  try {
+    console.log('[FeaturedServers] Fetching from', FEATURED_SERVERS_API);
+    
+    // Fetch featured servers from API (no cache)
+    const response = await fetch(FEATURED_SERVERS_API, {
+      cache: 'no-store',
+      headers: {
+        'Cache-Control': 'no-cache',
+        'Pragma': 'no-cache'
+      }
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    const featuredServers = data.featuredServers || [];
+    
+    console.log('[FeaturedServers] Loaded', featuredServers.length, 'featured servers');
+    
+    // Render featured servers
+    if (featuredServers.length === 0) {
+      featuredContainer.innerHTML = `
+        <div class="loading-spinner">
+          <i class="fas fa-info-circle fa-2x"></i>
+          <p>No featured servers</p>
+        </div>
+      `;
+    } else {
+      const featuredHTML = featuredServers.map((server, index) => {
+        console.log(`[FeaturedServers] Building featured card ${index + 1}:`, server.Name);
+        
+        const escapedName = (server.Name || 'Unknown Server').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const escapedAddress = (server.Address || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        const bannerUrl = server.img_Banner || 'https://via.placeholder.com/400x240/1e293b/ffffff?text=Server+Banner';
+        
+        return `
+          <div class="featured-server-card">
+            <img 
+              src="${bannerUrl}" 
+              alt="${escapedName}" 
+              class="featured-server-banner"
+              onerror="this.src='https://via.placeholder.com/400x240/1e293b/ffffff?text=Server'"
+            />
+            <div class="featured-server-content">
+              <h3 class="featured-server-name">${escapedName}</h3>
+              <div class="featured-server-address">
+                <span class="server-address-text">${escapedAddress}</span>
+                <button class="copy-address-btn" onclick="copyServerAddress('${escapedAddress}', this)">
+                  <i class="fas fa-copy"></i>
+                  <span>Copy</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        `;
+      }).join('');
+      
+      featuredContainer.innerHTML = featuredHTML;
+    }
+    
+    // Show "Coming Soon" for my servers
+    myServersContainer.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
+        <p>Coming Soon</p>
+      </div>
+    `;
+    
+  } catch (error) {
+    console.error('[FeaturedServers] Error loading servers:', error);
+    featuredContainer.innerHTML = `
+      <div class="loading-spinner">
+        <i class="fas fa-exclamation-triangle fa-2x" style="color: #ef4444;"></i>
+        <p>Failed to load servers</p>
+        <p style="font-size: 0.9rem; color: #64748b;">${error.message}</p>
+      </div>
+    `;
+    myServersContainer.innerHTML = `
+      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 1.2rem;">
+        <p>Coming Soon</p>
+      </div>
+    `;
+  }
+}
+
+/**
+ * Copy server address to clipboard
+ */
+async function copyServerAddress(address, button) {
+  try {
+    await navigator.clipboard.writeText(address);
+    
+    // Visual feedback
+    const originalHTML = button.innerHTML;
+    button.classList.add('copied');
+    button.innerHTML = '<i class="fas fa-check"></i><span>Copied!</span>';
+    
+    setTimeout(() => {
+      button.classList.remove('copied');
+      button.innerHTML = originalHTML;
+    }, 2000);
+    
+    console.log('[FeaturedServers] Copied address:', address);
+  } catch (error) {
+    console.error('[FeaturedServers] Failed to copy address:', error);
+    
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = address;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.select();
+    
+    try {
+      document.execCommand('copy');
+      const originalHTML = button.innerHTML;
+      button.classList.add('copied');
+      button.innerHTML = '<i class="fas fa-check"></i><span>Copied!</span>';
+      
+      setTimeout(() => {
+        button.classList.remove('copied');
+        button.innerHTML = originalHTML;
+      }, 2000);
+    } catch (err) {
+      console.error('[FeaturedServers] Fallback copy also failed:', err);
+    }
+    
+    document.body.removeChild(textArea);
+  }
+}
+
+// Load featured servers when the featured page becomes visible
+document.addEventListener('DOMContentLoaded', () => {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const featuredPage = document.getElementById('featured-page');
+        if (featuredPage && featuredPage.classList.contains('active')) {
+          loadFeaturedServers();
+        }
+      }
+    });
+  });
+  
+  const featuredPage = document.getElementById('featured-page');
+  if (featuredPage) {
+    observer.observe(featuredPage, { attributes: true });
+    
+    // Load immediately if already visible
+    if (featuredPage.classList.contains('active')) {
+      loadFeaturedServers();
+    }
+  }
+});