Hugging Face's logo

Spaces:
ysn-rfd
/
deepsite-project
Running

App Files Community
ysn-rfd commited on
Commit
54874f6
·
verified ·
1 Parent(s): b905b9e

text based game gui fully complete full of features

Browse files
Files changed (1) hide show
  1. index.html +450 -18
index.html CHANGED
@@ -1,19 +1,451 @@
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
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Text Adventure Game</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Press+Start+2P&display=swap');
15
+
16
+ body {
17
+ font-family: 'MedievalSharp', cursive;
18
+ background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
19
+ color: #e2e8f0;
20
+ }
21
+
22
+ .game-font {
23
+ font-family: 'Press Start 2P', cursive;
24
+ }
25
+
26
+ .scrollbar-custom {
27
+ scrollbar-width: thin;
28
+ scrollbar-color: #4a5568 #2d3748;
29
+ }
30
+
31
+ .scrollbar-custom::-webkit-scrollbar {
32
+ width: 6px;
33
+ }
34
+
35
+ .scrollbar-custom::-webkit-scrollbar-track {
36
+ background: #2d3748;
37
+ }
38
+
39
+ .scrollbar-custom::-webkit-scrollbar-thumb {
40
+ background: #4a5568;
41
+ border-radius: 3px;
42
+ }
43
+
44
+ .typewriter {
45
+ overflow: hidden;
46
+ border-right: 2px solid #e2e8f0;
47
+ white-space: nowrap;
48
+ margin: 0 auto;
49
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
50
+ }
51
+
52
+ @keyframes typing {
53
+ from { width: 0 }
54
+ to { width: 100% }
55
+ }
56
+
57
+ @keyframes blink-caret {
58
+ from, to { border-color: transparent }
59
+ 50% { border-color: #e2e8f0 }
60
+ }
61
+
62
+ .fade-in {
63
+ animation: fadeIn 0.5s ease-in;
64
+ }
65
+
66
+ @keyframes fadeIn {
67
+ from { opacity: 0; transform: translateY(10px); }
68
+ to { opacity: 1; transform: translateY(0); }
69
+ }
70
+
71
+ .pixel-border {
72
+ border: 4px solid;
73
+ border-image:
74
+ linear-gradient(45deg, #e53e3e, #dd6b20, #38a169, #3182ce, #805ad5) 1;
75
+ }
76
+
77
+ .glow {
78
+ box-shadow: 0 0 20px rgba(66, 153, 225, 0.5);
79
+ }
80
+ </style>
81
+ </head>
82
+ <body class="min-h-screen flex flex-col">
83
+ <!-- Header -->
84
+ <header class="bg-gray-900 border-b-4 border-yellow-600">
85
+ <div class="container mx-auto px-4 py-4">
86
+ <div class="flex items-center justify-between">
87
+ <div class="flex items-center space-x-4">
88
+ <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center glow">
89
+ <i data-feather="sword" class="text-white"></i>
90
+ </div>
91
+ <h1 class="text-2xl game-font text-yellow-400">DRAGON'S LEGACY</h1>
92
+ </div>
93
+ <div class="flex items-center space-x-6">
94
+ <div class="flex items-center space-x-2">
95
+ <i data-feather="heart" class="text-red-500"></i>
96
+ <span class="game-font">HP: <span id="health">100</span>/100</span>
97
+ </div>
98
+ <div class="flex items-center space-x-2">
99
+ <i data-feather="star" class="text-yellow-500"></i>
100
+ <span class="game-font">Level: <span id="level">1</span></span>
101
+ </div>
102
+ <div class="flex items-center space-x-2">
103
+ <i data-feather="award" class="text-green-500"></i>
104
+ <span class="game-font">XP: <span id="xp">0</span>/100</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </header>
110
+
111
+ <!-- Main Content -->
112
+ <main class="flex-1 container mx-auto px-4 py-8">
113
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
114
+ <!-- Game Area -->
115
+ <div class="lg:col-span-2 space-y-6">
116
+ <!-- Location & Description -->
117
+ <div class="bg-gray-800 rounded-lg p-6 pixel-border fade-in">
118
+ <div class="flex items-center justify-between mb-4">
119
+ <h2 class="text-xl game-font text-yellow-400" id="location">The Old Forest</h2>
120
+ <div class="flex space-x-2">
121
+ <button class="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded game-font text-sm" onclick="saveGame()">
122
+ <i data-feather="save" class="w-4 h-4 inline mr-1"></i>Save
123
+ </button>
124
+ <button class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded game-font text-sm" onclick="loadGame()">
125
+ <i data-feather="download" class="w-4 h-4 inline mr-1"></i>Load
126
+ </button>
127
+ </div>
128
+ </div>
129
+ <div class="bg-black bg-opacity-50 rounded p-4 min-h-32">
130
+ <p id="description" class="text-gray-300 leading-relaxed">
131
+ You stand at the edge of an ancient forest. Moss-covered trees tower above you, and a narrow path
132
+ winds its way into the darkness. The air is cool and carries the scent of damp earth and pine.
133
+ Somewhere in the distance, a bird calls out, its cry echoing through the woods.
134
+ </p>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Action Buttons -->
139
+ <div class="grid grid-cols-2 gap-4 fade-in" id="actions">
140
+ <button class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 p-4 rounded-lg game-font text-sm transition-all duration-300 transform hover:scale-105" onclick="takeAction('north')">
141
+ <i data-feather="arrow-up" class="w-5 h-5 inline mr-2"></i>Go North
142
+ </button>
143
+ <button class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 p-4 rounded-lg game-font text-sm transition-all duration-300 transform hover:scale-105" onclick="takeAction('south')">
144
+ <i data-feather="arrow-down" class="w-5 h-5 inline mr-2"></i>Go South
145
+ </button>
146
+ <button class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 p-4 rounded-lg game-font text-sm transition-all duration-300 transform hover:scale-105" onclick="takeAction('examine')">
147
+ <i data-feather="search" class="w-5 h-5 inline mr-2"></i>Examine Area
148
+ </button>
149
+ <button class="bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 p-4 rounded-lg game-font text-sm transition-all duration-300 transform hover:scale-105" onclick="takeAction('inventory')">
150
+ <i data-feather="package" class="w-5 h-5 inline mr-2"></i>Inventory
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Combat Section -->
155
+ <div id="combat-section" class="hidden bg-red-900 rounded-lg p-6 pixel-border fade-in">
156
+ <h3 class="text-lg game-font text-red-300 mb-4">COMBAT!</h3>
157
+ <div class="grid grid-cols-2 gap-4">
158
+ <button class="bg-red-600 hover:bg-red-700 p-3 rounded game-font text-sm" onclick="combatAction('attack')">
159
+ <i data-feather="sword" class="w-4 h-4 inline mr-2"></i>Attack
160
+ </button>
161
+ <button class="bg-yellow-600 hover:bg-yellow-700 p-3 rounded game-font text-sm" onclick="combatAction('defend')">
162
+ <i data-feather="shield" class="w-4 h-4 inline mr-2"></i>Defend
163
+ </button>
164
+ <button class="bg-blue-600 hover:bg-blue-700 p-3 rounded game-font text-sm" onclick="combatAction('spell')">
165
+ <i data-feather="zap" class="w-4 h-4 inline mr-2"></i>Cast Spell
166
+ </button>
167
+ <button class="bg-green-600 hover:bg-green-700 p-3 rounded game-font text-sm" onclick="combatAction('flee')">
168
+ <i data-feather="wind" class="w-4 h-4 inline mr-2"></i>Flee
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Game Log -->
174
+ <div class="bg-gray-900 rounded-lg p-4 pixel-border">
175
+ <h3 class="text-lg game-font text-blue-400 mb-3">GAME LOG</h3>
176
+ <div id="game-log" class="h-48 overflow-y-auto scrollbar-custom bg-black bg-opacity-50 rounded p-3 space-y-2">
177
+ <div class="text-green-400 text-sm">> Welcome to Dragon's Legacy! Your adventure begins...</div>
178
+ <div class="text-yellow-400 text-sm">> You find yourself at the edge of the Old Forest.</div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Sidebar -->
184
+ <div class="space-y-6">
185
+ <!-- Character Info -->
186
+ <div class="bg-gray-800 rounded-lg p-6 pixel-border fade-in">
187
+ <h3 class="text-lg game-font text-purple-400 mb-4">CHARACTER</h3>
188
+ <div class="space-y-3">
189
+ <div class="flex justify-between">
190
+ <span>Class:</span>
191
+ <span class="text-yellow-400" id="character-class">Warrior</span>
192
+ </div>
193
+ <div class="flex justify-between">
194
+ <span>Strength:</span>
195
+ <span class="text-red-400" id="strength">12</span>
196
+ </div>
197
+ <div class="flex justify-between">
198
+ <span>Agility:</span>
199
+ <span class="text-green-400" id="agility">10</span>
200
+ </div>
201
+ <div class="flex justify-between">
202
+ <span>Intelligence:</span>
203
+ <span class="text-blue-400" id="intelligence">8</span>
204
+ </div>
205
+ <div class="flex justify-between">
206
+ <span>Gold:</span>
207
+ <span class="text-yellow-400" id="gold">50</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Inventory -->
213
+ <div class="bg-gray-800 rounded-lg p-6 pixel-border fade-in">
214
+ <h3 class="text-lg game-font text-green-400 mb-4">INVENTORY</h3>
215
+ <div id="inventory-items" class="space-y-2">
216
+ <div class="flex justify-between items-center bg-gray-700 p-2 rounded">
217
+ <span>Iron Sword</span>
218
+ <span class="text-xs text-gray-400">Weapon</span>
219
+ </div>
220
+ <div class="flex justify-between items-center bg-gray-700 p-2 rounded">
221
+ <span>Health Potion</span>
222
+ <span class="text-xs text-gray-400">Consumable</span>
223
+ </div>
224
+ <div class="flex justify-between items-center bg-gray-700 p-2 rounded">
225
+ <span>Leather Armor</span>
226
+ <span class="text-xs text-gray-400">Armor</span>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Map -->
232
+ <div class="bg-gray-800 rounded-lg p-6 pixel-border fade-in">
233
+ <h3 class="text-lg game-font text-red-400 mb-4">WORLD MAP</h3>
234
+ <div class="bg-black bg-opacity-50 rounded p-4 text-center">
235
+ <div class="text-gray-500 text-sm mb-2">Old Forest</div>
236
+ <div class="grid grid-cols-3 gap-1 text-xs">
237
+ <div class="p-2 bg-gray-700 rounded">Mountains</div>
238
+ <div class="p-2 bg-green-700 rounded text-yellow-400 glow">Old Forest</div>
239
+ <div class="p-2 bg-gray-700 rounded">River</div>
240
+ <div class="p-2 bg-gray-700 rounded">Village</div>
241
+ <div class="p-2 bg-gray-700 rounded">Castle</div>
242
+ <div class="p-2 bg-gray-700 rounded">Caves</div>
243
+ <div class="p-2 bg-gray-700 rounded">Swamp</div>
244
+ <div class="p-2 bg-gray-700 rounded">Ruins</div>
245
+ <div class="p-2 bg-gray-700 rounded">Dungeon</div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Quests -->
251
+ <div class="bg-gray-800 rounded-lg p-6 pixel-border fade-in">
252
+ <h3 class="text-lg game-font text-blue-400 mb-4">ACTIVE QUESTS</h3>
253
+ <div class="space-y-3">
254
+ <div class="bg-gray-700 p-3 rounded">
255
+ <div class="flex justify-between items-start mb-2">
256
+ <span class="text-yellow-400 font-bold">The Lost Amulet</span>
257
+ <span class="text-xs bg-yellow-600 px-2 py-1 rounded">Active</span>
258
+ </div>
259
+ <p class="text-sm text-gray-300">Find the ancient amulet hidden in the forest ruins.</p>
260
+ <div class="w-full bg-gray-600 rounded-full h-2 mt-2">
261
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 30%"></div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </main>
269
+
270
+ <!-- Footer -->
271
+ <footer class="bg-gray-900 border-t-4 border-yellow-600 py-4">
272
+ <div class="container mx-auto px-4 text-center">
273
+ <p class="game-font text-sm text-gray-400">DRAGON'S LEGACY - A Text Adventure Game</p>
274
+ </div>
275
+ </footer>
276
+
277
+ <!-- Game Script -->
278
+ <script>
279
+ // Game State
280
+ const gameState = {
281
+ location: 'old_forest',
282
+ health: 100,
283
+ maxHealth: 100,
284
+ level: 1,
285
+ xp: 0,
286
+ xpToNextLevel: 100,
287
+ gold: 50,
288
+ inventory: ['Iron Sword', 'Health Potion', 'Leather Armor'],
289
+ stats: {
290
+ strength: 12,
291
+ agility: 10,
292
+ intelligence: 8
293
+ },
294
+ quests: {
295
+ 'lost_amulet': {
296
+ name: 'The Lost Amulet',
297
+ description: 'Find the ancient amulet hidden in the forest ruins.',
298
+ progress: 30,
299
+ active: true
300
+ }
301
+ }
302
+ };
303
+
304
+ // Locations Data
305
+ const locations = {
306
+ 'old_forest': {
307
+ name: 'The Old Forest',
308
+ description: 'You stand at the edge of an ancient forest. Moss-covered trees tower above you, and a narrow path winds its way into the darkness. The air is cool and carries the scent of damp earth and pine.',
309
+ actions: ['north', 'south', 'examine', 'inventory']
310
+ },
311
+ 'forest_ruins': {
312
+ name: 'Forest Ruins',
313
+ description: 'Before you lie the crumbling remains of an ancient civilization. Stone pillars rise from the undergrowth, and faded carvings hint at forgotten stories.',
314
+ actions: ['north', 'south', 'examine', 'search']
315
+ }
316
+ };
317
+
318
+ // Game Functions
319
+ function takeAction(action) {
320
+ const log = document.getElementById('game-log');
321
+ let message = '';
322
+
323
+ switch(action) {
324
+ case 'north':
325
+ if (gameState.location === 'old_forest') {
326
+ gameState.location = 'forest_ruins';
327
+ message = 'You travel north and discover ancient ruins hidden among the trees.';
328
+ } else {
329
+ message = 'You cannot go that way.';
330
+ }
331
+ break;
332
+ case 'south':
333
+ if (gameState.location === 'forest_ruins') {
334
+ gameState.location = 'old_forest';
335
+ message = 'You return to the edge of the Old Forest.';
336
+ } else {
337
+ message = 'You cannot go that way.';
338
+ }
339
+ break;
340
+ case 'examine':
341
+ message = 'You carefully search the area but find nothing unusual.';
342
+ break;
343
+ case 'inventory':
344
+ message = 'You check your inventory.';
345
+ showInventoryModal();
346
+ break;
347
+ default:
348
+ message = 'Unknown action.';
349
+ }
350
+
351
+ updateLocation();
352
+ addToLog(message);
353
+ }
354
+
355
+ function combatAction(action) {
356
+ const log = document.getElementById('game-log');
357
+ let message = '';
358
+
359
+ switch(action) {
360
+ case 'attack':
361
+ message = 'You swing your sword at the enemy!';
362
+ break;
363
+ case 'defend':
364
+ message = 'You raise your shield and prepare for an attack.';
365
+ break;
366
+ case 'spell':
367
+ message = 'You cast a powerful spell!';
368
+ break;
369
+ case 'flee':
370
+ message = 'You attempt to flee from battle...';
371
+ break;
372
+ }
373
+
374
+ addToLog(message);
375
+ }
376
+
377
+ function updateLocation() {
378
+ const location = locations[gameState.location];
379
+ document.getElementById('location').textContent = location.name;
380
+ document.getElementById('description').textContent = location.description;
381
+
382
+ // Add typewriter effect
383
+ const descriptionElement = document.getElementById('description');
384
+ const text = descriptionElement.textContent;
385
+ descriptionElement.textContent = '';
386
+ descriptionElement.classList.add('typewriter');
387
+ descriptionElement.style.width = '0';
388
+
389
+ setTimeout(() => {
390
+ descriptionElement.textContent = text;
391
+ descriptionElement.classList.remove('typewriter');
392
+ descriptionElement.style.width = 'auto';
393
+ }, 100);
394
+ }
395
+
396
+ function addToLog(message) {
397
+ const log = document.getElementById('game-log');
398
+ const entry = document.createElement('div');
399
+ entry.className = 'text-green-400 text-sm fade-in';
400
+ entry.textContent = '> ' + message;
401
+ log.appendChild(entry);
402
+ log.scrollTop = log.scrollHeight;
403
+ }
404
+
405
+ function showInventoryModal() {
406
+ // Simple inventory display - could be enhanced with a modal
407
+ addToLog('Inventory: ' + gameState.inventory.join(', '));
408
+ }
409
+
410
+ function saveGame() {
411
+ localStorage.setItem('dragonLegacySave', JSON.stringify(gameState));
412
+ addToLog('Game saved successfully!');
413
+ }
414
+
415
+ function loadGame() {
416
+ const saved = localStorage.getItem('dragonLegacySave');
417
+ if (saved) {
418
+ Object.assign(gameState, JSON.parse(saved));
419
+ updateUI();
420
+ addToLog('Game loaded successfully!');
421
+ } else {
422
+ addToLog('No saved game found.');
423
+ }
424
+ }
425
+
426
+ function updateUI() {
427
+ document.getElementById('health').textContent = gameState.health;
428
+ document.getElementById('level').textContent = gameState.level;
429
+ document.getElementById('xp').textContent = gameState.xp;
430
+ document.getElementById('gold').textContent = gameState.gold;
431
+ document.getElementById('strength').textContent = gameState.stats.strength;
432
+ document.getElementById('agility').textContent = gameState.stats.agility;
433
+ document.getElementById('intelligence').textContent = gameState.stats.intelligence;
434
+
435
+ updateLocation();
436
+ }
437
+
438
+ // Initialize game
439
+ document.addEventListener('DOMContentLoaded', function() {
440
+ feather.replace();
441
+ updateUI();
442
+
443
+ // Add some initial game messages
444
+ setTimeout(() => {
445
+ addToLog('Use the action buttons to explore the world.');
446
+ addToLog('Your quest: Find the Lost Amulet in the forest ruins.');
447
+ }, 1000);
448
+ });
449
+ </script>
450
+ </body>
451
  </html>