Remove launcher chat and add Discord popup

GUI/js/chat.js

@@ -1,500 +0,0 @@
-
-let socket = null;
-let isAuthenticated = false;
-let messageQueue = [];
-let chatUsername = '';
-let userColor = '#3498db';
-let userBadge = null;
-const SOCKET_URL = 'https://chat.hytalef2p.com';
-const MAX_MESSAGE_LENGTH = 500;
-
-async function getOrCreatePlayerId() {
-  return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-}
-
-export async function initChat() {
-  if (window.electronAPI?.loadChatUsername) {
-    chatUsername = await window.electronAPI.loadChatUsername();
-  }
-  
-  if (window.electronAPI?.loadChatColor) {
-    const savedColor = await window.electronAPI.loadChatColor();
-    if (savedColor) {
-      userColor = savedColor;
-    }
-  }
-
-  if (!chatUsername || chatUsername.trim() === '') {
-    showUsernameModal();
-    return;
-  }
-
-  setupChatUI();
-  setupColorSelector();
-  await connectToChat();
-}
-
-function showUsernameModal() {
-  const modal = document.getElementById('chatUsernameModal');
-  if (modal) {
-    modal.style.display = 'flex';
-    
-    const input = document.getElementById('chatUsernameInput');
-    if (input) {
-      setTimeout(() => input.focus(), 100);
-    }
-  }
-}
-
-function hideUsernameModal() {
-  const modal = document.getElementById('chatUsernameModal');
-  if (modal) {
-    modal.style.display = 'none';
-  }
-}
-
-async function submitChatUsername() {
-  const input = document.getElementById('chatUsernameInput');
-  const errorMsg = document.getElementById('chatUsernameError');
-  
-  if (!input) return;
-
-  const username = input.value.trim();
-
-  if (username.length === 0) {
-    if (errorMsg) errorMsg.textContent = 'Username cannot be empty';
-    return;
-  }
-
-  if (username.length < 3) {
-    if (errorMsg) errorMsg.textContent = 'Username must be at least 3 characters';
-    return;
-  }
-
-  if (username.length > 20) {
-    if (errorMsg) errorMsg.textContent = 'Username must be 20 characters or less';
-    return;
-  }
-
-  if (!/^[a-zA-Z0-9_-]+$/.test(username)) {
-    if (errorMsg) errorMsg.textContent = 'Username can only contain letters, numbers, - and _';
-    return;
-  }
-
-  chatUsername = username;
-  if (window.electronAPI?.saveChatUsername) {
-    await window.electronAPI.saveChatUsername(username);
-  }
-
-  hideUsernameModal();
-
-  setupChatUI();
-  await connectToChat();
-}
-
-function setupChatUI() {
-  const sendBtn = document.getElementById('chatSendBtn');
-  const chatInput = document.getElementById('chatInput');
-  const chatMessages = document.getElementById('chatMessages');
-
-  if (!sendBtn || !chatInput || !chatMessages) {
-    console.warn('Chat UI elements not found');
-    return;
-  }
-
-  sendBtn.addEventListener('click', () => {
-    sendMessage();
-  });
-
-  chatInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  });
-
-  chatInput.addEventListener('input', () => {
-    if (chatInput.value.length > MAX_MESSAGE_LENGTH) {
-      chatInput.value = chatInput.value.substring(0, MAX_MESSAGE_LENGTH);
-    }
-    updateCharCounter();
-  });
-
-  updateCharCounter();
-}
-
-async function connectToChat() {
-  try {
-    if (!window.io) {
-      await loadSocketIO();
-    }
-
-    const userId = await window.electronAPI?.getUserId();
-
-    if (!userId) {
-      console.error('User ID not available');
-      addSystemMessage('Error: Could not connect to chat');
-      return;
-    }
-
-    if (!chatUsername || chatUsername.trim() === '') {
-      console.error('Chat username not set');
-      addSystemMessage('Error: Username not set');
-      return;
-    }
-
-    socket = io(SOCKET_URL, {
-      transports: ['websocket', 'polling'],
-      reconnection: true,
-      reconnectionAttempts: 5,
-      reconnectionDelay: 1000
-    });
-
-    socket.on('connect', async () => {
-      console.log('Connected to chat server');
-      
-      const uuid = await window.electronAPI?.getCurrentUuid();
-      
-      socket.emit('authenticate', { 
-        username: chatUsername, 
-        userId,
-        uuid: uuid,
-        userColor: userColor
-      });
-    });
-
-    socket.on('authenticated', (data) => {
-      isAuthenticated = true;
-      userBadge = data.badge; 
-      addSystemMessage(`Connected as ${data.username}`);
-      
-      while (messageQueue.length > 0) {
-        const msg = messageQueue.shift();
-        socket.emit('send_message', { message: msg });
-      }
-    });
-
-    socket.on('message', (data) => {
-      if (data.type === 'system') {
-        addSystemMessage(data.message);
-      } else if (data.type === 'user') {
-        addUserMessage(data.username, data.message, data.timestamp, data.userColor, data.badge);
-      }
-    });
-
-    socket.on('users_update', (data) => {
-      updateOnlineCount(data.count);
-    });
-
-    socket.on('error', (data) => {
-      addSystemMessage(`Error: ${data.message}`, 'error');
-    });
-
-    socket.on('clear_chat', (data) => {
-      clearAllMessages();
-      addSystemMessage(data.message || 'Chat cleared by server', 'warning');
-    });
-
-    socket.on('disconnect', () => {
-      isAuthenticated = false;
-      console.log('Disconnected from chat server');
-      addSystemMessage('Disconnected from chat', 'error');
-    });
-
-    socket.on('connect_error', (error) => {
-      console.error('Connection error:', error);
-      addSystemMessage('Connection error. Retrying...', 'error');
-    });
-
-  } catch (error) {
-    console.error('Error connecting to chat:', error);
-    addSystemMessage('Failed to connect to chat server', 'error');
-  }
-}
-
-function loadSocketIO() {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.src = 'https://cdn.socket.io/4.6.1/socket.io.min.js';
-    script.onload = resolve;
-    script.onerror = reject;
-    document.head.appendChild(script);
-  });
-}
-
-function sendMessage() {
-  const chatInput = document.getElementById('chatInput');
-  const message = chatInput.value.trim();
-
-  if (!message || message.length === 0) {
-    return;
-  }
-
-  if (message.length > MAX_MESSAGE_LENGTH) {
-    addSystemMessage(`Message too long (max ${MAX_MESSAGE_LENGTH} characters)`, 'error');
-    return;
-  }
-
-  if (!socket || !isAuthenticated) {
-    messageQueue.push(message);
-    addSystemMessage('Connecting... Your message will be sent soon.', 'warning');
-    chatInput.value = '';
-    updateCharCounter();
-    return;
-  }
-
-  socket.emit('send_message', { message });
-  
-  chatInput.value = '';
-  updateCharCounter();
-}
-
-function addUserMessage(username, message, timestamp, userColor = '#3498db', badge = null) {
-  const chatMessages = document.getElementById('chatMessages');
-  if (!chatMessages) return;
-
-  const messageDiv = document.createElement('div');
-  messageDiv.className = 'chat-message user-message';
-
-  const time = new Date(timestamp).toLocaleTimeString('en-US', {
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-
-  let badgeHTML = '';
-  if (badge) {
-    let badgeStyle = '';
-    if (badge.style === 'rainbow') {
-      badgeStyle = `background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #fab1a0, #fd79a8); background-size: 400% 400%; animation: rainbow 3s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold; display: inline;`;
-    } else if (badge.style === 'gradient') {
-      if (badge.badge === 'CONTRIBUTOR') {
-        badgeStyle = `background: linear-gradient(45deg, #22c55e, #16a34a); background-size: 200% 200%; animation: contributorGlow 2s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: bold; display: inline;`;
-      } else {
-        badgeStyle = `color: ${badge.color}; font-weight: bold; display: inline;`;
-      }
-    }
-    
-    badgeHTML = `<span class="user-badge" style="${badgeStyle}">[${badge.badge}]</span> `;
-  }
-
-  messageDiv.innerHTML = `
-    <div class="message-header">
-      <span class="message-user-info">${badgeHTML}<span class="message-username" style="font-weight: bold;" data-username-color="${userColor}">${escapeHtml(username)}</span></span>
-      <span class="message-time">${time}</span>
-    </div>
-    <div class="message-content">${message}</div>
-  `;
-
-  const usernameElement = messageDiv.querySelector('.message-username');
-  if (usernameElement) {
-    applyUserColorStyle(usernameElement, userColor);
-  }
-
-  chatMessages.appendChild(messageDiv);
-  scrollToBottom();
-}
-
-function addSystemMessage(message, type = 'info') {
-  const chatMessages = document.getElementById('chatMessages');
-  if (!chatMessages) return;
-
-  const messageDiv = document.createElement('div');
-  messageDiv.className = `chat-message system-message system-${type}`;
-  messageDiv.innerHTML = `
-    <div class="message-content">
-      <i class="fas fa-info-circle"></i> ${escapeHtml(message)}
-    </div>
-  `;
-
-  chatMessages.appendChild(messageDiv);
-  scrollToBottom();
-}
-
-function updateOnlineCount(count) {
-  const onlineCountElement = document.getElementById('chatOnlineCount');
-  if (onlineCountElement) {
-    onlineCountElement.textContent = count;
-  }
-}
-
-function updateCharCounter() {
-  const chatInput = document.getElementById('chatInput');
-  const charCounter = document.getElementById('chatCharCounter');
-  
-  if (chatInput && charCounter) {
-    const length = chatInput.value.length;
-    charCounter.textContent = `${length}/${MAX_MESSAGE_LENGTH}`;
-    
-    if (length > MAX_MESSAGE_LENGTH * 0.9) {
-      charCounter.classList.add('warning');
-    } else {
-      charCounter.classList.remove('warning');
-    }
-  }
-}
-
-function scrollToBottom() {
-  const chatMessages = document.getElementById('chatMessages');
-  if (chatMessages) {
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-  }
-}
-
-function clearAllMessages() {
-  const chatMessages = document.getElementById('chatMessages');
-  if (chatMessages) {
-    chatMessages.innerHTML = '';
-    console.log('Chat cleared');
-  }
-}
-
-function escapeHtml(text) {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-window.addEventListener('beforeunload', () => {
-  if (socket && socket.connected) {
-    socket.disconnect();
-  }
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-  const usernameSubmitBtn = document.getElementById('chatUsernameSubmit');
-  const usernameCancelBtn = document.getElementById('chatUsernameCancel');
-  const usernameInput = document.getElementById('chatUsernameInput');
-
-  if (usernameSubmitBtn) {
-    usernameSubmitBtn.addEventListener('click', submitChatUsername);
-  }
-
-  if (usernameCancelBtn) {
-    usernameCancelBtn.addEventListener('click', () => {
-      hideUsernameModal();
-      const playNavItem = document.querySelector('[data-page="play"]');
-      if (playNavItem) playNavItem.click();
-    });
-  }
-
-  if (usernameInput) {
-    usernameInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        submitChatUsername();
-      }
-    });
-  }
-
-  const chatNavItem = document.querySelector('[data-page="chat"]');
-  if (chatNavItem) {
-    chatNavItem.addEventListener('click', () => {
-      if (!socket) {
-        initChat();
-      }
-    });
-  }
-});
-
-function setupColorSelector() {
-  const colorBtn = document.getElementById('chatColorBtn');
-  if (colorBtn) {
-    colorBtn.addEventListener('click', showChatColorModal);
-  }
-
-  const colorOptions = document.querySelectorAll('.color-option');
-  colorOptions.forEach(option => {
-    option.addEventListener('click', () => {
-      document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
-      option.classList.add('selected');
-      updateColorPreview();
-    });
-  });
-
-  const customColor = document.getElementById('customColor');
-  if (customColor) {
-    customColor.addEventListener('input', () => {
-      document.querySelectorAll('.color-option').forEach(o => o.classList.remove('selected'));
-      updateColorPreview();
-    });
-  }
-}
-
-function showChatColorModal() {
-  const modal = document.getElementById('chatColorModal');
-  if (modal) {
-    modal.style.display = 'flex';
-    updateColorPreview();
-  }
-}
-
-window.closeChatColorModal = function() {
-  const modal = document.getElementById('chatColorModal');
-  if (modal) {
-    modal.style.display = 'none';
-  }
-}
-
-function updateColorPreview() {
-  const preview = document.getElementById('colorPreview');
-  if (!preview) return;
-  
-  const selectedOption = document.querySelector('.color-option.selected');
-  let color = '#3498db';
-  
-  if (selectedOption) {
-    color = selectedOption.dataset.color;
-  } else {
-    const customColor = document.getElementById('customColor');
-    if (customColor) color = customColor.value;
-  }
-  
-  preview.style.color = color;
-  preview.style.background = 'transparent';
-  preview.style.webkitBackgroundClip = 'initial';
-  preview.style.webkitTextFillColor = 'initial';
-}
-
-window.applyChatColor = async function() {
-  let newColor;
-  
-  const selectedOption = document.querySelector('.color-option.selected');
-  if (selectedOption) {
-    newColor = selectedOption.dataset.color;
-  } else {
-    const customColor = document.getElementById('customColor');
-    newColor = customColor ? customColor.value : '#3498db';
-  }
-
-  userColor = newColor;
-
-  if (window.electronAPI?.saveChatColor) {
-    await window.electronAPI.saveChatColor(newColor);
-  }
-
-  if (socket && isAuthenticated) {
-    const uuid = await window.electronAPI?.getCurrentUuid();
-    socket.emit('authenticate', { 
-      username: chatUsername, 
-      userId: await getOrCreatePlayerId(),
-      uuid: uuid,
-      userColor: userColor
-    });
-    
-    addSystemMessage('Username color updated successfully', 'success');
-  }
-
-  closeChatColorModal();
-}
-
-function applyUserColorStyle(element, color) {
-  element.style.color = color;
-  element.style.background = 'transparent';
-  element.style.webkitBackgroundClip = 'initial';
-  element.style.webkitTextFillColor = 'initial';
-}
-
-window.ChatAPI = {
-  send: sendMessage,
-  disconnect: () => socket?.disconnect()
-};

