Hugging Face's logo

Spaces:
LULDev
/
tttesttttttt
Running

App Files Community
LULDev commited on
Commit
ed3eb16
·
verified ·
1 Parent(s): dffa034

multiplayer web game using socket.io - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +478 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tttesttttttt
3
- emoji: 😻
4
- colorFrom: red
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tttesttttttt
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,478 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PixelCanvas - Multiplayer Drawing Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#6366f1',
16
+ secondary: '#8b5cf6',
17
+ accent: '#ec4899',
18
+ dark: '#1e293b',
19
+ light: '#f8fafc'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .pixelated {
27
+ image-rendering: pixelated;
28
+ }
29
+ .glow {
30
+ box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
31
+ }
32
+ .canvas-container {
33
+ position: relative;
34
+ overflow: hidden;
35
+ border-radius: 0.75rem;
36
+ }
37
+ .drawing-cursor {
38
+ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E") 8 8, auto;
39
+ }
40
+ #messageContainer::-webkit-scrollbar {
41
+ width: 8px;
42
+ }
43
+ #messageContainer::-webkit-scrollbar-track {
44
+ background: #1e293b;
45
+ }
46
+ #messageContainer::-webkit-scrollbar-thumb {
47
+ background: #6366f1;
48
+ border-radius: 4px;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-dark text-light min-h-screen flex flex-col">
53
+ <header class="bg-gradient-to-r from-primary to-secondary py-4 px-6">
54
+ <div class="container mx-auto flex justify-between items-center">
55
+ <div class="flex items-center space-x-2">
56
+ <i class="fas fa-paint-brush text-3xl"></i>
57
+ <h1 class="text-2xl font-bold">PixelCanvas</h1>
58
+ </div>
59
+ <div id="playerStatus" class="flex items-center space-x-2">
60
+ <div class="h-3 w-3 rounded-full bg-green-500 animate-pulse"></div>
61
+ <span id="onlineCount">0</span> players online
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <main class="flex-grow container mx-auto px-4 py-8">
67
+ <div id="gameScreen" class="hidden grid grid-cols-1 lg:grid-cols-3 gap-6">
68
+ <div class="lg:col-span-2">
69
+ <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
70
+ <div class="flex justify-between items-center mb-4">
71
+ <h2 class="text-xl font-bold">Collaborative Canvas</h2>
72
+ <div id="timer" class="bg-secondary px-3 py-1 rounded-md">02:30</div>
73
+ </div>
74
+
75
+ <div class="canvas-container relative border-2 border-gray-700 rounded-lg bg-white glow">
76
+ <canvas id="drawingCanvas" width="800" height="500" class="drawing-cursor w-full"></canvas>
77
+
78
+ <div class="absolute top-2 left-2 bg-gray-900 bg-opacity-80 text-white rounded-lg px-3 py-2 text-sm">
79
+ <span id="currentTool">Brush</span>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="mt-4 flex flex-wrap gap-2">
84
+ <button id="brushBtn" class="tool-btn bg-primary px-3 py-2 rounded-md hover:opacity-90">
85
+ <i class="fas fa-paintbrush mr-1"></i> Brush
86
+ </button>
87
+ <button id="eraserBtn" class="tool-btn bg-gray-600 px-3 py-2 rounded-md hover:opacity-90">
88
+ <i class="fas fa-eraser mr-1"></i> Eraser
89
+ </button>
90
+ <button id="clearBtn" class="tool-btn bg-red-600 px-3 py-2 rounded-md hover:opacity-90">
91
+ <i class="fas fa-trash mr-1"></i> Clear
92
+ </button>
93
+ <div class="ml-auto flex items-center">
94
+ <span class="text-sm mr-2">Color:</span>
95
+ <input type="color" id="colorPicker" value="#6366f1" class="w-10 h-10 rounded cursor-pointer">
96
+ </div>
97
+ <div class="flex items-center">
98
+ <span class="text-sm mr-2">Size:</span>
99
+ <input type="range" id="brushSize" min="1" max="50" value="5" class="w-32 rounded">
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="lg:col-span-1 space-y-6">
106
+ <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
107
+ <h2 class="text-xl font-bold mb-4">Players</h2>
108
+ <div id="playersList" class="space-y-2">
109
+ <div class="flex items-center bg-gray-700 p-2 rounded-md">
110
+ <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center mr-3">
111
+ <span class="font-bold">P</span>
112
+ </div>
113
+ <div>
114
+ <span class="font-medium">Player1</span>
115
+ <div class="text-xs text-green-400">Drawing...</div>
116
+ </div>
117
+ <div class="ml-auto bg-secondary px-2 py-1 rounded text-sm">123</div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="bg-gray-800 rounded-xl p-4 shadow-lg">
123
+ <h2 class="text-xl font-bold mb-4">Chat</h2>
124
+ <div id="messageContainer" class="h-64 overflow-y-auto mb-4 bg-gray-900 rounded-lg p-3">
125
+ <div class="text-center text-gray-500 italic">Game starting...</div>
126
+ </div>
127
+ <div class="flex">
128
+ <input type="text" id="messageInput" placeholder="Type your message..." class="flex-grow bg-gray-700 rounded-l-lg px-4 py-2 focus:outline-none">
129
+ <button id="sendBtn" class="bg-primary hover:bg-indigo-600 px-4 py-2 rounded-r-lg">
130
+ <i class="fas fa-paper-plane"></i>
131
+ </button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div id="lobby" class="max-w-2xl mx-auto">
138
+ <div class="text-center py-12">
139
+ <div class="bg-gradient-to-r from-primary to-secondary w-32 h-32 mx-auto rounded-full flex items-center justify-center mb-6 glow">
140
+ <i class="fas fa-palette text-6xl text-white"></i>
141
+ </div>
142
+ <h1 class="text-4xl font-bold mb-2">PixelCanvas</h1>
143
+ <p class="text-gray-300 mb-8 text-lg">Collaborative drawing with players around the world</p>
144
+
145
+ <div class="bg-gray-800 rounded-xl p-8 mb-8">
146
+ <div class="flex flex-col md:flex-row gap-4 mb-6">
147
+ <input type="text" id="username" placeholder="Enter your username" class="bg-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-primary flex-grow" value="Player">
148
+ <button id="joinBtn" class="bg-gradient-to-r from-primary to-secondary hover:from-indigo-700 hover:to-purple-700 rounded-lg px-8 py-3 font-medium transform transition hover:scale-105">
149
+ <i class="fas fa-play mr-2"></i> Join Game
150
+ </button>
151
+ </div>
152
+
153
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
154
+ <div class="bg-gray-900 p-4 rounded-lg">
155
+ <div class="text-accent mb-2"><i class="fas fa-users fa-2x"></i></div>
156
+ <h3 class="font-bold mb-1">Multiplayer</h3>
157
+ <p class="text-sm text-gray-400">Play with anyone around the world</p>
158
+ </div>
159
+ <div class="bg-gray-900 p-4 rounded-lg">
160
+ <div class="text-green-400 mb-2"><i class="fas fa-paint-brush fa-2x"></i></div>
161
+ <h3 class="font-bold mb-1">Real-time</h3>
162
+ <p class="text-sm text-gray-400">See drawings appear instantly</p>
163
+ </div>
164
+ <div class="bg-gray-900 p-4 rounded-lg">
165
+ <div class="text-yellow-400 mb-2"><i class="fas fa-trophy fa-2x"></i></div>
166
+ <h3 class="font-bold mb-1">Competitive</h3>
167
+ <p class="text-sm text-gray-400">Earn points for creativity</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="bg-gray-800 rounded-xl p-6">
173
+ <h2 class="text-xl font-bold mb-4">How to Play</h2>
174
+ <ol class="space-y-3 text-left max-w-md mx-auto">
175
+ <li class="flex items-start">
176
+ <div class="bg-primary rounded-full h-6 w-6 flex items-center justify-center text-xs mr-3 mt-1">1</div>
177
+ <p>Join a game and wait for players</p>
178
+ </li>
179
+ <li class="flex items-start">
180
+ <div class="bg-primary rounded-full h-6 w-6 flex items-center justify-center text-xs mr-3 mt-1">2</div>
181
+ <p>When your turn comes, draw the assigned word</p>
182
+ </li>
183
+ <li class="flex items-start">
184
+ <div class="bg-primary rounded-full h-6 w-6 flex items-center justify-center text-xs mr-3 mt-1">3</div>
185
+ <p>Other players guess what you're drawing in chat</p>
186
+ </li>
187
+ <li class="flex items-start">
188
+ <div class="bg-primary rounded-full h-6 w-6 flex items-center justify-center text-xs mr-3 mt-1">4</div>
189
+ <p>Earn points for correct guesses and creative drawings</p>
190
+ </li>
191
+ </ol>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </main>
196
+
197
+ <footer class="bg-gray-900 py-6">
198
+ <div class="container mx-auto text-center text-gray-500">
199
+ <p>PixelCanvas Multiplayer Game | Made with Socket.io, HTML, CSS & JavaScript</p>
200
+ <div class="mt-2 flex justify-center space-x-4">
201
+ <a href="#" class="hover:text-primary"><i class="fab fa-github"></i></a>
202
+ <a href="#" class="hover:text-primary"><i class="fab fa-twitter"></i></a>
203
+ <a href="#" class="hover:text-primary"><i class="fab fa-discord"></i></a>
204
+ </div>
205
+ </div>
206
+ </footer>
207
+
208
+ <script>
209
+ document.addEventListener('DOMContentLoaded', () => {
210
+ // DOM elements
211
+ const lobby = document.getElementById('lobby');
212
+ const gameScreen = document.getElementById('gameScreen');
213
+ const joinBtn = document.getElementById('joinBtn');
214
+ const usernameInput = document.getElementById('username');
215
+ const onlineCount = document.getElementById('onlineCount');
216
+ const playersList = document.getElementById('playersList');
217
+ const messageContainer = document.getElementById('messageContainer');
218
+ const messageInput = document.getElementById('messageInput');
219
+ const sendBtn = document.getElementById('sendBtn');
220
+ const drawingCanvas = document.getElementById('drawingCanvas');
221
+ const brushBtn = document.getElementById('brushBtn');
222
+ const eraserBtn = document.getElementById('eraserBtn');
223
+ const clearBtn = document.getElementById('clearBtn');
224
+ const colorPicker = document.getElementById('colorPicker');
225
+ const brushSize = document.getElementById('brushSize');
226
+ const currentTool = document.getElementById('currentTool');
227
+ const timer = document.getElementById('timer');
228
+
229
+ // Canvas context
230
+ const ctx = drawingCanvas.getContext('2d');
231
+
232
+ // State variables
233
+ let isDrawing = false;
234
+ let lastX = 0;
235
+ let lastY = 0;
236
+ let currentColor = '#6366f1';
237
+ let currentSize = 5;
238
+ let isEraser = false;
239
+ let socket;
240
+
241
+ // Initialize canvas
242
+ ctx.fillStyle = 'white';
243
+ ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
244
+ ctx.lineJoin = 'round';
245
+ ctx.lineCap = 'round';
246
+ ctx.lineWidth = currentSize;
247
+
248
+ // Drawing functions
249
+ function startDrawing(e) {
250
+ isDrawing = true;
251
+ [lastX, lastY] = [e.offsetX, e.offsetY];
252
+ }
253
+
254
+ function draw(e) {
255
+ if (!isDrawing) return;
256
+
257
+ ctx.strokeStyle = isEraser ? 'white' : currentColor;
258
+ ctx.lineWidth = currentSize;
259
+
260
+ ctx.beginPath();
261
+ ctx.moveTo(lastX, lastY);
262
+ ctx.lineTo(e.offsetX, e.offsetY);
263
+ ctx.stroke();
264
+
265
+ [lastX, lastY] = [e.offsetX, e.offsetY];
266
+
267
+ // Simulate sending drawing data to server
268
+ const drawingData = {
269
+ startX: lastX,
270
+ startY: lastY,
271
+ endX: e.offsetX,
272
+ endY: e.offsetY,
273
+ color: isEraser ? 'white' : currentColor,
274
+ size: currentSize
275
+ };
276
+
277
+ console.log("Drawing data:", drawingData);
278
+ }
279
+
280
+ function stopDrawing() {
281
+ isDrawing = false;
282
+ }
283
+
284
+ // Canvas event listeners
285
+ drawingCanvas.addEventListener('mousedown', startDrawing);
286
+ drawingCanvas.addEventListener('mousemove', draw);
287
+ drawingCanvas.addEventListener('mouseup', stopDrawing);
288
+ drawingCanvas.addEventListener('mouseout', stopDrawing);
289
+
290
+ // Tool selection
291
+ brushBtn.addEventListener('click', () => {
292
+ isEraser = false;
293
+ currentTool.textContent = 'Brush';
294
+ brushBtn.classList.add('bg-primary');
295
+ eraserBtn.classList.remove('bg-primary');
296
+ eraserBtn.classList.add('bg-gray-600');
297
+ });
298
+
299
+ eraserBtn.addEventListener('click', () => {
300
+ isEraser = true;
301
+ currentTool.textContent = 'Eraser';
302
+ eraserBtn.classList.add('bg-primary');
303
+ eraserBtn.classList.remove('bg-gray-600');
304
+ brushBtn.classList.remove('bg-primary');
305
+ brushBtn.classList.add('bg-gray-600');
306
+ });
307
+
308
+ clearBtn.addEventListener('click', () => {
309
+ ctx.fillStyle = 'white';
310
+ ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
311
+ });
312
+
313
+ // Color and size pickers
314
+ colorPicker.addEventListener('input', (e) => {
315
+ currentColor = e.target.value;
316
+ });
317
+
318
+ brushSize.addEventListener('input', (e) => {
319
+ currentSize = e.target.value;
320
+ });
321
+
322
+ // Chat functionality
323
+ function sendMessage() {
324
+ const message = messageInput.value.trim();
325
+ if (message) {
326
+ // Simulate message sending
327
+ addMessage("You", message, true);
328
+
329
+ // Clear input
330
+ messageInput.value = '';
331
+ }
332
+ }
333
+
334
+ sendBtn.addEventListener('click', sendMessage);
335
+ messageInput.addEventListener('keypress', (e) => {
336
+ if (e.key === 'Enter') {
337
+ sendMessage();
338
+ }
339
+ });
340
+
341
+ function addMessage(name, text, isSelf = false) {
342
+ const messageElement = document.createElement('div');
343
+ messageElement.classList.add('mb-3', 'last:mb-0');
344
+
345
+ if (isSelf) {
346
+ messageElement.innerHTML = `
347
+ <div class="flex justify-end">
348
+ <div class="bg-primary text-white rounded-xl rounded-tr-none p-3 max-w-xs md:max-w-md">
349
+ <div class="font-medium mb-1">${name}</div>
350
+ <div>${text}</div>
351
+ </div>
352
+ </div>
353
+ `;
354
+ } else {
355
+ messageElement.innerHTML = `
356
+ <div class="flex">
357
+ <div class="bg-gray-700 rounded-xl rounded-tl-none p-3 max-w-xs md:max-w-md">
358
+ <div class="font-medium mb-1">${name}</div>
359
+ <div>${text}</div>
360
+ </div>
361
+ </div>
362
+ `;
363
+ }
364
+
365
+ messageContainer.appendChild(messageElement);
366
+ messageContainer.scrollTop = messageContainer.scrollHeight;
367
+ }
368
+
369
+ // Fake messages to simulate gameplay
370
+ function simulateGameplay() {
371
+ setTimeout(() => {
372
+ addMessage("System", "Word to draw: Cat");
373
+ }, 1000);
374
+
375
+ setTimeout(() => {
376
+ addMessage("Player2", "Is it an animal?");
377
+ }, 3000);
378
+
379
+ setTimeout(() => {
380
+ addMessage("Player3", "I think it's a cat!");
381
+ addMessage("System", "Player3 guessed correctly! +10 points");
382
+ }, 6000);
383
+ }
384
+
385
+ // Join game
386
+ joinBtn.addEventListener('click', () => {
387
+ const username = usernameInput.value || "Player";
388
+
389
+ // Simulate connecting to the server
390
+ console.log(`Connecting as ${username}...`);
391
+
392
+ // Show loading state
393
+ joinBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
394
+ joinBtn.disabled = true;
395
+
396
+ // Simulate connection process
397
+ setTimeout(() => {
398
+ // Switch to game screen
399
+ lobby.classList.add('hidden');
400
+ gameScreen.classList.remove('hidden');
401
+
402
+ // Add fake players
403
+ playersList.innerHTML = `
404
+ <div class="flex items-center bg-gray-700 p-2 rounded-md">
405
+ <div class="h-10 w-10 rounded-full bg-primary flex items-center justify-center mr-3">
406
+ <span class="font-bold">${username.charAt(0)}</span>
407
+ </div>
408
+ <div>
409
+ <span class="font-medium">${username}</span>
410
+ <div class="text-xs text-purple-400">You</div>
411
+ </div>
412
+ <div class="ml-auto bg-secondary px-2 py-1 rounded text-sm">0</div>
413
+ </div>
414
+ <div class="flex items-center bg-gray-700 p-2 rounded-md">
415
+ <div class="h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center mr-3">
416
+ <span class="font-bold">A</span>
417
+ </div>
418
+ <div>
419
+ <span class="font-medium">Artist123</span>
420
+ <div class="text-xs text-green-400">Drawing...</div>
421
+ </div>
422
+ <div class="ml-auto bg-secondary px-2 py-1 rounded text-sm">87</div>
423
+ </div>
424
+ <div class="flex items-center bg-gray-700 p-2 rounded-md">
425
+ <div class="h-10 w-10 rounded-full bg-pink-500 flex items-center justify-center mr-3">
426
+ <span class="font-bold">G</span>
427
+ </div>
428
+ <div>
429
+ <span class="font-medium">Guesser99</span>
430
+ <div class="text-xs text-gray-400">Waiting</div>
431
+ </div>
432
+ <div class="ml-auto bg-secondary px-2 py-1 rounded text-sm">42</div>
433
+ </div>
434
+ <div class="flex items-center bg-gray-700 p-2 rounded-md">
435
+ <div class="h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
436
+ <span class="font-bold">C</span>
437
+ </div>
438
+ <div>
439
+ <span class="font-medium">CreativeDrawer</span>
440
+ <div class="text-xs text-gray-400">Waiting</div>
441
+ </div>
442
+ <div class="ml-auto bg-secondary px-2 py-1 rounded text-sm">65</div>
443
+ </div>
444
+ `;
445
+
446
+ // Update online count
447
+ onlineCount.textContent = '4';
448
+
449
+ // Start timer
450
+ startTimer(150); // 2 minutes 30 seconds
451
+
452
+ // Simulate gameplay messages
453
+ simulateGameplay();
454
+ }, 1500);
455
+ });
456
+
457
+ // Timer function
458
+ function startTimer(duration) {
459
+ let timerValue = duration;
460
+ const interval = setInterval(() => {
461
+ const minutes = Math.floor(timerValue / 60);
462
+ const seconds = timerValue % 60;
463
+ timer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
464
+
465
+ if (--timerValue < 0) {
466
+ clearInterval(interval);
467
+ timer.textContent = "00:00";
468
+ addMessage("System", "Round completed! New round starting...");
469
+ }
470
+ }, 1000);
471
+ }
472
+
473
+ // Initialize placeholder socket connection
474
+ console.log("Socket.IO client loaded. This would connect to a real server.");
475
+ });
476
+ </script>
477
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LULDev/tttesttttttt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
478
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ 3d shooter multiplayer web game using socket.io, a server browser to see all created servers, servers create and server join via code, choose own avatar and username
2
+ multiplayer web game using socket.io