LULDev commited on
Commit
dac14e4
·
verified ·
1 Parent(s): fe1c0d0

2d multiplayer race game with scoreboard and chat - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +662 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Race
3
- emoji: 🏢
4
- colorFrom: blue
5
- colorTo: indigo
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: race
3
+ emoji: 🐳
4
+ colorFrom: green
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,662 @@
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>2D Multiplayer Race Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for game elements */
11
+ .game-container {
12
+ position: relative;
13
+ width: 100%;
14
+ height: 400px;
15
+ background-color: #2c3e50;
16
+ overflow: hidden;
17
+ }
18
+
19
+ .track {
20
+ position: absolute;
21
+ width: 100%;
22
+ height: 100%;
23
+ background-color: #34495e;
24
+ }
25
+
26
+ .lane {
27
+ position: absolute;
28
+ width: 100%;
29
+ height: 80px;
30
+ border-top: 2px dashed rgba(255, 255, 255, 0.2);
31
+ border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
32
+ }
33
+
34
+ .player-car {
35
+ position: absolute;
36
+ width: 60px;
37
+ height: 30px;
38
+ bottom: 20px;
39
+ left: 50px;
40
+ z-index: 10;
41
+ transition: left 0.1s;
42
+ }
43
+
44
+ .obstacle {
45
+ position: absolute;
46
+ width: 50px;
47
+ height: 50px;
48
+ z-index: 5;
49
+ }
50
+
51
+ .finish-line {
52
+ position: absolute;
53
+ width: 10px;
54
+ height: 100%;
55
+ right: 50px;
56
+ background: repeating-linear-gradient(
57
+ to bottom,
58
+ white,
59
+ white 20px,
60
+ black 20px,
61
+ black 40px
62
+ );
63
+ z-index: 1;
64
+ }
65
+
66
+ .car-icon {
67
+ font-size: 30px;
68
+ }
69
+
70
+ .chat-message {
71
+ animation: fadeIn 0.3s;
72
+ }
73
+
74
+ @keyframes fadeIn {
75
+ from { opacity: 0; transform: translateY(5px); }
76
+ to { opacity: 1; transform: translateY(0); }
77
+ }
78
+
79
+ @keyframes crash {
80
+ 0% { transform: rotate(0deg); }
81
+ 25% { transform: rotate(10deg); }
82
+ 50% { transform: rotate(-10deg); }
83
+ 75% { transform: rotate(10deg); }
84
+ 100% { transform: rotate(0deg); }
85
+ }
86
+
87
+ .crash-animation {
88
+ animation: crash 0.5s ease-in-out;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-gray-900 text-white">
93
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
94
+ <h1 class="text-4xl font-bold text-center mb-6 text-yellow-400">
95
+ <i class="fas fa-flag-checkered mr-2"></i>Multiplayer Race
96
+ </h1>
97
+
98
+ <div class="flex flex-col lg:flex-row gap-6">
99
+ <!-- Game Area -->
100
+ <div class="flex-1">
101
+ <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
102
+ <!-- Scoreboard Header -->
103
+ <div class="bg-gray-700 px-4 py-3 flex justify-between items-center">
104
+ <h2 class="text-xl font-bold">
105
+ <i class="fas fa-trophy mr-2 text-yellow-400"></i>Race Scoreboard
106
+ </h2>
107
+ <div class="flex items-center space-x-4">
108
+ <div class="flex items-center">
109
+ <i class="fas fa-users mr-1 text-blue-400"></i>
110
+ <span id="player-count">0</span>
111
+ </div>
112
+ <div class="flex items-center">
113
+ <i class="fas fa-clock mr-1 text-green-400"></i>
114
+ <span id="game-time">0:00</span>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Actual Scoreboard -->
120
+ <div class="px-4 py-3 bg-gray-800 max-h-40 overflow-y-auto" id="scoreboard">
121
+ <div class="flex justify-between py-1 px-2 rounded bg-gray-700 mb-2">
122
+ <span class="font-bold">Player</span>
123
+ <span class="font-bold">Position</span>
124
+ <span class="font-bold">Speed</span>
125
+ </div>
126
+ <div class="text-center py-3 text-gray-500" id="empty-scoreboard">
127
+ Waiting for players to join...
128
+ </div>
129
+ </div>
130
+
131
+ <!-- The Game Canvas -->
132
+ <div class="game-container relative" id="game-container">
133
+ <div class="track">
134
+ <div class="lane" style="top: 60px;"></div>
135
+ <div class="lane" style="top: 160px;"></div>
136
+ <div class="lane" style="top: 260px;"></div>
137
+ <div class="finish-line"></div>
138
+
139
+ <!-- Player cars will be added dynamically -->
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Controls -->
144
+ <div class="bg-gray-700 px-4 py-3 flex items-center justify-between">
145
+ <div class="flex items-center space-x-2">
146
+ <button id="start-game" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium flex items-center">
147
+ <i class="fas fa-play mr-2"></i> Start Game
148
+ </button>
149
+ <button id="reset-game" class="bg-yellow-600 hover:bg-yellow-700 px-4 py-2 rounded-lg font-medium flex items-center">
150
+ <i class="fas fa-sync-alt mr-2"></i> Reset
151
+ </button>
152
+ </div>
153
+
154
+ <div class="flex items-center space-x-4">
155
+ <span id="player-speed">Speed: 0</span>
156
+ <span id="player-position">Position: -</span>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Chat Area -->
163
+ <div class="w-full lg:w-80 flex flex-col">
164
+ <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden flex-1 flex flex-col">
165
+ <div class="bg-gray-700 px-4 py-3">
166
+ <h2 class="text-xl font-bold flex items-center">
167
+ <i class="fas fa-comments mr-2 text-blue-400"></i>Race Chat
168
+ </h2>
169
+ </div>
170
+
171
+ <div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
172
+ <div class="text-gray-400 text-center py-8">Send a message to start chatting!</div>
173
+ </div>
174
+
175
+ <div class="p-4 bg-gray-700">
176
+ <div class="flex space-x-2">
177
+ <input type="text" id="chat-input" placeholder="Type your message..."
178
+ class="flex-1 bg-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
179
+ <button id="send-message" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium">
180
+ <i class="fas fa-paper-plane"></i>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Player List -->
187
+ <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden mt-4">
188
+ <div class="bg-gray-700 px-4 py-3">
189
+ <h2 class="text-xl font-bold flex items-center">
190
+ <i class="fas fa-users mr-2 text-purple-400"></i>Online Racers
191
+ </h2>
192
+ </div>
193
+
194
+ <div class="p-4" id="player-list">
195
+ <div class="text-gray-400 text-center py-4">No other players connected</div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <script>
203
+ // Game State
204
+ const gameState = {
205
+ gameRunning: false,
206
+ gameTime: 0,
207
+ playerId: 'player-' + Math.random().toString(36).substr(2, 9),
208
+ playerName: 'Racer ' + Math.floor(Math.random() * 1000),
209
+ players: {},
210
+ obstacles: [],
211
+ chatMessages: [],
212
+ keysPressed: {}
213
+ };
214
+
215
+ // DOM Elements
216
+ const gameContainer = document.getElementById('game-container');
217
+ const scoreboard = document.getElementById('scoreboard');
218
+ const emptyScoreboard = document.getElementById('empty-scoreboard');
219
+ const playerCount = document.getElementById('player-count');
220
+ const gameTime = document.getElementById('game-time');
221
+ const playerSpeed = document.getElementById('player-speed');
222
+ const playerPosition = document.getElementById('player-position');
223
+ const chatMessages = document.getElementById('chat-messages');
224
+ const chatInput = document.getElementById('chat-input');
225
+ const sendMessage = document.getElementById('send-message');
226
+ const playerList = document.getElementById('player-list');
227
+ const startGame = document.getElementById('start-game');
228
+ const resetGame = document.getElementById('reset-game');
229
+
230
+ // Car colors for players
231
+ const carColors = [
232
+ 'text-red-500', 'text-blue-500', 'text-green-500',
233
+ 'text-yellow-500', 'text-purple-500', 'text-pink-500'
234
+ ];
235
+
236
+ // Initialize game
237
+ function initGame() {
238
+ // Create player's car
239
+ createPlayer();
240
+
241
+ // Add keyboard event listeners
242
+ window.addEventListener('keydown', handleKeyDown);
243
+ window.addEventListener('keyup', handleKeyUp);
244
+
245
+ // Add button event listeners
246
+ startGame.addEventListener('click', startGameHandler);
247
+ resetGame.addEventListener('click', resetGameHandler);
248
+ sendMessage.addEventListener('click', sendChatMessage);
249
+ chatInput.addEventListener('keypress', (e) => {
250
+ if (e.key === 'Enter') sendChatMessage();
251
+ });
252
+
253
+ // Add some demo players (in a real game, these would come from a server)
254
+ setTimeout(() => {
255
+ addDemoPlayer('Racer-1', 160);
256
+ addDemoPlayer('Racer-2', 260);
257
+ }, 500);
258
+
259
+ // Start game loop
260
+ gameLoop();
261
+ }
262
+
263
+ // Create player element
264
+ function createPlayer() {
265
+ const playerCar = document.createElement('div');
266
+ playerCar.id = gameState.playerId;
267
+ playerCar.className = `player-car ${carColors[0]} car-icon`;
268
+ playerCar.innerHTML = '<i class="fas fa-car"></i>';
269
+ gameContainer.querySelector('.track').appendChild(playerCar);
270
+
271
+ gameState.players[gameState.playerId] = {
272
+ id: gameState.playerId,
273
+ name: gameState.playerName,
274
+ x: 50,
275
+ y: 60,
276
+ speed: 0,
277
+ maxSpeed: 10,
278
+ acceleration: 0.2,
279
+ deceleration: 0.1,
280
+ position: 0,
281
+ finished: false,
282
+ finishTime: 0,
283
+ element: playerCar
284
+ };
285
+
286
+ updatePlayerList();
287
+ updateScoreboard();
288
+ }
289
+
290
+ // Add some demo players (simulating multiplayer)
291
+ function addDemoPlayer(name, yPos) {
292
+ const playerId = 'demo-' + Math.random().toString(36).substr(2, 6);
293
+ const carColor = carColors[Object.keys(gameState.players).length % carColors.length];
294
+
295
+ const playerCar = document.createElement('div');
296
+ playerCar.className = `player-car ${carColor} car-icon`;
297
+ playerCar.innerHTML = '<i class="fas fa-car"></i>';
298
+ playerCar.style.top = `${yPos}px`;
299
+ playerCar.style.left = '50px';
300
+ gameContainer.querySelector('.track').appendChild(playerCar);
301
+
302
+ gameState.players[playerId] = {
303
+ id: playerId,
304
+ name: name,
305
+ x: 50,
306
+ y: yPos,
307
+ speed: 0,
308
+ maxSpeed: 8 + Math.random() * 4,
309
+ acceleration: 0.1 + Math.random() * 0.1,
310
+ deceleration: 0.05 + Math.random() * 0.05,
311
+ position: 0,
312
+ finished: false,
313
+ finishTime: 0,
314
+ element: playerCar,
315
+ isDemo: true
316
+ };
317
+
318
+ const demoPlayer = gameState.players[playerId];
319
+
320
+ // Demo AI for computer players
321
+ setInterval(() => {
322
+ if (gameState.gameRunning && !demoPlayer.finished) {
323
+ if (Math.random() > 0.3) {
324
+ demoPlayer.speed = Math.min(demoPlayer.speed + demoPlayer.acceleration, demoPlayer.maxSpeed);
325
+ } else if (Math.random() > 0.7) {
326
+ demoPlayer.speed = Math.max(demoPlayer.speed - demoPlayer.deceleration, 0);
327
+ }
328
+
329
+ // Randomly change speed
330
+ if (Math.random() > 0.8) {
331
+ demoPlayer.speed = Math.max(0, demoPlayer.speed + (Math.random() - 0.5) * 2);
332
+ }
333
+ }
334
+ }, 200);
335
+
336
+ updatePlayerList();
337
+ updateScoreboard();
338
+ }
339
+
340
+ // Handle keyboard input
341
+ function handleKeyDown(e) {
342
+ gameState.keysPressed[e.key] = true;
343
+ }
344
+
345
+ function handleKeyUp(e) {
346
+ gameState.keysPressed[e.key] = false;
347
+ }
348
+
349
+ // Start game handler
350
+ function startGameHandler() {
351
+ gameState.gameRunning = true;
352
+ gameState.gameTime = 0;
353
+ startGame.disabled = true;
354
+ startGame.classList.remove('bg-green-600', 'hover:bg-green-700');
355
+ startGame.classList.add('bg-gray-600', 'cursor-not-allowed');
356
+
357
+ // Reset all players
358
+ for (const playerId in gameState.players) {
359
+ const player = gameState.players[playerId];
360
+ player.x = 50;
361
+ player.speed = 0;
362
+ player.finished = false;
363
+ player.finishTime = 0;
364
+ player.position = 0;
365
+ }
366
+
367
+ addChatMessage('System', 'The race has started! Good luck everyone!', 'text-yellow-400');
368
+ }
369
+
370
+ // Reset game handler
371
+ function resetGameHandler() {
372
+ gameState.gameRunning = false;
373
+ gameState.gameTime = 0;
374
+ startGame.disabled = false;
375
+ startGame.classList.add('bg-green-600', 'hover:bg-green-700');
376
+ startGame.classList.remove('bg-gray-600', 'cursor-not-allowed');
377
+
378
+ // Reset all players
379
+ for (const playerId in gameState.players) {
380
+ const player = gameState.players[playerId];
381
+ player.x = 50;
382
+ player.speed = 0;
383
+ player.finished = false;
384
+ player.finishTime = 0;
385
+ player.position = 0;
386
+ player.element.style.left = `${player.x}px`;
387
+ }
388
+
389
+ addChatMessage('System', 'The race has been reset.', 'text-yellow-400');
390
+ updateScoreboard();
391
+ }
392
+
393
+ // Main game loop
394
+ function gameLoop() {
395
+ if (gameState.gameRunning) {
396
+ gameState.gameTime += 0.1;
397
+ updateGameTimeDisplay();
398
+
399
+ // Update all players
400
+ for (const playerId in gameState.players) {
401
+ const player = gameState.players[playerId];
402
+
403
+ // Player control (only for main player)
404
+ if (playerId === gameState.playerId) {
405
+ if (gameState.keysPressed['ArrowRight'] || gameState.keysPressed['d']) {
406
+ player.speed = Math.min(player.speed + player.acceleration, player.maxSpeed);
407
+ }
408
+
409
+ if (gameState.keysPressed['ArrowLeft'] || gameState.keysPressed['a']) {
410
+ player.speed = Math.max(player.speed - player.deceleration, 0);
411
+ }
412
+
413
+ // Apply friction
414
+ if (!gameState.keysPressed['ArrowRight'] && !gameState.keysPressed['ArrowLeft'] &&
415
+ !gameState.keysPressed['d'] && !gameState.keysPressed['a']) {
416
+ player.speed = Math.max(player.speed - player.deceleration, 0);
417
+ }
418
+ }
419
+
420
+ // Move player
421
+ if (!player.finished) {
422
+ player.x += player.speed;
423
+
424
+ // Check if player finished
425
+ if (player.x >= gameContainer.clientWidth - 100) {
426
+ player.finished = true;
427
+ player.finishTime = gameState.gameTime;
428
+ player.position = Object.values(gameState.players).filter(p => p.finished).length;
429
+
430
+ if (playerId === gameState.playerId) {
431
+ addChatMessage('System', `You finished in ${ordinalSuffix(player.position)} place!`, 'text-green-400');
432
+ } else {
433
+ addChatMessage('System', `${player.name} finished in ${ordinalSuffix(player.position)} place!`, 'text-blue-400');
434
+ }
435
+ }
436
+ }
437
+
438
+ // Update player position on screen
439
+ player.element.style.left = `${player.x}px`;
440
+
441
+ // Update stats for main player
442
+ if (playerId === gameState.playerId) {
443
+ playerSpeed.textContent = `Speed: ${Math.round(player.speed * 10)}`;
444
+ if (player.finished) {
445
+ playerPosition.textContent = `Position: ${ordinalSuffix(player.position)}`;
446
+ } else {
447
+ playerPosition.textContent = `Position: Racing`;
448
+ }
449
+ }
450
+ }
451
+
452
+ // Calculate positions
453
+ calculatePositions();
454
+ }
455
+
456
+ // Update UI
457
+ updateScoreboard();
458
+
459
+ requestAnimationFrame(gameLoop);
460
+ }
461
+
462
+ // Calculate player positions
463
+ function calculatePositions() {
464
+ const players = Object.values(gameState.players);
465
+
466
+ // Filter and sort players who haven't finished
467
+ const racingPlayers = players
468
+ .filter(p => !p.finished)
469
+ .sort((a, b) => b.x - a.x);
470
+
471
+ // Assign positions
472
+ let currentPosition = Object.values(gameState.players).filter(p => p.finished).length + 1;
473
+
474
+ for (const player of racingPlayers) {
475
+ player.position = currentPosition++;
476
+ }
477
+ }
478
+
479
+ // Update game time display
480
+ function updateGameTimeDisplay() {
481
+ const minutes = Math.floor(gameState.gameTime / 60);
482
+ const seconds = Math.floor(gameState.gameTime % 60);
483
+ const paddedSeconds = seconds.toString().padStart(2, '0');
484
+ gameTime.textContent = `${minutes}:${paddedSeconds}`;
485
+ }
486
+
487
+ // Update scoreboard
488
+ function updateScoreboard() {
489
+ const players = Object.values(gameState.players);
490
+
491
+ if (players.length === 0) {
492
+ emptyScoreboard.style.display = 'block';
493
+ return;
494
+ }
495
+
496
+ emptyScoreboard.style.display = 'none';
497
+
498
+ // Sort players by position (finished first, then by x position)
499
+ const sortedPlayers = players.sort((a, b) => {
500
+ if (a.finished && b.finished) return a.finishTime - b.finishTime;
501
+ if (a.finished) return -1;
502
+ if (b.finished) return 1;
503
+ return b.x - a.x;
504
+ });
505
+
506
+ // Clear scoreboard except header
507
+ const header = scoreboard.firstElementChild;
508
+ while (scoreboard.children.length > 1) {
509
+ scoreboard.removeChild(scoreboard.lastChild);
510
+ }
511
+
512
+ // Add player entries
513
+ sortedPlayers.forEach((player, index) => {
514
+ const playerRow = document.createElement('div');
515
+ playerRow.className = `flex justify-between py-2 px-2 rounded ${player.id === gameState.playerId ? 'bg-gray-700' : 'bg-gray-800'} mb-1 items-center`;
516
+
517
+ const playerName = document.createElement('div');
518
+ playerName.className = 'flex items-center';
519
+ playerName.innerHTML = `<span class="w-5 text-gray-400">${index + 1}.</span> ${player.name} ${player.id === gameState.playerId ? '<span class="text-xs bg-blue-600 px-1.5 py-0.5 rounded ml-2">You</span>' : ''}`;
520
+
521
+ const playerPosition = document.createElement('div');
522
+ if (player.finished) {
523
+ playerPosition.textContent = `${ordinalSuffix(player.position)} (${formatTime(player.finishTime)})`;
524
+ } else {
525
+ playerPosition.textContent = 'Racing';
526
+ }
527
+
528
+ const playerSpeed = document.createElement('div');
529
+ playerSpeed.textContent = `${Math.round(player.speed * 10)}`;
530
+
531
+ playerRow.appendChild(playerName);
532
+ playerRow.appendChild(playerPosition);
533
+ playerRow.appendChild(playerSpeed);
534
+
535
+ scoreboard.appendChild(playerRow);
536
+ });
537
+
538
+ // Update player count
539
+ playerCount.textContent = players.length;
540
+ }
541
+
542
+ // Chat functionality
543
+ function sendChatMessage() {
544
+ const message = chatInput.value.trim();
545
+ if (message) {
546
+ addChatMessage(gameState.playerName, message);
547
+ chatInput.value = '';
548
+
549
+ // Simulate other players responding
550
+ if (gameState.gameRunning) {
551
+ setTimeout(() => {
552
+ const demoPlayers = Object.values(gameState.players).filter(p => p.isDemo);
553
+ if (demoPlayers.length > 0 && Math.random() > 0.5) {
554
+ const demoPlayer = demoPlayers[Math.floor(Math.random() * demoPlayers.length)];
555
+ const responses = [
556
+ "Good luck everyone!",
557
+ "I'm in the lead!",
558
+ "Watch out for that turn!",
559
+ "Almost at the finish line!",
560
+ "Nice move!",
561
+ "This is intense!",
562
+ "I'm catching up!",
563
+ "Too fast for me!"
564
+ ];
565
+ addChatMessage(demoPlayer.name, responses[Math.floor(Math.random() * responses.length)]);
566
+ }
567
+ }, 1000 + Math.random() * 3000);
568
+ }
569
+ }
570
+ }
571
+
572
+ function addChatMessage(name, message, specialClass = '') {
573
+ const messageDiv = document.createElement('div');
574
+ messageDiv.className = `chat-message mb-2 ${specialClass}`;
575
+
576
+ const nameSpan = document.createElement('span');
577
+ nameSpan.className = 'font-bold mr-2';
578
+ nameSpan.textContent = name + ':';
579
+ if (name === 'System') {
580
+ nameSpan.className += ' text-yellow-400';
581
+ }
582
+
583
+ const messageSpan = document.createElement('span');
584
+ messageSpan.className = 'text-gray-300';
585
+ messageSpan.textContent = message;
586
+
587
+ messageDiv.appendChild(nameSpan);
588
+ messageDiv.appendChild(messageSpan);
589
+
590
+ chatMessages.appendChild(messageDiv);
591
+
592
+ // Remove "empty chat" message if present
593
+ if (chatMessages.firstChild && chatMessages.firstChild.classList.contains('text-center')) {
594
+ chatMessages.removeChild(chatMessages.firstChild);
595
+ }
596
+
597
+ // Scroll to bottom
598
+ chatMessages.scrollTop = chatMessages.scrollHeight;
599
+ }
600
+
601
+ // Update player list display
602
+ function updatePlayerList() {
603
+ playerList.innerHTML = '';
604
+
605
+ const players = Object.values(gameState.players);
606
+ if (players.length === 0) {
607
+ playerList.innerHTML = '<div class="text-gray-400 text-center py-4">No other players connected</div>';
608
+ return;
609
+ }
610
+
611
+ players.forEach((player, index) => {
612
+ const playerItem = document.createElement('div');
613
+ playerItem.className = `flex items-center py-2 px-3 rounded mb-1 ${player.id === gameState.playerId ? 'bg-gray-700' : 'bg-gray-800'}`;
614
+
615
+ const carIcon = document.createElement('div');
616
+ carIcon.className = `car-icon mr-3 ${player.id === gameState.playerId ? 'text-red-500' : carColors[(index % carColors.length) + 1]}`;
617
+ carIcon.innerHTML = '<i class="fas fa-car"></i>';
618
+
619
+ const playerName = document.createElement('div');
620
+ playerName.className = 'flex-1';
621
+ playerName.textContent = player.name;
622
+
623
+ const playerStatus = document.createElement('div');
624
+ playerStatus.className = 'text-xs px-2 py-1 rounded-full';
625
+
626
+ if (player.finished) {
627
+ playerStatus.textContent = ordinalSuffix(player.position);
628
+ playerStatus.className += ' bg-green-800 text-green-300';
629
+ } else {
630
+ playerStatus.textContent = 'Racing';
631
+ playerStatus.className += ' bg-blue-800 text-blue-300';
632
+ }
633
+
634
+ playerItem.appendChild(carIcon);
635
+ playerItem.appendChild(playerName);
636
+ playerItem.appendChild(playerStatus);
637
+
638
+ playerList.appendChild(playerItem);
639
+ });
640
+ }
641
+
642
+ // Helper functions
643
+ function ordinalSuffix(i) {
644
+ const j = i % 10, k = i % 100;
645
+ if (j === 1 && k !== 11) return i + "st";
646
+ if (j === 2 && k !== 12) return i + "nd";
647
+ if (j === 3 && k !== 13) return i + "rd";
648
+ return i + "th";
649
+ }
650
+
651
+ function formatTime(seconds) {
652
+ const minutes = Math.floor(seconds / 60);
653
+ const secs = Math.floor(seconds % 60);
654
+ const millis = Math.floor((seconds % 1) * 10);
655
+ return `${minutes}:${secs.toString().padStart(2, '0')}.${millis}`;
656
+ }
657
+
658
+ // Fire it up!
659
+ document.addEventListener('DOMContentLoaded', initGame);
660
+ </script>
661
+ <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/race" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
662
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 2d multiplayer race game with scoreboard and chat