GUI/js/featured.js

@@ -1,6 +1,15 @@
 // Featured Servers Management
 const FEATURED_SERVERS_API = 'https://assets.authbp.xyz/featured.json';
 
+/**
+ * Safely escape HTML while preserving UTF-8 characters
+ */
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 /**
  * Load and display featured servers
  */
@@ -16,14 +25,16 @@ async function loadFeaturedServers() {
       cache: 'no-store',
       headers: {
         'Cache-Control': 'no-cache',
-        'Pragma': 'no-cache'
+        'Pragma': 'no-cache',
+        'Accept-Charset': 'utf-8'
       }
     });
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     
-    const data = await response.json();
+    const text = await response.text();
+    const data = JSON.parse(text);
     const featuredServers = data.featuredServers || [];
     
     console.log('[FeaturedServers] Loaded', featuredServers.length, 'featured servers');
@@ -40,8 +51,8 @@ async function loadFeaturedServers() {
       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 escapedName = escapeHtml(server.Name || 'Unknown Server');
+        const escapedAddress = escapeHtml(server.Address || '');
         const bannerUrl = server.img_Banner || 'https://via.placeholder.com/400x240/1e293b/ffffff?text=Server+Banner';
         
         return `

GUI/js/script.js

@@ -4,23 +4,66 @@ import './launcher.js';
 import './news.js';
 import './mods.js';
 import './players.js';
-import './chat.js';
 import './settings.js';
 import './logs.js';
 
-// Initialize i18n immediately (before DOMContentLoaded)
 let i18nInitialized = false;
 (async () => {
   const savedLang = await window.electronAPI?.loadLanguage();
   await i18n.init(savedLang);
   i18nInitialized = true;
   
-  // Update language selector if DOM is already loaded
   if (document.readyState === 'complete' || document.readyState === 'interactive') {
     updateLanguageSelector();
   }
 })();
 
+async function checkDiscordPopup() {
+  try {
+    const config = await window.electronAPI?.loadConfig();
+    if (!config || config.discordPopup === undefined || config.discordPopup === false) {
+      const modal = document.getElementById('discordPopupModal');
+      if (modal) {
+        const buttons = modal.querySelectorAll('.discord-popup-btn');
+        buttons.forEach(btn => btn.disabled = true);
+        
+        setTimeout(() => {
+          modal.style.display = 'flex';
+          modal.classList.add('active');
+          
+          setTimeout(() => {
+            buttons.forEach(btn => btn.disabled = false);
+          }, 2000);
+        }, 1000);
+      }
+    }
+  } catch (error) {
+    console.error('Failed to check Discord popup:', error);
+  }
+}
+
+window.closeDiscordPopup = function() {
+  const modal = document.getElementById('discordPopupModal');
+  if (modal) {
+    modal.classList.remove('active');
+    setTimeout(() => {
+      modal.style.display = 'none';
+    }, 300);
+  }
+};
+
+window.joinDiscord = async function() {
+  await window.electronAPI?.openExternal('https://discord.gg/hf2pdc');
+  
+  try {
+    await window.electronAPI?.saveConfig({ discordPopup: true });
+  } catch (error) {
+    console.error('Failed to save Discord popup state:', error);
+  }
+  
+  closeDiscordPopup();
+};
+
 function updateLanguageSelector() {
   const langSelect = document.getElementById('languageSelect');
   if (langSelect) {
@@ -51,32 +94,9 @@ function updateLanguageSelector() {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  // Populate language selector (wait for i18n if needed)
   if (i18nInitialized) {
     updateLanguageSelector();
   }
   
-  // Discord notification
-  const notification = document.getElementById('discordNotification');
-  if (notification) {
-    const dismissed = localStorage.getItem('discordNotificationDismissed');
-    if (!dismissed) {
-      setTimeout(() => {
-        notification.style.display = 'flex';
-      }, 3000);
-    } else {
-      notification.style.display = 'none';
-    }
-  }
-});
-
-window.closeDiscordNotification = function() {
-  const notification = document.getElementById('discordNotification');
-  if (notification) {
-    notification.classList.add('hidden');
-    setTimeout(() => {
-      notification.style.display = 'none';
-    }, 300);
-  }
-  localStorage.setItem('discordNotificationDismissed', 'true');
-};
+  checkDiscordPopup();
+});

GUI/js/ui.js

@@ -63,8 +63,10 @@ function handleNavigation() {
   navItems.forEach(item => {
     item.addEventListener('click', () => {
       const page = item.getAttribute('data-page');
-      showPage(`${page}-page`);
-      setActiveNav(page);
+      if (page) {
+        showPage(`${page}-page`);
+        setActiveNav(page);
+      }
     });
   });
 }
@@ -1100,7 +1102,10 @@ function getRetryContextMessage() {
   }
 }
 
-// Make toggleMaximize globally available
+window.openDiscordExternal = function() {
+  window.electronAPI?.openExternal('https://discord.gg/hf2pdc');
+};
+
 window.toggleMaximize = toggleMaximize;
 
 document.addEventListener('DOMContentLoaded', setupUI);