ajout de l'option voir les joueurs connecté en temps réél

frontend/public/js/app.js

@@ -543,8 +543,18 @@ async function searchLogs(query) {
 function getPlayersHTML() {
     return `
         <div class="section-card">
-            <h2>👥 Joueurs Connectés</h2>
+            <h2>👥 Joueurs en Ligne</h2>
-            <p style="margin-bottom: 15px; color: #666;">Liste des joueurs qui se sont connectés</p>
+            <div class="btn-group" style="margin-bottom: 15px;">
+                <button class="btn-secondary" onclick="loadOnlinePlayers()">🔄 Rafraîchir</button>
+            </div>
+            <div id="onlinePlayersInfo" style="padding: 15px; background: #f5f5f5; border-radius: 8px; margin-bottom: 20px;">
+                <p style="margin: 0; font-size: 16px; font-weight: bold;">Chargement...</p>
+            </div>
+            <div id="onlinePlayersList"></div>
+        </div>
+        <div class="section-card">
+            <h2>📋 Tous les Joueurs</h2>
+            <p style="margin-bottom: 15px; color: #666;">Liste des joueurs qui se sont connectés au serveur</p>
             <table>
                 <thead>
                     <tr>
@@ -562,6 +572,10 @@ function getPlayersHTML() {
 }
 
 async function loadPlayersData() {
+    // Charger les joueurs en ligne
+    await window.loadOnlinePlayers();
+    
+    // Charger tous les joueurs
     try {
         const response = await fetch(`${API_URL}/players`, {
             credentials: 'include'
@@ -591,6 +605,112 @@ async function loadPlayersData() {
     }
 }
 
+window.loadOnlinePlayers = async function() {
+    console.log('Chargement des joueurs en ligne...');
+    
+    const infoDiv = document.getElementById('onlinePlayersInfo');
+    const listDiv = document.getElementById('onlinePlayersList');
+    
+    if (!infoDiv || !listDiv) {
+        console.error('Éléments DOM non trouvés');
+        return;
+    }
+    
+    try {
+        infoDiv.innerHTML = '<p style="margin: 0;">⏳ Chargement...</p>';
+        
+        const response = await fetch(`${API_URL}/rcon/command`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include',
+            body: JSON.stringify({ command: 'list' })
+        });
+        
+        console.log('Réponse RCON reçue:', response.status);
+        
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        
+        const data = await response.json();
+        const output = data.response || data.output || '';
+        
+        console.log('Données reçues:', data);
+        console.log('Output RCON:', output);
+        
+        // Supprimer les codes de couleur Minecraft (§X)
+        const cleanOutput = output.replace(/§[0-9a-fk-or]/gi, '');
+        console.log('Output nettoyé:', cleanOutput);
+        
+        // Parser différents formats possibles:
+        // Format moderne: "There are 1/20 players online: player1, player2"
+        // Format 1.6.4: "There are 1 out of maximum 20 players online. Connected players: player1"
+        let match = cleanOutput.match(/There are (\d+)\/(\d+) players online:?\s*(.*)/i);
+        
+        if (!match) {
+            // Essayer le format 1.6.4
+            match = cleanOutput.match(/There are (\d+) out of maximum (\d+) players online/i);
+            if (match) {
+                const onlineCount = parseInt(match[1]);
+                const maxPlayers = parseInt(match[2]);
+                
+                // Chercher les noms de joueurs après "Connected players:"
+                const playersMatch = cleanOutput.match(/Connected players[:\s]+(.+)/i);
+                const playerNames = playersMatch ? 
+                    playersMatch[1].split(',').map(n => n.trim().replace(/\[AFK\]/gi, '').trim()).filter(n => n) : 
+                    [];
+                
+                match = [cleanOutput, onlineCount.toString(), maxPlayers.toString(), playerNames.join(', ')];
+            }
+        }
+        
+        if (match) {
+            const onlineCount = parseInt(match[1]);
+            const maxPlayers = parseInt(match[2]);
+            const playerNames = match[3] ? match[3].split(',').map(n => n.trim()).filter(n => n) : [];
+            
+            console.log(`Joueurs: ${onlineCount}/${maxPlayers}`, playerNames);
+            
+            infoDiv.innerHTML = `
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <p style="margin: 0; font-size: 16px;">
+                        <span style="font-weight: bold; color: ${onlineCount > 0 ? '#4CAF50' : '#666'};">
+                            ${onlineCount} joueur${onlineCount !== 1 ? 's' : ''}
+                        </span> 
+                        en ligne sur ${maxPlayers}
+                    </p>
+                    <span style="font-size: 24px;">${onlineCount > 0 ? '🟢' : '⚪'}</span>
+                </div>
+            `;
+            
+            if (onlineCount > 0 && playerNames.length > 0) {
+                listDiv.innerHTML = `
+                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 15px;">
+                        ${playerNames.map(name => `
+                            <div style="padding: 12px; background: white; border: 2px solid #4CAF50; border-radius: 8px; text-align: center;">
+                                <span style="font-weight: bold; color: #333;">🎮 ${name}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+            } else {
+                listDiv.innerHTML = '';
+            }
+        } else {
+            infoDiv.innerHTML = `<p style="margin: 0; color: #666;">Aucun joueur en ligne</p>`;
+            listDiv.innerHTML = '';
+        }
+    } catch (e) {
+        console.error('Erreur chargement joueurs en ligne:', e);
+        infoDiv.innerHTML = `
+            <p style="margin: 0; color: red;">Erreur: ${e.message}</p>
+        `;
+        listDiv.innerHTML = '';
+    }
+}
+
 // ========== WHITELIST ==========
 function getWhitelistHTML() {
     return `