Hugging Face's logo

Spaces:
yazdaabdul
/
mount-and-blade
Running

App Files Community
yazdaabdul commited on
Commit
fc18878
·
verified ·
1 Parent(s): 61770af

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1075 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mount And Blade
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: yellow
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: mount-and-blade
3
+ emoji: 🐳
4
+ colorFrom: red
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,1075 @@
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>Mount & Blade: German Wars 1400</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
+ .map-container {
11
+ background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Holy_Roman_Empire_1400.svg/1200px-Holy_Roman_Empire_1400.svg.png');
12
+ background-size: contain;
13
+ background-repeat: no-repeat;
14
+ background-position: center;
15
+ position: relative;
16
+ height: 70vh;
17
+ }
18
+
19
+ .settlement {
20
+ position: absolute;
21
+ width: 20px;
22
+ height: 20px;
23
+ border-radius: 50%;
24
+ cursor: pointer;
25
+ transition: all 0.3s;
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center;
29
+ font-weight: bold;
30
+ color: white;
31
+ text-shadow: 1px 1px 2px black;
32
+ }
33
+
34
+ .settlement:hover {
35
+ transform: scale(1.5);
36
+ z-index: 10;
37
+ }
38
+
39
+ .castle {
40
+ background-color: #8B4513;
41
+ }
42
+
43
+ .town {
44
+ background-color: #4682B4;
45
+ }
46
+
47
+ .village {
48
+ background-color: #228B22;
49
+ }
50
+
51
+ .battle-animation {
52
+ animation: pulse 1s infinite;
53
+ }
54
+
55
+ @keyframes pulse {
56
+ 0% { transform: scale(1); }
57
+ 50% { transform: scale(1.2); }
58
+ 100% { transform: scale(1); }
59
+ }
60
+
61
+ .faction-bavaria { background-color: #000080; }
62
+ .faction-swabia { background-color: #FF0000; }
63
+ .faction-franconia { background-color: #FFD700; }
64
+ .faction-saxony { background-color: #008000; }
65
+ .faction-lorraine { background-color: #FFFFFF; border: 1px solid #000; }
66
+ .faction-player { background-color: #800080; }
67
+
68
+ .tooltip {
69
+ position: absolute;
70
+ background-color: rgba(0, 0, 0, 0.8);
71
+ color: white;
72
+ padding: 5px 10px;
73
+ border-radius: 5px;
74
+ pointer-events: none;
75
+ z-index: 100;
76
+ font-size: 14px;
77
+ max-width: 200px;
78
+ }
79
+
80
+ .combat-log {
81
+ height: 200px;
82
+ overflow-y: auto;
83
+ background-color: #1a1a1a;
84
+ color: #e0e0e0;
85
+ padding: 10px;
86
+ border-radius: 5px;
87
+ font-family: monospace;
88
+ }
89
+
90
+ .combat-entry {
91
+ margin-bottom: 5px;
92
+ border-bottom: 1px solid #333;
93
+ padding-bottom: 3px;
94
+ }
95
+
96
+ .victory { color: #4CAF50; }
97
+ .defeat { color: #F44336; }
98
+ .neutral { color: #FFC107; }
99
+ </style>
100
+ </head>
101
+ <body class="bg-gray-900 text-white">
102
+ <div class="container mx-auto px-4 py-8">
103
+ <header class="mb-8 text-center">
104
+ <h1 class="text-4xl font-bold mb-2 text-yellow-400">Mount & Blade: German Wars 1400</h1>
105
+ <p class="text-lg text-gray-300">Lead your faction to dominance in the fractured Holy Roman Empire</p>
106
+ </header>
107
+
108
+ <div id="game-container">
109
+ <!-- Character Creation Screen -->
110
+ <div id="character-creation" class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
111
+ <h2 class="text-2xl font-bold mb-6 text-center text-yellow-400">Create Your Character</h2>
112
+
113
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
114
+ <div>
115
+ <div class="mb-4">
116
+ <label class="block text-gray-300 mb-2">Character Name</label>
117
+ <input type="text" id="char-name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded" value="Sir Ulrich">
118
+ </div>
119
+
120
+ <div class="mb-4">
121
+ <label class="block text-gray-300 mb-2">Faction</label>
122
+ <select id="faction-select" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded">
123
+ <option value="bavaria">Duchy of Bavaria (Blue)</option>
124
+ <option value="swabia">Duchy of Swabia (Red)</option>
125
+ <option value="franconia">Duchy of Franconia (Gold)</option>
126
+ <option value="saxony">Duchy of Saxony (Green)</option>
127
+ <option value="lorraine">Duchy of Lorraine (White)</option>
128
+ </select>
129
+ </div>
130
+
131
+ <div class="mb-4">
132
+ <label class="block text-gray-300 mb-2">Background</label>
133
+ <select id="background-select" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded">
134
+ <option value="noble">Noble Son (+Leadership, +Relations with Nobles)</option>
135
+ <option value="merchant">Merchant (+Trade, +Gold)</option>
136
+ <option value="mercenary">Mercenary (+Combat Skills, -Relations with Nobles)</option>
137
+ <option value="peasant">Peasant (+Recruitment, -Starting Gold)</option>
138
+ </select>
139
+ </div>
140
+ </div>
141
+
142
+ <div>
143
+ <div class="mb-4">
144
+ <label class="block text-gray-300 mb-2">Starting Location</label>
145
+ <select id="start-location" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded">
146
+ <option value="munich">Munich (Bavaria)</option>
147
+ <option value="augsburg">Augsburg (Swabia)</option>
148
+ <option value="wurzburg">Würzburg (Franconia)</option>
149
+ <option value="leipzig">Leipzig (Saxony)</option>
150
+ <option value="trier">Trier (Lorraine)</option>
151
+ </select>
152
+ </div>
153
+
154
+ <div class="mb-4">
155
+ <label class="block text-gray-300 mb-2">Difficulty</label>
156
+ <select id="difficulty" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded">
157
+ <option value="easy">Easy (More gold, weaker enemies)</option>
158
+ <option value="normal" selected>Normal (Balanced experience)</option>
159
+ <option value="hard">Hard (Less gold, stronger enemies)</option>
160
+ </select>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="mt-6 text-center">
166
+ <button id="start-game" class="px-6 py-3 bg-yellow-600 hover:bg-yellow-700 rounded-lg font-bold transition">Begin Your Adventure</button>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Main Game Screen (initially hidden) -->
171
+ <div id="game-screen" class="hidden">
172
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
173
+ <!-- Player Stats Panel -->
174
+ <div class="bg-gray-800 p-4 rounded-lg shadow">
175
+ <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Player Info</h3>
176
+ <div class="space-y-3">
177
+ <div>
178
+ <span class="font-semibold">Name:</span> <span id="player-name">Sir Ulrich</span>
179
+ </div>
180
+ <div>
181
+ <span class="font-semibold">Faction:</span> <span id="player-faction">Bavaria</span>
182
+ </div>
183
+ <div>
184
+ <span class="font-semibold">Gold:</span> <span id="player-gold">1000</span> <i class="fas fa-coins text-yellow-400"></i>
185
+ </div>
186
+ <div>
187
+ <span class="font-semibold">Renown:</span> <span id="player-renown">0</span>
188
+ </div>
189
+ <div>
190
+ <span class="font-semibold">Troops:</span> <span id="player-troops">0/50</span>
191
+ </div>
192
+ <div class="pt-2">
193
+ <div class="w-full bg-gray-700 rounded-full h-2.5">
194
+ <div id="health-bar" class="bg-red-600 h-2.5 rounded-full" style="width: 100%"></div>
195
+ </div>
196
+ <span class="text-sm">Health: <span id="health-text">100</span>/100</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Current Location Panel -->
202
+ <div class="bg-gray-800 p-4 rounded-lg shadow">
203
+ <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Current Location</h3>
204
+ <div id="location-info" class="space-y-3">
205
+ <div class="text-center py-8 text-gray-500">
206
+ Select a settlement on the map
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Actions Panel -->
212
+ <div class="bg-gray-800 p-4 rounded-lg shadow">
213
+ <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Actions</h3>
214
+ <div id="action-buttons" class="space-y-2">
215
+ <button class="action-btn w-full px-4 py-2 bg-blue-700 hover:bg-blue-800 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
216
+ <i class="fas fa-swords mr-2"></i> Attack
217
+ </button>
218
+ <button class="action-btn w-full px-4 py-2 bg-green-700 hover:bg-green-800 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
219
+ <i class="fas fa-handshake mr-2"></i> Negotiate
220
+ </button>
221
+ <button class="action-btn w-full px-4 py-2 bg-yellow-700 hover:bg-yellow-800 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
222
+ <i class="fas fa-users mr-2"></i> Recruit
223
+ </button>
224
+ <button class="action-btn w-full px-4 py-2 bg-purple-700 hover:bg-purple-800 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
225
+ <i class="fas fa-store mr-2"></i> Trade
226
+ </button>
227
+ <button class="action-btn w-full px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
228
+ <i class="fas fa-route mr-2"></i> Travel
229
+ </button>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Game Log -->
234
+ <div class="bg-gray-800 p-4 rounded-lg shadow">
235
+ <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2">Game Log</h3>
236
+ <div id="game-log" class="h-48 overflow-y-auto text-sm space-y-1">
237
+ <div class="text-gray-400 italic">Game begins...</div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Map and Combat Area -->
243
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
244
+ <!-- Map Container -->
245
+ <div class="lg:col-span-2 bg-gray-800 p-4 rounded-lg shadow">
246
+ <div class="flex justify-between items-center mb-4">
247
+ <h3 class="text-xl font-bold">Holy Roman Empire - 1400 AD</h3>
248
+ <div class="flex space-x-2">
249
+ <button id="end-turn" class="px-4 py-2 bg-red-700 hover:bg-red-800 rounded">
250
+ <i class="fas fa-hourglass-end mr-2"></i> End Turn
251
+ </button>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="map-container rounded-lg border border-gray-700 relative" id="game-map">
256
+ <!-- Settlements will be added here by JavaScript -->
257
+ <div class="tooltip hidden" id="map-tooltip"></div>
258
+ </div>
259
+
260
+ <div class="mt-4 grid grid-cols-2 md:grid-cols-5 gap-2">
261
+ <div class="flex items-center">
262
+ <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
263
+ <span>Bavaria</span>
264
+ </div>
265
+ <div class="flex items-center">
266
+ <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
267
+ <span>Swabia</span>
268
+ </div>
269
+ <div class="flex items-center">
270
+ <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
271
+ <span>Franconia</span>
272
+ </div>
273
+ <div class="flex items-center">
274
+ <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
275
+ <span>Saxony</span>
276
+ </div>
277
+ <div class="flex items-center">
278
+ <div class="w-4 h-4 rounded-full bg-white border border-gray-500 mr-2"></div>
279
+ <span>Lorraine</span>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Combat/Event Panel -->
285
+ <div class="bg-gray-800 p-4 rounded-lg shadow">
286
+ <h3 class="text-xl font-bold mb-4 border-b border-gray-700 pb-2" id="combat-header">Events</h3>
287
+
288
+ <div id="combat-screen" class="hidden">
289
+ <div class="flex justify-between items-center mb-4">
290
+ <div>
291
+ <span class="font-semibold">Player:</span> <span id="combat-player">Sir Ulrich</span>
292
+ </div>
293
+ <div>
294
+ <span class="font-semibold">vs</span>
295
+ </div>
296
+ <div>
297
+ <span class="font-semibold">Enemy:</span> <span id="combat-enemy">Bandits</span>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="grid grid-cols-2 gap-4 mb-4">
302
+ <div>
303
+ <div class="text-center font-semibold mb-1">Player Forces</div>
304
+ <div id="player-forces" class="bg-gray-700 p-2 rounded">
305
+ <!-- Will be filled by JS -->
306
+ </div>
307
+ </div>
308
+ <div>
309
+ <div class="text-center font-semibold mb-1">Enemy Forces</div>
310
+ <div id="enemy-forces" class="bg-gray-700 p-2 rounded">
311
+ <!-- Will be filled by JS -->
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="mb-4">
317
+ <div class="combat-log" id="combat-log">
318
+ <!-- Combat messages will appear here -->
319
+ </div>
320
+ </div>
321
+
322
+ <div class="flex space-x-2">
323
+ <button id="attack-btn" class="flex-1 px-4 py-2 bg-red-700 hover:bg-red-800 rounded">
324
+ <i class="fas fa-swords mr-2"></i> Attack
325
+ </button>
326
+ <button id="retreat-btn" class="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded">
327
+ <i class="fas fa-running mr-2"></i> Retreat
328
+ </button>
329
+ </div>
330
+ </div>
331
+
332
+ <div id="event-screen">
333
+ <div class="text-center py-8 text-gray-500">
334
+ No current events
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <script>
344
+ // Game State
345
+ const gameState = {
346
+ player: {
347
+ name: "Sir Ulrich",
348
+ faction: "bavaria",
349
+ gold: 1000,
350
+ renown: 0,
351
+ maxTroops: 50,
352
+ currentTroops: 0,
353
+ health: 100,
354
+ maxHealth: 100,
355
+ location: null,
356
+ background: "noble",
357
+ relations: {
358
+ bavaria: 50,
359
+ swabia: 0,
360
+ franconia: 0,
361
+ saxony: 0,
362
+ lorraine: 0
363
+ },
364
+ inventory: {
365
+ food: 50,
366
+ weapons: 20,
367
+ armor: 10
368
+ }
369
+ },
370
+ factions: {
371
+ bavaria: { name: "Bavaria", color: "blue", strength: 70, relations: {} },
372
+ swabia: { name: "Swabia", color: "red", strength: 60, relations: {} },
373
+ franconia: { name: "Franconia", color: "yellow", strength: 55, relations: {} },
374
+ saxony: { name: "Saxony", color: "green", strength: 65, relations: {} },
375
+ lorraine: { name: "Lorraine", color: "white", strength: 50, relations: {} }
376
+ },
377
+ settlements: [
378
+ { id: "munich", name: "Munich", type: "town", faction: "bavaria", x: 75, y: 85, garrison: 150, wealth: 800 },
379
+ { id: "augsburg", name: "Augsburg", type: "town", faction: "swabia", x: 60, y: 70, garrison: 120, wealth: 700 },
380
+ { id: "nuremberg", name: "Nuremberg", type: "town", faction: "franconia", x: 50, y: 60, garrison: 100, wealth: 750 },
381
+ { id: "wurzburg", name: "Würzburg", type: "town", faction: "franconia", x: 40, y: 55, garrison: 90, wealth: 600 },
382
+ { id: "frankfurt", name: "Frankfurt", type: "town", faction: "franconia", x: 30, y: 50, garrison: 110, wealth: 850 },
383
+ { id: "leipzig", name: "Leipzig", type: "town", faction: "saxony", x: 65, y: 40, garrison: 95, wealth: 650 },
384
+ { id: "trier", name: "Trier", type: "town", faction: "lorraine", x: 15, y: 60, garrison: 80, wealth: 550 },
385
+ { id: "regensburg", name: "Regensburg", type: "castle", faction: "bavaria", x: 80, y: 75, garrison: 70, wealth: 400 },
386
+ { id: "ulm", name: "Ulm", type: "castle", faction: "swabia", x: 55, y: 65, garrison: 60, wealth: 350 },
387
+ { id: "bamberg", name: "Bamberg", type: "castle", faction: "franconia", x: 45, y: 58, garrison: 50, wealth: 300 },
388
+ { id: "erfurt", name: "Erfurt", type: "castle", faction: "saxony", x: 55, y: 45, garrison: 55, wealth: 320 },
389
+ { id: "mainz", name: "Mainz", type: "castle", faction: "lorraine", x: 25, y: 55, garrison: 45, wealth: 280 },
390
+ { id: "village1", name: "Dorf an der Donau", type: "village", faction: "bavaria", x: 70, y: 80, garrison: 10, wealth: 150 },
391
+ { id: "village2", name: "Schwäbisches Dorf", type: "village", faction: "swabia", x: 58, y: 68, garrison: 8, wealth: 120 },
392
+ { id: "village3", name: "Fränkisches Dorf", type: "village", faction: "franconia", x: 48, y: 62, garrison: 7, wealth: 110 },
393
+ { id: "village4", name: "Sächsisches Dorf", type: "village", faction: "saxony", x: 60, y: 42, garrison: 9, wealth: 130 },
394
+ { id: "village5", name: "Lothringisches Dorf", type: "village", faction: "lorraine", x: 20, y: 58, garrison: 6, wealth: 100 }
395
+ ],
396
+ currentTurn: 1,
397
+ inCombat: false,
398
+ combatEnemy: null,
399
+ selectedSettlement: null,
400
+ gameLog: []
401
+ };
402
+
403
+ // DOM Elements
404
+ const characterCreation = document.getElementById('character-creation');
405
+ const gameScreen = document.getElementById('game-screen');
406
+ const startGameBtn = document.getElementById('start-game');
407
+ const playerNameEl = document.getElementById('player-name');
408
+ const playerFactionEl = document.getElementById('player-faction');
409
+ const playerGoldEl = document.getElementById('player-gold');
410
+ const playerRenownEl = document.getElementById('player-renown');
411
+ const playerTroopsEl = document.getElementById('player-troops');
412
+ const healthBarEl = document.getElementById('health-bar');
413
+ const healthTextEl = document.getElementById('health-text');
414
+ const gameMap = document.getElementById('game-map');
415
+ const locationInfo = document.getElementById('location-info');
416
+ const actionButtons = document.querySelectorAll('.action-btn');
417
+ const gameLog = document.getElementById('game-log');
418
+ const combatScreen = document.getElementById('combat-screen');
419
+ const combatHeader = document.getElementById('combat-header');
420
+ const combatPlayerEl = document.getElementById('combat-player');
421
+ const combatEnemyEl = document.getElementById('combat-enemy');
422
+ const playerForcesEl = document.getElementById('player-forces');
423
+ const enemyForcesEl = document.getElementById('enemy-forces');
424
+ const combatLogEl = document.getElementById('combat-log');
425
+ const attackBtn = document.getElementById('attack-btn');
426
+ const retreatBtn = document.getElementById('retreat-btn');
427
+ const endTurnBtn = document.getElementById('end-turn');
428
+ const mapTooltip = document.getElementById('map-tooltip');
429
+
430
+ // Initialize game
431
+ function initGame() {
432
+ // Set up event listeners
433
+ startGameBtn.addEventListener('click', startGame);
434
+ endTurnBtn.addEventListener('click', endTurn);
435
+ attackBtn.addEventListener('click', combatAttack);
436
+ retreatBtn.addEventListener('click', combatRetreat);
437
+
438
+ // Create settlements on map
439
+ renderSettlements();
440
+
441
+ // Set up settlement click handlers
442
+ document.querySelectorAll('.settlement').forEach(settlement => {
443
+ settlement.addEventListener('click', () => selectSettlement(settlement.dataset.id));
444
+ settlement.addEventListener('mouseenter', showSettlementTooltip);
445
+ settlement.addEventListener('mouseleave', hideSettlementTooltip);
446
+ });
447
+
448
+ // Set up action buttons
449
+ document.querySelectorAll('.action-btn').forEach((btn, index) => {
450
+ btn.addEventListener('click', () => handleAction(index));
451
+ });
452
+ }
453
+
454
+ // Start the game
455
+ function startGame() {
456
+ // Get character creation values
457
+ gameState.player.name = document.getElementById('char-name').value || "Sir Ulrich";
458
+ gameState.player.faction = document.getElementById('faction-select').value;
459
+ gameState.player.background = document.getElementById('background-select').value;
460
+ const startLocation = document.getElementById('start-location').value;
461
+ const difficulty = document.getElementById('difficulty').value;
462
+
463
+ // Apply background bonuses
464
+ applyBackgroundBonuses();
465
+
466
+ // Apply difficulty settings
467
+ applyDifficultySettings(difficulty);
468
+
469
+ // Set starting location
470
+ const startingSettlement = gameState.settlements.find(s => s.id === startLocation);
471
+ gameState.player.location = startingSettlement.id;
472
+
473
+ // Update UI
474
+ updatePlayerInfo();
475
+ selectSettlement(startLocation);
476
+
477
+ // Switch to game screen
478
+ characterCreation.classList.add('hidden');
479
+ gameScreen.classList.remove('hidden');
480
+
481
+ // Add starting troops
482
+ recruitTroops(10);
483
+
484
+ // Add initial log entry
485
+ addGameLog(`You begin your journey in ${startingSettlement.name} as a noble of ${gameState.factions[gameState.player.faction].name}.`);
486
+ }
487
+
488
+ function applyBackgroundBonuses() {
489
+ switch(gameState.player.background) {
490
+ case 'noble':
491
+ gameState.player.renown = 20;
492
+ for (const faction in gameState.player.relations) {
493
+ if (faction !== gameState.player.faction) {
494
+ gameState.player.relations[faction] = -10;
495
+ } else {
496
+ gameState.player.relations[faction] = 50;
497
+ }
498
+ }
499
+ break;
500
+ case 'merchant':
501
+ gameState.player.gold = 1500;
502
+ gameState.player.inventory.food = 100;
503
+ break;
504
+ case 'mercenary':
505
+ gameState.player.maxTroops = 70;
506
+ gameState.player.currentTroops = 20;
507
+ for (const faction in gameState.player.relations) {
508
+ gameState.player.relations[faction] = -20;
509
+ }
510
+ break;
511
+ case 'peasant':
512
+ gameState.player.gold = 500;
513
+ gameState.player.maxTroops = 80;
514
+ gameState.player.currentTroops = 15;
515
+ gameState.player.relations[gameState.player.faction] = 30;
516
+ break;
517
+ }
518
+ }
519
+
520
+ function applyDifficultySettings(difficulty) {
521
+ switch(difficulty) {
522
+ case 'easy':
523
+ gameState.player.gold *= 1.5;
524
+ gameState.player.maxHealth *= 1.2;
525
+ gameState.player.health = gameState.player.maxHealth;
526
+ break;
527
+ case 'hard':
528
+ gameState.player.gold *= 0.7;
529
+ gameState.player.maxHealth *= 0.8;
530
+ gameState.player.health = gameState.player.maxHealth;
531
+ break;
532
+ }
533
+ }
534
+
535
+ // Render settlements on the map
536
+ function renderSettlements() {
537
+ gameState.settlements.forEach(settlement => {
538
+ const settlementEl = document.createElement('div');
539
+ settlementEl.className = `settlement ${settlement.type} faction-${settlement.faction}`;
540
+ settlementEl.dataset.id = settlement.id;
541
+ settlementEl.style.left = `${settlement.x}%`;
542
+ settlementEl.style.top = `${settlement.y}%`;
543
+
544
+ // Add first letter of settlement name as marker
545
+ const letter = document.createElement('span');
546
+ letter.textContent = settlement.name.charAt(0);
547
+ settlementEl.appendChild(letter);
548
+
549
+ gameMap.appendChild(settlementEl);
550
+ });
551
+ }
552
+
553
+ // Show settlement tooltip
554
+ function showSettlementTooltip(e) {
555
+ const settlementId = e.currentTarget.dataset.id;
556
+ const settlement = gameState.settlements.find(s => s.id === settlementId);
557
+
558
+ mapTooltip.innerHTML = `
559
+ <div class="font-bold">${settlement.name}</div>
560
+ <div>Type: ${settlement.type.charAt(0).toUpperCase() + settlement.type.slice(1)}</div>
561
+ <div>Faction: ${gameState.factions[settlement.faction].name}</div>
562
+ <div>Garrison: ${settlement.garrison}</div>
563
+ <div>Wealth: ${settlement.wealth}</div>
564
+ `;
565
+
566
+ mapTooltip.style.left = `${e.pageX + 10}px`;
567
+ mapTooltip.style.top = `${e.pageY + 10}px`;
568
+ mapTooltip.classList.remove('hidden');
569
+ }
570
+
571
+ // Hide settlement tooltip
572
+ function hideSettlementTooltip() {
573
+ mapTooltip.classList.add('hidden');
574
+ }
575
+
576
+ // Select a settlement
577
+ function selectSettlement(settlementId) {
578
+ const settlement = gameState.settlements.find(s => s.id === settlementId);
579
+ gameState.selectedSettlement = settlement;
580
+
581
+ // Update location info
582
+ locationInfo.innerHTML = `
583
+ <div class="text-center font-bold text-lg mb-2">${settlement.name}</div>
584
+ <div class="grid grid-cols-2 gap-2 mb-3">
585
+ <div><span class="font-semibold">Type:</span> ${settlement.type.charAt(0).toUpperCase() + settlement.type.slice(1)}</div>
586
+ <div><span class="font-semibold">Faction:</span> ${gameState.factions[settlement.faction].name}</div>
587
+ <div><span class="font-semibold">Garrison:</span> ${settlement.garrison}</div>
588
+ <div><span class="font-semibold">Wealth:</span> ${settlement.wealth}</div>
589
+ </div>
590
+ <div class="text-sm text-gray-400 italic">
591
+ ${getSettlementDescription(settlement)}
592
+ </div>
593
+ `;
594
+
595
+ // Enable/disable action buttons based on settlement
596
+ actionButtons.forEach(btn => btn.disabled = false);
597
+
598
+ // Special cases
599
+ if (settlement.faction === gameState.player.faction) {
600
+ document.querySelectorAll('.action-btn')[1].disabled = true; // Disable negotiate with own faction
601
+ }
602
+
603
+ if (settlement.id === gameState.player.location) {
604
+ document.querySelectorAll('.action-btn')[4].disabled = true; // Disable travel to current location
605
+ }
606
+
607
+ // Highlight selected settlement on map
608
+ document.querySelectorAll('.settlement').forEach(el => {
609
+ el.classList.remove('border-2', 'border-white');
610
+ });
611
+ document.querySelector(`.settlement[data-id="${settlementId}"]`).classList.add('border-2', 'border-white');
612
+ }
613
+
614
+ function getSettlementDescription(settlement) {
615
+ const faction = gameState.factions[settlement.faction];
616
+ const playerFaction = gameState.factions[gameState.player.faction];
617
+
618
+ if (settlement.type === 'town') {
619
+ return `A bustling ${faction.name} town with merchants, craftsmen, and a strong garrison.`;
620
+ } else if (settlement.type === 'castle') {
621
+ return `A formidable ${faction.name} castle, home to local nobility and their retinue.`;
622
+ } else {
623
+ return `A quiet ${faction.name} village, where peasants work the land.`;
624
+ }
625
+ }
626
+
627
+ // Handle action button clicks
628
+ function handleAction(actionIndex) {
629
+ const settlement = gameState.selectedSettlement;
630
+
631
+ switch(actionIndex) {
632
+ case 0: // Attack
633
+ if (settlement.faction === gameState.player.faction) {
634
+ addGameLog("You cannot attack your own faction's settlements!");
635
+ return;
636
+ }
637
+
638
+ if (gameState.player.currentTroops < 5) {
639
+ addGameLog("You need at least 5 troops to attack!");
640
+ return;
641
+ }
642
+
643
+ startCombat(settlement);
644
+ break;
645
+
646
+ case 1: // Negotiate
647
+ if (settlement.faction === gameState.player.faction) {
648
+ return;
649
+ }
650
+
651
+ negotiate(settlement);
652
+ break;
653
+
654
+ case 2: // Recruit
655
+ recruitTroops(5);
656
+ break;
657
+
658
+ case 3: // Trade
659
+ trade();
660
+ break;
661
+
662
+ case 4: // Travel
663
+ travelTo(settlement);
664
+ break;
665
+ }
666
+ }
667
+
668
+ // Start combat with a settlement
669
+ function startCombat(settlement) {
670
+ gameState.inCombat = true;
671
+ gameState.combatEnemy = {
672
+ name: `${settlement.name} Garrison`,
673
+ type: 'garrison',
674
+ troops: Math.floor(settlement.garrison * 0.7), // Only part of garrison fights
675
+ health: 100
676
+ };
677
+
678
+ // Update combat UI
679
+ combatHeader.textContent = "Battle";
680
+ combatPlayerEl.textContent = gameState.player.name;
681
+ combatEnemyEl.textContent = gameState.combatEnemy.name;
682
+
683
+ // Show forces
684
+ updateCombatForces();
685
+
686
+ // Clear combat log
687
+ combatLogEl.innerHTML = '';
688
+
689
+ // Show combat screen
690
+ combatScreen.classList.remove('hidden');
691
+
692
+ // Add initial log
693
+ addCombatLog(`You engage the ${settlement.name} garrison in battle!`, 'neutral');
694
+ }
695
+
696
+ // Update combat forces display
697
+ function updateCombatForces() {
698
+ playerForcesEl.innerHTML = `
699
+ <div class="mb-2">
700
+ <div class="flex justify-between mb-1">
701
+ <span>Troops:</span>
702
+ <span>${gameState.player.currentTroops}</span>
703
+ </div>
704
+ <div class="w-full bg-gray-600 rounded-full h-2">
705
+ <div class="bg-blue-600 h-2 rounded-full" style="width: ${gameState.player.health}%"></div>
706
+ </div>
707
+ </div>
708
+ `;
709
+
710
+ enemyForcesEl.innerHTML = `
711
+ <div class="mb-2">
712
+ <div class="flex justify-between mb-1">
713
+ <span>Troops:</span>
714
+ <span>${gameState.combatEnemy.troops}</span>
715
+ </div>
716
+ <div class="w-full bg-gray-600 rounded-full h-2">
717
+ <div class="bg-red-600 h-2 rounded-full" style="width: ${gameState.combatEnemy.health}%"></div>
718
+ </div>
719
+ </div>
720
+ `;
721
+ }
722
+
723
+ // Handle combat attack
724
+ function combatAttack() {
725
+ if (!gameState.inCombat) return;
726
+
727
+ // Player attacks
728
+ const playerDamage = Math.floor(Math.random() * 20) + 10 + gameState.player.currentTroops;
729
+ const enemyDamage = Math.floor(Math.random() * 15) + 5 + gameState.combatEnemy.troops;
730
+
731
+ // Apply damage
732
+ gameState.combatEnemy.health -= playerDamage / 2;
733
+ gameState.player.health -= enemyDamage / 2;
734
+
735
+ // Update troop numbers based on damage
736
+ const playerTroopsLost = Math.floor(enemyDamage / 10);
737
+ const enemyTroopsLost = Math.floor(playerDamage / 10);
738
+
739
+ gameState.player.currentTroops = Math.max(0, gameState.player.currentTroops - playerTroopsLost);
740
+ gameState.combatEnemy.troops = Math.max(0, gameState.combatEnemy.troops - enemyTroopsLost);
741
+
742
+ // Update UI
743
+ updateCombatForces();
744
+ updatePlayerInfo();
745
+
746
+ // Add combat log
747
+ addCombatLog(`Your forces attack! You lose ${playerTroopsLost} troops and deal ${enemyTroopsLost} casualties.`, 'neutral');
748
+
749
+ // Check for combat end
750
+ if (gameState.player.health <= 0 || gameState.player.currentTroops <= 0) {
751
+ endCombat(false);
752
+ return;
753
+ }
754
+
755
+ if (gameState.combatEnemy.health <= 0 || gameState.combatEnemy.troops <= 0) {
756
+ endCombat(true);
757
+ return;
758
+ }
759
+ }
760
+
761
+ // Handle combat retreat
762
+ function combatRetreat() {
763
+ if (!gameState.inCombat) return;
764
+
765
+ // Lose some troops during retreat
766
+ const troopsLost = Math.floor(gameState.player.currentTroops * 0.3);
767
+ gameState.player.currentTroops -= troopsLost;
768
+
769
+ // Update UI
770
+ updatePlayerInfo();
771
+
772
+ // Add combat log
773
+ addCombatLog(`You retreat from battle, losing ${troopsLost} troops in the process.`, 'defeat');
774
+
775
+ // End combat
776
+ endCombat(false);
777
+ }
778
+
779
+ // End combat
780
+ function endCombat(victory) {
781
+ gameState.inCombat = false;
782
+
783
+ if (victory) {
784
+ // Calculate loot
785
+ const loot = Math.floor(gameState.selectedSettlement.wealth * 0.3);
786
+ gameState.player.gold += loot;
787
+ gameState.player.renown += 5;
788
+
789
+ // Update settlement
790
+ gameState.selectedSettlement.garrison = Math.floor(gameState.selectedSettlement.garrison * 0.5);
791
+
792
+ // Update UI
793
+ updatePlayerInfo();
794
+ addCombatLog(`You are victorious! You gain ${loot} gold and 5 renown.`, 'victory');
795
+ addGameLog(`You defeated the ${gameState.selectedSettlement.name} garrison and gained ${loot} gold!`);
796
+ } else {
797
+ addCombatLog("You were defeated in battle.", 'defeat');
798
+ addGameLog("You were defeated in battle.");
799
+
800
+ // If player has no troops left, they're captured
801
+ if (gameState.player.currentTroops <= 0) {
802
+ gameState.player.health = 50;
803
+ gameState.player.gold = Math.floor(gameState.player.gold * 0.5);
804
+ addGameLog("You've been captured! You lose half your gold and are returned to your starting location.");
805
+
806
+ // Return to starting location
807
+ const startingSettlement = gameState.settlements.find(s => s.id === gameState.player.location);
808
+ selectSettlement(startingSettlement.id);
809
+ }
810
+ }
811
+
812
+ // Hide combat screen after delay
813
+ setTimeout(() => {
814
+ combatScreen.classList.add('hidden');
815
+ }, 3000);
816
+ }
817
+
818
+ // Add message to combat log
819
+ function addCombatLog(message, type) {
820
+ const entry = document.createElement('div');
821
+ entry.className = `combat-entry ${type}`;
822
+ entry.textContent = message;
823
+ combatLogEl.appendChild(entry);
824
+ combatLogEl.scrollTop = combatLogEl.scrollHeight;
825
+ }
826
+
827
+ // Negotiate with settlement
828
+ function negotiate(settlement) {
829
+ const faction = settlement.faction;
830
+ const currentRelation = gameState.player.relations[faction] || 0;
831
+
832
+ // Can't negotiate if relation is too low
833
+ if (currentRelation < -20) {
834
+ addGameLog(`The ${gameState.factions[faction].name} refuse to negotiate with you due to poor relations.`);
835
+ return;
836
+ }
837
+
838
+ // Chance of success based on relation
839
+ const successChance = 50 + currentRelation;
840
+ const isSuccess = Math.random() * 100 < successChance;
841
+
842
+ if (isSuccess) {
843
+ // Improve relations
844
+ gameState.player.relations[faction] = (gameState.player.relations[faction] || 0) + 5;
845
+
846
+ // Possible tribute
847
+ if (Math.random() > 0.7) {
848
+ const tribute = Math.floor(settlement.wealth * 0.1);
849
+ gameState.player.gold += tribute;
850
+ addGameLog(`Negotiation successful! ${settlement.name} agrees to pay you ${tribute} gold in tribute. Relations with ${gameState.factions[faction].name} improved.`);
851
+ } else {
852
+ addGameLog(`Negotiation successful! Relations with ${gameState.factions[faction].name} improved.`);
853
+ }
854
+ } else {
855
+ // Small relation penalty for failed negotiation
856
+ gameState.player.relations[faction] = (gameState.player.relations[faction] || 0) - 2;
857
+ addGameLog(`Negotiation failed. The ${gameState.factions[faction].name} are not interested in your proposals.`);
858
+ }
859
+
860
+ updatePlayerInfo();
861
+ }
862
+
863
+ // Recruit troops
864
+ function recruitTroops(amount) {
865
+ if (gameState.selectedSettlement.faction !== gameState.player.faction) {
866
+ addGameLog("You can only recruit troops in your own faction's settlements!");
867
+ return;
868
+ }
869
+
870
+ const costPerTroop = 10;
871
+ const totalCost = amount * costPerTroop;
872
+
873
+ if (gameState.player.gold < totalCost) {
874
+ addGameLog(`You need ${totalCost} gold to recruit ${amount} troops!`);
875
+ return;
876
+ }
877
+
878
+ if (gameState.player.currentTroops + amount > gameState.player.maxTroops) {
879
+ amount = gameState.player.maxTroops - gameState.player.currentTroops;
880
+ if (amount <= 0) {
881
+ addGameLog("You've reached your maximum troop capacity!");
882
+ return;
883
+ }
884
+ }
885
+
886
+ gameState.player.gold -= amount * costPerTroop;
887
+ gameState.player.currentTroops += amount;
888
+
889
+ addGameLog(`You recruited ${amount} troops for ${amount * costPerTroop} gold.`);
890
+ updatePlayerInfo();
891
+ }
892
+
893
+ // Trade goods
894
+ function trade() {
895
+ const settlement = gameState.selectedSettlement;
896
+ const tradeAmount = 50;
897
+ const profit = Math.floor(Math.random() * 30) + 10;
898
+
899
+ // Can't trade in enemy settlements
900
+ if (settlement.faction !== gameState.player.faction) {
901
+ addGameLog("You can only trade in your own faction's settlements!");
902
+ return;
903
+ }
904
+
905
+ // Need some food to trade
906
+ if (gameState.player.inventory.food < tradeAmount) {
907
+ addGameLog(`You need at least ${tradeAmount} food to trade!`);
908
+ return;
909
+ }
910
+
911
+ gameState.player.inventory.food -= tradeAmount;
912
+ gameState.player.gold += profit;
913
+
914
+ addGameLog(`You traded ${tradeAmount} food and made ${profit} gold profit.`);
915
+ updatePlayerInfo();
916
+ }
917
+
918
+ // Travel to a settlement
919
+ function travelTo(settlement) {
920
+ if (settlement.id === gameState.player.location) {
921
+ return;
922
+ }
923
+
924
+ // Random events can happen during travel
925
+ const eventRoll = Math.random();
926
+
927
+ if (eventRoll < 0.3) {
928
+ // No event
929
+ addGameLog(`You travel safely to ${settlement.name}.`);
930
+ } else if (eventRoll < 0.6) {
931
+ // Find some loot
932
+ const loot = Math.floor(Math.random() * 50) + 20;
933
+ gameState.player.gold += loot;
934
+ addGameLog(`On the way to ${settlement.name}, you find ${loot} gold!`);
935
+ } else if (eventRoll < 0.9) {
936
+ // Bandit attack
937
+ startRandomCombat();
938
+ return; // Don't change location if combat happens
939
+ } else {
940
+ // Noble encounter
941
+ const nobleGift = Math.floor(Math.random() * 100) + 50;
942
+ gameState.player.gold += nobleGift;
943
+ addGameLog(`You meet a friendly noble on the road who gifts you ${nobleGift} gold!`);
944
+ }
945
+
946
+ // Update location
947
+ gameState.player.location = settlement.id;
948
+ updatePlayerInfo();
949
+ addGameLog(`You arrive at ${settlement.name}.`);
950
+ }
951
+
952
+ // Start random combat (bandits)
953
+ function startRandomCombat() {
954
+ gameState.inCombat = true;
955
+ const banditStrength = Math.floor(gameState.player.currentTroops * (0.5 + Math.random() * 0.5));
956
+
957
+ gameState.combatEnemy = {
958
+ name: "Bandit Group",
959
+ type: 'bandits',
960
+ troops: banditStrength,
961
+ health: 100
962
+ };
963
+
964
+ // Update combat UI
965
+ combatHeader.textContent = "Ambush!";
966
+ combatPlayerEl.textContent = gameState.player.name;
967
+ combatEnemyEl.textContent = gameState.combatEnemy.name;
968
+
969
+ // Show forces
970
+ updateCombatForces();
971
+
972
+ // Clear combat log
973
+ combatLogEl.innerHTML = '';
974
+
975
+ // Show combat screen
976
+ combatScreen.classList.remove('hidden');
977
+
978
+ // Add initial log
979
+ addCombatLog(`You've been ambushed by bandits!`, 'neutral');
980
+ addGameLog("Your party has been ambushed by bandits on the road!");
981
+ }
982
+
983
+ // End turn
984
+ function endTurn() {
985
+ gameState.currentTurn++;
986
+
987
+ // Pay troop wages
988
+ const wages = gameState.player.currentTroops * 2;
989
+ gameState.player.gold -= wages;
990
+
991
+ // Consume food
992
+ const foodConsumed = gameState.player.currentTroops;
993
+ gameState.player.inventory.food -= foodConsumed;
994
+
995
+ // Handle negative food (troops desert)
996
+ if (gameState.player.inventory.food < 0) {
997
+ const deserters = Math.floor(gameState.player.currentTroops * 0.2);
998
+ gameState.player.currentTroops -= deserters;
999
+ gameState.player.inventory.food = 0;
1000
+ addGameLog(`${deserters} troops deserted due to lack of food!`);
1001
+ }
1002
+
1003
+ // Handle negative gold (troops desert)
1004
+ if (gameState.player.gold < 0) {
1005
+ const deserters = Math.floor(gameState.player.currentTroops * 0.3);
1006
+ gameState.player.currentTroops -= deserters;
1007
+ gameState.player.gold = 0;
1008
+ addGameLog(`${deserters} troops deserted due to lack of pay!`);
1009
+ }
1010
+
1011
+ // Random events
1012
+ const eventRoll = Math.random();
1013
+
1014
+ if (eventRoll < 0.2) {
1015
+ // Positive event
1016
+ const positiveEvents = [
1017
+ { message: "A group of mercenaries joins your cause!", effect: () => { gameState.player.currentTroops += 5; } },
1018
+ { message: "You find a chest of gold on the road!", effect: () => { gameState.player.gold += 100; } },
1019
+ { message: "Your reputation grows, attracting more troops.", effect: () => { gameState.player.renown += 3; } }
1020
+ ];
1021
+
1022
+ const event = positiveEvents[Math.floor(Math.random() * positiveEvents.length)];
1023
+ event.effect();
1024
+ addGameLog(event.message);
1025
+ } else if (eventRoll < 0.4) {
1026
+ // Negative event
1027
+ const negativeEvents = [
1028
+ { message: "A disease sweeps through your camp.", effect: () => { gameState.player.currentTroops = Math.floor(gameState.player.currentTroops * 0.9); } },
1029
+ { message: "Thieves steal some of your gold!", effect: () => { gameState.player.gold = Math.floor(gameState.player.gold * 0.8); } },
1030
+ { message: "A rival spreads rumors about you.", effect: () => { gameState.player.renown -= 3; } }
1031
+ ];
1032
+
1033
+ const event = negativeEvents[Math.floor(Math.random() * negativeEvents.length)];
1034
+ event.effect();
1035
+ addGameLog(event.message);
1036
+ }
1037
+
1038
+ // Update UI
1039
+ updatePlayerInfo();
1040
+ addGameLog(`Turn ${gameState.currentTurn} completed. You paid ${wages} gold in wages and consumed ${foodConsumed} food.`);
1041
+ }
1042
+
1043
+ // Update player info display
1044
+ function updatePlayerInfo() {
1045
+ playerNameEl.textContent = gameState.player.name;
1046
+ playerFactionEl.textContent = gameState.factions[gameState.player.faction].name;
1047
+ playerGoldEl.textContent = gameState.player.gold;
1048
+ playerRenownEl.textContent = gameState.player.renown;
1049
+ playerTroopsEl.textContent = `${gameState.player.currentTroops}/${gameState.player.maxTroops}`;
1050
+ healthTextEl.textContent = `${gameState.player.health}`;
1051
+ healthBarEl.style.width = `${gameState.player.health}%`;
1052
+ }
1053
+
1054
+ // Add message to game log
1055
+ function addGameLog(message) {
1056
+ const entry = document.createElement('div');
1057
+ entry.className = 'border-b border-gray-700 pb-1';
1058
+ entry.textContent = `[Turn ${gameState.currentTurn}] ${message}`;
1059
+ gameLog.appendChild(entry);
1060
+ gameLog.scrollTop = gameLog.scrollHeight;
1061
+
1062
+ // Keep log to 50 entries max
1063
+ if (gameLog.children.length > 50) {
1064
+ gameLog.removeChild(gameLog.children[0]);
1065
+ }
1066
+
1067
+ // Add to game state log
1068
+ gameState.gameLog.push(message);
1069
+ }
1070
+
1071
+ // Initialize the game when page loads
1072
+ window.addEventListener('DOMContentLoaded', initGame);
1073
+ </script>
1074
+ <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=yazdaabdul/mount-and-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1075
+ </html>