Remove launcher chat and add Discord popup

GUI/index.html

@@ -47,10 +47,6 @@
                     <i class="fas fa-newspaper"></i>
                     <span class="nav-tooltip" data-i18n="nav.news">News</span>
                 </div>
-                <div class="nav-item" data-page="chat">
-                    <i class="fas fa-comments"></i>
-                    <span class="nav-tooltip" data-i18n="nav.chat">Players Chat</span>
-                </div>
                 <div class="nav-item" data-page="settings">
                     <i class="fas fa-cog"></i>
                     <span class="nav-tooltip" data-i18n="nav.settings">Settings</span>
@@ -59,6 +55,10 @@
                     <i class="fas fa-terminal"></i>
                     <span class="nav-tooltip">Logs</span>
                 </div>
+                <div class="nav-item" onclick="openDiscordExternal()">
+                    <i class="fab fa-discord"></i>
+                    <span class="nav-tooltip">Discord</span>
+                </div>
             </div>
 
 
@@ -294,50 +294,6 @@
                         <div id="allNewsGrid" class="news-grid-full"></div>
                     </div>
 
-                    <div id="chat-page" class="page">
-                        <div class="chat-container">
-                            <div class="chat-header">
-                                <h2 class="chat-title">
-                                    <i class="fas fa-comments mr-2"></i>
-                                    <span data-i18n="chat.title">PLAYERS CHAT</span>
-                                </h2>
-                                <div class="chat-header-actions">
-                                    <button id="chatColorBtn" class="chat-color-btn">
-                                        <i class="fas fa-palette"></i>
-                                        <span data-i18n="chat.pickColor">Color</span>
-                                    </button>
-                                    <div class="chat-online-badge">
-                                        <i class="fas fa-circle"></i>
-                                        <span id="chatOnlineCount">0</span> <span data-i18n="chat.online">online</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="chat-body">
-                                <div id="chatMessages" class="chat-messages">
-                                </div>
-                            </div>
-
-                            <div class="chat-footer">
-                                <div class="chat-input-container">
-                                    <textarea id="chatInput" class="chat-input"
-                                        data-i18n-placeholder="chat.inputPlaceholder" rows="1"
-                                        maxlength="500"></textarea>
-                                    <button id="chatSendBtn" class="chat-send-btn">
-                                        <i class="fas fa-paper-plane"></i>
-                                    </button>
-                                </div>
-                                <div class="chat-footer-info">
-                                    <span class="chat-char-counter" id="chatCharCounter">0/500</span>
-                                    <span class="chat-warning-text">
-                                        <i class="fas fa-shield-alt"></i>
-                                        <span data-i18n="chat.secureChat">Secure chat - Links are censored</span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
                     <div id="settings-page" class="page">
                         <div class="settings-container">
                             <div class="settings-header">
@@ -697,41 +653,6 @@
         </div>
     </div>
 
-    <div id="chatUsernameModal" class="chat-username-modal" style="display: none;">
-        <div class="chat-username-modal-content">
-            <div class="chat-username-modal-header">
-                <h2 class="chat-username-modal-title">
-                    <i class="fas fa-comments mr-2"></i>
-                    <span data-i18n="chat.joinChat">Join Chat</span>
-                </h2>
-            </div>
-            <div class="chat-username-modal-body">
-                <p class="chat-username-modal-description" data-i18n="chat.chooseUsername">
-                    Choose a username to join the Players Chat
-                </p>
-                <div class="chat-username-input-group">
-                    <label for="chatUsernameInput" class="chat-username-label"
-                        data-i18n="chat.username">Username</label>
-                    <input type="text" id="chatUsernameInput" class="chat-username-input"
-                        data-i18n-placeholder="chat.usernamePlaceholder" maxlength="20" autocomplete="off" />
-                    <span class="chat-username-hint" data-i18n="chat.usernameHint">3-20 characters, letters, numbers, -
-                        and _ only</span>
-                    <span id="chatUsernameError" class="chat-username-error"></span>
-                </div>
-            </div>
-            <div class="chat-username-modal-footer">
-                <button id="chatUsernameCancel" class="chat-username-btn-cancel">
-                    <i class="fas fa-times"></i>
-                    <span data-i18n="common.cancel">Cancel</span>
-                </button>
-                <button id="chatUsernameSubmit" class="chat-username-btn-submit">
-                    <i class="fas fa-check"></i>
-                    <span data-i18n="chat.joinButton">Join Chat</span>
-                </button>
-            </div>
-        </div>
-    </div>
-
     <!-- UUID Management Modal -->
     <div id="uuidModal" class="uuid-modal" style="display: none;">
         <div class="uuid-modal-content">
