| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Bot Manager</title> |
| <script src="/socket.io/socket.io.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: Arial, sans-serif; |
| background: #1a1a1a; |
| color: #e0e0e0; |
| padding: 10px; |
| } |
| |
| .header { |
| background: #2a2a2a; |
| padding: 15px; |
| margin-bottom: 10px; |
| border: 1px solid #333; |
| } |
| |
| h1 { |
| font-size: 20px; |
| margin-bottom: 10px; |
| color: #fff; |
| } |
| |
| .stats { |
| display: flex; |
| gap: 15px; |
| flex-wrap: wrap; |
| } |
| |
| .stat { |
| background: #333; |
| padding: 8px 12px; |
| border: 1px solid #444; |
| color: #ccc; |
| } |
| |
| .stat strong { |
| color: #fff; |
| } |
| |
| .controls { |
| background: #2a2a2a; |
| padding: 10px; |
| margin-bottom: 10px; |
| border: 1px solid #333; |
| } |
| |
| .btn { |
| background: #4CAF50; |
| color: white; |
| border: none; |
| padding: 8px 16px; |
| cursor: pointer; |
| } |
| |
| .btn:hover { |
| background: #45a049; |
| } |
| |
| .btn:disabled { |
| background: #555; |
| color: #999; |
| cursor: not-allowed; |
| } |
| |
| .bot-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 10px; |
| } |
| |
| .bot-card { |
| background: #2a2a2a; |
| border: 1px solid #333; |
| padding: 10px; |
| } |
| |
| .bot-header { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| align-items: center; |
| } |
| |
| .bot-name { |
| font-weight: bold; |
| font-size: 14px; |
| color: #fff; |
| } |
| |
| .status { |
| font-size: 12px; |
| padding: 2px 6px; |
| border: 1px solid; |
| } |
| |
| .status-connected { |
| background: #1b4332; |
| color: #4ade80; |
| border-color: #16a34a; |
| } |
| |
| .status-disconnected, .status-dead { |
| background: #450a0a; |
| color: #f87171; |
| border-color: #dc2626; |
| } |
| |
| .bot-info { |
| font-size: 12px; |
| color: #aaa; |
| margin-bottom: 8px; |
| } |
| |
| .bot-info div { |
| margin: 2px 0; |
| } |
| |
| .info-highlight { |
| color: #4ade80; |
| } |
| |
| .btn-rejoin { |
| background: #2196F3; |
| color: white; |
| border: none; |
| padding: 6px 12px; |
| cursor: pointer; |
| font-size: 12px; |
| width: 100%; |
| } |
| |
| .btn-rejoin:hover { |
| background: #1976D2; |
| } |
| |
| .btn-rejoin:disabled { |
| background: #555; |
| color: #999; |
| cursor: not-allowed; |
| } |
| |
| .timer { |
| font-size: 11px; |
| color: #888; |
| text-align: center; |
| margin-top: 4px; |
| } |
| |
| .loading { |
| padding: 20px; |
| color: #888; |
| text-align: center; |
| } |
| |
| @media (max-width: 600px) { |
| .bot-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| h1 { |
| font-size: 18px; |
| } |
| |
| .stats { |
| font-size: 12px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <h1>🤖 Bot Manager</h1> |
| <div class="stats"> |
| <div class="stat">Total: <strong id="totalBots">0</strong></div> |
| <div class="stat">Connected: <strong id="connectedBots">0</strong></div> |
| <div class="stat">Disconnected: <strong id="disconnectedBots">0</strong></div> |
| <div class="stat">Deaths: <strong id="totalDeaths">0</strong></div> |
| </div> |
| </div> |
| |
| <div class="controls"> |
| <button class="btn" onclick="refreshSheet()">Refresh Sheet</button> |
| </div> |
| |
| <div id="botContainer" class="bot-grid"> |
| <div class="loading">Loading...</div> |
| </div> |
| |
| <script> |
| const socket = io(); |
| let botsData = []; |
| |
| socket.on('connect', () => { |
| console.log('Connected to server'); |
| }); |
| |
| socket.on('botUpdate', (data) => { |
| botsData = data; |
| updateUI(); |
| }); |
| |
| socket.on('reconnectResult', (result) => { |
| if (!result.success) { |
| alert(`Cannot reconnect ${result.botName} yet. Wait 1 hour between reconnects.`); |
| } |
| }); |
| |
| function updateUI() { |
| const container = document.getElementById('botContainer'); |
| |
| |
| const validBots = botsData.filter(bot => bot.inSheet); |
| |
| if (validBots.length === 0) { |
| container.innerHTML = '<div class="loading">No bots configured in sheet.</div>'; |
| updateStats(0, 0, 0, 0); |
| return; |
| } |
| |
| let html = ''; |
| let totalBots = 0; |
| let connectedBots = 0; |
| let disconnectedBots = 0; |
| let totalDeaths = 0; |
| |
| validBots.forEach(bot => { |
| totalBots++; |
| if (bot.status === 'Connected') { |
| connectedBots++; |
| } else { |
| disconnectedBots++; |
| } |
| totalDeaths += bot.deathCount; |
| |
| const statusClass = bot.status === 'Connected' ? 'status-connected' : |
| bot.status === 'Connecting...' ? 'status-connected' : |
| 'status-disconnected'; |
| |
| const showRejoinButton = (bot.status === 'Disconnected' || bot.status === 'Dead' || |
| bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') && |
| bot.inSheet; |
| const canRejoinNow = bot.canReconnect; |
| const timeRemaining = bot.timeUntilReconnect; |
| |
| html += ` |
| <div class="bot-card"> |
| <div class="bot-header"> |
| <div class="bot-name">${bot.botName}</div> |
| <div class="status ${statusClass}">${bot.status}</div> |
| </div> |
| <div class="bot-info"> |
| <div>Deaths: ${bot.deathCount}</div> |
| ${bot.status === 'Connected' && bot.connectedDuration > 0 ? |
| `<div class="info-highlight">Connected: ${formatUptime(bot.connectedDuration)}</div>` : ''} |
| </div> |
| ${showRejoinButton ? ` |
| <button class="btn-rejoin" |
| onclick="reconnectBot('${bot.botName}')" |
| ${!canRejoinNow ? 'disabled' : ''}> |
| ${canRejoinNow ? 'Rejoin' : 'Wait to Rejoin'} |
| </button> |
| ${!canRejoinNow && timeRemaining > 0 ? |
| `<div class="timer">Can rejoin in: ${formatUptime(timeRemaining)}</div>` : ''} |
| ` : ''} |
| </div> |
| `; |
| }); |
| |
| container.innerHTML = html; |
| updateStats(totalBots, connectedBots, disconnectedBots, totalDeaths); |
| } |
| |
| function updateStats(total, connected, disconnected, deaths) { |
| document.getElementById('totalBots').textContent = total; |
| document.getElementById('connectedBots').textContent = connected; |
| document.getElementById('disconnectedBots').textContent = disconnected; |
| document.getElementById('totalDeaths').textContent = deaths; |
| } |
| |
| function formatUptime(seconds) { |
| if (seconds === 0) return '0s'; |
| const days = Math.floor(seconds / 86400); |
| const hours = Math.floor((seconds % 86400) / 3600); |
| const minutes = Math.floor((seconds % 3600) / 60); |
| const secs = seconds % 60; |
| |
| if (days > 0) { |
| return `${days}d ${hours}h ${minutes}m`; |
| } else if (hours > 0) { |
| return `${hours}h ${minutes}m`; |
| } else if (minutes > 0) { |
| return `${minutes}m ${secs}s`; |
| } else { |
| return `${secs}s`; |
| } |
| } |
| |
| function reconnectBot(botName) { |
| socket.emit('reconnectBot', botName); |
| } |
| |
| function refreshSheet() { |
| socket.emit('refreshSheet'); |
| } |
| |
| |
| setInterval(() => { |
| if (botsData.length > 0) { |
| botsData.forEach(bot => { |
| if (bot.timeUntilReconnect > 0) { |
| bot.timeUntilReconnect = Math.max(0, bot.timeUntilReconnect - 2); |
| } |
| if (bot.status === 'Connected' && bot.connectedDuration >= 0) { |
| bot.connectedDuration += 2; |
| } |
| bot.canReconnect = bot.timeUntilReconnect === 0 && |
| (bot.status === 'Disconnected' || bot.status === 'Dead' || |
| bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') && |
| bot.inSheet; |
| }); |
| updateUI(); |
| } |
| }, 2000); |
| </script> |
| </body> |
| </html> |
