Hugging Face's logo

Spaces:
craigman1211
/
save-2
Running

App Files Community
craigman1211 commited on
Commit
20526ad
·
verified ·
1 Parent(s): 9f4d751

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1761 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Save 2
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: green
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: save-2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1761 @@
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>Isekai 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
+ @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --primary: #4a5568;
14
+ --secondary: #2d3748;
15
+ --accent: #d69e2e;
16
+ --text: #e2e8f0;
17
+ --dark: #1a202c;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Roboto', sans-serif;
22
+ background-color: var(--dark);
23
+ color: var(--text);
24
+ overflow: hidden;
25
+ }
26
+
27
+ .medieval {
28
+ font-family: 'MedievalSharp', cursive;
29
+ }
30
+
31
+ .scrollbar-custom::-webkit-scrollbar {
32
+ width: 8px;
33
+ }
34
+
35
+ .scrollbar-custom::-webkit-scrollbar-track {
36
+ background: #2d3748;
37
+ }
38
+
39
+ .scrollbar-custom::-webkit-scrollbar-thumb {
40
+ background: #4a5568;
41
+ border-radius: 4px;
42
+ }
43
+
44
+ .scrollbar-custom::-webkit-scrollbar-thumb:hover {
45
+ background: #718096;
46
+ }
47
+
48
+ .fade-in {
49
+ animation: fadeIn 0.5s ease-in-out;
50
+ }
51
+
52
+ @keyframes fadeIn {
53
+ from { opacity: 0; }
54
+ to { opacity: 1; }
55
+ }
56
+
57
+ .parchment {
58
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f7fafc" opacity="0.1"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%23d69e2e" stroke-width="2"/></svg>');
59
+ background-size: 100% 100%;
60
+ border: 1px solid #d69e2e;
61
+ box-shadow: 0 0 15px rgba(214, 158, 46, 0.3);
62
+ }
63
+
64
+ .health-bar {
65
+ background: linear-gradient(to right, #e53e3e, #c53030);
66
+ height: 100%;
67
+ transition: width 0.3s ease;
68
+ }
69
+
70
+ .mana-bar {
71
+ background: linear-gradient(to right, #4299e1, #3182ce);
72
+ height: 100%;
73
+ transition: width 0.3s ease;
74
+ }
75
+
76
+ .xp-bar {
77
+ background: linear-gradient(to right, #48bb78, #38a169);
78
+ height: 100%;
79
+ transition: width 0.3s ease;
80
+ }
81
+
82
+ .typewriter {
83
+ overflow: hidden;
84
+ border-right: 2px solid var(--accent);
85
+ white-space: pre-wrap;
86
+ margin: 0 auto;
87
+ letter-spacing: 0.15em;
88
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
89
+ }
90
+
91
+ @keyframes typing {
92
+ from { width: 0 }
93
+ to { width: 100% }
94
+ }
95
+
96
+ @keyframes blink-caret {
97
+ from, to { border-color: transparent }
98
+ 50% { border-color: var(--accent) }
99
+ }
100
+
101
+ .loading-spinner {
102
+ border: 3px solid rgba(255, 255, 255, 0.3);
103
+ border-radius: 50%;
104
+ border-top: 3px solid #d69e2e;
105
+ width: 20px;
106
+ height: 20px;
107
+ animation: spin 1s linear infinite;
108
+ }
109
+
110
+ @keyframes spin {
111
+ 0% { transform: rotate(0deg); }
112
+ 100% { transform: rotate(360deg); }
113
+ }
114
+
115
+ .notification {
116
+ position: fixed;
117
+ top: 1rem;
118
+ right: 1rem;
119
+ padding: 1rem;
120
+ background-color: #38a169;
121
+ color: white;
122
+ border-radius: 0.5rem;
123
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
124
+ z-index: 50;
125
+ animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
126
+ }
127
+
128
+ @keyframes slideIn {
129
+ from { transform: translateX(100%); }
130
+ to { transform: translateX(0); }
131
+ }
132
+
133
+ @keyframes fadeOut {
134
+ from { opacity: 1; }
135
+ to { opacity: 0; }
136
+ }
137
+
138
+ .equipped-item {
139
+ border: 2px solid #d69e2e;
140
+ box-shadow: 0 0 10px rgba(214, 158, 46, 0.5);
141
+ }
142
+
143
+ .skill-progress {
144
+ height: 4px;
145
+ background-color: #4a5568;
146
+ border-radius: 2px;
147
+ margin-top: 2px;
148
+ }
149
+
150
+ .skill-progress-bar {
151
+ height: 100%;
152
+ background-color: #d69e2e;
153
+ border-radius: 2px;
154
+ transition: width 0.3s ease;
155
+ }
156
+
157
+ /* Button click animation */
158
+ .btn-click {
159
+ transition: transform 0.1s ease, background-color 0.3s ease;
160
+ }
161
+
162
+ .btn-click:active {
163
+ transform: scale(0.95);
164
+ }
165
+
166
+ /* Disabled button styling */
167
+ button:disabled {
168
+ opacity: 0.5;
169
+ cursor: not-allowed;
170
+ }
171
+
172
+ /* Chat message styling */
173
+ .chat-message {
174
+ max-width: 80%;
175
+ margin-bottom: 1rem;
176
+ padding: 0.75rem 1rem;
177
+ border-radius: 0.5rem;
178
+ word-wrap: break-word;
179
+ }
180
+
181
+ .player-message {
182
+ background-color: #2d3748;
183
+ border-left: 3px solid #d69e2e;
184
+ margin-left: auto;
185
+ margin-right: 0;
186
+ }
187
+
188
+ .npc-message {
189
+ background-color: #2d3748;
190
+ border-left: 3px solid #4299e1;
191
+ margin-right: auto;
192
+ margin-left: 0;
193
+ }
194
+
195
+ .system-message {
196
+ background-color: #2d3748;
197
+ border-left: 3px solid #48bb78;
198
+ margin-right: auto;
199
+ margin-left: 0;
200
+ font-style: italic;
201
+ }
202
+
203
+ /* Dropdown menu */
204
+ .dropdown-menu {
205
+ position: absolute;
206
+ right: 0;
207
+ top: 100%;
208
+ background-color: #2d3748;
209
+ border: 1px solid #4a5568;
210
+ border-radius: 0.25rem;
211
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
212
+ z-index: 100;
213
+ min-width: 150px;
214
+ display: none;
215
+ }
216
+
217
+ .dropdown-menu.show {
218
+ display: block;
219
+ }
220
+
221
+ .dropdown-item {
222
+ padding: 0.5rem 1rem;
223
+ color: #e2e8f0;
224
+ cursor: pointer;
225
+ transition: background-color 0.2s;
226
+ }
227
+
228
+ .dropdown-item:hover {
229
+ background-color: #4a5568;
230
+ }
231
+
232
+ .dropdown-divider {
233
+ height: 1px;
234
+ background-color: #4a5568;
235
+ margin: 0.25rem 0;
236
+ }
237
+ </style>
238
+ </head>
239
+ <body class="h-screen flex flex-col">
240
+ <!-- Game Header -->
241
+ <header class="bg-gray-900 text-yellow-500 p-4 flex justify-between items-center border-b border-yellow-700">
242
+ <div class="flex items-center space-x-4">
243
+ <h1 class="text-2xl font-bold medieval">Isekai RPG Adventure</h1>
244
+ </div>
245
+ <div class="flex items-center space-x-4 relative">
246
+ <div class="relative">
247
+ <button id="menuBtn" class="text-yellow-400 hover:text-yellow-300 btn-click">
248
+ <i class="fas fa-bars text-xl"></i>
249
+ </button>
250
+ <div id="menuDropdown" class="dropdown-menu">
251
+ <div class="dropdown-item" id="newGameOption">
252
+ <i class="fas fa-plus mr-2"></i> New Game
253
+ </div>
254
+ <div class="dropdown-item" id="saveOption">
255
+ <i class="fas fa-save mr-2"></i> Save Game
256
+ </div>
257
+ <div class="dropdown-item" id="loadOption">
258
+ <i class="fas fa-folder-open mr-2"></i> Load Game
259
+ </div>
260
+ <div class="dropdown-divider"></div>
261
+ <div class="dropdown-item" id="settingsOption">
262
+ <i class="fas fa-cog mr-2"></i> Settings
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </header>
268
+
269
+ <!-- Main Game Container -->
270
+ <div class="flex flex-1 overflow-hidden">
271
+ <!-- Left Panel - Character Stats -->
272
+ <div class="w-64 bg-gray-800 p-4 flex flex-col border-r border-gray-700">
273
+ <div class="mb-6">
274
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Character</h2>
275
+ <div class="flex items-center mb-4">
276
+ <div class="w-16 h-16 rounded-full bg-gray-700 border-2 border-yellow-500 flex items-center justify-center">
277
+ <i class="fas fa-user text-3xl text-yellow-400"></i>
278
+ </div>
279
+ <div class="ml-3">
280
+ <p class="font-bold" id="charName">Sir Aldric</p>
281
+ <p class="text-sm text-gray-400" id="charClass">Knight</p>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="mb-3">
286
+ <div class="flex justify-between text-sm mb-1">
287
+ <span>Level <span id="charLevel">5</span></span>
288
+ <span>XP: <span id="charXP">1200</span>/<span id="charNextLevel">2000</span></span>
289
+ </div>
290
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
291
+ <div id="xpBar" class="xp-bar" style="width: 60%"></div>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="mb-3">
296
+ <div class="flex justify-between text-sm mb-1">
297
+ <span>Health</span>
298
+ <span><span id="charHealth">75</span>/<span id="charMaxHealth">100</span></span>
299
+ </div>
300
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
301
+ <div id="healthBar" class="health-bar" style="width: 75%"></div>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="mb-3">
306
+ <div class="flex justify-between text-sm mb-1">
307
+ <span>Mana</span>
308
+ <span><span id="charMana">40</span>/<span id="charMaxMana">60</span></span>
309
+ </div>
310
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
311
+ <div id="manaBar" class="mana-bar" style="width: 66%"></div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="mb-6">
317
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Attributes</h2>
318
+ <div class="grid grid-cols-2 gap-2 text-sm">
319
+ <div class="bg-gray-700 p-2 rounded">
320
+ <div class="text-yellow-400">Strength</div>
321
+ <div id="charStr" class="font-bold">16</div>
322
+ </div>
323
+ <div class="bg-gray-700 p-2 rounded">
324
+ <div class="text-yellow-400">Dexterity</div>
325
+ <div id="charDex" class="font-bold">12</div>
326
+ </div>
327
+ <div class="bg-gray-700 p-2 rounded">
328
+ <div class="text-yellow-400">Constitution</div>
329
+ <div id="charCon" class="font-bold">14</div>
330
+ </div>
331
+ <div class="bg-gray-700 p-2 rounded">
332
+ <div class="text-yellow-400">Intelligence</div>
333
+ <div id="charInt" class="font-bold">10</div>
334
+ </div>
335
+ <div class="bg-gray-700 p-2 rounded">
336
+ <div class="text-yellow-400">Wisdom</div>
337
+ <div id="charWis" class="font-bold">8</div>
338
+ </div>
339
+ <div class="bg-gray-700 p-2 rounded">
340
+ <div class="text-yellow-400">Charisma</div>
341
+ <div id="charCha" class="font-bold">13</div>
342
+ </div>
343
+ </div>
344
+ <div class="mt-2 text-xs text-gray-400" id="statPointsDisplay">Stat Points: 0</div>
345
+ </div>
346
+
347
+ <div class="mb-6">
348
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Equipped Items</h2>
349
+ <div class="bg-gray-700 rounded p-2 h-24 overflow-y-auto scrollbar-custom">
350
+ <div class="grid grid-cols-3 gap-2" id="equippedItems">
351
+ <div class="bg-gray-600 p-1 rounded text-center">
352
+ <i class="fas fa-question text-gray-400"></i>
353
+ <div class="text-xs">None</div>
354
+ </div>
355
+ <div class="bg-gray-600 p-1 rounded text-center">
356
+ <i class="fas fa-question text-gray-400"></i>
357
+ <div class="text-xs">None</div>
358
+ </div>
359
+ <div class="bg-gray-600 p-1 rounded text-center">
360
+ <i class="fas fa-question text-gray-400"></i>
361
+ <div class="text-xs">None</div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="mb-6">
368
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Inventory</h2>
369
+ <div class="bg-gray-700 rounded p-2 h-40 overflow-y-auto scrollbar-custom">
370
+ <div class="grid grid-cols-3 gap-2" id="inventoryItems">
371
+ <!-- Items will be populated here -->
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mb-6">
377
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Skills & Abilities</h2>
378
+ <div class="bg-gray-700 rounded p-2 h-40 overflow-y-auto scrollbar-custom" id="skillsList">
379
+ <!-- Skills will be populated here -->
380
+ </div>
381
+ </div>
382
+
383
+ <div class="mt-auto">
384
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Current Location</h2>
385
+ <div class="bg-gray-700 rounded p-3">
386
+ <div class="font-bold" id="currentLocation">Tavern</div>
387
+ <div class="text-sm text-gray-300" id="locationDesc">The Rusty Tankard</div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Center Panel - Game Content -->
393
+ <div class="flex-1 flex flex-col">
394
+ <!-- Scene Image -->
395
+ <div class="h-1/3 relative">
396
+ <div id="sceneImage" class="absolute inset-0 bg-gray-900 flex items-center justify-center">
397
+ <div class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
398
+ <div class="absolute inset-0 bg-black bg-opacity-40"></div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Chat Log -->
403
+ <div id="chatLog" class="flex-1 p-4 overflow-y-auto scrollbar-custom">
404
+ <div class="chat-message system-message">
405
+ Welcome to the world of Eldoria. Your adventure begins now.
406
+ </div>
407
+ <div class="chat-message npc-message">
408
+ <div class="font-bold text-blue-400 medieval">Old Man:</div>
409
+ Welcome, traveler, to the Rusty Tankard. What brings you to our humble establishment this fine evening?
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Chat Input -->
414
+ <div class="p-4 border-t border-gray-700">
415
+ <div class="flex">
416
+ <input type="text" id="chatInput" placeholder="What will you do or say?" class="flex-1 bg-gray-700 border border-yellow-700 rounded-l px-4 py-2 text-white focus:outline-none focus:ring-1 focus:ring-yellow-500">
417
+ <button id="chatSubmit" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-r medieval flex items-center justify-center min-w-[100px] btn-click">
418
+ <span id="submitText">Send</span>
419
+ <div id="submitSpinner" class="loading-spinner ml-2 hidden"></div>
420
+ </button>
421
+ </div>
422
+ <div class="mt-2 text-xs text-gray-400">
423
+ Examples: "I ask the old man about work", "I draw my sword", "I look around the tavern"
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Right Panel - Game Log and Map -->
429
+ <div class="w-64 bg-gray-800 p-4 flex flex-col border-l border-gray-700">
430
+ <div class="mb-6">
431
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Game Log</h2>
432
+ <div id="gameLog" class="bg-gray-700 rounded p-2 h-40 overflow-y-auto text-sm scrollbar-custom">
433
+ <div class="text-green-400">> Entered the Rusty Tankard</div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="mb-6">
438
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Mini Map</h2>
439
+ <div class="bg-gray-700 rounded p-3">
440
+ <div class="grid grid-cols-5 gap-1" id="miniMapGrid">
441
+ <!-- Map cells will be populated here -->
442
+ </div>
443
+ </div>
444
+ <div class="mt-2 text-sm">
445
+ <div class="flex items-center">
446
+ <div class="w-3 h-3 bg-yellow-600 mr-2"></div>
447
+ <span>Your position</span>
448
+ </div>
449
+ <div class="flex items-center">
450
+ <div class="w-3 h-3 bg-gray-500 mr-2"></div>
451
+ <span>Unexplored</span>
452
+ </div>
453
+ <div class="flex items-center">
454
+ <div class="w-3 h-3 bg-blue-500 mr-2"></div>
455
+ <span>Points of interest</span>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="mt-auto">
461
+ <h2 class="text-lg font-bold text-yellow-400 mb-2 medieval">Quest Log</h2>
462
+ <div id="questLog" class="bg-gray-700 rounded p-3 h-40 overflow-y-auto scrollbar-custom">
463
+ <!-- Quests will be populated here -->
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- New Game Modal -->
470
+ <div id="newGameModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
471
+ <div class="bg-gray-800 rounded-lg w-full max-w-md border border-yellow-700">
472
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
473
+ <h3 class="text-xl font-bold text-yellow-400 medieval">Create New Character</h3>
474
+ <button id="closeNewGame" class="text-gray-400 hover:text-white btn-click">
475
+ <i class="fas fa-times"></i>
476
+ </button>
477
+ </div>
478
+ <div class="p-6">
479
+ <div class="space-y-4">
480
+ <div>
481
+ <label class="block text-gray-300 mb-1">Character Name</label>
482
+ <input type="text" id="newCharName" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter your name">
483
+ </div>
484
+ <div>
485
+ <label class="block text-gray-300 mb-1">Class/Role</label>
486
+ <input type="text" id="newCharClass" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Slime Sage, Cyber Samurai">
487
+ </div>
488
+ <div>
489
+ <label class="block text-gray-300 mb-1">World Setting</label>
490
+ <input type="text" id="newWorldSetting" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Medieval Fantasy, Cyberpunk">
491
+ </div>
492
+ <div>
493
+ <label class="block text-gray-300 mb-1">Time Period</label>
494
+ <input type="text" id="newTimePeriod" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="e.g. Year 1200, Future 3000">
495
+ </div>
496
+ <div>
497
+ <label class="block text-gray-300 mb-1">Starting Stats</label>
498
+ <div class="grid grid-cols-3 gap-2 text-sm">
499
+ <div class="bg-gray-700 p-2 rounded">
500
+ <div class="text-yellow-400">STR</div>
501
+ <input type="number" id="newCharStr" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
502
+ </div>
503
+ <div class="bg-gray-700 p-2 rounded">
504
+ <div class="text-yellow-400">DEX</div>
505
+ <input type="number" id="newCharDex" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
506
+ </div>
507
+ <div class="bg-gray-700 p-2 rounded">
508
+ <div class="text-yellow-400">CON</div>
509
+ <input type="number" id="newCharCon" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
510
+ </div>
511
+ <div class="bg-gray-700 p-2 rounded">
512
+ <div class="text-yellow-400">INT</div>
513
+ <input type="number" id="newCharInt" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
514
+ </div>
515
+ <div class="bg-gray-700 p-2 rounded">
516
+ <div class="text-yellow-400">WIS</div>
517
+ <input type="number" id="newCharWis" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
518
+ </div>
519
+ <div class="bg-gray-700 p-2 rounded">
520
+ <div class="text-yellow-400">CHA</div>
521
+ <input type="number" id="newCharCha" class="w-full bg-gray-800 border border-gray-600 rounded px-1 py-1 text-white text-center" value="10" min="1" max="20">
522
+ </div>
523
+ </div>
524
+ <div class="mt-2 text-xs text-gray-400">Total points used: <span id="statPointsUsed">60</span>/60</div>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="flex justify-end space-x-3 mt-6">
529
+ <button id="startNewGame" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Begin Adventure</button>
530
+ <button id="cancelNewGame" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Settings Modal -->
537
+ <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
538
+ <div class="bg-gray-800 rounded-lg w-full max-w-2xl border border-yellow-700">
539
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
540
+ <h3 class="text-xl font-bold text-yellow-400 medieval">Game Settings</h3>
541
+ <button id="closeSettings" class="text-gray-400 hover:text-white btn-click">
542
+ <i class="fas fa-times"></i>
543
+ </button>
544
+ </div>
545
+ <div class="p-6">
546
+ <div class="mb-6">
547
+ <h4 class="text-lg font-bold text-yellow-400 mb-3 medieval">AI Configuration</h4>
548
+ <div class="space-y-4">
549
+ <!-- Story Teller Configuration -->
550
+ <div class="bg-gray-700 p-4 rounded border border-gray-600">
551
+ <h5 class="font-bold text-yellow-300 mb-2">Story Teller Model</h5>
552
+ <div class="space-y-2">
553
+ <div>
554
+ <label class="block text-gray-300 mb-1">API Key</label>
555
+ <input type="text" id="storyTellerApiKey" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter API key">
556
+ </div>
557
+ <div>
558
+ <label class="block text-gray-300 mb-1">URL/IP</label>
559
+ <input type="text" id="storyTellerUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5000/story">
560
+ </div>
561
+ <button id="testStoryTeller" class="mt-2 bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm medieval btn-click">
562
+ Test Connection
563
+ </button>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Mechanics Configuration -->
568
+ <div class="bg-gray-700 p-4 rounded border border-gray-600">
569
+ <h5 class="font-bold text-yellow-300 mb-2">Mechanics Model</h5>
570
+ <div class="space-y-2">
571
+ <div>
572
+ <label class="block text-gray-300 mb-1">API Key</label>
573
+ <input type="text" id="mechanicsApiKey" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="Enter API key">
574
+ </div>
575
+ <div>
576
+ <label class="block text-gray-300 mb-1">URL/IP</label>
577
+ <input type="text" id="mechanicsUrl" class="w-full bg-gray-800 border border-gray-600 rounded px-3 py-2 text-white" placeholder="http://localhost:5001/mechanics">
578
+ </div>
579
+ <button id="testMechanics" class="mt-2 bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded text-sm medieval btn-click">
580
+ Test Connection
581
+ </button>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="mb-6">
588
+ <h4 class="text-lg font-bold text-yellow-400 mb-3 medieval">Gameplay Settings</h4>
589
+ <div class="space-y-3">
590
+ <div class="flex items-center">
591
+ <input type="checkbox" id="autoSave" class="mr-2" checked>
592
+ <label for="autoSave" class="text-gray-300">Enable Auto-Save</label>
593
+ </div>
594
+ <div class="flex items-center">
595
+ <input type="checkbox" id="typewriterEffect" class="mr-2" checked>
596
+ <label for="typewriterEffect" class="text-gray-300">Typewriter Text Effect</label>
597
+ </div>
598
+ <div class="flex items-center">
599
+ <input type="checkbox" id="showImages" class="mr-2" checked>
600
+ <label for="showImages" class="text-gray-300">Show Scene Images</label>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="flex justify-end space-x-3">
606
+ <button id="saveSettings" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Save Settings</button>
607
+ <button id="cancelSettings" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Save/Load Modal -->
614
+ <div id="saveLoadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
615
+ <div class="bg-gray-800 rounded-lg w-full max-w-md border border-yellow-700">
616
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center">
617
+ <h3 id="modalTitle" class="text-xl font-bold text-yellow-400 medieval">Save Game</h3>
618
+ <button id="closeSaveLoad" class="text-gray-400 hover:text-white btn-click">
619
+ <i class="fas fa-times"></i>
620
+ </button>
621
+ </div>
622
+ <div class="p-6">
623
+ <div class="space-y-3 mb-6" id="saveSlots">
624
+ <!-- Save slots will be populated here -->
625
+ </div>
626
+
627
+ <div class="flex justify-end space-x-3">
628
+ <button id="confirmSaveLoad" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded medieval btn-click">Confirm</button>
629
+ <button id="cancelSaveLoad" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded medieval btn-click">Cancel</button>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+
635
+ <!-- Skill Notification -->
636
+ <div id="skillNotification" class="notification hidden"></div>
637
+
638
+ <script>
639
+ // Game State Management
640
+ const gameState = {
641
+ character: {
642
+ name: 'Sir Aldric',
643
+ class: 'Knight',
644
+ level: 5,
645
+ xp: 1200,
646
+ nextLevel: 2000,
647
+ health: 75,
648
+ maxHealth: 100,
649
+ mana: 40,
650
+ maxMana: 60,
651
+ str: 16,
652
+ dex: 12,
653
+ con: 14,
654
+ int: 10,
655
+ wis: 8,
656
+ cha: 13,
657
+ statPoints: 0,
658
+ baseStats: {
659
+ str: 10,
660
+ dex: 10,
661
+ con: 10,
662
+ int: 10,
663
+ wis: 10,
664
+ cha: 10
665
+ }
666
+ },
667
+ equipped: {
668
+ weapon: null,
669
+ armor: null,
670
+ accessory: null
671
+ },
672
+ location: {
673
+ name: 'Tavern',
674
+ description: 'The Rusty Tankard',
675
+ x: 2,
676
+ y: 2
677
+ },
678
+ inventory: [
679
+ { name: "Longsword", type: "weapon", equipped: false, effect: { str: 3 }, icon: "fa-sword" },
680
+ { name: "Shield", type: "armor", equipped: false, effect: { con: 2 }, icon: "fa-shield-alt" },
681
+ { name: "Health Potion", type: "consumable", quantity: 3, effect: { heal: 20 }, icon: "fa-flask" },
682
+ { name: "Ring of Wisdom", type: "accessory", equipped: false, effect: { wis: 2 }, icon: "fa-ring" },
683
+ { name: "Scroll of Fireball", type: "consumable", quantity: 1, effect: { damage: 30 }, icon: "fa-scroll" },
684
+ { name: "50 Gold", type: "currency", quantity: 50, icon: "fa-coins" }
685
+ ],
686
+ skills: [
687
+ { name: "Sword Mastery", level: 2, xp: 45, nextLevel: 100, description: "Increased proficiency with swords", effect: { str: 1 } },
688
+ { name: "Shield Block", level: 1, xp: 20, nextLevel: 100, description: "Improved defense with shields", effect: { con: 1 } }
689
+ ],
690
+ abilities: [
691
+ { name: "Power Strike", description: "Deliver a powerful sword attack", requirements: [{ skill: "Sword Mastery", level: 2 }] }
692
+ ],
693
+ quests: [
694
+ {
695
+ title: 'The Bandit Threat',
696
+ description: 'The tavern keeper mentioned bandits attacking travelers on the north road. Investigate and deal with the threat.',
697
+ status: 'active'
698
+ },
699
+ {
700
+ title: 'The Missing Heirloom',
701
+ description: 'A distressed woman lost her family ring somewhere in the tavern. Help her find it.',
702
+ status: 'active'
703
+ }
704
+ ],
705
+ worldMap: [],
706
+ gameLog: ["> Entered the Rusty Tankard"],
707
+ settings: {
708
+ autoSave: true,
709
+ typewriterEffect: true,
710
+ showImages: true
711
+ }
712
+ };
713
+
714
+ // AI Configuration
715
+ let aiConfig = {
716
+ storyTeller: { apiKey: "", url: "http://localhost:5000/story" },
717
+ mechanics: { apiKey: "", url: "http://localhost:5001/mechanics" }
718
+ };
719
+
720
+ // Load saved AI config from localStorage if available
721
+ try {
722
+ const savedConfig = localStorage.getItem('aiConfig');
723
+ if (savedConfig) {
724
+ aiConfig = JSON.parse(savedConfig);
725
+ console.log('Loaded AI config from localStorage');
726
+ }
727
+ } catch (error) {
728
+ console.error('Error loading AI config:', error);
729
+ }
730
+
731
+ // DOM Elements
732
+ const menuBtn = document.getElementById('menuBtn');
733
+ const menuDropdown = document.getElementById('menuDropdown');
734
+ const newGameOption = document.getElementById('newGameOption');
735
+ const saveOption = document.getElementById('saveOption');
736
+ const loadOption = document.getElementById('loadOption');
737
+ const settingsOption = document.getElementById('settingsOption');
738
+ const settingsModal = document.getElementById('settingsModal');
739
+ const closeSettings = document.getElementById('closeSettings');
740
+ const newGameModal = document.getElementById('newGameModal');
741
+ const closeNewGame = document.getElementById('closeNewGame');
742
+ const startNewGame = document.getElementById('startNewGame');
743
+ const cancelNewGame = document.getElementById('cancelNewGame');
744
+ const saveLoadModal = document.getElementById('saveLoadModal');
745
+ const closeSaveLoad = document.getElementById('closeSaveLoad');
746
+ const modalTitle = document.getElementById('modalTitle');
747
+ const confirmSaveLoad = document.getElementById('confirmSaveLoad');
748
+ const cancelSaveLoad = document.getElementById('cancelSaveLoad');
749
+ const chatInput = document.getElementById('chatInput');
750
+ const chatSubmit = document.getElementById('chatSubmit');
751
+ const submitText = document.getElementById('submitText');
752
+ const submitSpinner = document.getElementById('submitSpinner');
753
+ const chatLog = document.getElementById('chatLog');
754
+ const sceneImage = document.getElementById('sceneImage');
755
+ const gameLog = document.getElementById('gameLog');
756
+ const questLog = document.getElementById('questLog');
757
+ const inventoryItems = document.getElementById('inventoryItems');
758
+ const equippedItems = document.getElementById('equippedItems');
759
+ const skillsList = document.getElementById('skillsList');
760
+ const miniMapGrid = document.getElementById('miniMapGrid');
761
+ const statPointsDisplay = document.getElementById('statPointsDisplay');
762
+ const skillNotification = document.getElementById('skillNotification');
763
+
764
+ // New Game Modal elements
765
+ const newCharName = document.getElementById('newCharName');
766
+ const newCharClass = document.getElementById('newCharClass');
767
+ const newWorldSetting = document.getElementById('newWorldSetting');
768
+ const newTimePeriod = document.getElementById('newTimePeriod');
769
+ const newCharStr = document.getElementById('newCharStr');
770
+ const newCharDex = document.getElementById('newCharDex');
771
+ const newCharCon = document.getElementById('newCharCon');
772
+ const newCharInt = document.getElementById('newCharInt');
773
+ const newCharWis = document.getElementById('newCharWis');
774
+ const newCharCha = document.getElementById('newCharCha');
775
+ const statPointsUsed = document.getElementById('statPointsUsed');
776
+
777
+ // Settings modal elements
778
+ const storyTellerApiKey = document.getElementById('storyTellerApiKey');
779
+ const storyTellerUrl = document.getElementById('storyTellerUrl');
780
+ const mechanicsApiKey = document.getElementById('mechanicsApiKey');
781
+ const mechanicsUrl = document.getElementById('mechanicsUrl');
782
+ const testStoryTeller = document.getElementById('testStoryTeller');
783
+ const testMechanics = document.getElementById('testMechanics');
784
+ const saveSettings = document.getElementById('saveSettings');
785
+ const cancelSettings = document.getElementById('cancelSettings');
786
+ const autoSave = document.getElementById('autoSave');
787
+ const typewriterEffect = document.getElementById('typewriterEffect');
788
+ const showImages = document.getElementById('showImages');
789
+
790
+ // Save/Load modal elements
791
+ const saveSlots = document.getElementById('saveSlots');
792
+
793
+ // Initialize world map with default values
794
+ function initWorldMap() {
795
+ gameState.worldMap = [];
796
+ for (let y = 0; y < 5; y++) {
797
+ gameState.worldMap[y] = [];
798
+ for (let x = 0; x < 5; x++) {
799
+ gameState.worldMap[y][x] = {
800
+ explored: false,
801
+ name: '',
802
+ description: '',
803
+ type: ''
804
+ };
805
+ }
806
+ }
807
+
808
+ // Set starting location
809
+ gameState.worldMap[2][2] = {
810
+ explored: true,
811
+ name: 'Tavern',
812
+ description: 'The Rusty Tankard',
813
+ type: 'building'
814
+ };
815
+ }
816
+
817
+ // Initialize game state and UI
818
+ function initGame() {
819
+ // Initialize world map
820
+ initWorldMap();
821
+
822
+ // Update all UI displays
823
+ updateCharacterDisplay();
824
+ updateInventory();
825
+ updateEquippedItems();
826
+ updateSkillsList();
827
+ updateGameLog();
828
+ updateQuestLog();
829
+ updateMiniMap();
830
+ updateSaveSlots();
831
+ }
832
+
833
+ // Toggle modal visibility
834
+ function toggleModal(modal) {
835
+ if (!modal) {
836
+ console.error('Modal element not found');
837
+ return;
838
+ }
839
+ modal.classList.toggle('hidden');
840
+ }
841
+
842
+ // Open settings modal and load current settings
843
+ function openSettingsModal() {
844
+ console.log('Opening settings modal');
845
+
846
+ // Load current config into settings modal
847
+ if (storyTellerApiKey) storyTellerApiKey.value = aiConfig.storyTeller.apiKey;
848
+ if (storyTellerUrl) storyTellerUrl.value = aiConfig.storyTeller.url;
849
+ if (mechanicsApiKey) mechanicsApiKey.value = aiConfig.mechanics.apiKey;
850
+ if (mechanicsUrl) mechanicsUrl.value = aiConfig.mechanics.url;
851
+
852
+ // Load game settings
853
+ if (autoSave) autoSave.checked = gameState.settings.autoSave;
854
+ if (typewriterEffect) typewriterEffect.checked = gameState.settings.typewriterEffect;
855
+ if (showImages) showImages.checked = gameState.settings.showImages;
856
+
857
+ toggleModal(settingsModal);
858
+ }
859
+
860
+ // Open save modal
861
+ function openSaveModal() {
862
+ console.log('Opening save modal');
863
+ if (!modalTitle || !saveLoadModal) return;
864
+ modalTitle.textContent = 'Save Game';
865
+ updateSaveSlots();
866
+ toggleModal(saveLoadModal);
867
+ }
868
+
869
+ // Open load modal
870
+ function openLoadModal() {
871
+ console.log('Opening load modal');
872
+ if (!modalTitle || !saveLoadModal) return;
873
+ modalTitle.textContent = 'Load Game';
874
+ updateSaveSlots();
875
+ toggleModal(saveLoadModal);
876
+ }
877
+
878
+ // Handle save/load confirmation based on current modal mode
879
+ function handleSaveLoadConfirm() {
880
+ if (!modalTitle || !saveLoadModal) return;
881
+
882
+ if (modalTitle.textContent === 'Save Game') {
883
+ saveGame();
884
+ } else {
885
+ loadGame();
886
+ }
887
+ toggleModal(saveLoadModal);
888
+ }
889
+
890
+ // Update character stats display
891
+ function updateCharacterDisplay() {
892
+ const char = gameState.character;
893
+
894
+ // Update text content
895
+ if (document.getElementById('charName')) document.getElementById('charName').textContent = char.name;
896
+ if (document.getElementById('charClass')) document.getElementById('charClass').textContent = char.class;
897
+ if (document.getElementById('charLevel')) document.getElementById('charLevel').textContent = char.level;
898
+ if (document.getElementById('charXP')) document.getElementById('charXP').textContent = char.xp;
899
+ if (document.getElementById('charNextLevel')) document.getElementById('charNextLevel').textContent = char.nextLevel;
900
+ if (document.getElementById('charHealth')) document.getElementById('charHealth').textContent = char.health;
901
+ if (document.getElementById('charMaxHealth')) document.getElementById('charMaxHealth').textContent = char.maxHealth;
902
+ if (document.getElementById('charMana')) document.getElementById('charMana').textContent = char.mana;
903
+ if (document.getElementById('charMaxMana')) document.getElementById('charMaxMana').textContent = char.maxMana;
904
+ if (document.getElementById('charStr')) document.getElementById('charStr').textContent = char.str;
905
+ if (document.getElementById('charDex')) document.getElementById('charDex').textContent = char.dex;
906
+ if (document.getElementById('charCon')) document.getElementById('charCon').textContent = char.con;
907
+ if (document.getElementById('charInt')) document.getElementById('charInt').textContent = char.int;
908
+ if (document.getElementById('charWis')) document.getElementById('charWis').textContent = char.wis;
909
+ if (document.getElementById('charCha')) document.getElementById('charCha').textContent = char.cha;
910
+ if (statPointsDisplay) statPointsDisplay.textContent = `Stat Points: ${char.statPoints}`;
911
+
912
+ // Update progress bars
913
+ if (document.getElementById('healthBar')) document.getElementById('healthBar').style.width = `${(char.health / char.maxHealth) * 100}%`;
914
+ if (document.getElementById('manaBar')) document.getElementById('manaBar').style.width = `${(char.mana / char.maxMana) * 100}%`;
915
+ if (document.getElementById('xpBar')) document.getElementById('xpBar').style.width = `${(char.xp / char.nextLevel) * 100}%`;
916
+
917
+ // Update location
918
+ if (document.getElementById('currentLocation')) document.getElementById('currentLocation').textContent = gameState.location.name;
919
+ if (document.getElementById('locationDesc')) document.getElementById('locationDesc').textContent = gameState.location.description;
920
+ }
921
+
922
+ // Update inventory display
923
+ function updateInventory() {
924
+ if (!inventoryItems) return;
925
+ inventoryItems.innerHTML = '';
926
+
927
+ gameState.inventory.forEach(item => {
928
+ const itemElement = document.createElement('div');
929
+ itemElement.className = 'bg-gray-600 p-1 rounded text-center cursor-pointer hover:bg-gray-500 transition';
930
+
931
+ // Add equipped class if item is equipped
932
+ if (item.equipped) {
933
+ itemElement.classList.add('equipped-item');
934
+ }
935
+
936
+ itemElement.innerHTML = `
937
+ <i class="fas ${item.icon} ${item.type === 'currency' ? 'text-yellow-400' : 'text-gray-300'}"></i>
938
+ <div class="text-xs mt-1">${item.name}${item.quantity > 1 ? ` (${item.quantity})` : ''}</div>
939
+ `;
940
+
941
+ // Add click handler for item actions
942
+ itemElement.addEventListener('click', () => showItemActions(item));
943
+
944
+ inventoryItems.appendChild(itemElement);
945
+ });
946
+ }
947
+
948
+ // Show item actions menu
949
+ function showItemActions(item) {
950
+ // Create a simple popup menu
951
+ const menu = document.createElement('div');
952
+ menu.className = 'absolute bg-gray-800 border border-yellow-700 rounded shadow-lg p-2 z-50';
953
+ menu.style.minWidth = '150px';
954
+
955
+ // Position near the clicked item
956
+ const rect = event.target.getBoundingClientRect();
957
+ menu.style.left = `${rect.left}px`;
958
+ menu.style.top = `${rect.bottom}px`;
959
+
960
+ // Add menu items based on item type
961
+ if (['weapon', 'armor', 'accessory'].includes(item.type)) {
962
+ const equipText = item.equipped ? 'Unequip' : 'Equip';
963
+ const equipBtn = document.createElement('button');
964
+ equipBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded';
965
+ equipBtn.textContent = equipText;
966
+ equipBtn.addEventListener('click', () => {
967
+ toggleEquipItem(item);
968
+ document.body.removeChild(menu);
969
+ });
970
+ menu.appendChild(equipBtn);
971
+ }
972
+
973
+ if (item.type === 'consumable') {
974
+ const useBtn = document.createElement('button');
975
+ useBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded';
976
+ useBtn.textContent = 'Use';
977
+ useBtn.addEventListener('click', () => {
978
+ useItem(item);
979
+ document.body.removeChild(menu);
980
+ });
981
+ menu.appendChild(useBtn);
982
+ }
983
+
984
+ const cancelBtn = document.createElement('button');
985
+ cancelBtn.className = 'w-full text-left px-2 py-1 hover:bg-gray-700 rounded';
986
+ cancelBtn.textContent = 'Cancel';
987
+ cancelBtn.addEventListener('click', () => {
988
+ document.body.removeChild(menu);
989
+ });
990
+ menu.appendChild(cancelBtn);
991
+
992
+ // Add menu to body
993
+ document.body.appendChild(menu);
994
+
995
+ // Close menu when clicking elsewhere
996
+ const closeMenu = (e) => {
997
+ if (!menu.contains(e.target)) {
998
+ document.body.removeChild(menu);
999
+ document.removeEventListener('click', closeMenu);
1000
+ }
1001
+ };
1002
+
1003
+ document.addEventListener('click', closeMenu);
1004
+ }
1005
+
1006
+ // Toggle item equip/unequip
1007
+ function toggleEquipItem(item) {
1008
+ if (!item) return;
1009
+
1010
+ if (item.equipped) {
1011
+ // Unequip the item
1012
+ item.equipped = false;
1013
+ gameState.equipped[item.type] = null;
1014
+ addToGameLog(`> Unequipped ${item.name}`);
1015
+ } else {
1016
+ // Equip the item
1017
+ // First unequip any currently equipped item of this type
1018
+ if (gameState.equipped[item.type]) {
1019
+ const currentEquipped = gameState.inventory.find(i => i.name === gameState.equipped[item.type]);
1020
+ if (currentEquipped) {
1021
+ currentEquipped.equipped = false;
1022
+ }
1023
+ }
1024
+
1025
+ item.equipped = true;
1026
+ gameState.equipped[item.type] = item.name;
1027
+ addToGameLog(`> Equipped ${item.name}`);
1028
+ }
1029
+
1030
+ // Update displays
1031
+ updateInventory();
1032
+ updateEquippedItems();
1033
+ updateCharacterDisplay();
1034
+ }
1035
+
1036
+ // Use a consumable item
1037
+ async function useItem(item) {
1038
+ if (!item || item.type !== 'consumable') {
1039
+ addToGameLog(`> Cannot use ${item?.name || 'item'} - not a consumable`);
1040
+ return;
1041
+ }
1042
+
1043
+ // Process item effect
1044
+ const result = await calculateMechanics('useItem', item);
1045
+
1046
+ // Reduce quantity or remove if last one
1047
+ if (item.quantity > 1) {
1048
+ item.quantity--;
1049
+ } else {
1050
+ const index = gameState.inventory.indexOf(item);
1051
+ if (index > -1) {
1052
+ gameState.inventory.splice(index, 1);
1053
+ }
1054
+ }
1055
+
1056
+ // Update displays
1057
+ updateInventory();
1058
+ updateCharacterDisplay();
1059
+
1060
+ addToGameLog(`> Used ${item.name}. ${result}`);
1061
+
1062
+ // Auto-save if enabled
1063
+ if (gameState.settings.autoSave) {
1064
+ saveGame();
1065
+ }
1066
+ }
1067
+
1068
+ // Update equipped items display
1069
+ function updateEquippedItems() {
1070
+ if (!equippedItems) return;
1071
+ equippedItems.innerHTML = '';
1072
+
1073
+ // Create slots for each equipment type
1074
+ const equipmentTypes = ['weapon', 'armor', 'accessory'];
1075
+
1076
+ equipmentTypes.forEach(type => {
1077
+ const slot = document.createElement('div');
1078
+ slot.className = 'bg-gray-600 p-1 rounded text-center';
1079
+
1080
+ const equippedItem = gameState.inventory.find(item =>
1081
+ item.equipped && item.type === type
1082
+ );
1083
+
1084
+ if (equippedItem) {
1085
+ slot.innerHTML = `
1086
+ <i class="fas ${equippedItem.icon} text-yellow-400"></i>
1087
+ <div class="text-xs mt-1">${equippedItem.name}</div>
1088
+ `;
1089
+ slot.classList.add('equipped-item');
1090
+ } else {
1091
+ slot.innerHTML = `
1092
+ <i class="fas fa-question text-gray-400"></i>
1093
+ <div class="text-xs">None</div>
1094
+ `;
1095
+ }
1096
+
1097
+ equippedItems.appendChild(slot);
1098
+ });
1099
+ }
1100
+
1101
+ // Update skills list display
1102
+ function updateSkillsList() {
1103
+ if (!skillsList) return;
1104
+ skillsList.innerHTML = '';
1105
+
1106
+ gameState.skills.forEach(skill => {
1107
+ const skillElement = document.createElement('div');
1108
+ skillElement.className = 'mb-2 p-2 bg-gray-800 rounded';
1109
+
1110
+ skillElement.innerHTML = `
1111
+ <div class="flex justify-between items-center">
1112
+ <span class="font-medium">${skill.name} (Lvl ${skill.level})</span>
1113
+ <span class="text-xs text-gray-400">${skill.xp}/${skill.nextLevel} XP</span>
1114
+ </div>
1115
+ <div class="text-xs text-gray-300 mb-1">${skill.description}</div>
1116
+ <div class="skill-progress">
1117
+ <div class="skill-progress-bar" style="width: ${(skill.xp / skill.nextLevel) * 100}%"></div>
1118
+ </div>
1119
+ `;
1120
+
1121
+ skillsList.appendChild(skillElement);
1122
+ });
1123
+ }
1124
+
1125
+ // Update game log display
1126
+ function updateGameLog() {
1127
+ if (!gameLog) return;
1128
+ gameLog.innerHTML = '';
1129
+
1130
+ gameState.gameLog.forEach(logEntry => {
1131
+ const entry = document.createElement('div');
1132
+ entry.className = 'text-green-400';
1133
+ entry.textContent = logEntry;
1134
+ gameLog.appendChild(entry);
1135
+ });
1136
+
1137
+ // Scroll to bottom
1138
+ gameLog.scrollTop = gameLog.scrollHeight;
1139
+ }
1140
+
1141
+ // Add entry to game log
1142
+ function addToGameLog(text) {
1143
+ if (!text) return;
1144
+ gameState.gameLog.push(text);
1145
+ updateGameLog();
1146
+ }
1147
+
1148
+ // Update quest log display
1149
+ function updateQuestLog() {
1150
+ if (!questLog) return;
1151
+ questLog.innerHTML = '';
1152
+
1153
+ gameState.quests.forEach(quest => {
1154
+ const questElement = document.createElement('div');
1155
+ questElement.className = 'mb-3 p-2 bg-gray-800 rounded';
1156
+
1157
+ questElement.innerHTML = `
1158
+ <div class="font-bold text-yellow-400">${quest.title}</div>
1159
+ <div class="text-sm text-gray-300">${quest.description}</div>
1160
+ <div class="text-xs text-right mt-1 ${quest.status === 'completed' ? 'text-green-400' : 'text-yellow-400'}">
1161
+ ${quest.status}
1162
+ </div>
1163
+ `;
1164
+
1165
+ questLog.appendChild(questElement);
1166
+ });
1167
+ }
1168
+
1169
+ // Update mini map display
1170
+ function updateMiniMap() {
1171
+ if (!miniMapGrid) return;
1172
+ miniMapGrid.innerHTML = '';
1173
+
1174
+ for (let y = 0; y < 5; y++) {
1175
+ for (let x = 0; x < 5; x++) {
1176
+ const cell = document.createElement('div');
1177
+ cell.className = 'aspect-square rounded-sm';
1178
+
1179
+ // Set cell color based on exploration and player position
1180
+ if (x === gameState.location.x && y === gameState.location.y) {
1181
+ cell.classList.add('bg-yellow-600');
1182
+ } else if (gameState.worldMap[y][x].explored) {
1183
+ cell.classList.add('bg-blue-500');
1184
+ } else {
1185
+ cell.classList.add('bg-gray-500');
1186
+ }
1187
+
1188
+ miniMapGrid.appendChild(cell);
1189
+ }
1190
+ }
1191
+ }
1192
+
1193
+ // Update save slots display
1194
+ function updateSaveSlots() {
1195
+ if (!saveSlots) return;
1196
+ saveSlots.innerHTML = '';
1197
+
1198
+ // Create 3 save slots
1199
+ for (let i = 1; i <= 3; i++) {
1200
+ const slot = document.createElement('div');
1201
+ slot.className = 'bg-gray-700 p-3 rounded border border-gray-600';
1202
+
1203
+ // Check if save exists
1204
+ const saveKey = `isekaiRpgSave_${i}`;
1205
+ const saveData = localStorage.getItem(saveKey);
1206
+
1207
+ if (saveData) {
1208
+ try {
1209
+ const parsed = JSON.parse(saveData);
1210
+ slot.innerHTML = `
1211
+ <div class="font-bold">Slot ${i}</div>
1212
+ <div class="text-sm text-gray-300">${parsed.character.name} - Lvl ${parsed.character.level}</div>
1213
+ <div class="text-xs text-gray-400 mt-1">${new Date(parsed.timestamp).toLocaleString()}</div>
1214
+ `;
1215
+ } catch (e) {
1216
+ slot.innerHTML = `
1217
+ <div class="font-bold">Slot ${i}</div>
1218
+ <div class="text-sm text-gray-300">Corrupted Save</div>
1219
+ `;
1220
+ }
1221
+ } else {
1222
+ slot.innerHTML = `
1223
+ <div class="font-bold">Slot ${i}</div>
1224
+ <div class="text-sm text-gray-300">Empty Slot</div>
1225
+ `;
1226
+ }
1227
+
1228
+ // Add click handler
1229
+ slot.addEventListener('click', () => selectSaveSlot(i));
1230
+ saveSlots.appendChild(slot);
1231
+ }
1232
+ }
1233
+
1234
+ // Select save slot for save/load
1235
+ function selectSaveSlot(slotNumber) {
1236
+ if (!saveSlots) return;
1237
+
1238
+ // Highlight selected slot
1239
+ const slots = saveSlots.querySelectorAll('div');
1240
+ slots.forEach((slot, index) => {
1241
+ if (index + 1 === slotNumber) {
1242
+ slot.classList.add('border-yellow-500');
1243
+ } else {
1244
+ slot.classList.remove('border-yellow-500');
1245
+ }
1246
+ });
1247
+
1248
+ // Store selected slot in modal
1249
+ if (saveLoadModal) saveLoadModal.dataset.selectedSlot = slotNumber;
1250
+ }
1251
+
1252
+ // Save game to selected slot
1253
+ function saveGame() {
1254
+ if (!saveLoadModal) return;
1255
+ const slotNumber = saveLoadModal.dataset.selectedSlot;
1256
+
1257
+ if (!slotNumber) {
1258
+ alert('Please select a save slot first!');
1259
+ return;
1260
+ }
1261
+
1262
+ const saveKey = `isekaiRpgSave_${slotNumber}`;
1263
+
1264
+ // Add timestamp to save data
1265
+ const saveData = {
1266
+ ...gameState,
1267
+ timestamp: Date.now()
1268
+ };
1269
+
1270
+ try {
1271
+ localStorage.setItem(saveKey, JSON.stringify(saveData));
1272
+ addToGameLog(`> Game saved to slot ${slotNumber}`);
1273
+
1274
+ // Show notification
1275
+ showNotification('Game saved successfully!');
1276
+ } catch (e) {
1277
+ console.error('Error saving game:', e);
1278
+ alert('Failed to save game!');
1279
+ }
1280
+ }
1281
+
1282
+ // Load game from selected slot
1283
+ function loadGame() {
1284
+ if (!saveLoadModal) return;
1285
+ const slotNumber = saveLoadModal.dataset.selectedSlot;
1286
+
1287
+ if (!slotNumber) {
1288
+ alert('Please select a save slot first!');
1289
+ return;
1290
+ }
1291
+
1292
+ const saveKey = `isekaiRpgSave_${slotNumber}`;
1293
+ const saveData = localStorage.getItem(saveKey);
1294
+
1295
+ if (!saveData) {
1296
+ alert('No save data found in this slot!');
1297
+ return;
1298
+ }
1299
+
1300
+ try {
1301
+ const parsed = JSON.parse(saveData);
1302
+
1303
+ // Update game state with loaded data
1304
+ Object.assign(gameState, parsed);
1305
+
1306
+ addToGameLog(`> Game loaded from slot ${slotNumber}`);
1307
+
1308
+ // Update all displays
1309
+ updateCharacterDisplay();
1310
+ updateInventory();
1311
+ updateEquippedItems();
1312
+ updateSkillsList();
1313
+ updateGameLog();
1314
+ updateQuestLog();
1315
+ updateMiniMap();
1316
+
1317
+ // Show notification
1318
+ showNotification('Game loaded successfully!');
1319
+ } catch (e) {
1320
+ console.error('Error loading game:', e);
1321
+ alert('Failed to load game! Save file may be corrupted.');
1322
+ }
1323
+ }
1324
+
1325
+ // Handle chat input
1326
+ async function handleChatInput() {
1327
+ if (!chatInput || !chatSubmit || !submitText || !submitSpinner || !chatLog) return;
1328
+
1329
+ const input = chatInput.value.trim();
1330
+ if (!input) return;
1331
+
1332
+ try {
1333
+ // Show loading state
1334
+ submitText.textContent = "Processing...";
1335
+ submitSpinner.classList.remove('hidden');
1336
+ chatSubmit.disabled = true;
1337
+
1338
+ // Add player message to chat
1339
+ addToChatLog(input, 'player');
1340
+ addToGameLog(`> ${input}`);
1341
+
1342
+ // Clear input
1343
+ chatInput.value = '';
1344
+
1345
+ // Process input with Story Teller AI
1346
+ const response = await getStoryTellerResponse(input);
1347
+
1348
+ // Add response to chat
1349
+ addToChatLog(response.text, 'npc', response.character);
1350
+
1351
+ // Handle mechanics if present
1352
+ if (response.mechanics) {
1353
+ if (response.mechanics.quest) {
1354
+ const questExists = gameState.quests.some(q => q.title === response.mechanics.quest);
1355
+ if (!questExists) {
1356
+ gameState.quests.push({
1357
+ title: response.mechanics.quest,
1358
+ description: response.mechanics.description,
1359
+ status: 'active'
1360
+ });
1361
+ updateQuestLog();
1362
+ }
1363
+ }
1364
+
1365
+ if (response.mechanics.location) {
1366
+ gameState.location.name = response.mechanics.location.name;
1367
+ gameState.location.description = response.mechanics.location.description;
1368
+ updateCharacterDisplay();
1369
+ }
1370
+
1371
+ if (response.mechanics.image) {
1372
+ updateSceneImage(response.mechanics.image);
1373
+ }
1374
+ }
1375
+
1376
+ // Auto-save if enabled
1377
+ if (gameState.settings.autoSave) {
1378
+ saveGame();
1379
+ }
1380
+ } catch (error) {
1381
+ console.error('Error processing input:', error);
1382
+ addToChatLog("An error occurred while processing your input.", 'system');
1383
+ } finally {
1384
+ // Reset button state
1385
+ submitText.textContent = "Send";
1386
+ submitSpinner.classList.add('hidden');
1387
+ chatSubmit.disabled = false;
1388
+ }
1389
+ }
1390
+
1391
+ // Add message to chat log
1392
+ function addToChatLog(message, type, character = '') {
1393
+ if (!chatLog) return;
1394
+
1395
+ const messageElement = document.createElement('div');
1396
+ messageElement.className = `chat-message ${type}-message`;
1397
+
1398
+ if (type === 'player') {
1399
+ messageElement.innerHTML = `
1400
+ <div class="font-bold text-yellow-400 medieval">You:</div>
1401
+ <div class="text-gray-300">${message}</div>
1402
+ `;
1403
+ } else if (type === 'npc') {
1404
+ messageElement.innerHTML = `
1405
+ <div class="font-bold text-blue-400 medieval">${character}:</div>
1406
+ <div class="text-gray-300">${message}</div>
1407
+ `;
1408
+ } else {
1409
+ messageElement.innerHTML = `
1410
+ <div class="text-gray-300">${message}</div>
1411
+ `;
1412
+ }
1413
+
1414
+ chatLog.appendChild(messageElement);
1415
+
1416
+ // Scroll to bottom
1417
+ chatLog.scrollTop = chatLog.scrollHeight;
1418
+ }
1419
+
1420
+ // Update scene image
1421
+ function updateSceneImage(imageUrl) {
1422
+ if (!sceneImage) return;
1423
+
1424
+ const imageDiv = sceneImage.querySelector('div');
1425
+ if (imageDiv) {
1426
+ imageDiv.style.backgroundImage = `url('${imageUrl}')`;
1427
+ }
1428
+ }
1429
+
1430
+ // Show notification
1431
+ function showNotification(message) {
1432
+ if (!skillNotification) return;
1433
+
1434
+ skillNotification.textContent = message;
1435
+ skillNotification.classList.remove('hidden');
1436
+
1437
+ setTimeout(() => {
1438
+ skillNotification.classList.add('hidden');
1439
+ }, 3000);
1440
+ }
1441
+
1442
+ // Get response from Story Teller AI
1443
+ async function getStoryTellerResponse(input) {
1444
+ // In a real implementation, this would call your AI API
1445
+ // For demo purposes, we'll simulate a response
1446
+
1447
+ const responses = [
1448
+ {
1449
+ text: "The old man strokes his beard thoughtfully. 'Work, you say? Well, there's been trouble with bandits on the north road. The local merchants would pay handsomely to have that problem dealt with.'",
1450
+ character: "Old Man",
1451
+ mechanics: {
1452
+ quest: "The Bandit Threat",
1453
+ description: "The tavern keeper mentioned bandits attacking travelers on the north road. Investigate and deal with the threat."
1454
+ }
1455
+ },
1456
+ {
1457
+ text: "'Ah, our house specialty is Dragon's Breath Ale!' the old man says with a chuckle. 'Strong enough to put hair on a dwarf's chest, that one.'",
1458
+ character: "Old Man"
1459
+ },
1460
+ {
1461
+ text: "The old man's expression darkens. 'Aye, there's been strange happenings in these parts. Folk disappearing in the night, livestock found drained of blood. Some say it's vampires, others blame the cult that's taken up in the old ruins.'",
1462
+ character: "Old Man",
1463
+ mechanics: {
1464
+ image: "https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
1465
+ }
1466
+ }
1467
+ ];
1468
+
1469
+ // Return a random response for demo purposes
1470
+ return responses[Math.floor(Math.random() * responses.length)];
1471
+ }
1472
+
1473
+ // Calculate game mechanics
1474
+ async function calculateMechanics(action, item) {
1475
+ // In a real implementation, this would call your mechanics API
1476
+ // For demo purposes, we'll simulate results
1477
+
1478
+ if (action === 'useItem') {
1479
+ if (item.name === 'Health Potion') {
1480
+ const healAmount = item.effect.heal;
1481
+ gameState.character.health = Math.min(
1482
+ gameState.character.health + healAmount,
1483
+ gameState.character.maxHealth
1484
+ );
1485
+ return `Restored ${healAmount} health.`;
1486
+ } else if (item.name === 'Scroll of Fireball') {
1487
+ return "You unleash a fiery explosion! (30 damage)";
1488
+ }
1489
+ }
1490
+
1491
+ return "Action completed.";
1492
+ }
1493
+
1494
+ // Test AI connection
1495
+ async function testAIConnection(type) {
1496
+ const apiKey = document.getElementById(`${type}ApiKey`)?.value;
1497
+ const url = document.getElementById(`${type}Url`)?.value;
1498
+
1499
+ if (!apiKey || !url) {
1500
+ alert('Please enter both API Key and URL');
1501
+ return;
1502
+ }
1503
+
1504
+ try {
1505
+ // In a real implementation, this would test the API connection
1506
+ // For demo purposes, we'll simulate a successful test
1507
+ showNotification(`${type} connection successful!`);
1508
+ } catch (error) {
1509
+ console.error(`Error testing ${type} connection:`, error);
1510
+ alert(`Failed to connect to ${type} API`);
1511
+ }
1512
+ }
1513
+
1514
+ // Save settings handler
1515
+ function saveSettingsHandler() {
1516
+ // Save AI config
1517
+ aiConfig.storyTeller.apiKey = storyTellerApiKey?.value || '';
1518
+ aiConfig.storyTeller.url = storyTellerUrl?.value || '';
1519
+ aiConfig.mechanics.apiKey = mechanicsApiKey?.value || '';
1520
+ aiConfig.mechanics.url = mechanicsUrl?.value || '';
1521
+
1522
+ // Save game settings
1523
+ gameState.settings.autoSave = autoSave?.checked || false;
1524
+ gameState.settings.typewriterEffect = typewriterEffect?.checked || false;
1525
+ gameState.settings.showImages = showImages?.checked || false;
1526
+
1527
+ // Save to localStorage
1528
+ try {
1529
+ localStorage.setItem('aiConfig', JSON.stringify(aiConfig));
1530
+ showNotification('Settings saved successfully!');
1531
+ toggleModal(settingsModal);
1532
+ } catch (error) {
1533
+ console.error('Error saving settings:', error);
1534
+ alert('Failed to save settings!');
1535
+ }
1536
+ }
1537
+
1538
+ // Start new game handler
1539
+ function startNewGameHandler() {
1540
+ if (!newCharName || !newCharClass) return;
1541
+
1542
+ const name = newCharName.value.trim();
1543
+ const charClass = newCharClass.value.trim();
1544
+
1545
+ if (!name || !charClass) {
1546
+ alert('Please enter both character name and class');
1547
+ return;
1548
+ }
1549
+
1550
+ // Create new character
1551
+ gameState.character = {
1552
+ name,
1553
+ class: charClass,
1554
+ level: 1,
1555
+ xp: 0,
1556
+ nextLevel: 100,
1557
+ health: 100,
1558
+ maxHealth: 100,
1559
+ mana: 50,
1560
+ maxMana: 50,
1561
+ str: parseInt(newCharStr?.value) || 10,
1562
+ dex: parseInt(newCharDex?.value) || 10,
1563
+ con: parseInt(newCharCon?.value) || 10,
1564
+ int: parseInt(newCharInt?.value) || 10,
1565
+ wis: parseInt(newCharWis?.value) || 10,
1566
+ cha: parseInt(newCharCha?.value) || 10,
1567
+ statPoints: 0,
1568
+ baseStats: {
1569
+ str: 10,
1570
+ dex: 10,
1571
+ con: 10,
1572
+ int: 10,
1573
+ wis: 10,
1574
+ cha: 10
1575
+ }
1576
+ };
1577
+
1578
+ // Reset other game state
1579
+ gameState.inventory = [
1580
+ { name: "Rusty Sword", type: "weapon", equipped: true, effect: { str: 1 }, icon: "fa-sword" },
1581
+ { name: "Health Potion", type: "consumable", quantity: 2, effect: { heal: 20 }, icon: "fa-flask" },
1582
+ { name: "10 Gold", type: "currency", quantity: 10, icon: "fa-coins" }
1583
+ ];
1584
+
1585
+ gameState.equipped = {
1586
+ weapon: "Rusty Sword",
1587
+ armor: null,
1588
+ accessory: null
1589
+ };
1590
+
1591
+ gameState.skills = [
1592
+ { name: "Sword Mastery", level: 1, xp: 0, nextLevel: 100, description: "Basic proficiency with swords", effect: { str: 1 } }
1593
+ ];
1594
+
1595
+ gameState.quests = [];
1596
+ gameState.gameLog = ["> Game started"];
1597
+
1598
+ // Initialize world map
1599
+ initWorldMap();
1600
+
1601
+ // Update all displays
1602
+ updateCharacterDisplay();
1603
+ updateInventory();
1604
+ updateEquippedItems();
1605
+ updateSkillsList();
1606
+ updateGameLog();
1607
+ updateQuestLog();
1608
+ updateMiniMap();
1609
+
1610
+ // Clear chat and add welcome message
1611
+ if (chatLog) chatLog.innerHTML = '';
1612
+ addToChatLog("Welcome to your new adventure!", 'system');
1613
+
1614
+ // Close modal
1615
+ toggleModal(newGameModal);
1616
+ }
1617
+
1618
+ // Update stat points used in new game modal
1619
+ function updateStatPointsUsed() {
1620
+ if (!statPointsUsed) return;
1621
+
1622
+ const str = parseInt(newCharStr?.value) || 10;
1623
+ const dex = parseInt(newCharDex?.value) || 10;
1624
+ const con = parseInt(newCharCon?.value) || 10;
1625
+ const int = parseInt(newCharInt?.value) || 10;
1626
+ const wis = parseInt(newCharWis?.value) || 10;
1627
+ const cha = parseInt(newCharCha?.value) || 10;
1628
+
1629
+ const totalPoints = str + dex + con + int + wis + cha - 60;
1630
+ statPointsUsed.textContent = totalPoints;
1631
+
1632
+ // Highlight if over limit
1633
+ if (totalPoints > 0) {
1634
+ statPointsUsed.classList.add('text-red-400');
1635
+ } else {
1636
+ statPointsUsed.classList.remove('text-red-400');
1637
+ }
1638
+ }
1639
+
1640
+ // Setup event listeners
1641
+ function setupEventListeners() {
1642
+ // Menu button and dropdown
1643
+ if (menuBtn) {
1644
+ menuBtn.addEventListener('click', () => {
1645
+ menuDropdown.classList.toggle('show');
1646
+ });
1647
+ }
1648
+
1649
+ // Close dropdown when clicking elsewhere
1650
+ document.addEventListener('click', (e) => {
1651
+ if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
1652
+ menuDropdown.classList.remove('show');
1653
+ }
1654
+ });
1655
+
1656
+ // Menu options
1657
+ if (newGameOption) {
1658
+ newGameOption.addEventListener('click', () => {
1659
+ menuDropdown.classList.remove('show');
1660
+ toggleModal(newGameModal);
1661
+ });
1662
+ }
1663
+
1664
+ if (saveOption) {
1665
+ saveOption.addEventListener('click', () => {
1666
+ menuDropdown.classList.remove('show');
1667
+ openSaveModal();
1668
+ });
1669
+ }
1670
+
1671
+ if (loadOption) {
1672
+ loadOption.addEventListener('click', () => {
1673
+ menuDropdown.classList.remove('show');
1674
+ openLoadModal();
1675
+ });
1676
+ }
1677
+
1678
+ if (settingsOption) {
1679
+ settingsOption.addEventListener('click', () => {
1680
+ menuDropdown.classList.remove('show');
1681
+ openSettingsModal();
1682
+ });
1683
+ }
1684
+
1685
+ // New Game Modal
1686
+ if (closeNewGame) {
1687
+ closeNewGame.addEventListener('click', () => toggleModal(newGameModal));
1688
+ }
1689
+
1690
+ if (cancelNewGame) {
1691
+ cancelNewGame.addEventListener('click', () => toggleModal(newGameModal));
1692
+ }
1693
+
1694
+ if (startNewGame) {
1695
+ startNewGame.addEventListener('click', startNewGameHandler);
1696
+ }
1697
+
1698
+ // Stat point allocation in new game modal
1699
+ [newCharStr, newCharDex, newCharCon, newCharInt, newCharWis, newCharCha].forEach(input => {
1700
+ if (input) {
1701
+ input.addEventListener('change', updateStatPointsUsed);
1702
+ }
1703
+ });
1704
+
1705
+ // Settings Modal
1706
+ if (closeSettings) {
1707
+ closeSettings.addEventListener('click', () => toggleModal(settingsModal));
1708
+ }
1709
+
1710
+ if (cancelSettings) {
1711
+ cancelSettings.addEventListener('click', () => toggleModal(settingsModal));
1712
+ }
1713
+
1714
+ if (saveSettings) {
1715
+ saveSettings.addEventListener('click', saveSettingsHandler);
1716
+ }
1717
+
1718
+ // Test connection buttons
1719
+ if (testStoryTeller) {
1720
+ testStoryTeller.addEventListener('click', () => testAIConnection('storyTeller'));
1721
+ }
1722
+
1723
+ if (testMechanics) {
1724
+ testMechanics.addEventListener('click', () => testAIConnection('mechanics'));
1725
+ }
1726
+
1727
+ // Save/Load Modal
1728
+ if (closeSaveLoad) {
1729
+ closeSaveLoad.addEventListener('click', () => toggleModal(saveLoadModal));
1730
+ }
1731
+
1732
+ if (cancelSaveLoad) {
1733
+ cancelSaveLoad.addEventListener('click', () => toggleModal(saveLoadModal));
1734
+ }
1735
+
1736
+ if (confirmSaveLoad) {
1737
+ confirmSaveLoad.addEventListener('click', handleSaveLoadConfirm);
1738
+ }
1739
+
1740
+ // Chat Input
1741
+ if (chatSubmit) {
1742
+ chatSubmit.addEventListener('click', handleChatInput);
1743
+ }
1744
+
1745
+ if (chatInput) {
1746
+ chatInput.addEventListener('keypress', (e) => {
1747
+ if (e.key === 'Enter') {
1748
+ handleChatInput();
1749
+ }
1750
+ });
1751
+ }
1752
+ }
1753
+
1754
+ // Initialize the game when DOM is loaded
1755
+ document.addEventListener('DOMContentLoaded', () => {
1756
+ console.log('DOM fully loaded and parsed');
1757
+ setupEventListeners();
1758
+ initGame();
1759
+ });
1760
+ </script>
1761
+ </html>