@@ -856,63 +777,38 @@
         </div>
     </footer>
 
-    <script type="module" src="js/script.js"></script> <!-- Discord Notification -->
+    <script type="module" src="js/script.js"></script>
-    <div id="discordNotification" class="discord-notification">
+
-        <div class="notification-content">
+    <div id="discordPopupModal" class="modal-overlay" style="display: none;">
+        <div class="modal-content discord-popup-modal">
+            <div class="modal-header">
+                <div class="discord-popup-header">
                     <i class="fab fa-discord"></i>
-            <span class="notification-text" data-i18n="discord.notificationText">Join our Discord community!</span>
+                    <h2 class="modal-title">Join Our Discord Community</h2>
-            <button class="notification-action"
-                onclick="window.electronAPI?.openExternal('https://discord.gg/n6HZ7NwSQd')">
-                <span data-i18n="discord.joinButton">Join Discord</span>
-            </button>
                 </div>
-        <button class="notification-close" onclick="closeDiscordNotification()">
-            <i class="fas fa-times"></i>
-        </button>
             </div>
+            <div class="modal-body">
+                <div class="discord-popup-body">
+                    <p class="discord-popup-text">
+                        Join our community of over <strong>5000 members</strong> and stay connected!
+                    </p>
+                    <p class="discord-popup-text">
+                        Get the latest news, updates, and announcements about the launcher.
+                    </p>
+                    <p class="discord-popup-text">
+                        Find help, report bugs, share your feedback, and connect with other players.
+                    </p>
                    
-    <!-- Modal pour sélectionner la couleur du chat -->
+                    <div class="discord-popup-actions">
-    <div id="chatColorModal" class="chat-color-modal" style="display: none;">
+                        <button class="discord-popup-btn primary" onclick="joinDiscord()">
-        <div class="chat-color-modal-content">
+                            <i class="fab fa-discord"></i>
-            <div class="chat-color-modal-header">
+                            Join Discord
-                <h3 class="chat-color-modal-title">
+                        </button>
-                    <i class="fas fa-palette"></i>
+                        <button class="discord-popup-btn secondary" onclick="closeDiscordPopup()">
-                    <span data-i18n="chat.colorModal.title">Customize Username Color</span>
+                            Maybe Later
-                </h3>
-                <button class="modal-close-btn" onclick="closeChatColorModal()">
-                    <i class="fas fa-times"></i>
                         </button>
                     </div>
-            <div class="chat-color-modal-body">
-                <div id="solidColorSection" class="color-section">
-                    <h4 data-i18n="chat.colorModal.chooseSolid">Choose a solid color:</h4>
-                    <div class="predefined-colors">
-                        <div class="color-option" data-color="#3498db" style="background: #3498db;"></div>
-                        <div class="color-option" data-color="#e74c3c" style="background: #e74c3c;"></div>
-                        <div class="color-option" data-color="#2ecc71" style="background: #2ecc71;"></div>
-                        <div class="color-option" data-color="#f39c12" style="background: #f39c12;"></div>
-                        <div class="color-option" data-color="#9b59b6" style="background: #9b59b6;"></div>
-                        <div class="color-option" data-color="#1abc9c" style="background: #1abc9c;"></div>
-                        <div class="color-option" data-color="#e91e63" style="background: #e91e63;"></div>
-                        <div class="color-option" data-color="#ff5722" style="background: #ff5722;"></div>
                 </div>
