Hugging Face's logo

Spaces:
OrbitMC
/
PowerBot
Sleeping

App Files Community
Tokipo commited on
Commit
45ea1eb
·
verified ·
1 Parent(s): 3b2ae1c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +58 -28
index.html CHANGED
@@ -14,20 +14,22 @@
14
 
15
  body {
16
  font-family: Arial, sans-serif;
17
- background: #f0f0f0;
 
18
  padding: 10px;
19
  }
20
 
21
  .header {
22
- background: white;
23
  padding: 15px;
24
  margin-bottom: 10px;
25
- border: 1px solid #ddd;
26
  }
27
 
28
  h1 {
29
  font-size: 20px;
30
  margin-bottom: 10px;
 
31
  }
32
 
33
  .stats {
@@ -37,16 +39,21 @@
37
  }
38
 
39
  .stat {
40
- background: #f8f8f8;
41
  padding: 8px 12px;
42
- border: 1px solid #e0e0e0;
 
 
 
 
 
43
  }
44
 
45
  .controls {
46
- background: white;
47
  padding: 10px;
48
  margin-bottom: 10px;
49
- border: 1px solid #ddd;
50
  }
51
 
52
  .btn {
@@ -62,7 +69,8 @@
62
  }
63
 
64
  .btn:disabled {
65
- background: #ccc;
 
66
  cursor: not-allowed;
67
  }
68
 
@@ -73,8 +81,8 @@
73
  }
74
 
75
  .bot-card {
76
- background: white;
77
- border: 1px solid #ddd;
78
  padding: 10px;
79
  }
80
 
@@ -88,6 +96,7 @@
88
  .bot-name {
89
  font-weight: bold;
90
  font-size: 14px;
 
91
  }
92
 
93
  .status {
@@ -97,20 +106,20 @@
97
  }
98
 
99
  .status-connected {
100
- background: #e8f5e9;
101
- color: #2e7d32;
102
- border-color: #4caf50;
103
  }
104
 
105
  .status-disconnected, .status-dead {
106
- background: #ffebee;
107
- color: #c62828;
108
- border-color: #f44336;
109
  }
110
 
111
  .bot-info {
112
  font-size: 12px;
113
- color: #666;
114
  margin-bottom: 8px;
115
  }
116
 
@@ -118,6 +127,10 @@
118
  margin: 2px 0;
119
  }
120
 
 
 
 
 
121
  .btn-rejoin {
122
  background: #2196F3;
123
  color: white;
@@ -133,17 +146,24 @@
133
  }
134
 
135
  .btn-rejoin:disabled {
136
- background: #ccc;
 
137
  cursor: not-allowed;
138
  }
139
 
140
  .timer {
141
  font-size: 11px;
142
- color: #999;
143
  text-align: center;
144
  margin-top: 4px;
145
  }
146
 
 
 
 
 
 
 
