Hugging Face's logo

Spaces:
DevXen
/
xenthra-inc
Running

App Files Community
DevXen commited on
Commit
80a5ebd
·
verified ·
1 Parent(s): 3ccd1ce

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +1484 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Xenthra Inc
3
- emoji: 🌍
4
  colorFrom: red
5
  colorTo: blue
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: xenthra-inc
3
+ emoji: 🐳
4
  colorFrom: red
5
  colorTo: blue
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,1484 @@
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>The Legend of Zelda: Hero's Quest</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
+ @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
11
+
12
+ body {
13
+ font-family: 'MedievalSharp', cursive;
14
+ background-image: url('https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
15
+ background-size: cover;
16
+ background-attachment: fixed;
17
+ color: #f8f8f2;
18
+ }
19
+
20
+ .game-container {
21
+ background-color: rgba(0, 0, 0, 0.7);
22
+ border: 4px solid #d4af37;
23
+ border-radius: 10px;
24
+ box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
25
+ }
26
+
27
+ .zelda-button {
28
+ background: linear-gradient(to bottom, #4a752c, #2c4a1a);
29
+ border: 2px solid #d4af37;
30
+ color: white;
31
+ text-shadow: 1px 1px 2px black;
32
+ transition: all 0.3s;
33
+ }
34
+
35
+ .zelda-button:hover {
36
+ background: linear-gradient(to bottom, #5a8a3c, #3c5a2a);
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
39
+ }
40
+
41
+ .health-bar {
42
+ background: linear-gradient(to right, #c62828, #f44336);
43
+ height: 20px;
44
+ border-radius: 10px;
45
+ transition: width 0.5s;
46
+ }
47
+
48
+ .mana-bar {
49
+ background: linear-gradient(to right, #1565c0, #42a5f5);
50
+ height: 20px;
51
+ border-radius: 10px;
52
+ transition: width 0.5s;
53
+ }
54
+
55
+ .enemy-health-bar {
56
+ background: linear-gradient(to right, #8e24aa, #e91e63);
57
+ height: 20px;
58
+ border-radius: 10px;
59
+ transition: width 0.5s;
60
+ }
61
+
62
+ .typewriter {
63
+ overflow: hidden;
64
+ border-right: .15em solid #d4af37;
65
+ white-space: pre-wrap;
66
+ letter-spacing: .15em;
67
+ animation:
68
+ typing 3.5s steps(40, end),
69
+ blink-caret .75s step-end infinite;
70
+ }
71
+
72
+ @keyframes typing {
73
+ from { width: 0 }
74
+ to { width: 100% }
75
+ }
76
+
77
+ @keyframes blink-caret {
78
+ from, to { border-color: transparent }
79
+ 50% { border-color: #d4af37 }
80
+ }
81
+
82
+ .scroll-text {
83
+ height: 200px;
84
+ overflow-y: auto;
85
+ scrollbar-width: thin;
86
+ scrollbar-color: #d4af37 #2c4a1a;
87
+ }
88
+
89
+ .scroll-text::-webkit-scrollbar {
90
+ width: 8px;
91
+ }
92
+
93
+ .scroll-text::-webkit-scrollbar-track {
94
+ background: #2c4a1a;
95
+ }
96
+
97
+ .scroll-text::-webkit-scrollbar-thumb {
98
+ background-color: #d4af37;
99
+ border-radius: 6px;
100
+ }
101
+
102
+ .pixel-art {
103
+ image-rendering: pixelated;
104
+ image-rendering: -moz-crisp-edges;
105
+ image-rendering: crisp-edges;
106
+ }
107
+
108
+ .fade-in {
109
+ animation: fadeIn 1s;
110
+ }
111
+
112
+ @keyframes fadeIn {
113
+ from { opacity: 0; }
114
+ to { opacity: 1; }
115
+ }
116
+
117
+ .shake {
118
+ animation: shake 0.5s;
119
+ }
120
+
121
+ @keyframes shake {
122
+ 0% { transform: translate(1px, 1px) rotate(0deg); }
123
+ 10% { transform: translate(-1px, -2px) rotate(-1deg); }
124
+ 20% { transform: translate(-3px, 0px) rotate(1deg); }
125
+ 30% { transform: translate(3px, 2px) rotate(0deg); }
126
+ 40% { transform: translate(1px, -1px) rotate(1deg); }
127
+ 50% { transform: translate(-1px, 2px) rotate(-1deg); }
128
+ 60% { transform: translate(-3px, 1px) rotate(0deg); }
129
+ 70% { transform: translate(3px, 1px) rotate(-1deg); }
130
+ 80% { transform: translate(-1px, -1px) rotate(1deg); }
131
+ 90% { transform: translate(1px, 2px) rotate(0deg); }
132
+ 100% { transform: translate(1px, -2px) rotate(-1deg); }
133
+ }
134
+
135
+ .victory {
136
+ animation: victory 2s infinite;
137
+ }
138
+
139
+ @keyframes victory {
140
+ 0% { transform: scale(1); }
141
+ 50% { transform: scale(1.05); }
142
+ 100% { transform: scale(1); }
143
+ }
144
+ </style>
145
+ </head>
146
+ <body class="min-h-screen flex items-center justify-center p-4">
147
+ <div class="game-container w-full max-w-4xl p-6 fade-in">
148
+ <!-- Title Screen -->
149
+ <div id="title-screen" class="text-center">
150
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 text-yellow-300">THE LEGEND OF ZELDA</h1>
151
+ <h2 class="text-3xl md:text-4xl font-bold mb-10 text-yellow-200">Hero's Quest</h2>
152
+ <div class="flex flex-col space-y-4 max-w-xs mx-auto">
153
+ <button id="new-game-btn" class="zelda-button py-3 px-6 rounded-lg text-xl">
154
+ <i class="fas fa-sword mr-2"></i> New Game
155
+ </button>
156
+ <button id="load-game-btn" class="zelda-button py-3 px-6 rounded-lg text-xl">
157
+ <i class="fas fa-scroll mr-2"></i> Load Game
158
+ </button>
159
+ <button id="instructions-btn" class="zelda-button py-3 px-6 rounded-lg text-xl">
160
+ <i class="fas fa-info-circle mr-2"></i> Instructions
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Character Creation -->
166
+ <div id="character-creation" class="hidden text-center">
167
+ <h2 class="text-3xl font-bold mb-6 text-yellow-300">Create Your Hero</h2>
168
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
169
+ <div>
170
+ <label class="block text-lg mb-2">Hero's Name:</label>
171
+ <input type="text" id="hero-name" class="w-full p-2 bg-gray-800 border border-yellow-500 rounded text-white" maxlength="12">
172
+ </div>
173
+ <div>
174
+ <label class="block text-lg mb-2">Choose Your Class:</label>
175
+ <select id="hero-class" class="w-full p-2 bg-gray-800 border border-yellow-500 rounded text-white">
176
+ <option value="warrior">Warrior</option>
177
+ <option value="archer">Archer</option>
178
+ <option value="mage">Mage</option>
179
+ <option value="rogue">Rogue</option>
180
+ </select>
181
+ </div>
182
+ </div>
183
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
184
+ <div class="p-4 bg-gray-900 rounded-lg border border-yellow-500">
185
+ <h3 class="text-xl text-yellow-300 mb-2">Warrior</h3>
186
+ <p class="text-sm">High HP & Attack</p>
187
+ <p class="text-sm">Low Magic</p>
188
+ </div>
189
+ <div class="p-4 bg-gray-900 rounded-lg border border-yellow-500">
190
+ <h3 class="text-xl text-yellow-300 mb-2">Archer</h3>
191
+ <p class="text-sm">Balanced Stats</p>
192
+ <p class="text-sm">Good Accuracy</p>
193
+ </div>
194
+ <div class="p-4 bg-gray-900 rounded-lg border border-yellow-500">
195
+ <h3 class="text-xl text-yellow-300 mb-2">Mage</h3>
196
+ <p class="text-sm">High Magic</p>
197
+ <p class="text-sm">Low Defense</p>
198
+ </div>
199
+ <div class="p-4 bg-gray-900 rounded-lg border border-yellow-500">
200
+ <h3 class="text-xl text-yellow-300 mb-2">Rogue</h3>
201
+ <p class="text-sm">High Evasion</p>
202
+ <p class="text-sm">Critical Hits</p>
203
+ </div>
204
+ </div>
205
+ <button id="create-hero-btn" class="zelda-button py-3 px-8 rounded-lg text-xl">
206
+ <i class="fas fa-shield-alt mr-2"></i> Begin Adventure
207
+ </button>
208
+ </div>
209
+
210
+ <!-- Main Game Screen -->
211
+ <div id="main-game" class="hidden">
212
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
213
+ <!-- Player Stats -->
214
+ <div class="bg-gray-900 p-4 rounded-lg border border-yellow-500">
215
+ <h2 class="text-2xl font-bold text-center text-yellow-300 mb-4" id="player-name">Link</h2>
216
+ <div class="flex justify-center mb-4">
217
+ <img id="player-image" src="https://www.zeldadungeon.net/wiki/images/thumb/3/3d/Link_Artwork_ALttP.png/200px-Link_Artwork_ALttP.png" class="w-32 h-32 object-cover rounded-full border-2 border-yellow-500">
218
+ </div>
219
+ <div class="mb-2">
220
+ <div class="flex justify-between mb-1">
221
+ <span>HP:</span>
222
+ <span id="player-hp">50/50</span>
223
+ </div>
224
+ <div class="health-bar rounded-full" id="player-hp-bar"></div>
225
+ </div>
226
+ <div class="mb-2">
227
+ <div class="flex justify-between mb-1">
228
+ <span>MP:</span>
229
+ <span id="player-mp">20/20</span>
230
+ </div>
231
+ <div class="mana-bar rounded-full" id="player-mp-bar"></div>
232
+ </div>
233
+ <div class="grid grid-cols-2 gap-2 mt-4">
234
+ <div class="bg-gray-800 p-2 rounded">
235
+ <div class="text-yellow-300">Level</div>
236
+ <div id="player-level" class="text-xl">1</div>
237
+ </div>
238
+ <div class="bg-gray-800 p-2 rounded">
239
+ <div class="text-yellow-300">Gold</div>
240
+ <div id="player-gold" class="text-xl">10</div>
241
+ </div>
242
+ <div class="bg-gray-800 p-2 rounded">
243
+ <div class="text-yellow-300">Exp</div>
244
+ <div id="player-exp" class="text-xl">0/100</div>
245
+ </div>
246
+ <div class="bg-gray-800 p-2 rounded">
247
+ <div class="text-yellow-300">Day</div>
248
+ <div id="game-day" class="text-xl">1</div>
249
+ </div>
250
+ </div>
251
+ <div class="mt-4">
252
+ <button id="save-game-btn" class="zelda-button w-full py-2 px-4 rounded">
253
+ <i class="fas fa-save mr-2"></i> Save Game
254
+ </button>
255
+ <button id="main-menu-btn" class="zelda-button w-full py-2 px-4 rounded mt-2">
256
+ <i class="fas fa-home mr-2"></i> Main Menu
257
+ </button>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Game Log -->
262
+ <div class="md:col-span-2 bg-gray-900 p-4 rounded-lg border border-yellow-500">
263
+ <div class="scroll-text mb-4 h-64 p-3 bg-black rounded" id="game-log">
264
+ <p class="typewriter text-green-300">Welcome to Hyrule, brave hero! The kingdom is in peril and only you can save it from the forces of evil.</p>
265
+ </div>
266
+
267
+ <!-- Enemy Display -->
268
+ <div id="enemy-display" class="hidden mb-6 p-4 bg-gray-800 rounded-lg border border-red-500">
269
+ <div class="flex flex-col md:flex-row items-center">
270
+ <div class="md:mr-6 mb-4 md:mb-0">
271
+ <img id="enemy-image" src="https://www.zeldadungeon.net/wiki/images/thumb/4/4b/RedOctorok.png/150px-RedOctorok.png" class="w-24 h-24 object-cover rounded-full border-2 border-red-500 shake">
272
+ <div class="text-center mt-2 text-xl font-bold" id="enemy-name">Red Octorok</div>
273
+ </div>
274
+ <div class="flex-grow">
275
+ <div class="mb-2">
276
+ <div class="flex justify-between mb-1">
277
+ <span>HP:</span>
278
+ <span id="enemy-hp">20/20</span>
279
+ </div>
280
+ <div class="enemy-health-bar rounded-full" id="enemy-hp-bar"></div>
281
+ </div>
282
+ <div class="grid grid-cols-2 gap-2 mt-2">
283
+ <div class="bg-gray-700 p-1 rounded text-center">
284
+ <div class="text-xs">Attack</div>
285
+ <div id="enemy-attack">5</div>
286
+ </div>
287
+ <div class="bg-gray-700 p-1 rounded text-center">
288
+ <div class="text-xs">Defense</div>
289
+ <div id="enemy-defense">2</div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Action Buttons -->
297
+ <div id="action-buttons" class="grid grid-cols-2 gap-3">
298
+ <button id="explore-btn" class="zelda-button py-3 px-4 rounded-lg">
299
+ <i class="fas fa-map-marked-alt mr-2"></i> Explore
300
+ </button>
301
+ <button id="shop-btn" class="zelda-button py-3 px-4 rounded-lg">
302
+ <i class="fas fa-coins mr-2"></i> Shop
303
+ </button>
304
+ <button id="train-btn" class="zelda-button py-3 px-4 rounded-lg">
305
+ <i class="fas fa-dumbbell mr-2"></i> Train
306
+ </button>
307
+ <button id="rest-btn" class="zelda-button py-3 px-4 rounded-lg">
308
+ <i class="fas fa-bed mr-2"></i> Rest
309
+ </button>
310
+ </div>
311
+
312
+ <!-- Battle Buttons -->
313
+ <div id="battle-buttons" class="hidden grid grid-cols-2 gap-3">
314
+ <button id="attack-btn" class="zelda-button py-3 px-4 rounded-lg bg-red-600">
315
+ <i class="fas fa-sword mr-2"></i> Attack
316
+ </button>
317
+ <button id="magic-btn" class="zelda-button py-3 px-4 rounded-lg bg-blue-600">
318
+ <i class="fas fa-magic mr-2"></i> Magic
319
+ </button>
320
+ <button id="item-btn" class="zelda-button py-3 px-4 rounded-lg bg-green-600">
321
+ <i class="fas fa-potion mr-2"></i> Item
322
+ </button>
323
+ <button id="flee-btn" class="zelda-button py-3 px-4 rounded-lg bg-yellow-600">
324
+ <i class="fas fa-running mr-2"></i> Flee
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Instructions Screen -->
332
+ <div id="instructions-screen" class="hidden">
333
+ <h2 class="text-3xl font-bold mb-6 text-center text-yellow-300">Hero's Quest Instructions</h2>
334
+ <div class="bg-gray-900 p-6 rounded-lg border border-yellow-500">
335
+ <div class="mb-6">
336
+ <h3 class="text-xl text-yellow-300 mb-2"><i class="fas fa-swords mr-2"></i> Game Objective</h3>
337
+ <p class="mb-4">Your goal is to become strong enough to defeat Ganon and save Princess Zelda. You'll need to explore Hyrule, battle monsters, gain experience, and acquire powerful items.</p>
338
+ </div>
339
+
340
+ <div class="mb-6">
341
+ <h3 class="text-xl text-yellow-300 mb-2"><i class="fas fa-map-marked-alt mr-2"></i> Daily Actions</h3>
342
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
343
+ <div class="bg-gray-800 p-3 rounded">
344
+ <h4 class="text-lg text-yellow-200 mb-1">Explore</h4>
345
+ <p class="text-sm">Venture into the wilds of Hyrule. You may find treasure or encounter enemies.</p>
346
+ </div>
347
+ <div class="bg-gray-800 p-3 rounded">
348
+ <h4 class="text-lg text-yellow-200 mb-1">Shop</h4>
349
+ <p class="text-sm">Visit shops to buy weapons, armor, and items to aid your quest.</p>
350
+ </div>
351
+ <div class="bg-gray-800 p-3 rounded">
352
+ <h4 class="text-lg text-yellow-200 mb-1">Train</h4>
353
+ <p class="text-sm">Practice your skills to permanently increase your stats.</p>
354
+ </div>
355
+ <div class="bg-gray-800 p-3 rounded">
356
+ <h4 class="text-lg text-yellow-200 mb-1">Rest</h4>
357
+ <p class="text-sm">Recover your HP and MP for the next day's adventures.</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <div class="mb-6">
363
+ <h3 class="text-xl text-yellow-300 mb-2"><i class="fas fa-fist-raised mr-2"></i> Combat</h3>
364
+ <p class="mb-4">When you encounter an enemy, you can:</p>
365
+ <ul class="list-disc pl-6 space-y-2">
366
+ <li><strong>Attack:</strong> Use your weapon to deal damage</li>
367
+ <li><strong>Magic:</strong> Cast spells (consumes MP)</li>
368
+ <li><strong>Item:</strong> Use items from your inventory</li>
369
+ <li><strong>Flee:</strong> Attempt to escape (not always successful)</li>
370
+ </ul>
371
+ </div>
372
+
373
+ <div class="text-center">
374
+ <button id="back-to-title-btn" class="zelda-button py-3 px-8 rounded-lg text-xl">
375
+ <i class="fas fa-arrow-left mr-2"></i> Back to Title
376
+ </button>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Shop Screen -->
382
+ <div id="shop-screen" class="hidden">
383
+ <h2 class="text-3xl font-bold mb-6 text-center text-yellow-300">Hyrule Market</h2>
384
+ <div class="bg-gray-900 p-6 rounded-lg border border-yellow-500">
385
+ <div class="flex justify-between items-center mb-6">
386
+ <div class="text-xl">
387
+ Your Gold: <span id="shop-gold" class="text-yellow-300">10</span> <i class="fas fa-coins text-yellow-300"></i>
388
+ </div>
389
+ <button id="exit-shop-btn" class="zelda-button py-2 px-4 rounded">
390
+ <i class="fas fa-door-open mr-2"></i> Leave Shop
391
+ </button>
392
+ </div>
393
+
394
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
395
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
396
+ <div class="flex items-center mb-3">
397
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/1/1b/RedPotion.png/60px-RedPotion.png" class="w-12 h-12 mr-3">
398
+ <div>
399
+ <h3 class="text-lg font-bold text-yellow-200">Red Potion</h3>
400
+ <div class="text-yellow-300">30 <i class="fas fa-coins"></i></div>
401
+ </div>
402
+ </div>
403
+ <p class="text-sm mb-3">Restores 20 HP when used.</p>
404
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="potion" data-cost="30">
405
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
406
+ </button>
407
+ </div>
408
+
409
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
410
+ <div class="flex items-center mb-3">
411
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/5/5e/BluePotion.png/60px-BluePotion.png" class="w-12 h-12 mr-3">
412
+ <div>
413
+ <h3 class="text-lg font-bold text-yellow-200">Blue Potion</h3>
414
+ <div class="text-yellow-300">50 <i class="fas fa-coins"></i></div>
415
+ </div>
416
+ </div>
417
+ <p class="text-sm mb-3">Restores 15 MP when used.</p>
418
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="mana-potion" data-cost="50">
419
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
420
+ </button>
421
+ </div>
422
+
423
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
424
+ <div class="flex items-center mb-3">
425
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/1/1a/WoodenSword.png/60px-WoodenSword.png" class="w-12 h-12 mr-3">
426
+ <div>
427
+ <h3 class="text-lg font-bold text-yellow-200">Wooden Sword</h3>
428
+ <div class="text-yellow-300">100 <i class="fas fa-coins"></i></div>
429
+ </div>
430
+ </div>
431
+ <p class="text-sm mb-3">+2 Attack Power (Permanent)</p>
432
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="wooden-sword" data-cost="100">
433
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
434
+ </button>
435
+ </div>
436
+
437
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
438
+ <div class="flex items-center mb-3">
439
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/4/4e/Shield.png/60px-Shield.png" class="w-12 h-12 mr-3">
440
+ <div>
441
+ <h3 class="text-lg font-bold text-yellow-200">Wooden Shield</h3>
442
+ <div class="text-yellow-300">80 <i class="fas fa-coins"></i></div>
443
+ </div>
444
+ </div>
445
+ <p class="text-sm mb-3">+1 Defense (Permanent)</p>
446
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="wooden-shield" data-cost="80">
447
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
448
+ </button>
449
+ </div>
450
+
451
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
452
+ <div class="flex items-center mb-3">
453
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/5/5b/Bomb.png/60px-Bomb.png" class="w-12 h-12 mr-3">
454
+ <div>
455
+ <h3 class="text-lg font-bold text-yellow-200">Bomb</h3>
456
+ <div class="text-yellow-300">40 <i class="fas fa-coins"></i></div>
457
+ </div>
458
+ </div>
459
+ <p class="text-sm mb-3">Deals 10 damage to enemy.</p>
460
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="bomb" data-cost="40">
461
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
462
+ </button>
463
+ </div>
464
+
465
+ <div class="shop-item bg-gray-800 p-4 rounded-lg border border-yellow-500">
466
+ <div class="flex items-center mb-3">
467
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/1/1d/Fairy.png/60px-Fairy.png" class="w-12 h-12 mr-3">
468
+ <div>
469
+ <h3 class="text-lg font-bold text-yellow-200">Fairy in a Bottle</h3>
470
+ <div class="text-yellow-300">150 <i class="fas fa-coins"></i></div>
471
+ </div>
472
+ </div>
473
+ <p class="text-sm mb-3">Revives you if defeated.</p>
474
+ <button class="zelda-button w-full py-1 px-3 rounded buy-btn" data-item="fairy" data-cost="150">
475
+ <i class="fas fa-shopping-cart mr-1"></i> Buy
476
+ </button>
477
+ </div>
478
+ </div>
479
+
480
+ <div class="bg-gray-800 p-4 rounded-lg">
481
+ <h3 class="text-lg font-bold text-yellow-200 mb-2"><i class="fas fa-backpack mr-2"></i> Your Inventory</h3>
482
+ <div id="inventory-items" class="grid grid-cols-2 md:grid-cols-3 gap-2">
483
+ <!-- Inventory items will appear here -->
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- Game Over Screen -->
490
+ <div id="game-over-screen" class="hidden text-center">
491
+ <h1 class="text-5xl font-bold mb-6 text-red-500">GAME OVER</h1>
492
+ <div class="bg-gray-900 p-6 rounded-lg border border-red-500 max-w-md mx-auto">
493
+ <p class="text-xl mb-6">Your hero has fallen in battle...</p>
494
+ <div class="flex justify-center space-x-4">
495
+ <button id="try-again-btn" class="zelda-button py-3 px-6 rounded-lg">
496
+ <i class="fas fa-redo mr-2"></i> Try Again
497
+ </button>
498
+ <button id="new-hero-btn" class="zelda-button py-3 px-6 rounded-lg">
499
+ <i class="fas fa-user-plus mr-2"></i> New Hero
500
+ </button>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Victory Screen -->
506
+ <div id="victory-screen" class="hidden text-center">
507
+ <h1 class="text-5xl font-bold mb-6 text-yellow-300 victory">VICTORY!</h1>
508
+ <div class="bg-gray-900 p-6 rounded-lg border border-yellow-500 max-w-md mx-auto">
509
+ <img src="https://www.zeldadungeon.net/wiki/images/thumb/8/8d/Zelda_Artwork_ALttP.png/200px-Zelda_Artwork_ALttP.png" class="w-32 h-32 object-cover rounded-full border-2 border-yellow-500 mx-auto mb-4">
510
+ <p class="text-xl mb-2">Princess Zelda:</p>
511
+ <p class="text-lg mb-6 italic">"Thank you, brave hero! You have saved Hyrule!"</p>
512
+ <div class="flex justify-center">
513
+ <button id="play-again-btn" class="zelda-button py-3 px-6 rounded-lg">
514
+ <i class="fas fa-play mr-2"></i> Play Again
515
+ </button>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <script>
522
+ // Game State
523
+ const gameState = {
524
+ player: {
525
+ name: "",
526
+ class: "warrior",
527
+ level: 1,
528
+ exp: 0,
529
+ expToNextLevel: 100,
530
+ hp: 50,
531
+ maxHp: 50,
532
+ mp: 20,
533
+ maxMp: 20,
534
+ attack: 5,
535
+ defense: 3,
536
+ magic: 3,
537
+ gold: 10,
538
+ inventory: [],
539
+ equipped: {
540
+ weapon: "none",
541
+ shield: "none"
542
+ }
543
+ },
544
+ gameDay: 1,
545
+ inBattle: false,
546
+ currentEnemy: null,
547
+ gameOver: false,
548
+ victory: false
549
+ };
550
+
551
+ // Enemy Database
552
+ const enemies = [
553
+ {
554
+ name: "Red Octorok",
555
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/4/4b/RedOctorok.png/150px-RedOctorok.png",
556
+ hp: 20,
557
+ maxHp: 20,
558
+ attack: 5,
559
+ defense: 2,
560
+ exp: 25,
561
+ gold: 10
562
+ },
563
+ {
564
+ name: "Moblin",
565
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/0/0e/Moblin_Artwork_ALttP.png/150px-Moblin_Artwork_ALttP.png",
566
+ hp: 30,
567
+ maxHp: 30,
568
+ attack: 7,
569
+ defense: 4,
570
+ exp: 40,
571
+ gold: 15
572
+ },
573
+ {
574
+ name: "Stalfos",
575
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/5/5e/Stalfos_Artwork_ALttP.png/150px-Stalfos_Artwork_ALttP.png",
576
+ hp: 25,
577
+ maxHp: 25,
578
+ attack: 6,
579
+ defense: 3,
580
+ exp: 35,
581
+ gold: 12
582
+ },
583
+ {
584
+ name: "Lynel",
585
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/9/9d/Lynel_Artwork_ALttP.png/150px-Lynel_Artwork_ALttP.png",
586
+ hp: 50,
587
+ maxHp: 50,
588
+ attack: 12,
589
+ defense: 8,
590
+ exp: 80,
591
+ gold: 30
592
+ },
593
+ {
594
+ name: "Darknut",
595
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/3/3b/Darknut_Artwork_ALttP.png/150px-Darknut_Artwork_ALttP.png",
596
+ hp: 40,
597
+ maxHp: 40,
598
+ attack: 10,
599
+ defense: 10,
600
+ exp: 60,
601
+ gold: 25
602
+ },
603
+ {
604
+ name: "Ganon",
605
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/6/6a/Ganon_Artwork_ALttP.png/150px-Ganon_Artwork_ALttP.png",
606
+ hp: 150,
607
+ maxHp: 150,
608
+ attack: 20,
609
+ defense: 15,
610
+ exp: 300,
611
+ gold: 100
612
+ }
613
+ ];
614
+
615
+ // Items Database
616
+ const items = {
617
+ "potion": {
618
+ name: "Red Potion",
619
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/1/1b/RedPotion.png/60px-RedPotion.png",
620
+ description: "Restores 20 HP",
621
+ use: (player) => {
622
+ player.hp = Math.min(player.maxHp, player.hp + 20);
623
+ addToGameLog(`You drank a Red Potion and restored 20 HP!`);
624
+ updatePlayerStats();
625
+ }
626
+ },
627
+ "mana-potion": {
628
+ name: "Blue Potion",
629
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/5/5e/BluePotion.png/60px-BluePotion.png",
630
+ description: "Restores 15 MP",
631
+ use: (player) => {
632
+ player.mp = Math.min(player.maxMp, player.mp + 15);
633
+ addToGameLog(`You drank a Blue Potion and restored 15 MP!`);
634
+ updatePlayerStats();
635
+ }
636
+ },
637
+ "bomb": {
638
+ name: "Bomb",
639
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/5/5b/Bomb.png/60px-Bomb.png",
640
+ description: "Deals 10 damage to enemy",
641
+ use: (player, enemy) => {
642
+ if (!enemy) {
643
+ addToGameLog("You can't use a bomb outside of battle!");
644
+ return false;
645
+ }
646
+ const damage = 10;
647
+ enemy.hp = Math.max(0, enemy.hp - damage);
648
+ addToGameLog(`You threw a bomb at ${enemy.name} dealing ${damage} damage!`);
649
+ return true;
650
+ }
651
+ },
652
+ "fairy": {
653
+ name: "Fairy in a Bottle",
654
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/1/1d/Fairy.png/60px-Fairy.png",
655
+ description: "Revives you if defeated",
656
+ use: (player) => {
657
+ // This is handled in the battle system when player dies
658
+ return false;
659
+ }
660
+ },
661
+ "wooden-sword": {
662
+ name: "Wooden Sword",
663
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/1/1a/WoodenSword.png/60px-WoodenSword.png",
664
+ description: "+2 Attack Power",
665
+ equip: (player) => {
666
+ if (player.equipped.weapon === "wooden-sword") return;
667
+
668
+ // Remove previous weapon bonus if any
669
+ if (player.equipped.weapon === "none") {
670
+ player.attack += 2;
671
+ }
672
+
673
+ player.equipped.weapon = "wooden-sword";
674
+ addToGameLog(`You equipped the Wooden Sword! Attack +2`);
675
+ updatePlayerStats();
676
+ }
677
+ },
678
+ "wooden-shield": {
679
+ name: "Wooden Shield",
680
+ image: "https://www.zeldadungeon.net/wiki/images/thumb/4/4e/Shield.png/60px-Shield.png",
681
+ description: "+1 Defense",
682
+ equip: (player) => {
683
+ if (player.equipped.shield === "wooden-shield") return;
684
+
685
+ // Remove previous shield bonus if any
686
+ if (player.equipped.shield === "none") {
687
+ player.defense += 1;
688
+ }
689
+
690
+ player.equipped.shield = "wooden-shield";
691
+ addToGameLog(`You equipped the Wooden Shield! Defense +1`);
692
+ updatePlayerStats();
693
+ }
694
+ }
695
+ };
696
+
697
+ // Class Bonuses
698
+ const classBonuses = {
699
+ "warrior": {
700
+ hp: 20,
701
+ mp: 0,
702
+ attack: 3,
703
+ defense: 2,
704
+ magic: 0
705
+ },
706
+ "archer": {
707
+ hp: 10,
708
+ mp: 5,
709
+ attack: 2,
710
+ defense: 1,
711
+ magic: 1
712
+ },
713
+ "mage": {
714
+ hp: 5,
715
+ mp: 15,
716
+ attack: 0,
717
+ defense: 0,
718
+ magic: 4
719
+ },
720
+ "rogue": {
721
+ hp: 10,
722
+ mp: 5,
723
+ attack: 2,
724
+ defense: 0,
725
+ magic: 1
726
+ }
727
+ };
728
+
729
+ // DOM Elements
730
+ const titleScreen = document.getElementById('title-screen');
731
+ const characterCreation = document.getElementById('character-creation');
732
+ const mainGame = document.getElementById('main-game');
733
+ const instructionsScreen = document.getElementById('instructions-screen');
734
+ const shopScreen = document.getElementById('shop-screen');
735
+ const gameOverScreen = document.getElementById('game-over-screen');
736
+ const victoryScreen = document.getElementById('victory-screen');
737
+
738
+ // Buttons
739
+ const newGameBtn = document.getElementById('new-game-btn');
740
+ const loadGameBtn = document.getElementById('load-game-btn');
741
+ const instructionsBtn = document.getElementById('instructions-btn');
742
+ const createHeroBtn = document.getElementById('create-hero-btn');
743
+ const backToTitleBtn = document.getElementById('back-to-title-btn');
744
+ const mainMenuBtn = document.getElementById('main-menu-btn');
745
+ const saveGameBtn = document.getElementById('save-game-btn');
746
+ const tryAgainBtn = document.getElementById('try-again-btn');
747
+ const newHeroBtn = document.getElementById('new-hero-btn');
748
+ const playAgainBtn = document.getElementById('play-again-btn');
749
+ const exitShopBtn = document.getElementById('exit-shop-btn');
750
+
751
+ // Action Buttons
752
+ const exploreBtn = document.getElementById('explore-btn');
753
+ const shopBtn = document.getElementById('shop-btn');
754
+ const trainBtn = document.getElementById('train-btn');
755
+ const restBtn = document.getElementById('rest-btn');
756
+
757
+ // Battle Buttons
758
+ const attackBtn = document.getElementById('attack-btn');
759
+ const magicBtn = document.getElementById('magic-btn');
760
+ const itemBtn = document.getElementById('item-btn');
761
+ const fleeBtn = document.getElementById('flee-btn');
762
+
763
+ // Player Stats Display
764
+ const playerNameDisplay = document.getElementById('player-name');
765
+ const playerImageDisplay = document.getElementById('player-image');
766
+ const playerHpDisplay = document.getElementById('player-hp');
767
+ const playerHpBar = document.getElementById('player-hp-bar');
768
+ const playerMpDisplay = document.getElementById('player-mp');
769
+ const playerMpBar = document.getElementById('player-mp-bar');
770
+ const playerLevelDisplay = document.getElementById('player-level');
771
+ const playerGoldDisplay = document.getElementById('player-gold');
772
+ const playerExpDisplay = document.getElementById('player-exp');
773
+ const gameDayDisplay = document.getElementById('game-day');
774
+
775
+ // Enemy Display
776
+ const enemyDisplay = document.getElementById('enemy-display');
777
+ const enemyImage = document.getElementById('enemy-image');
778
+ const enemyName = document.getElementById('enemy-name');
779
+ const enemyHpDisplay = document.getElementById('enemy-hp');
780
+ const enemyHpBar = document.getElementById('enemy-hp-bar');
781
+ const enemyAttackDisplay = document.getElementById('enemy-attack');
782
+ const enemyDefenseDisplay = document.getElementById('enemy-defense');
783
+
784
+ // Game Log
785
+ const gameLog = document.getElementById('game-log');
786
+
787
+ // Shop Display
788
+ const shopGoldDisplay = document.getElementById('shop-gold');
789
+ const inventoryItems = document.getElementById('inventory-items');
790
+
791
+ // Event Listeners
792
+ newGameBtn.addEventListener('click', showCharacterCreation);
793
+ loadGameBtn.addEventListener('click', loadGame);
794
+ instructionsBtn.addEventListener('click', showInstructions);
795
+ createHeroBtn.addEventListener('click', createHero);
796
+ backToTitleBtn.addEventListener('click', showTitleScreen);
797
+ mainMenuBtn.addEventListener('click', showTitleScreen);
798
+ saveGameBtn.addEventListener('click', saveGame);
799
+ tryAgainBtn.addEventListener('click', tryAgain);
800
+ newHeroBtn.addEventListener('click', showCharacterCreation);
801
+ playAgainBtn.addEventListener('click', showCharacterCreation);
802
+ exitShopBtn.addEventListener('click', exitShop);
803
+
804
+ // Action Buttons
805
+ exploreBtn.addEventListener('click', explore);
806
+ shopBtn.addEventListener('click', enterShop);
807
+ trainBtn.addEventListener('click', train);
808
+ restBtn.addEventListener('click', rest);
809
+
810
+ // Battle Buttons
811
+ attackBtn.addEventListener('click', () => performAttack('physical'));
812
+ magicBtn.addEventListener('click', () => performAttack('magic'));
813
+ itemBtn.addEventListener('click', showItemMenu);
814
+ fleeBtn.addEventListener('click', attemptFlee);
815
+
816
+ // Shop Buy Buttons
817
+ document.querySelectorAll('.buy-btn').forEach(btn => {
818
+ btn.addEventListener('click', function() {
819
+ const itemId = this.getAttribute('data-item');
820
+ const cost = parseInt(this.getAttribute('data-cost'));
821
+ buyItem(itemId, cost);
822
+ });
823
+ });
824
+
825
+ // Initialize the game
826
+ function initGame() {
827
+ showTitleScreen();
828
+ }
829
+
830
+ // Screen Navigation Functions
831
+ function showTitleScreen() {
832
+ titleScreen.classList.remove('hidden');
833
+ characterCreation.classList.add('hidden');
834
+ mainGame.classList.add('hidden');
835
+ instructionsScreen.classList.add('hidden');
836
+ shopScreen.classList.add('hidden');
837
+ gameOverScreen.classList.add('hidden');
838
+ victoryScreen.classList.add('hidden');
839
+
840
+ // Reset game state if coming from game over or victory
841
+ if (gameState.gameOver || gameState.victory) {
842
+ resetGameState();
843
+ }
844
+ }
845
+
846
+ function showCharacterCreation() {
847
+ titleScreen.classList.add('hidden');
848
+ characterCreation.classList.remove('hidden');
849
+ mainGame.classList.add('hidden');
850
+ instructionsScreen.classList.add('hidden');
851
+ shopScreen.classList.add('hidden');
852
+ gameOverScreen.classList.add('hidden');
853
+ victoryScreen.classList.add('hidden');
854
+
855
+ resetGameState();
856
+ }
857
+
858
+ function showMainGame() {
859
+ titleScreen.classList.add('hidden');
860
+ characterCreation.classList.add('hidden');
861
+ mainGame.classList.remove('hidden');
862
+ instructionsScreen.classList.add('hidden');
863
+ shopScreen.classList.add('hidden');
864
+ gameOverScreen.classList.add('hidden');
865
+ victoryScreen.classList.add('hidden');
866
+
867
+ updatePlayerStats();
868
+ toggleBattleUI(false);
869
+ }
870
+
871
+ function showInstructions() {
872
+ titleScreen.classList.add('hidden');
873
+ characterCreation.classList.add('hidden');
874
+ mainGame.classList.add('hidden');
875
+ instructionsScreen.classList.remove('hidden');
876
+ shopScreen.classList.add('hidden');
877
+ gameOverScreen.classList.add('hidden');
878
+ victoryScreen.classList.add('hidden');
879
+ }
880
+
881
+ function showShop() {
882
+ mainGame.classList.add('hidden');
883
+ shopScreen.classList.remove('hidden');
884
+
885
+ // Update shop display
886
+ shopGoldDisplay.textContent = gameState.player.gold;
887
+ updateInventoryDisplay();
888
+ }
889
+
890
+ function showGameOver() {
891
+ mainGame.classList.add('hidden');
892
+ gameOverScreen.classList.remove('hidden');
893
+ }
894
+
895
+ function showVictory() {
896
+ mainGame.classList.add('hidden');
897
+ victoryScreen.classList.remove('hidden');
898
+ }
899
+
900
+ function exitShop() {
901
+ shopScreen.classList.add('hidden');
902
+ mainGame.classList.remove('hidden');
903
+ }
904
+
905
+ // Game State Functions
906
+ function resetGameState() {
907
+ gameState.player = {
908
+ name: "",
909
+ class: "warrior",
910
+ level: 1,
911
+ exp: 0,
912
+ expToNextLevel: 100,
913
+ hp: 50,
914
+ maxHp: 50,
915
+ mp: 20,
916
+ maxMp: 20,
917
+ attack: 5,
918
+ defense: 3,
919
+ magic: 3,
920
+ gold: 10,
921
+ inventory: [],
922
+ equipped: {
923
+ weapon: "none",
924
+ shield: "none"
925
+ }
926
+ };
927
+ gameState.gameDay = 1;
928
+ gameState.inBattle = false;
929
+ gameState.currentEnemy = null;
930
+ gameState.gameOver = false;
931
+ gameState.victory = false;
932
+
933
+ // Clear game log
934
+ gameLog.innerHTML = '<p class="typewriter text-green-300">Welcome to Hyrule, brave hero! The kingdom is in peril and only you can save it from the forces of evil.</p>';
935
+ }
936
+
937
+ function createHero() {
938
+ const heroName = document.getElementById('hero-name').value.trim();
939
+ const heroClass = document.getElementById('hero-class').value;
940
+
941
+ if (heroName === "") {
942
+ alert("Please enter a name for your hero!");
943
+ return;
944
+ }
945
+
946
+ gameState.player.name = heroName;
947
+ gameState.player.class = heroClass;
948
+
949
+ // Apply class bonuses
950
+ const bonuses = classBonuses[heroClass];
951
+ gameState.player.maxHp += bonuses.hp;
952
+ gameState.player.hp = gameState.player.maxHp;
953
+ gameState.player.maxMp += bonuses.mp;
954
+ gameState.player.mp = gameState.player.maxMp;
955
+ gameState.player.attack += bonuses.attack;
956
+ gameState.player.defense += bonuses.defense;
957
+ gameState.player.magic += bonuses.magic;
958
+
959
+ // Set player image based on class
960
+ switch(heroClass) {
961
+ case "warrior":
962
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/3/3d/Link_Artwork_ALttP.png/200px-Link_Artwork_ALttP.png";
963
+ break;
964
+ case "archer":
965
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/1/1e/Link_Artwork_TP.png/200px-Link_Artwork_TP.png";
966
+ break;
967
+ case "mage":
968
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/3/3b/Link_Artwork_OoT.png/200px-Link_Artwork_OoT.png";
969
+ break;
970
+ case "rogue":
971
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/8/8e/Link_Artwork_SS.png/200px-Link_Artwork_SS.png";
972
+ break;
973
+ }
974
+
975
+ showMainGame();
976
+ addToGameLog(`Welcome, ${heroName} the ${heroClass}! The kingdom of Hyrule needs your help!`);
977
+ }
978
+
979
+ function updatePlayerStats() {
980
+ playerNameDisplay.textContent = gameState.player.name;
981
+ playerHpDisplay.textContent = `${gameState.player.hp}/${gameState.player.maxHp}`;
982
+ playerHpBar.style.width = `${(gameState.player.hp / gameState.player.maxHp) * 100}%`;
983
+ playerMpDisplay.textContent = `${gameState.player.mp}/${gameState.player.maxMp}`;
984
+ playerMpBar.style.width = `${(gameState.player.mp / gameState.player.maxMp) * 100}%`;
985
+ playerLevelDisplay.textContent = gameState.player.level;
986
+ playerGoldDisplay.textContent = gameState.player.gold;
987
+ playerExpDisplay.textContent = `${gameState.player.exp}/${gameState.player.expToNextLevel}`;
988
+ gameDayDisplay.textContent = gameState.gameDay;
989
+ }
990
+
991
+ function toggleBattleUI(inBattle) {
992
+ gameState.inBattle = inBattle;
993
+
994
+ if (inBattle) {
995
+ document.getElementById('action-buttons').classList.add('hidden');
996
+ document.getElementById('battle-buttons').classList.remove('hidden');
997
+ enemyDisplay.classList.remove('hidden');
998
+ } else {
999
+ document.getElementById('action-buttons').classList.remove('hidden');
1000
+ document.getElementById('battle-buttons').classList.add('hidden');
1001
+ enemyDisplay.classList.add('hidden');
1002
+ }
1003
+ }
1004
+
1005
+ function updateEnemyDisplay(enemy) {
1006
+ enemyImage.src = enemy.image;
1007
+ enemyName.textContent = enemy.name;
1008
+ enemyHpDisplay.textContent = `${enemy.hp}/${enemy.maxHp}`;
1009
+ enemyHpBar.style.width = `${(enemy.hp / enemy.maxHp) * 100}%`;
1010
+ enemyAttackDisplay.textContent = enemy.attack;
1011
+ enemyDefenseDisplay.textContent = enemy.defense;
1012
+ }
1013
+
1014
+ function addToGameLog(message) {
1015
+ const messageElement = document.createElement('p');
1016
+ messageElement.textContent = message;
1017
+
1018
+ // Add different colors based on message type
1019
+ if (message.includes("defeated") || message.includes("victory")) {
1020
+ messageElement.classList.add('text-yellow-300');
1021
+ } else if (message.includes("attacked") || message.includes("damage")) {
1022
+ messageElement.classList.add('text-red-300');
1023
+ } else if (message.includes("healed") || message.includes("restored")) {
1024
+ messageElement.classList.add('text-green-300');
1025
+ } else if (message.includes("found") || message.includes("received")) {
1026
+ messageElement.classList.add('text-blue-300');
1027
+ } else {
1028
+ messageElement.classList.add('text-white');
1029
+ }
1030
+
1031
+ gameLog.appendChild(messageElement);
1032
+ gameLog.scrollTop = gameLog.scrollHeight;
1033
+ }
1034
+
1035
+ // Game Action Functions
1036
+ function explore() {
1037
+ if (gameState.inBattle) return;
1038
+
1039
+ gameState.gameDay++;
1040
+ addToGameLog(`--- Day ${gameState.gameDay} ---`);
1041
+
1042
+ // Random event (60% battle, 20% treasure, 20% nothing)
1043
+ const randomEvent = Math.random();
1044
+
1045
+ if (randomEvent < 0.6) {
1046
+ // Battle
1047
+ startBattle();
1048
+ } else if (randomEvent < 0.8) {
1049
+ // Find treasure
1050
+ const goldFound = Math.floor(Math.random() * 20) + 5;
1051
+ gameState.player.gold += goldFound;
1052
+ addToGameLog(`You found a treasure chest containing ${goldFound} rupees!`);
1053
+
1054
+ // Small chance to find an item
1055
+ if (Math.random() < 0.3) {
1056
+ const itemList = ["potion", "mana-potion", "bomb"];
1057
+ const foundItem = itemList[Math.floor(Math.random() * itemList.length)];
1058
+ gameState.player.inventory.push(foundItem);
1059
+ addToGameLog(`You also found a ${items[foundItem].name}!`);
1060
+ }
1061
+ } else {
1062
+ // Nothing happens
1063
+ addToGameLog("You explored the area but didn't find anything of interest.");
1064
+ }
1065
+
1066
+ updatePlayerStats();
1067
+ }
1068
+
1069
+ function startBattle() {
1070
+ // Determine enemy based on player level
1071
+ let enemyPool;
1072
+ if (gameState.player.level < 3) {
1073
+ enemyPool = enemies.slice(0, 2); // Octorok, Moblin
1074
+ } else if (gameState.player.level < 5) {
1075
+ enemyPool = enemies.slice(0, 4); // Octorok, Moblin, Stalfos, Lynel
1076
+ } else if (gameState.player.level < 10) {
1077
+ enemyPool = enemies.slice(0, 5); // All except Ganon
1078
+ } else {
1079
+ // Small chance to encounter Ganon after level 10
1080
+ enemyPool = Math.random() < 0.1 ? [enemies[5]] : enemies.slice(0, 5);
1081
+ }
1082
+
1083
+ const enemyIndex = Math.floor(Math.random() * enemyPool.length);
1084
+ gameState.currentEnemy = JSON.parse(JSON.stringify(enemyPool[enemyIndex]));
1085
+
1086
+ toggleBattleUI(true);
1087
+ updateEnemyDisplay(gameState.currentEnemy);
1088
+
1089
+ addToGameLog(`A wild ${gameState.currentEnemy.name} appears!`);
1090
+ }
1091
+
1092
+ function performAttack(type) {
1093
+ if (!gameState.inBattle || !gameState.currentEnemy) return;
1094
+
1095
+ let playerDamage = 0;
1096
+ let enemyDamage = 0;
1097
+
1098
+ // Player attack
1099
+ if (type === 'physical') {
1100
+ playerDamage = Math.max(1, gameState.player.attack - Math.floor(gameState.currentEnemy.defense / 2));
1101
+ addToGameLog(`You attack the ${gameState.currentEnemy.name} for ${playerDamage} damage!`);
1102
+ } else {
1103
+ if (gameState.player.mp < 5) {
1104
+ addToGameLog("Not enough MP to cast a spell!");
1105
+ return;
1106
+ }
1107
+
1108
+ gameState.player.mp -= 5;
1109
+ playerDamage = Math.max(1, gameState.player.magic * 2 - Math.floor(gameState.currentEnemy.defense / 4));
1110
+ addToGameLog(`You cast a fire spell at the ${gameState.currentEnemy.name} for ${playerDamage} damage!`);
1111
+ }
1112
+
1113
+ gameState.currentEnemy.hp = Math.max(0, gameState.currentEnemy.hp - playerDamage);
1114
+ updateEnemyDisplay(gameState.currentEnemy);
1115
+
1116
+ // Check if enemy is defeated
1117
+ if (gameState.currentEnemy.hp <= 0) {
1118
+ enemyDefeated();
1119
+ return;
1120
+ }
1121
+
1122
+ // Enemy attack
1123
+ enemyDamage = Math.max(1, gameState.currentEnemy.attack - Math.floor(gameState.player.defense / 2));
1124
+
1125
+ // Chance to dodge based on class (rogues have higher dodge chance)
1126
+ const dodgeChance = gameState.player.class === "rogue" ? 0.3 : 0.1;
1127
+ if (Math.random() < dodgeChance) {
1128
+ addToGameLog(`You dodged the ${gameState.currentEnemy.name}'s attack!`);
1129
+ } else {
1130
+ gameState.player.hp = Math.max(0, gameState.player.hp - enemyDamage);
1131
+ addToGameLog(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`);
1132
+
1133
+ // Check if player is defeated
1134
+ if (gameState.player.hp <= 0) {
1135
+ playerDefeated();
1136
+ return;
1137
+ }
1138
+ }
1139
+
1140
+ updatePlayerStats();
1141
+ }
1142
+
1143
+ function enemyDefeated() {
1144
+ const expGained = gameState.currentEnemy.exp;
1145
+ const goldGained = gameState.currentEnemy.gold;
1146
+
1147
+ gameState.player.exp += expGained;
1148
+ gameState.player.gold += goldGained;
1149
+
1150
+ addToGameLog(`You defeated the ${gameState.currentEnemy.name} and gained ${expGained} EXP and ${goldGained} rupees!`);
1151
+
1152
+ // Check for level up
1153
+ checkLevelUp();
1154
+
1155
+ // Small chance to get an item drop
1156
+ if (Math.random() < 0.2) {
1157
+ const itemList = ["potion", "mana-potion"];
1158
+ const droppedItem = itemList[Math.floor(Math.random() * itemList.length)];
1159
+ gameState.player.inventory.push(droppedItem);
1160
+ addToGameLog(`The ${gameState.currentEnemy.name} dropped a ${items[droppedItem].name}!`);
1161
+ }
1162
+
1163
+ // Check if this was Ganon
1164
+ if (gameState.currentEnemy.name === "Ganon") {
1165
+ gameState.victory = true;
1166
+ showVictory();
1167
+ }
1168
+
1169
+ toggleBattleUI(false);
1170
+ updatePlayerStats();
1171
+ }
1172
+
1173
+ function playerDefeated() {
1174
+ // Check for fairy in inventory
1175
+ const fairyIndex = gameState.player.inventory.indexOf("fairy");
1176
+ if (fairyIndex !== -1) {
1177
+ // Use fairy to revive
1178
+ gameState.player.inventory.splice(fairyIndex, 1);
1179
+ gameState.player.hp = Math.floor(gameState.player.maxHp / 2);
1180
+ addToGameLog(`A fairy revives you! You're back with ${gameState.player.hp} HP.`);
1181
+ updatePlayerStats();
1182
+ return;
1183
+ }
1184
+
1185
+ // Game over
1186
+ addToGameLog(`You were defeated by the ${gameState.currentEnemy.name}...`);
1187
+ gameState.gameOver = true;
1188
+ showGameOver();
1189
+ }
1190
+
1191
+ function checkLevelUp() {
1192
+ if (gameState.player.exp >= gameState.player.expToNextLevel) {
1193
+ gameState.player.level++;
1194
+ gameState.player.exp -= gameState.player.expToNextLevel;
1195
+ gameState.player.expToNextLevel = Math.floor(gameState.player.expToNextLevel * 1.5);
1196
+
1197
+ // Stat increases
1198
+ gameState.player.maxHp += 5 + (gameState.player.class === "warrior" ? 5 : 0);
1199
+ gameState.player.hp = gameState.player.maxHp;
1200
+ gameState.player.maxMp += 3 + (gameState.player.class === "mage" ? 5 : 0);
1201
+ gameState.player.mp = gameState.player.maxMp;
1202
+ gameState.player.attack += 1 + (gameState.player.class === "warrior" ? 1 : 0);
1203
+ gameState.player.defense += 1;
1204
+ gameState.player.magic += 1 + (gameState.player.class === "mage" ? 1 : 0);
1205
+
1206
+ addToGameLog(`Level up! You are now level ${gameState.player.level}!`);
1207
+ addToGameLog(`Your stats have increased!`);
1208
+ }
1209
+ }
1210
+
1211
+ function attemptFlee() {
1212
+ if (!gameState.inBattle) return;
1213
+
1214
+ // Base flee chance is 70%, rogues have 90%
1215
+ const fleeChance = gameState.player.class === "rogue" ? 0.9 : 0.7;
1216
+
1217
+ if (Math.random() < fleeChance) {
1218
+ addToGameLog(`You successfully fled from the ${gameState.currentEnemy.name}!`);
1219
+ toggleBattleUI(false);
1220
+ } else {
1221
+ // If flee fails, enemy gets a free attack
1222
+ addToGameLog(`You failed to flee!`);
1223
+
1224
+ const enemyDamage = Math.max(1, gameState.currentEnemy.attack - Math.floor(gameState.player.defense / 2));
1225
+ gameState.player.hp = Math.max(0, gameState.player.hp - enemyDamage);
1226
+ addToGameLog(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`);
1227
+
1228
+ // Check if player is defeated
1229
+ if (gameState.player.hp <= 0) {
1230
+ playerDefeated();
1231
+ return;
1232
+ }
1233
+
1234
+ updatePlayerStats();
1235
+ }
1236
+ }
1237
+
1238
+ function showItemMenu() {
1239
+ if (gameState.player.inventory.length === 0) {
1240
+ addToGameLog("You don't have any items!");
1241
+ return;
1242
+ }
1243
+
1244
+ // Create a simple alert with item options (for this demo)
1245
+ let itemList = "Select an item to use:\n\n";
1246
+ gameState.player.inventory.forEach((itemId, index) => {
1247
+ itemList += `${index + 1}. ${items[itemId].name}\n`;
1248
+ });
1249
+
1250
+ const selected = prompt(itemList);
1251
+ const selectedIndex = parseInt(selected) - 1;
1252
+
1253
+ if (isNaN(selectedIndex) || selectedIndex < 0 || selectedIndex >= gameState.player.inventory.length) {
1254
+ addToGameLog("Invalid selection.");
1255
+ return;
1256
+ }
1257
+
1258
+ const itemId = gameState.player.inventory[selectedIndex];
1259
+ const itemUsed = items[itemId].use(gameState.player, gameState.currentEnemy);
1260
+
1261
+ if (itemUsed) {
1262
+ // Remove the item from inventory
1263
+ gameState.player.inventory.splice(selectedIndex, 1);
1264
+
1265
+ // Check if enemy is defeated
1266
+ if (gameState.currentEnemy.hp <= 0) {
1267
+ enemyDefeated();
1268
+ } else {
1269
+ // Enemy gets a turn if battle continues
1270
+ const enemyDamage = Math.max(1, gameState.currentEnemy.attack - Math.floor(gameState.player.defense / 2));
1271
+ gameState.player.hp = Math.max(0, gameState.player.hp - enemyDamage);
1272
+ addToGameLog(`The ${gameState.currentEnemy.name} attacks you for ${enemyDamage} damage!`);
1273
+
1274
+ // Check if player is defeated
1275
+ if (gameState.player.hp <= 0) {
1276
+ playerDefeated();
1277
+ return;
1278
+ }
1279
+ }
1280
+
1281
+ updatePlayerStats();
1282
+ updateEnemyDisplay(gameState.currentEnemy);
1283
+ }
1284
+ }
1285
+
1286
+ function train() {
1287
+ gameState.gameDay++;
1288
+ addToGameLog(`--- Day ${gameState.gameDay} ---`);
1289
+
1290
+ // Training increases random stats
1291
+ const statToIncrease = ["hp", "mp", "attack", "defense", "magic"][Math.floor(Math.random() * 5)];
1292
+ const increaseAmount = 1 + (Math.random() < 0.3 ? 1 : 0); // 30% chance for +2
1293
+
1294
+ switch(statToIncrease) {
1295
+ case "hp":
1296
+ gameState.player.maxHp += increaseAmount;
1297
+ addToGameLog(`You trained your endurance! Max HP +${increaseAmount}.`);
1298
+ break;
1299
+ case "mp":
1300
+ gameState.player.maxMp += increaseAmount;
1301
+ addToGameLog(`You meditated to increase your magic! Max MP +${increaseAmount}.`);
1302
+ break;
1303
+ case "attack":
1304
+ gameState.player.attack += increaseAmount;
1305
+ addToGameLog(`You practiced your sword skills! Attack +${increaseAmount}.`);
1306
+ break;
1307
+ case "defense":
1308
+ gameState.player.defense += increaseAmount;
1309
+ addToGameLog(`You worked on your defense! Defense +${increaseAmount}.`);
1310
+ break;
1311
+ case "magic":
1312
+ gameState.player.magic += increaseAmount;
1313
+ addToGameLog(`You studied magical tomes! Magic +${increaseAmount}.`);
1314
+ break;
1315
+ }
1316
+
1317
+ // Fully restore HP/MP after training
1318
+ gameState.player.hp = gameState.player.maxHp;
1319
+ gameState.player.mp = gameState.player.maxMp;
1320
+
1321
+ updatePlayerStats();
1322
+ }
1323
+
1324
+ function rest() {
1325
+ gameState.gameDay++;
1326
+ addToGameLog(`--- Day ${gameState.gameDay} ---`);
1327
+
1328
+ // Restore HP and MP
1329
+ const hpRestored = Math.min(gameState.player.maxHp - gameState.player.hp, 15);
1330
+ const mpRestored = Math.min(gameState.player.maxMp - gameState.player.mp, 10);
1331
+
1332
+ gameState.player.hp += hpRestored;
1333
+ gameState.player.mp += mpRestored;
1334
+
1335
+ addToGameLog(`You rested at the inn and restored ${hpRestored} HP and ${mpRestored} MP.`);
1336
+
1337
+ updatePlayerStats();
1338
+ }
1339
+
1340
+ function enterShop() {
1341
+ gameState.gameDay++;
1342
+ addToGameLog(`--- Day ${gameState.gameDay} ---`);
1343
+ addToGameLog(`You visit the Hyrule Market to browse their wares.`);
1344
+
1345
+ showShop();
1346
+ }
1347
+
1348
+ function buyItem(itemId, cost) {
1349
+ if (gameState.player.gold < cost) {
1350
+ addToGameLog("Not enough rupees to buy this item!");
1351
+ return;
1352
+ }
1353
+
1354
+ gameState.player.gold -= cost;
1355
+
1356
+ if (itemId === "wooden-sword" || itemId === "wooden-shield") {
1357
+ // Equip immediately
1358
+ items[itemId].equip(gameState.player);
1359
+ } else {
1360
+ // Add to inventory
1361
+ gameState.player.inventory.push(itemId);
1362
+ addToGameLog(`You bought a ${items[itemId].name} for ${cost} rupees.`);
1363
+ }
1364
+
1365
+ shopGoldDisplay.textContent = gameState.player.gold;
1366
+ updateInventoryDisplay();
1367
+ updatePlayerStats();
1368
+ }
1369
+
1370
+ function updateInventoryDisplay() {
1371
+ inventoryItems.innerHTML = '';
1372
+
1373
+ if (gameState.player.inventory.length === 0) {
1374
+ inventoryItems.innerHTML = '<p class="text-gray-400 col-span-3">Your inventory is empty.</p>';
1375
+ return;
1376
+ }
1377
+
1378
+ // Count items
1379
+ const itemCounts = {};
1380
+ gameState.player.inventory.forEach(item => {
1381
+ itemCounts[item] = (itemCounts[item] || 0) + 1;
1382
+ });
1383
+
1384
+ // Display items
1385
+ Object.keys(itemCounts).forEach(itemId => {
1386
+ const count = itemCounts[itemId];
1387
+ const item = items[itemId];
1388
+
1389
+ const itemElement = document.createElement('div');
1390
+ itemElement.className = 'bg-gray-700 p-2 rounded flex items-center';
1391
+
1392
+ itemElement.innerHTML = `
1393
+ <img src="${item.image}" class="w-8 h-8 mr-2">
1394
+ <div class="flex-grow">
1395
+ <div class="font-bold">${item.name}</div>
1396
+ <div class="text-xs">${item.description}</div>
1397
+ </div>
1398
+ <div class="text-yellow-300">x${count}</div>
1399
+ `;
1400
+
1401
+ itemElement.addEventListener('click', () => {
1402
+ if (confirm(`Use ${item.name}?`)) {
1403
+ const itemUsed = item.use(gameState.player, gameState.currentEnemy);
1404
+ if (itemUsed) {
1405
+ // Remove the item from inventory
1406
+ const index = gameState.player.inventory.indexOf(itemId);
1407
+ if (index !== -1) {
1408
+ gameState.player.inventory.splice(index, 1);
1409
+ }
1410
+ updateInventoryDisplay();
1411
+ updatePlayerStats();
1412
+
1413
+ if (gameState.currentEnemy) {
1414
+ updateEnemyDisplay(gameState.currentEnemy);
1415
+ if (gameState.currentEnemy.hp <= 0) {
1416
+ enemyDefeated();
1417
+ }
1418
+ }
1419
+ }
1420
+ }
1421
+ });
1422
+
1423
+ inventoryItems.appendChild(itemElement);
1424
+ });
1425
+ }
1426
+
1427
+ // Save/Load Functions
1428
+ function saveGame() {
1429
+ localStorage.setItem('zeldaHeroQuestSave', JSON.stringify(gameState));
1430
+ addToGameLog("Game saved successfully!");
1431
+ }
1432
+
1433
+ function loadGame() {
1434
+ const savedGame = localStorage.getItem('zeldaHeroQuestSave');
1435
+
1436
+ if (savedGame) {
1437
+ Object.assign(gameState, JSON.parse(savedGame));
1438
+ showMainGame();
1439
+ addToGameLog(`Welcome back, ${gameState.player.name}!`);
1440
+
1441
+ // Update player image based on class
1442
+ switch(gameState.player.class) {
1443
+ case "warrior":
1444
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/3/3d/Link_Artwork_ALttP.png/200px-Link_Artwork_ALttP.png";
1445
+ break;
1446
+ case "archer":
1447
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/1/1e/Link_Artwork_TP.png/200px-Link_Artwork_TP.png";
1448
+ break;
1449
+ case "mage":
1450
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/3/3b/Link_Artwork_OoT.png/200px-Link_Artwork_OoT.png";
1451
+ break;
1452
+ case "rogue":
1453
+ playerImageDisplay.src = "https://www.zeldadungeon.net/wiki/images/thumb/8/8e/Link_Artwork_SS.png/200px-Link_Artwork_SS.png";
1454
+ break;
1455
+ }
1456
+ } else {
1457
+ alert("No saved game found!");
1458
+ }
1459
+ }
1460
+
1461
+ function tryAgain() {
1462
+ // Load the saved game if available
1463
+ const savedGame = localStorage.getItem('zeldaHeroQuestSave');
1464
+
1465
+ if (savedGame) {
1466
+ Object.assign(gameState, JSON.parse(savedGame));
1467
+
1468
+ // Reset HP/MP to half
1469
+ gameState.player.hp = Math.floor(gameState.player.maxHp / 2);
1470
+ gameState.player.mp = Math.floor(gameState.player.maxMp / 2);
1471
+ gameState.gameOver = false;
1472
+
1473
+ showMainGame();
1474
+ addToGameLog(`You wake up at the Temple of Time, ready to continue your quest.`);
1475
+ } else {
1476
+ showCharacterCreation();
1477
+ }
1478
+ }
1479
+
1480
+ // Initialize the game when the page loads
1481
+ window.addEventListener('DOMContentLoaded', initGame);
1482
+ </script>
1483
+ <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=DevXen/xenthra-inc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1484
+ </html>