Hugging Face's logo

Spaces:
sonusahani
/
ok
Running

App Files Community
sonusahani commited on
Commit
a09f8bb
·
verified ·
1 Parent(s): b810424

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +945 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ok
3
- emoji: 🐢
4
- colorFrom: red
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: ok
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,945 @@
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>RPG Adventure</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 styles that can't be done with Tailwind */
11
+ .game-container {
12
+ image-rendering: pixelated;
13
+ image-rendering: -moz-crisp-edges;
14
+ image-rendering: crisp-edges;
15
+ }
16
+
17
+ .character {
18
+ transition: transform 0.2s;
19
+ }
20
+
21
+ .character.moving {
22
+ animation: walk 0.4s steps(4) infinite;
23
+ }
24
+
25
+ @keyframes walk {
26
+ from { background-position: 0 0; }
27
+ to { background-position: -128px 0; }
28
+ }
29
+
30
+ .dialog-box {
31
+ box-shadow: 0 0 0 4px #2d1a12, 0 0 0 8px #e8c39e;
32
+ }
33
+
34
+ .menu-box {
35
+ box-shadow: 0 0 0 4px #2d1a12, 0 0 0 8px #e8c39e;
36
+ }
37
+
38
+ .health-bar {
39
+ box-shadow: 0 0 0 2px #2d1a12;
40
+ }
41
+
42
+ .battle-arena {
43
+ background: linear-gradient(to bottom, #7eb8da, #a8d8f0);
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-900 text-white flex items-center justify-center min-h-screen">
48
+ <div class="relative w-full max-w-4xl h-[600px] bg-gray-800 overflow-hidden game-container">
49
+ <!-- Game Map -->
50
+ <div id="game-map" class="relative w-full h-full bg-green-700 overflow-hidden">
51
+ <!-- Map tiles will be rendered here -->
52
+ <div id="map-tiles" class="absolute top-0 left-0 w-full h-full"></div>
53
+
54
+ <!-- Player Character -->
55
+ <div id="player" class="character absolute w-8 h-8 bg-red-500 z-10"
56
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmMDAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iI2ZmODAwMCIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 128px 32px;">
57
+ </div>
58
+
59
+ <!-- NPCs -->
60
+ <div id="npc1" class="character absolute w-8 h-8 bg-blue-500"
61
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwMDBmZiIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iIzAwODBmZiIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 128px 32px;"></div>
62
+
63
+ <div id="npc2" class="character absolute w-8 h-8 bg-green-500"
64
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwZmYwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 128px 32px;"></div>
65
+
66
+ <!-- Items -->
67
+ <div id="chest" class="absolute w-8 h-8"
68
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmYzYwMCIgZD0iTTI4IDRoLTI0Yy0yLjIwOSAwLTQgMS43OTEtNCA0djIwYzAgMi4yMDkgMS43OTEgNCA0IDRoMjRjMi4yMDkgMCA0LTEuNzkxIDQtNHYtMjBjMC0yLjIwOS0xLjc5MS00LTQtNHoiLz48cGF0aCBmaWxsPSIjY2M4YzAwIiBkPSJNMTYgMTBjLTEuMTA1IDAtMiAuODk1LTIgMnYxMGMwIDEuMTA1Ljg5NSAyIDIgMnMyLS44OTUgMi0ydi0xMGMwLTEuMTA1LS44OTUtMi0yLTJ6Ii8+PC9zdmc+'); background-size: 32px 32px;"></div>
69
+ </div>
70
+
71
+ <!-- Dialog Box -->
72
+ <div id="dialog-box" class="dialog-box absolute bottom-4 left-4 right-4 bg-amber-100 text-gray-900 p-4 hidden">
73
+ <div class="flex items-start">
74
+ <div id="dialog-portrait" class="w-16 h-16 bg-gray-300 mr-4" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwMDBmZiIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iIzAwODBmZiIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 64px 64px;"></div>
75
+ <div class="flex-1">
76
+ <div id="dialog-name" class="font-bold text-lg mb-2">NPC</div>
77
+ <div id="dialog-text" class="text-sm">Hello there! Welcome to our village.</div>
78
+ </div>
79
+ </div>
80
+ <div id="dialog-next" class="text-right mt-2 text-sm font-bold cursor-pointer">Next <i class="fas fa-chevron-right"></i></div>
81
+ </div>
82
+
83
+ <!-- Menu System -->
84
+ <div id="menu" class="menu-box absolute top-0 left-0 w-full h-full bg-amber-100 text-gray-900 hidden">
85
+ <div class="p-4">
86
+ <h2 class="text-2xl font-bold mb-6 text-center">Menu</h2>
87
+
88
+ <div class="grid grid-cols-4 gap-4">
89
+ <!-- Status -->
90
+ <div class="col-span-1 bg-amber-50 p-4 rounded">
91
+ <h3 class="font-bold mb-2">Hero</h3>
92
+ <div class="flex items-center mb-1">
93
+ <span class="w-16">HP:</span>
94
+ <div class="flex-1 health-bar h-4 bg-red-500 rounded">
95
+ <div id="hp-bar" class="h-full bg-green-500 rounded" style="width: 100%"></div>
96
+ </div>
97
+ </div>
98
+ <div class="flex items-center mb-1">
99
+ <span class="w-16">MP:</span>
100
+ <div class="flex-1 health-bar h-4 bg-blue-100 rounded">
101
+ <div id="mp-bar" class="h-full bg-blue-500 rounded" style="width: 80%"></div>
102
+ </div>
103
+ </div>
104
+ <div class="mt-2">
105
+ <div>Level: <span id="player-level">1</span></div>
106
+ <div>Exp: <span id="player-exp">0</span>/100</div>
107
+ <div>Gold: <span id="player-gold">50</span></div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Inventory -->
112
+ <div class="col-span-2 bg-amber-50 p-4 rounded">
113
+ <h3 class="font-bold mb-2">Inventory</h3>
114
+ <div id="inventory-items" class="grid grid-cols-3 gap-2">
115
+ <!-- Items will be added here -->
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Commands -->
120
+ <div class="col-span-1 bg-amber-50 p-4 rounded">
121
+ <h3 class="font-bold mb-2">Commands</h3>
122
+ <button id="menu-close" class="w-full bg-amber-600 text-white py-2 px-4 rounded mb-2">Close</button>
123
+ <button id="menu-quests" class="w-full bg-purple-600 text-white py-2 px-4 rounded mb-2">Quests</button>
124
+ <button id="menu-save" class="w-full bg-blue-600 text-white py-2 px-4 rounded mb-2">Save</button>
125
+ <button id="menu-load" class="w-full bg-green-600 text-white py-2 px-4 rounded mb-2">Load</button>
126
+ <button id="menu-quit" class="w-full bg-red-600 text-white py-2 px-4 rounded">Quit</button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Quest Log -->
131
+ <div id="quest-log" class="hidden mt-4 bg-amber-50 p-4 rounded">
132
+ <h3 class="font-bold mb-2 text-center">Quest Log</h3>
133
+ <div id="active-quests" class="mb-4">
134
+ <h4 class="font-bold mb-1">Active Quests</h4>
135
+ <div id="active-quests-list"></div>
136
+ </div>
137
+ <div id="completed-quests">
138
+ <h4 class="font-bold mb-1">Completed Quests</h4>
139
+ <div id="completed-quests-list"></div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Battle Screen -->
147
+ <div id="battle-screen" class="absolute top-0 left-0 w-full h-full battle-arena hidden">
148
+ <div class="absolute top-4 left-4">
149
+ <div class="bg-amber-100 text-gray-900 p-2 rounded">
150
+ <div class="font-bold">Hero</div>
151
+ <div class="flex items-center mb-1">
152
+ <span class="w-8">HP:</span>
153
+ <div class="flex-1 health-bar h-3 bg-red-500 rounded">
154
+ <div id="battle-hp-bar" class="h-full bg-green-500 rounded" style="width: 100%"></div>
155
+ </div>
156
+ </div>
157
+ <div class="flex items-center">
158
+ <span class="w-8">MP:</span>
159
+ <div class="flex-1 health-bar h-3 bg-blue-100 rounded">
160
+ <div id="battle-mp-bar" class="h-full bg-blue-500 rounded" style="width: 80%"></div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="absolute bottom-4 right-4">
167
+ <div class="bg-amber-100 text-gray-900 p-2 rounded">
168
+ <div class="font-bold">Goblin</div>
169
+ <div class="flex items-center mb-1">
170
+ <span class="w-8">HP:</span>
171
+ <div class="flex-1 health-bar h-3 bg-red-500 rounded">
172
+ <div id="enemy-hp-bar" class="h-full bg-green-500 rounded" style="width: 100%"></div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Battle Characters -->
179
+ <div id="battle-player" class="absolute bottom-16 left-16 w-16 h-16"
180
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iI2ZmMDAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iI2ZmODAwMCIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 64px 64px;"></div>
181
+
182
+ <div id="battle-enemy" class="absolute bottom-16 right-16 w-16 h-16"
183
+ style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='); background-size: 64px 64px;"></div>
184
+
185
+ <!-- Battle Commands -->
186
+ <div id="battle-commands" class="absolute bottom-4 left-4 right-4 bg-amber-100 text-gray-900 p-4 rounded">
187
+ <div id="main-commands" class="grid grid-cols-2 gap-2">
188
+ <button id="battle-attack" class="bg-red-500 text-white py-2 px-4 rounded">Attack</button>
189
+ <button id="battle-magic" class="bg-blue-500 text-white py-2 px-4 rounded">Magic</button>
190
+ <button id="battle-item" class="bg-green-500 text-white py-2 px-4 rounded">Item</button>
191
+ <button id="battle-flee" class="bg-gray-500 text-white py-2 px-4 rounded">Flee</button>
192
+ </div>
193
+ <div id="magic-commands" class="grid grid-cols-2 gap-2 hidden">
194
+ <button class="magic-option bg-blue-400 text-white py-2 px-4 rounded" data-spell="fire">Fire (10 MP)</button>
195
+ <button class="magic-option bg-blue-400 text-white py-2 px-4 rounded" data-spell="heal">Heal (15 MP)</button>
196
+ <button class="magic-option bg-blue-400 text-white py-2 px-4 rounded" data-spell="thunder">Thunder (20 MP)</button>
197
+ <button id="back-to-main" class="bg-gray-500 text-white py-2 px-4 rounded">Back</button>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Battle Log -->
202
+ <div id="battle-log" class="absolute top-16 left-4 right-4 bg-black bg-opacity-70 text-white p-2 text-sm hidden">
203
+ <div>Hero attacks Goblin for 10 damage!</div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Title Screen -->
208
+ <div id="title-screen" class="absolute top-0 left-0 w-full h-full bg-gray-900 flex flex-col items-center justify-center">
209
+ <h1 class="text-4xl font-bold mb-8 text-yellow-400">RPG Adventure</h1>
210
+ <div class="flex flex-col space-y-4 w-64">
211
+ <button id="start-game" class="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded">New Game</button>
212
+ <button id="load-game" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">Load Game</button>
213
+ <button id="quit-game" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded">Quit</button>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- HUD -->
218
+ <div class="absolute top-4 left-4 bg-black bg-opacity-50 text-white p-2 rounded">
219
+ <div>HP: <span id="hud-hp">100</span>/100</div>
220
+ <div>MP: <span id="hud-mp">50</span>/50</div>
221
+ <div>Lv: <span id="hud-level">1</span></div>
222
+ </div>
223
+
224
+ <div class="absolute top-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded">
225
+ <button id="open-menu" class="bg-gray-700 hover:bg-gray-600 text-white py-1 px-2 rounded">
226
+ <i class="fas fa-bars"></i> Menu
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <script>
232
+ // Game State
233
+ const gameState = {
234
+ player: {
235
+ x: 100,
236
+ y: 100,
237
+ direction: 'down',
238
+ moving: false,
239
+ hp: 100,
240
+ maxHp: 100,
241
+ mp: 50,
242
+ maxMp: 50,
243
+ level: 1,
244
+ exp: 0,
245
+ expToNext: 100,
246
+ gold: 50,
247
+ inventory: [
248
+ { id: 'potion', name: 'Potion', quantity: 3, type: 'heal', power: 30 },
249
+ { id: 'ether', name: 'Ether', quantity: 1, type: 'mana', power: 20 },
250
+ { id: 'sword', name: 'Iron Sword', quantity: 1, type: 'weapon', power: 10 }
251
+ ],
252
+ equipped: {
253
+ weapon: 'sword'
254
+ }
255
+ },
256
+ npcs: [
257
+ { id: 'npc1', x: 200, y: 150, name: 'Villager', dialog: ['Hello traveler!', 'Welcome to our village.', 'The mayor is looking for help with a rat problem in the cellar.'] },
258
+ { id: 'npc2', x: 300, y: 200, name: 'Shopkeeper', dialog: ['I sell potions and weapons.', 'Come back when you have more gold!'] },
259
+ { id: 'npc3', x: 150, y: 250, name: 'Mayor', dialog: ['Please help us!', 'Giant rats invaded our cellar!', 'Clear them out and I\'ll reward you.'], quest: 'rat_quest' },
260
+ { id: 'npc4', x: 350, y: 100, name: 'Blacksmith', dialog: ['I can forge weapons if you bring me materials.'] },
261
+ { id: 'npc5', x: 400, y: 300, name: 'Mage', dialog: ['The ancient ruins to the east hold powerful magic.', 'But beware of the guardians!'] }
262
+ ],
263
+ quests: {
264
+ rat_quest: {
265
+ name: 'Rat Extermination',
266
+ description: 'Clear 5 giant rats from the village cellar',
267
+ target: { type: 'kill', enemy: 'giant_rat', count: 5 },
268
+ reward: { gold: 100, exp: 50, items: [{ id: 'potion', quantity: 3 }] },
269
+ completed: false
270
+ }
271
+ },
272
+ activeQuests: [],
273
+ items: [
274
+ { id: 'chest', x: 250, y: 100, item: { id: 'potion', name: 'Potion', quantity: 2, type: 'heal', power: 30 }, opened: false }
275
+ ],
276
+ inDialog: false,
277
+ dialogIndex: 0,
278
+ currentDialog: [],
279
+ currentNpc: null,
280
+ inBattle: false,
281
+ battleTurn: 'player',
282
+ battleEnemies: [
283
+ {
284
+ id: 'goblin',
285
+ name: 'Goblin',
286
+ hp: 50,
287
+ maxHp: 50,
288
+ attack: 8,
289
+ defense: 2,
290
+ speed: 5,
291
+ exp: 25,
292
+ gold: 10,
293
+ sprite: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTE2IDhjLTIuMjA5IDAtNCAxLjc5MS00IDRzMS43OTEgNCA0IDQgNC0xLjc5MSA0LTRzLTEuNzkxLTQtNC00eiIvPjwvc3ZnPg=='
294
+ },
295
+ {
296
+ id: 'giant_rat',
297
+ name: 'Giant Rat',
298
+ hp: 30,
299
+ maxHp: 30,
300
+ attack: 5,
301
+ defense: 1,
302
+ speed: 7,
303
+ exp: 15,
304
+ gold: 5,
305
+ sprite: 'data:image/svg+xml;base64,...'
306
+ }
307
+ ],
308
+ currentEnemies: [],
309
+ gameStarted: false,
310
+ currentMap: 'village',
311
+ maps: {
312
+ village: {
313
+ name: 'Village',
314
+ width: 30,
315
+ height: 20,
316
+ tiles: [], // Generated in code
317
+ npcs: ['npc1', 'npc2', 'npc3', 'npc4'],
318
+ exits: [
319
+ { x: 0, y: 10, to: 'forest', toX: 28, toY: 10 },
320
+ { x: 15, y: 0, to: 'cellar', toX: 5, toY: 5 }
321
+ ]
322
+ },
323
+ forest: {
324
+ name: 'Forest',
325
+ width: 30,
326
+ height: 20,
327
+ tiles: [],
328
+ npcs: ['npc5'],
329
+ exits: [
330
+ { x: 29, y: 10, to: 'village', toX: 1, toY: 10 }
331
+ ]
332
+ },
333
+ cellar: {
334
+ name: 'Cellar',
335
+ width: 15,
336
+ height: 15,
337
+ tiles: [],
338
+ exits: [
339
+ { x: 5, y: 0, to: 'village', toX: 15, toY: 1 }
340
+ ]
341
+ }
342
+ }
343
+ };
344
+
345
+ // DOM Elements
346
+ const player = document.getElementById('player');
347
+ const npc1 = document.getElementById('npc1');
348
+ const npc2 = document.getElementById('npc2');
349
+ const chest = document.getElementById('chest');
350
+ const dialogBox = document.getElementById('dialog-box');
351
+ const dialogText = document.getElementById('dialog-text');
352
+ const dialogName = document.getElementById('dialog-name');
353
+ const dialogPortrait = document.getElementById('dialog-portrait');
354
+ const dialogNext = document.getElementById('dialog-next');
355
+ const menu = document.getElementById('menu');
356
+ const openMenu = document.getElementById('open-menu');
357
+ const menuClose = document.getElementById('menu-close');
358
+ const hpBar = document.getElementById('hp-bar');
359
+ const mpBar = document.getElementById('mp-bar');
360
+ const playerLevel = document.getElementById('player-level');
361
+ const playerExp = document.getElementById('player-exp');
362
+ const playerGold = document.getElementById('player-gold');
363
+ const inventoryItems = document.getElementById('inventory-items');
364
+ const battleScreen = document.getElementById('battle-screen');
365
+ const battlePlayer = document.getElementById('battle-player');
366
+ const battleEnemy = document.getElementById('battle-enemy');
367
+ const battleCommands = document.getElementById('battle-commands');
368
+ const battleLog = document.getElementById('battle-log');
369
+ const battleAttack = document.getElementById('battle-attack');
370
+ const battleMagic = document.getElementById('battle-magic');
371
+ const battleItem = document.getElementById('battle-item');
372
+ const battleFlee = document.getElementById('battle-flee');
373
+ const battleHpBar = document.getElementById('battle-hp-bar');
374
+ const battleMpBar = document.getElementById('battle-mp-bar');
375
+ const enemyHpBar = document.getElementById('enemy-hp-bar');
376
+ const hudHp = document.getElementById('hud-hp');
377
+ const hudMp = document.getElementById('hud-mp');
378
+ const hudLevel = document.getElementById('hud-level');
379
+ const titleScreen = document.getElementById('title-screen');
380
+ const startGame = document.getElementById('start-game');
381
+ const loadGame = document.getElementById('load-game');
382
+ const quitGame = document.getElementById('quit-game');
383
+
384
+ // Initialize game
385
+ function initGame() {
386
+ // Position elements
387
+ updatePlayerPosition();
388
+ updateNpcPositions();
389
+ updateItemPositions();
390
+
391
+ // Update HUD
392
+ updateHUD();
393
+
394
+ // Set up event listeners
395
+ setupEventListeners();
396
+
397
+ // Generate map tiles
398
+ generateMapTiles();
399
+
400
+ // Show title screen
401
+ titleScreen.classList.remove('hidden');
402
+ }
403
+
404
+ // Generate simple map tiles
405
+ function generateMapTiles() {
406
+ const mapTiles = document.getElementById('map-tiles');
407
+ mapTiles.innerHTML = '';
408
+
409
+ // Create grass tiles
410
+ for (let y = 0; y < 20; y++) {
411
+ for (let x = 0; x < 30; x++) {
412
+ const tile = document.createElement('div');
413
+ tile.className = 'absolute w-8 h-8';
414
+
415
+ // Random grass variation
416
+ const grassTypes = ['bg-green-600', 'bg-green-700', 'bg-green-800'];
417
+ const randomGrass = grassTypes[Math.floor(Math.random() * grassTypes.length)];
418
+ tile.classList.add(randomGrass);
419
+
420
+ // Add some decorative elements
421
+ if (Math.random() < 0.02) {
422
+ tile.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+')";
423
+ tile.style.backgroundSize = '32px 32px';
424
+ } else if (Math.random() < 0.03) {
425
+ tile.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwODAwMCIgZD0iTTE2IDRjLTYuNjI3IDAtMTIgNS4zNzMtMTIgMTJzNS4zNzMgMTIgMTIgMTIgMTItNS4zNzMgMTItMTItNS4zNzMtMTItMTItMTJ6Ii8+PC9zdmc+')";
426
+ tile.style.backgroundSize = '32px 32px';
427
+ tile.style.transform = 'scale(0.5)';
428
+ }
429
+
430
+ tile.style.left = `${x * 32}px`;
431
+ tile.style.top = `${y * 32}px`;
432
+ mapTiles.appendChild(tile);
433
+ }
434
+ }
435
+
436
+ // Add some paths
437
+ for (let x = 10; x < 20; x++) {
438
+ for (let y = 8; y < 12; y++) {
439
+ const tile = document.createElement('div');
440
+ tile.className = 'absolute w-8 h-8 bg-yellow-800';
441
+ tile.style.left = `${x * 32}px`;
442
+ tile.style.top = `${y * 32}px`;
443
+ mapTiles.appendChild(tile);
444
+ }
445
+ }
446
+
447
+ // Add a house
448
+ for (let x = 5; x < 10; x++) {
449
+ for (let y = 5; y < 10; y++) {
450
+ const tile = document.createElement('div');
451
+ tile.className = 'absolute w-8 h-8 bg-red-800';
452
+
453
+ if (x === 7 && y === 9) {
454
+ // Door
455
+ tile.className = 'absolute w-8 h-8 bg-yellow-600';
456
+ }
457
+
458
+ tile.style.left = `${x * 32}px`;
459
+ tile.style.top = `${y * 32}px`;
460
+ mapTiles.appendChild(tile);
461
+ }
462
+ }
463
+ }
464
+
465
+ // Update player position
466
+ function updatePlayerPosition() {
467
+ player.style.left = `${gameState.player.x}px`;
468
+ player.style.top = `${gameState.player.y}px`;
469
+
470
+ // Update sprite direction
471
+ player.style.backgroundPositionY = {
472
+ 'up': '-32px',
473
+ 'down': '0px',
474
+ 'left': '-64px',
475
+ 'right': '-96px'
476
+ }[gameState.player.direction];
477
+
478
+ // Update moving animation
479
+ if (gameState.player.moving) {
480
+ player.classList.add('moving');
481
+ } else {
482
+ player.classList.remove('moving');
483
+ }
484
+ }
485
+
486
+ // Update NPC positions
487
+ function updateNpcPositions() {
488
+ gameState.npcs.forEach(npc => {
489
+ const npcElement = document.getElementById(npc.id);
490
+ if (npcElement) {
491
+ npcElement.style.left = `${npc.x}px`;
492
+ npcElement.style.top = `${npc.y}px`;
493
+ }
494
+ });
495
+ }
496
+
497
+ // Update item positions
498
+ function updateItemPositions() {
499
+ gameState.items.forEach(item => {
500
+ const itemElement = document.getElementById(item.id);
501
+ if (itemElement) {
502
+ itemElement.style.left = `${item.x}px`;
503
+ itemElement.style.top = `${item.y}px`;
504
+ itemElement.style.display = item.opened ? 'none' : 'block';
505
+ }
506
+ });
507
+ }
508
+
509
+ // Update HUD
510
+ function updateHUD() {
511
+ hudHp.textContent = gameState.player.hp;
512
+ hudMp.textContent = gameState.player.mp;
513
+ hudLevel.textContent = gameState.player.level;
514
+
515
+ // Update menu stats
516
+ hpBar.style.width = `${(gameState.player.hp / gameState.player.maxHp) * 100}%`;
517
+ mpBar.style.width = `${(gameState.player.mp / gameState.player.maxMp) * 100}%`;
518
+ playerLevel.textContent = gameState.player.level;
519
+ playerExp.textContent = `${gameState.player.exp}/${gameState.player.expToNext}`;
520
+ playerGold.textContent = gameState.player.gold;
521
+
522
+ // Update inventory
523
+ updateInventory();
524
+ }
525
+
526
+ // Update inventory display
527
+ function updateInventory() {
528
+ inventoryItems.innerHTML = '';
529
+
530
+ gameState.player.inventory.forEach(item => {
531
+ const itemElement = document.createElement('div');
532
+ itemElement.className = 'bg-amber-100 p-2 rounded text-center';
533
+
534
+ const itemName = document.createElement('div');
535
+ itemName.className = 'font-bold';
536
+ itemName.textContent = item.name;
537
+
538
+ const itemQuantity = document.createElement('div');
539
+ itemQuantity.className = 'text-sm';
540
+ itemQuantity.textContent = `x${item.quantity}`;
541
+
542
+ itemElement.appendChild(itemName);
543
+ itemElement.appendChild(itemQuantity);
544
+
545
+ // Add click event to use item
546
+ itemElement.addEventListener('click', () => {
547
+ if (item.type === 'heal') {
548
+ gameState.player.hp = Math.min(gameState.player.hp + item.power, gameState.player.maxHp);
549
+ item.quantity--;
550
+
551
+ if (item.quantity <= 0) {
552
+ gameState.player.inventory = gameState.player.inventory.filter(i => i.id !== item.id);
553
+ }
554
+
555
+ updateHUD();
556
+ showBattleMessage(`Used ${item.name}! Restored ${item.power} HP.`);
557
+ } else if (item.type === 'mana') {
558
+ gameState.player.mp = Math.min(gameState.player.mp + item.power, gameState.player.maxMp);
559
+ item.quantity--;
560
+
561
+ if (item.quantity <= 0) {
562
+ gameState.player.inventory = gameState.player.inventory.filter(i => i.id !== item.id);
563
+ }
564
+
565
+ updateHUD();
566
+ showBattleMessage(`Used ${item.name}! Restored ${item.power} MP.`);
567
+ }
568
+ });
569
+
570
+ inventoryItems.appendChild(itemElement);
571
+ });
572
+ }
573
+
574
+ // Show dialog
575
+ function showDialog(npc) {
576
+ gameState.inDialog = true;
577
+ gameState.currentNpc = npc;
578
+ gameState.currentDialog = npc.dialog;
579
+ gameState.dialogIndex = 0;
580
+
581
+ dialogName.textContent = npc.name;
582
+ dialogText.textContent = npc.dialog[0];
583
+
584
+ // Set portrait based on NPC
585
+ dialogPortrait.style.backgroundImage = document.getElementById(npc.id).style.backgroundImage;
586
+
587
+ dialogBox.classList.remove('hidden');
588
+ }
589
+
590
+ // Next dialog
591
+ function nextDialog() {
592
+ gameState.dialogIndex++;
593
+
594
+ if (gameState.dialogIndex < gameState.currentDialog.length) {
595
+ dialogText.textContent = gameState.currentDialog[gameState.dialogIndex];
596
+ } else {
597
+ // End dialog
598
+ dialogBox.classList.add('hidden');
599
+ gameState.inDialog = false;
600
+ gameState.currentDialog = [];
601
+ gameState.dialogIndex = 0;
602
+ }
603
+ }
604
+
605
+ // Check for interactions
606
+ function checkInteractions() {
607
+ // Check if player is near an NPC
608
+ for (const npc of gameState.npcs) {
609
+ const distance = Math.sqrt(
610
+ Math.pow(gameState.player.x - npc.x, 2) +
611
+ Math.pow(gameState.player.y - npc.y, 2)
612
+ );
613
+
614
+ if (distance < 40 && !gameState.inDialog) {
615
+ showDialog(npc);
616
+ return;
617
+ }
618
+ }
619
+
620
+ // Check if player is near an item
621
+ for (const item of gameState.items) {
622
+ if (item.opened) continue;
623
+
624
+ const distance = Math.sqrt(
625
+ Math.pow(gameState.player.x - item.x, 2) +
626
+ Math.pow(gameState.player.y - item.y, 2)
627
+ );
628
+
629
+ if (distance < 40) {
630
+ // Open chest
631
+ item.opened = true;
632
+
633
+ // Add item to inventory
634
+ const existingItem = gameState.player.inventory.find(i => i.id === item.item.id);
635
+ if (existingItem) {
636
+ existingItem.quantity += item.item.quantity;
637
+ } else {
638
+ gameState.player.inventory.push({...item.item});
639
+ }
640
+
641
+ updateItemPositions();
642
+ updateHUD();
643
+
644
+ // Show message
645
+ showDialog({
646
+ name: 'Treasure Chest',
647
+ dialog: [`You found ${item.item.quantity}x ${item.item.name}!`]
648
+ });
649
+ return;
650
+ }
651
+ }
652
+
653
+ // Random battle chance when moving
654
+ if (gameState.player.moving && Math.random() < 0.005 && !gameState.inBattle && !gameState.inDialog) {
655
+ startBattle();
656
+ }
657
+ }
658
+
659
+ // Start battle
660
+ function startBattle() {
661
+ gameState.inBattle = true;
662
+ battleScreen.classList.remove('hidden');
663
+
664
+ // Reset enemy HP
665
+ gameState.battleEnemy.hp = gameState.battleEnemy.maxHp;
666
+
667
+ // Update battle UI
668
+ battleHpBar.style.width = '100%';
669
+ battleMpBar.style.width = `${(gameState.player.mp / gameState.player.maxMp) * 100}%`;
670
+ enemyHpBar.style.width = '100%';
671
+
672
+ // Show battle message
673
+ showBattleMessage(`A wild ${gameState.battleEnemy.name} appears!`);
674
+ }
675
+
676
+ // End battle
677
+ function endBattle(victory) {
678
+ gameState.inBattle = false;
679
+ battleScreen.classList.add('hidden');
680
+
681
+ if (victory) {
682
+ // Give rewards
683
+ gameState.player.exp += gameState.battleEnemy.exp;
684
+ gameState.player.gold += gameState.battleEnemy.gold;
685
+
686
+ // Check for level up
687
+ checkLevelUp();
688
+
689
+ // Show message
690
+ showDialog({
691
+ name: 'Battle',
692
+ dialog: [
693
+ `You defeated the ${gameState.battleEnemy.name}!`,
694
+ `Gained ${gameState.battleEnemy.exp} EXP and ${gameState.battleEnemy.gold} Gold.`
695
+ ]
696
+ });
697
+ } else {
698
+ // Game over
699
+ gameState.player.hp = Math.floor(gameState.player.maxHp / 2);
700
+ showDialog({
701
+ name: 'Battle',
702
+ dialog: [
703
+ `You were defeated by the ${gameState.battleEnemy.name}!`,
704
+ 'You wake up at the village with half HP.'
705
+ ]
706
+ });
707
+ }
708
+
709
+ updateHUD();
710
+ }
711
+
712
+ // Check for level up
713
+ function checkLevelUp() {
714
+ if (gameState.player.exp >= gameState.player.expToNext) {
715
+ gameState.player.level++;
716
+ gameState.player.exp -= gameState.player.expToNext;
717
+ gameState.player.expToNext = Math.floor(gameState.player.expToNext * 1.5);
718
+
719
+ // Increase stats
720
+ gameState.player.maxHp += 10;
721
+ gameState.player.hp = gameState.player.maxHp;
722
+ gameState.player.maxMp += 5;
723
+ gameState.player.mp = gameState.player.maxMp;
724
+
725
+ // Show message
726
+ showDialog({
727
+ name: 'Level Up',
728
+ dialog: [
729
+ `Congratulations! You reached Level ${gameState.player.level}!`,
730
+ 'Your stats have increased!'
731
+ ]
732
+ });
733
+
734
+ // Check for multiple level ups
735
+ checkLevelUp();
736
+ }
737
+ }
738
+
739
+ // Player attack in battle
740
+ function playerAttack() {
741
+ const damage = Math.floor(Math.random() * 10) + 10; // 10-20 damage
742
+ gameState.battleEnemy.hp = Math.max(0, gameState.battleEnemy.hp - damage);
743
+
744
+ // Update enemy HP bar
745
+ enemyHpBar.style.width = `${(gameState.battleEnemy.hp / gameState.battleEnemy.maxHp) * 100}%`;
746
+
747
+ // Show message
748
+ showBattleMessage(`You attack for ${damage} damage!`);
749
+
750
+ // Check if enemy is defeated
751
+ if (gameState.battleEnemy.hp <= 0) {
752
+ setTimeout(() => {
753
+ endBattle(true);
754
+ }, 1000);
755
+ return;
756
+ }
757
+
758
+ // Enemy attack
759
+ setTimeout(() => {
760
+ enemyAttack();
761
+ }, 1000);
762
+ }
763
+
764
+ // Enemy attack
765
+ function enemyAttack() {
766
+ const damage = Math.floor(Math.random() * gameState.battleEnemy.attack) + 1;
767
+ gameState.player.hp = Math.max(0, gameState.player.hp - damage);
768
+
769
+ // Update player HP bar
770
+ battleHpBar.style.width = `${(gameState.player.hp / gameState.player.maxHp) * 100}%`;
771
+ hudHp.textContent = gameState.player.hp;
772
+
773
+ // Show message
774
+ showBattleMessage(`${gameState.battleEnemy.name} attacks for ${damage} damage!`);
775
+
776
+ // Check if player is defeated
777
+ if (gameState.player.hp <= 0) {
778
+ setTimeout(() => {
779
+ endBattle(false);
780
+ }, 1000);
781
+ }
782
+ }
783
+
784
+ // Show battle message
785
+ function showBattleMessage(message) {
786
+ battleLog.innerHTML = message;
787
+ battleLog.classList.remove('hidden');
788
+
789
+ setTimeout(() => {
790
+ battleLog.classList.add('hidden');
791
+ }, 2000);
792
+ }
793
+
794
+ // Set up event listeners
795
+ function setupEventListeners() {
796
+ // Keyboard controls
797
+ document.addEventListener('keydown', (e) => {
798
+ if (gameState.inDialog || gameState.inBattle || !gameState.gameStarted) return;
799
+
800
+ const speed = 2;
801
+ let moved = false;
802
+
803
+ switch (e.key) {
804
+ case 'ArrowUp':
805
+ gameState.player.y -= speed;
806
+ gameState.player.direction = 'up';
807
+ moved = true;
808
+ break;
809
+ case 'ArrowDown':
810
+ gameState.player.y += speed;
811
+ gameState.player.direction = 'down';
812
+ moved = true;
813
+ break;
814
+ case 'ArrowLeft':
815
+ gameState.player.x -= speed;
816
+ gameState.player.direction = 'left';
817
+ moved = true;
818
+ break;
819
+ case 'ArrowRight':
820
+ gameState.player.x += speed;
821
+ gameState.player.direction = 'right';
822
+ moved = true;
823
+ break;
824
+ case ' ':
825
+ // Space to interact
826
+ checkInteractions();
827
+ break;
828
+ case 'Escape':
829
+ // Open menu
830
+ menu.classList.remove('hidden');
831
+ break;
832
+ }
833
+
834
+ if (moved) {
835
+ gameState.player.moving = true;
836
+ updatePlayerPosition();
837
+
838
+ // Check for interactions when stopping
839
+ setTimeout(() => {
840
+ if (!gameState.player.moving) {
841
+ checkInteractions();
842
+ }
843
+ }, 100);
844
+ }
845
+ });
846
+
847
+ document.addEventListener('keyup', (e) => {
848
+ if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
849
+ gameState.player.moving = false;
850
+ updatePlayerPosition();
851
+ }
852
+ });
853
+
854
+ // Dialog next button
855
+ dialogNext.addEventListener('click', nextDialog);
856
+
857
+ // Menu buttons
858
+ openMenu.addEventListener('click', () => {
859
+ menu.classList.remove('hidden');
860
+ });
861
+
862
+ menuClose.addEventListener('click', () => {
863
+ menu.classList.add('hidden');
864
+ });
865
+
866
+ // Battle buttons
867
+ battleAttack.addEventListener('click', playerAttack);
868
+ battleMagic.addEventListener('click', () => {
869
+ if (gameState.player.mp >= 10) {
870
+ gameState.player.mp -= 10;
871
+ const damage = Math.floor(Math.random() * 15) + 15; // 15-30 damage
872
+ gameState.battleEnemy.hp = Math.max(0, gameState.battleEnemy.hp - damage);
873
+
874
+ // Update UI
875
+ battleMpBar.style.width = `${(gameState.player.mp / gameState.player.maxMp) * 100}%`;
876
+ enemyHpBar.style.width = `${(gameState.battleEnemy.hp / gameState.battleEnemy.maxHp) * 100}%`;
877
+
878
+ // Show message
879
+ showBattleMessage(`You cast Fire for ${damage} damage!`);
880
+
881
+ // Check if enemy is defeated
882
+ if (gameState.battleEnemy.hp <= 0) {
883
+ setTimeout(() => {
884
+ endBattle(true);
885
+ }, 1000);
886
+ return;
887
+ }
888
+
889
+ // Enemy attack
890
+ setTimeout(() => {
891
+ enemyAttack();
892
+ }, 1000);
893
+ } else {
894
+ showBattleMessage('Not enough MP!');
895
+ }
896
+ });
897
+
898
+ battleItem.addEventListener('click', () => {
899
+ // In a full game, this would open an item menu
900
+ showBattleMessage('Select an item from the menu.');
901
+ });
902
+
903
+ battleFlee.addEventListener('click', () => {
904
+ if (Math.random() < 0.7) { // 70% chance to flee
905
+ showBattleMessage('You fled successfully!');
906
+ setTimeout(() => {
907
+ battleScreen.classList.add('hidden');
908
+ gameState.inBattle = false;
909
+ }, 1000);
910
+ } else {
911
+ showBattleMessage('Failed to flee!');
912
+ setTimeout(() => {
913
+ enemyAttack();
914
+ }, 1000);
915
+ }
916
+ });
917
+
918
+ // Title screen buttons
919
+ startGame.addEventListener('click', () => {
920
+ titleScreen.classList.add('hidden');
921
+ gameState.gameStarted = true;
922
+ });
923
+
924
+ loadGame.addEventListener('click', () => {
925
+ // In a full game, this would load saved data
926
+ showDialog({
927
+ name: 'System',
928
+ dialog: ['No saved game found.']
929
+ });
930
+ titleScreen.classList.add('hidden');
931
+ gameState.gameStarted = true;
932
+ });
933
+
934
+ quitGame.addEventListener('click', () => {
935
+ if (confirm('Are you sure you want to quit?')) {
936
+ window.close();
937
+ }
938
+ });
939
+ }
940
+
941
+ // Start the game
942
+ initGame();
943
+ </script>
944
+ <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=sonusahani/ok" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
945
+ </html>