-                    <div class="custom-color-input">
-                        <label for="customColor" data-i18n="chat.colorModal.customColor">Custom color:</label>
-                        <input type="color" id="customColor" value="#3498db">
-                    </div>
-                </div>
-
-                <div class="color-preview">
-                    <h4 data-i18n="chat.colorModal.preview">Preview:</h4>
-                    <div id="colorPreview" class="preview-username" data-i18n="chat.colorModal.previewUsername">
-                        YourUsername</div>
-                </div>
-            </div>
-            <div class="chat-color-modal-footer">
-                <button class="btn-secondary" onclick="closeChatColorModal()"><span
-                        data-i18n="common.cancel">Cancel</span></button>
-                <button class="btn-primary" onclick="applyChatColor()"><span data-i18n="chat.colorModal.apply">Apply
-                        Color</span></button>
             </div>
         </div>
     </div>

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 escapedName = escapeHtml(server.Name || 'Unknown Server');
-        const escapedAddress = (server.Address || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+        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
+  checkDiscordPopup();
-  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');
-};

GUI/js/ui.js

@@ -63,8 +63,10 @@ function handleNavigation() {
   navItems.forEach(item => {
     item.addEventListener('click', () => {
       const page = item.getAttribute('data-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);

GUI/style.css

@@ -333,109 +333,6 @@ body {
     pointer-events: auto !important;
 }
 
-.discord-notification {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(20px);
-    border: 1px solid rgba(88, 101, 242, 0.3);
-    border-radius: 12px;
-    padding: 1rem;
-    max-width: 300px;
-    z-index: 10000;
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    animation: slideIn 0.5s ease-out;
-}
-
-@keyframes slideIn {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}
-
-.notification-content {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex: 1;
-}
-
-.discord-notification .fab.fa-discord {
-    color: #5865f2;
-    font-size: 1.25rem;
-}
-
-.notification-text {
-    color: white;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-}
-
-.notification-action {
-    background: #5865f2;
-    border: none;
-    border-radius: 6px;
-    color: white;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: 'Space Grotesk', sans-serif;
-}
-
-.notification-action:hover {
-    background: #4752c4;
-    transform: scale(1.05);
-}
-
-.notification-close {
-    background: none;
-    border: none;
-    color: #9ca3af;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-}
-
-.notification-close:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-}
-
-.notification-close i {
-    font-size: 0.75rem;
-}
-
-.discord-notification.hidden {
-    animation: slideOut 0.3s ease-in forwards;
-}
-
-@keyframes slideOut {
-    to {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-
 .control-btn {
     width: 28px;
     height: 28px;
@@ -3021,6 +2918,126 @@ body {
     border-radius: 4px;
 }
 
+.discord-popup-modal {
+    max-width: 500px;
+    width: 90%;
+}
+
+.discord-popup-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.discord-popup-header i {
+    font-size: 2.5rem;
+    color: #5865f2;
+}
+
+.discord-popup-body {
+    text-align: center;
+    padding: 0;
+}
+
+.discord-popup-text {
+    font-size: 1rem;
+    color: #d1d5db;
+    margin: 0.5rem 0;
+    line-height: 1.5;
+}
+
+.discord-popup-text strong {
+    color: #5865f2;
+    font-weight: 700;
+}
+
+.discord-popup-warning {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    background: rgba(245, 158, 11, 0.1);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    margin: 1.5rem 0;
+    color: #fbbf24;
+    font-size: 0.9rem;
+}
+
+.discord-popup-warning i {
+    font-size: 1.1rem;
+}
+
+.discord-popup-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.discord-popup-btn {
+    flex: 1;
+    padding: 0.875rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: 'Space Grotesk', sans-serif;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.discord-popup-btn.primary {
+    background: #5865f2;
+    color: white;
+    box-shadow: 0 4px 0 0 #4752c4, 0 8px 20px rgba(88, 101, 242, 0.3);
+}
+
+.discord-popup-btn.primary:hover {
+    background: #4752c4;
+    box-shadow: 0 2px 0 0 #4752c4, 0 12px 30px rgba(88, 101, 242, 0.4);
+    transform: translateY(2px);
+}
+
+.discord-popup-btn.primary:active {
+    transform: translateY(4px);
+    box-shadow: 0 0px 0 0 #4752c4, 0 4px 15px rgba(88, 101, 242, 0.3);
+}
+
+.discord-popup-btn.secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: #d1d5db;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.discord-popup-btn.secondary:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: white;
+}
+
+.discord-popup-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.discord-popup-btn.primary:disabled:hover {
+    background: #5865f2;
+    transform: none;
+}
+
+.discord-popup-btn.secondary:disabled:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #d1d5db;
+}
+
 .mods-grid::-webkit-scrollbar-thumb:hover,
 .modal-body::-webkit-scrollbar-thumb:hover {
     background: rgba(147, 51, 234, 0.8);
@@ -4005,10 +4022,7 @@ body {
     font-weight: 700;
 }
 
-
+.settings-container {
-
-
-.chat-container {
     display: flex;
     flex-direction: column;
     height: calc(100vh - 180px);
@@ -5651,8 +5665,8 @@ select.settings-input option {
     font-weight: bold;
 }
 
-/* Styles pour le sélecteur de couleur dans le chat */
+.settings-container {
-.chat-header-actions {
+    padding: 2rem;
     display: flex;
     align-items: center;
     gap: 1rem;

backend/core/config.js

@@ -84,15 +84,6 @@ function loadUsername() {
   return config.username || 'Player';
 }
 
-function saveChatUsername(chatUsername) {
-  saveConfig({ chatUsername: chatUsername || '' });
-}
-
-function loadChatUsername() {
-  const config = loadConfig();
-  return config.chatUsername || '';
-}
-
 function getUuidForUser(username) {
   const { v4: uuidv4 } = require('uuid');
   const config = loadConfig();
@@ -294,17 +285,6 @@ function resetCurrentUserUuid() {
   return setUuidForUser(username, newUuid);
 }
 
-function saveChatColor(color) {
-  const config = loadConfig();
-  config.chatColor = color;
-  saveConfig(config);
-}
-
-function loadChatColor() {
-  const config = loadConfig();
-  return config.chatColor || '#3498db';
-}
-
 function saveGpuPreference(gpuPreference) {
   saveConfig({ gpuPreference: gpuPreference || 'auto' });
 }
@@ -343,10 +323,6 @@ module.exports = {
   saveConfig,
   saveUsername,
   loadUsername,
-  saveChatUsername,
-  loadChatUsername,
-  saveChatColor,
-  loadChatColor,
   getUuidForUser,
   saveJavaPath,
   loadJavaPath,

backend/launcher.js

@@ -5,10 +5,6 @@
 const {
   saveUsername,
   loadUsername,
-  saveChatUsername,
-  loadChatUsername,
-  saveChatColor,
-  loadChatColor,
   saveJavaPath,
   loadJavaPath,
   saveInstallPath,
@@ -20,10 +16,11 @@ const {
   saveCloseLauncherOnStart,
   loadCloseLauncherOnStart,
 
-  // Hardware Acceleration
   saveLauncherHardwareAcceleration,
   loadLauncherHardwareAcceleration,
 
+  loadConfig,
+  saveConfig,
 
   saveModsToConfig,
   loadModsFromConfig,
@@ -113,10 +110,6 @@ module.exports = {
   // User configuration functions
   saveUsername,
   loadUsername,
-  saveChatUsername,
-  loadChatUsername,
-  saveChatColor,
-  loadChatColor,
   getUuidForUser,
 
   // Java configuration functions
@@ -144,6 +137,10 @@ module.exports = {
   saveLauncherHardwareAcceleration,
   loadLauncherHardwareAcceleration,
 
+  // Config functions
+  loadConfig,
+  saveConfig,
+
   // GPU Preference functions
   saveGpuPreference,
   loadGpuPreference,

main.js

@@ -3,7 +3,7 @@ require('dotenv').config({ path: path.join(__dirname, '.env') });
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron');
 const { autoUpdater } = require('electron-updater');
 const fs = require('fs');
-const { launchGame, launchGameWithVersionCheck, installGame, saveUsername, loadUsername, saveChatUsername, loadChatUsername, saveChatColor, loadChatColor, saveJavaPath, loadJavaPath, saveInstallPath, loadInstallPath, saveDiscordRPC, loadDiscordRPC, saveLanguage, loadLanguage, saveCloseLauncherOnStart, loadCloseLauncherOnStart, saveLauncherHardwareAcceleration, loadLauncherHardwareAcceleration, isGameInstalled, uninstallGame, repairGame, getHytaleNews, handleFirstLaunchCheck, proposeGameUpdate, markAsLaunched } = require('./backend/launcher');
+const { launchGame, launchGameWithVersionCheck, installGame, saveUsername, loadUsername, saveJavaPath, loadJavaPath, saveInstallPath, loadInstallPath, saveDiscordRPC, loadDiscordRPC, saveLanguage, loadLanguage, saveCloseLauncherOnStart, loadCloseLauncherOnStart, saveLauncherHardwareAcceleration, loadLauncherHardwareAcceleration, isGameInstalled, uninstallGame, repairGame, getHytaleNews, handleFirstLaunchCheck, proposeGameUpdate, markAsLaunched, loadConfig, saveConfig } = require('./backend/launcher');
 const { retryPWRDownload } = require('./backend/managers/gameManager');
 const { migrateUserDataToCentralized } = require('./backend/utils/userDataMigration');
 
@@ -599,22 +599,6 @@ ipcMain.handle('save-username', (event, username) => {
 ipcMain.handle('load-username', () => {
   return loadUsername();
 });
-ipcMain.handle('save-chat-username', async (event, chatUsername) => {
-  saveChatUsername(chatUsername);
-});
-
-ipcMain.handle('load-chat-username', async () => {
-  return loadChatUsername();
-});
-
-ipcMain.handle('save-chat-color', (event, color) => {
-  saveChatColor(color);
-  return { success: true };
-});
-
-ipcMain.handle('load-chat-color', () => {
-  return loadChatColor();
-});
 
 ipcMain.handle('save-java-path', (event, javaPath) => {
   saveJavaPath(javaPath);
@@ -672,6 +656,15 @@ ipcMain.handle('load-launcher-hw-accel', () => {
   return loadLauncherHardwareAcceleration();
 });
 
+ipcMain.handle('load-config', () => {
+  return loadConfig();
+});
+
+ipcMain.handle('save-config', (event, configUpdate) => {
+  saveConfig(configUpdate);
+  return { success: true };
+});
+
 ipcMain.handle('select-install-path', async () => {
 
   const result = await dialog.showOpenDialog(mainWindow, {

preload.js

@@ -9,10 +9,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getVersion: () => ipcRenderer.invoke('get-version'),
   saveUsername: (username) => ipcRenderer.invoke('save-username', username),
   loadUsername: () => ipcRenderer.invoke('load-username'),
-  saveChatUsername: (chatUsername) => ipcRenderer.invoke('save-chat-username', chatUsername),
-  loadChatUsername: () => ipcRenderer.invoke('load-chat-username'),
-  saveChatColor: (chatColor) => ipcRenderer.invoke('save-chat-color', chatColor),
-  loadChatColor: () => ipcRenderer.invoke('load-chat-color'),
   saveJavaPath: (javaPath) => ipcRenderer.invoke('save-java-path', javaPath),
   loadJavaPath: () => ipcRenderer.invoke('load-java-path'),
   saveInstallPath: (installPath) => ipcRenderer.invoke('save-install-path', installPath),
@@ -23,6 +19,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   loadLanguage: () => ipcRenderer.invoke('load-language'),
   saveCloseLauncher: (enabled) => ipcRenderer.invoke('save-close-launcher', enabled),
   loadCloseLauncher: () => ipcRenderer.invoke('load-close-launcher'),
+  loadConfig: () => ipcRenderer.invoke('load-config'),
+  saveConfig: (configUpdate) => ipcRenderer.invoke('save-config', configUpdate),
 
   // Hardware Acceleration
   saveLauncherHardwareAcceleration: (enabled) => ipcRenderer.invoke('save-launcher-hw-accel', enabled),