147
  @media (max-width: 600px) {
148
  .bot-grid {
149
  grid-template-columns: 1fr;
@@ -161,7 +181,7 @@
161
  </head>
162
  <body>
163
  <div class="header">
164
- <h1>Bot Manager</h1>
165
  <div class="stats">
166
  <div class="stat">Total: <strong id="totalBots">0</strong></div>
167
  <div class="stat">Connected: <strong id="connectedBots">0</strong></div>
@@ -175,7 +195,7 @@
175
  </div>
176
 
177
  <div id="botContainer" class="bot-grid">
178
- <div style="padding: 20px; color: #666;">Loading...</div>
179
  </div>
180
 
181
  <script>
@@ -204,7 +224,7 @@
204
  const validBots = botsData.filter(bot => bot.inSheet);
205
 
206
  if (validBots.length === 0) {
207
- container.innerHTML = '<div style="padding: 20px; color: #666;">No bots configured in sheet.</div>';
208
  updateStats(0, 0, 0, 0);
209
  return;
210
  }
@@ -228,7 +248,9 @@
228
  bot.status === 'Connecting...' ? 'status-connected' :
229
  'status-disconnected';
230
 
231
- const showRejoinButton = (bot.status === 'Disconnected' || bot.status === 'Dead') && bot.inSheet;
 
 
232
  const canRejoinNow = bot.canReconnect;
233
  const timeRemaining = bot.timeUntilReconnect;
234
 
@@ -240,7 +262,8 @@
240
  </div>
241
  <div class="bot-info">
242
  <div>Deaths: ${bot.deathCount}</div>
243
- ${bot.status === 'Connected' ? `<div>Uptime: ${formatUptime(bot.uptime)}</div>` : ''}
 
244
  </div>
245
  ${showRejoinButton ? `
246
  <button class="btn-rejoin"
@@ -268,11 +291,14 @@
268
 
269
  function formatUptime(seconds) {
270
  if (seconds === 0) return '0s';
271
- const hours = Math.floor(seconds / 3600);
 
272
  const minutes = Math.floor((seconds % 3600) / 60);
273
  const secs = seconds % 60;
274
 
275
- if (hours > 0) {
 
 
276
  return `${hours}h ${minutes}m`;
277
  } else if (minutes > 0) {
278
  return `${minutes}m ${secs}s`;
@@ -289,15 +315,19 @@
289
  socket.emit('refreshSheet');
290
  }
291
 
292
- // Update UI every 2 seconds to show timer countdown
293
  setInterval(() => {
294
  if (botsData.length > 0) {
295
  botsData.forEach(bot => {
296
  if (bot.timeUntilReconnect > 0) {
297
  bot.timeUntilReconnect = Math.max(0, bot.timeUntilReconnect - 2);
298
  }
 
 
 
299
  bot.canReconnect = bot.timeUntilReconnect === 0 &&
300
- (bot.status === 'Disconnected' || bot.status === 'Dead') &&
 
301
  bot.inSheet;
302
  });
303
  updateUI();
 
14
 
15
  body {
16
  font-family: Arial, sans-serif;
17
+ background: #1a1a1a;
18
+ color: #e0e0e0;
19
  padding: 10px;
20
  }
21
 
22
  .header {
23
+ background: #2a2a2a;
24
  padding: 15px;
25
  margin-bottom: 10px;
26
+ border: 1px solid #333;
27
  }
28
 
29
  h1 {
30
  font-size: 20px;
31
  margin-bottom: 10px;
32
+ color: #fff;
33
  }
34
 
35
  .stats {
 
39
  }
40
 
41
  .stat {
42
+ background: #333;
43
  padding: 8px 12px;
44
+ border: 1px solid #444;
45
+ color: #ccc;
46
+ }
47
+
48
+ .stat strong {
49
+ color: #fff;
50
  }
51
 
52
  .controls {
53
+ background: #2a2a2a;
54
  padding: 10px;
55
  margin-bottom: 10px;
56
+ border: 1px solid #333;
57
  }
58
 
59
  .btn {
 
69
  }
70
 
71
  .btn:disabled {
72
+ background: #555;
73
+ color: #999;
74
  cursor: not-allowed;
75
  }
76
 
 
81
  }
82
 
83
  .bot-card {
84
+ background: #2a2a2a;
85
+ border: 1px solid #333;
86
  padding: 10px;
87
  }
88
 
 
96
  .bot-name {
97
  font-weight: bold;
98
  font-size: 14px;
99
+ color: #fff;
100
  }
101
 
102
  .status {
 
106
  }
107
 
108
  .status-connected {
109
+ background: #1b4332;
110
+ color: #4ade80;
111
+ border-color: #16a34a;
112
  }
113
 
114
  .status-disconnected, .status-dead {
115
+ background: #450a0a;
116
+ color: #f87171;
117
+ border-color: #dc2626;
118
  }
119
 
120
  .bot-info {
121
  font-size: 12px;
122
+ color: #aaa;
123
  margin-bottom: 8px;
124
  }
125
 
 
127
  margin: 2px 0;
128
  }
129
 
130
+ .info-highlight {
131
+ color: #4ade80;
132
+ }
133
+
134
  .btn-rejoin {
135
  background: #2196F3;
136
  color: white;
 
146
  }
147
 
148
  .btn-rejoin:disabled {
149
+ background: #555;
150
+ color: #999;
151
  cursor: not-allowed;
152
  }
153
 
154
  .timer {
155
  font-size: 11px;
156
+ color: #888;
157
  text-align: center;
158
  margin-top: 4px;
159
  }
160
 
161
+ .loading {
162
+ padding: 20px;
163
+ color: #888;
164
+ text-align: center;
165
+ }
166
+
167
  @media (max-width: 600px) {
168
  .bot-grid {
169
  grid-template-columns: 1fr;
 
181
  </head>
182
  <body>
183
  <div class="header">
184
+ <h1>🤖 Bot Manager</h1>
185
  <div class="stats">
186
  <div class="stat">Total: <strong id="totalBots">0</strong></div>
187
  <div class="stat">Connected: <strong id="connectedBots">0</strong></div>
 
195
  </div>
196
 
197
  <div id="botContainer" class="bot-grid">
198
+ <div class="loading">Loading...</div>
199
  </div>
200
 
201
  <script>
 
224
  const validBots = botsData.filter(bot => bot.inSheet);
225
 
226
  if (validBots.length === 0) {
227
+ container.innerHTML = '<div class="loading">No bots configured in sheet.</div>';
228
  updateStats(0, 0, 0, 0);
229
  return;
230
  }
 
248
  bot.status === 'Connecting...' ? 'status-connected' :
249
  'status-disconnected';
250
 
251
+ const showRejoinButton = (bot.status === 'Disconnected' || bot.status === 'Dead' ||
252
+ bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') &&
253
+ bot.inSheet;
254
  const canRejoinNow = bot.canReconnect;
255
  const timeRemaining = bot.timeUntilReconnect;
256
 
 
262
  </div>
263
  <div class="bot-info">
264
  <div>Deaths: ${bot.deathCount}</div>
265
+ ${bot.status === 'Connected' && bot.connectedDuration > 0 ?
266
+ `<div class="info-highlight">Connected: ${formatUptime(bot.connectedDuration)}</div>` : ''}
267
  </div>
268
  ${showRejoinButton ? `
269
  <button class="btn-rejoin"
 
291
 
292
  function formatUptime(seconds) {
293
  if (seconds === 0) return '0s';
294
+ const days = Math.floor(seconds / 86400);
295
+ const hours = Math.floor((seconds % 86400) / 3600);
296
  const minutes = Math.floor((seconds % 3600) / 60);
297
  const secs = seconds % 60;
298
 
299
+ if (days > 0) {
300
+ return `${days}d ${hours}h ${minutes}m`;
301
+ } else if (hours > 0) {
302
  return `${hours}h ${minutes}m`;
303
  } else if (minutes > 0) {
304
  return `${minutes}m ${secs}s`;
 
315
  socket.emit('refreshSheet');
316
  }
317
 
318
+ // Update UI every 2 seconds to show timer countdown and connection duration
319
  setInterval(() => {
320
  if (botsData.length > 0) {
321
  botsData.forEach(bot => {
322
  if (bot.timeUntilReconnect > 0) {
323
  bot.timeUntilReconnect = Math.max(0, bot.timeUntilReconnect - 2);
324
  }
325
+ if (bot.status === 'Connected' && bot.connectedDuration >= 0) {
326
+ bot.connectedDuration += 2;
327
+ }
328
  bot.canReconnect = bot.timeUntilReconnect === 0 &&
329
+ (bot.status === 'Disconnected' || bot.status === 'Dead' ||
330
+ bot.status === 'Connection Failed' || bot.status === 'Server already has a bot') &&
331
  bot.inSheet;
332
  });
333
  updateUI();