Hugging Face's logo

Spaces:
antiquesordo
/
echaton-final-reckoning
Running

App Files Community
antiquesordo commited on
Commit
472a2d4
·
verified ·
1 Parent(s): c576da8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +897 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Echaton Final Reckoning
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: echaton-final-reckoning
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,897 @@
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>Eschaton: Final Reckoning</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');
12
+
13
+ :root {
14
+ --mahdi-color: #2e7d32;
15
+ --jesus-color: #1565c0;
16
+ --sufyani-color: #c62828;
17
+ --antichrist-color: #6a1b9a;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Cinzel', serif;
22
+ background: url('https://images.unsplash.com/photo-1518562180175-34a163b1a9a9?q=80&w=2070') no-repeat center center fixed;
23
+ background-size: cover;
24
+ color: #f8f8f8;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ .game-container {
29
+ backdrop-filter: blur(5px);
30
+ background-color: rgba(0, 0, 0, 0.7);
31
+ border: 2px solid #8b5a2b;
32
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
33
+ }
34
+
35
+ .faction-card {
36
+ transition: all 0.3s ease;
37
+ border: 2px solid transparent;
38
+ cursor: pointer;
39
+ }
40
+
41
+ .faction-card:hover {
42
+ transform: translateY(-5px);
43
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
44
+ }
45
+
46
+ .mahdi {
47
+ background: linear-gradient(135deg, rgba(46, 125, 50, 0.8), rgba(46, 125, 50, 0.5));
48
+ border-color: var(--mahdi-color);
49
+ }
50
+
51
+ .jesus {
52
+ background: linear-gradient(135deg, rgba(21, 101, 192, 0.8), rgba(21, 101, 192, 0.5));
53
+ border-color: var(--jesus-color);
54
+ }
55
+
56
+ .sufyani {
57
+ background: linear-gradient(135deg, rgba(198, 40, 40, 0.8), rgba(198, 40, 40, 0.5));
58
+ border-color: var(--sufyani-color);
59
+ }
60
+
61
+ .antichrist {
62
+ background: linear-gradient(135deg, rgba(106, 27, 154, 0.8), rgba(106, 27, 154, 0.5));
63
+ border-color: var(--antichrist-color);
64
+ }
65
+
66
+ .selected {
67
+ border: 3px solid gold;
68
+ box-shadow: 0 0 15px gold;
69
+ }
70
+
71
+ .game-view {
72
+ display: none;
73
+ height: 80vh;
74
+ }
75
+
76
+ .minimap {
77
+ width: 200px;
78
+ height: 200px;
79
+ background-color: rgba(0, 0, 0, 0.5);
80
+ border: 2px solid #8b5a2b;
81
+ }
82
+
83
+ .resource-bar {
84
+ background: rgba(0, 0, 0, 0.7);
85
+ border-bottom: 2px solid #8b5a2b;
86
+ }
87
+
88
+ .unit {
89
+ width: 40px;
90
+ height: 40px;
91
+ border-radius: 50%;
92
+ display: flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ font-size: 20px;
96
+ cursor: pointer;
97
+ transition: all 0.2s ease;
98
+ }
99
+
100
+ .unit:hover {
101
+ transform: scale(1.1);
102
+ }
103
+
104
+ .building {
105
+ width: 60px;
106
+ height: 60px;
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ font-size: 30px;
111
+ cursor: pointer;
112
+ transition: all 0.2s ease;
113
+ }
114
+
115
+ .building:hover {
116
+ transform: scale(1.05);
117
+ }
118
+
119
+ .game-map {
120
+ background-color: #4a3728;
121
+ background-image:
122
+ linear-gradient(#5d4037 1px, transparent 1px),
123
+ linear-gradient(90deg, #5d4037 1px, transparent 1px);
124
+ background-size: 20px 20px;
125
+ position: relative;
126
+ overflow: hidden;
127
+ }
128
+
129
+ .map-tile {
130
+ position: absolute;
131
+ width: 40px;
132
+ height: 40px;
133
+ background-size: cover;
134
+ }
135
+
136
+ .tree {
137
+ background-image: url('https://cdn-icons-png.flaticon.com/512/3397/3397432.png');
138
+ }
139
+
140
+ .gold {
141
+ background-image: url('https://cdn-icons-png.flaticon.com/512/3132/3132735.png');
142
+ }
143
+
144
+ .stone {
145
+ background-image: url('https://cdn-icons-png.flaticon.com/512/206/206881.png');
146
+ }
147
+
148
+ .food {
149
+ background-image: url('https://cdn-icons-png.flaticon.com/512/686/686310.png');
150
+ }
151
+
152
+ .modal-overlay {
153
+ position: fixed;
154
+ top: 0;
155
+ left: 0;
156
+ right: 0;
157
+ bottom: 0;
158
+ background-color: rgba(0, 0, 0, 0.8);
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ z-index: 1000;
163
+ }
164
+
165
+ .modal-content {
166
+ background: linear-gradient(135deg, #1a120b, #3a2518);
167
+ border: 2px solid #8b5a2b;
168
+ border-radius: 5px;
169
+ padding: 20px;
170
+ max-width: 500px;
171
+ width: 90%;
172
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
173
+ }
174
+
175
+ .progress-bar {
176
+ height: 20px;
177
+ background-color: #3a2518;
178
+ border-radius: 10px;
179
+ overflow: hidden;
180
+ }
181
+
182
+ .progress-fill {
183
+ height: 100%;
184
+ background: linear-gradient(90deg, #8b5a2b, #d4a373);
185
+ transition: width 0.3s ease;
186
+ }
187
+
188
+ @keyframes pulse {
189
+ 0% { transform: scale(1); }
190
+ 50% { transform: scale(1.05); }
191
+ 100% { transform: scale(1); }
192
+ }
193
+
194
+ .pulse {
195
+ animation: pulse 2s infinite;
196
+ }
197
+ </style>
198
+ </head>
199
+ <body class="min-h-screen flex flex-col">
200
+ <!-- Main Menu -->
201
+ <div id="main-menu" class="flex flex-col items-center justify-center min-h-screen p-4">
202
+ <div class="game-container rounded-lg p-8 max-w-4xl w-full">
203
+ <h1 class="text-5xl font-bold text-center mb-8 text-yellow-400 font-cinzel">ESCHATON: FINAL RECKONING</h1>
204
+
205
+ <div class="flex justify-center mb-8">
206
+ <button id="connect-wallet-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-6 rounded-lg text-lg flex items-center">
207
+ <i class="fab fa-ethereum mr-2"></i> Connect Wallet to Begin
208
+ </button>
209
+ </div>
210
+
211
+ <div id="wallet-connected" class="hidden mb-8 p-4 bg-gray-800 rounded-lg">
212
+ <div class="flex justify-between items-center">
213
+ <div>
214
+ <p class="text-sm text-gray-300">Connected Wallet:</p>
215
+ <p id="wallet-address" class="font-mono text-yellow-400 truncate"></p>
216
+ </div>
217
+ <button id="disconnect-wallet" class="text-red-400 hover:text-red-300">
218
+ <i class="fas fa-sign-out-alt"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+
223
+ <div id="faction-selection" class="hidden">
224
+ <h2 class="text-3xl font-bold text-center mb-6">Choose Your Faction</h2>
225
+
226
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
227
+ <div class="faction-card mahdi rounded-lg p-4" data-faction="mahdi">
228
+ <div class="flex justify-between items-center mb-2">
229
+ <h3 class="text-xl font-bold">Forces of the Mahdi</h3>
230
+ <i class="fas fa-mosque text-2xl"></i>
231
+ </div>
232
+ <p class="text-sm mb-3">Defensive faction with powerful late-game cavalry and righteous warriors. Gather Divine Guidance to unlock special abilities.</p>
233
+ <div class="flex justify-between text-xs">
234
+ <span><i class="fas fa-shield-alt mr-1"></i> Strong Defense</span>
235
+ <span><i class="fas fa-horse mr-1"></i> Cavalry Focus</span>
236
+ <span><i class="fas fa-clock mr-1"></i> Late Game</span>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="faction-card jesus rounded-lg p-4" data-faction="jesus">
241
+ <div class="flex justify-between items-center mb-2">
242
+ <h3 class="text-xl font-bold">Followers of Jesus</h3>
243
+ <i class="fas fa-cross text-2xl"></i>
244
+ </div>
245
+ <p class="text-sm mb-3">Versatile faction with healing abilities and angelic units. Faith powers your miracles and technologies.</p>
246
+ <div class="flex justify-between text-xs">
247
+ <span><i class="fas fa-heart mr-1"></i> Healing</span>
248
+ <span><i class="fas fa-angel mr-1"></i> Angelic Units</span>
249
+ <span><i class="fas fa-balance-scale mr-1"></i> Balanced</span>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="faction-card sufyani rounded-lg p-4" data-faction="sufyani">
254
+ <div class="flex justify-between items-center mb-2">
255
+ <h3 class="text-xl font-bold">Armies of the Sufyani</h3>
256
+ <i class="fas fa-flag text-2xl"></i>
257
+ </div>
258
+ <p class="text-sm mb-3">Aggressive faction with swift units and economic disruption. Earthly Power fuels your conquest.</p>
259
+ <div class="flex justify-between text-xs">
260
+ <span><i class="fas fa-bolt mr-1"></i> Fast Units</span>
261
+ <span><i class="fas fa-coins mr-1"></i> Economic War</span>
262
+ <span><i class="fas fa-chess-rook mr-1"></i> Early Game</span>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="faction-card antichrist rounded-lg p-4" data-faction="antichrist">
267
+ <div class="flex justify-between items-center mb-2">
268
+ <h3 class="text-xl font-bold">Legions of the Antichrist</h3>
269
+ <i class="fas fa-eye text-2xl"></i>
270
+ </div>
271
+ <p class="text-sm mb-3">Deceptive faction with advanced technology and powerful unique units. Illusionary Wealth masks your true strength.</p>
272
+ <div class="flex justify-between text-xs">
273
+ <span><i class="fas fa-mask mr-1"></i> Deception</span>
274
+ <span><i class="fas fa-robot mr-1"></i> Advanced Tech</span>
275
+ <span><i class="fas fa-brain mr-1"></i> High Skill</span>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="mt-8 flex justify-center">
281
+ <button id="start-game-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg text-lg hidden">
282
+ Begin Your Journey
283
+ </button>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="mt-8 pt-4 border-t border-gray-700">
288
+ <h3 class="text-xl font-bold text-center mb-4">Game Features</h3>
289
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
290
+ <div class="p-3">
291
+ <i class="fas fa-coins text-3xl text-yellow-400 mb-2"></i>
292
+ <h4 class="font-bold">Web3 Integration</h4>
293
+ <p class="text-sm">Play with your crypto wallet and own your progress</p>
294
+ </div>
295
+ <div class="p-3">
296
+ <i class="fas fa-chess-board text-3xl text-yellow-400 mb-2"></i>
297
+ <h4 class="font-bold">Strategic Depth</h4>
298
+ <p class="text-sm">Deep RTS gameplay inspired by Age of Empires</p>
299
+ </div>
300
+ <div class="p-3">
301
+ <i class="fas fa-bible text-3xl text-yellow-400 mb-2"></i>
302
+ <h4 class="font-bold">Eschatological Theme</h4>
303
+ <p class="text-sm">Unique factions based on prophetic traditions</p>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Game View -->
311
+ <div id="game-view" class="game-view flex flex-col w-full">
312
+ <!-- Resource Bar -->
313
+ <div class="resource-bar flex justify-between items-center p-2">
314
+ <div class="flex space-x-4">
315
+ <div class="flex items-center">
316
+ <i class="fas fa-bread-slice text-yellow-400 mr-1"></i>
317
+ <span id="food-count" class="font-bold">200</span>
318
+ </div>
319
+ <div class="flex items-center">
320
+ <i class="fas fa-tree text-green-400 mr-1"></i>
321
+ <span id="wood-count" class="font-bold">200</span>
322
+ </div>
323
+ <div class="flex items-center">
324
+ <i class="fas fa-coins text-yellow-500 mr-1"></i>
325
+ <span id="gold-count" class="font-bold">100</span>
326
+ </div>
327
+ <div class="flex items-center">
328
+ <i class="fas fa-mountain text-gray-300 mr-1"></i>
329
+ <span id="stone-count" class="font-bold">100</span>
330
+ </div>
331
+ <div class="flex items-center" id="faction-resource">
332
+ <!-- Faction-specific resource will be shown here -->
333
+ </div>
334
+ </div>
335
+
336
+ <div class="flex items-center space-x-2">
337
+ <div class="flex items-center">
338
+ <i class="fas fa-user-friends text-blue-300 mr-1"></i>
339
+ <span id="population-count">0/15</span>
340
+ </div>
341
+ <div class="flex items-center ml-4">
342
+ <i class="fas fa-clock text-gray-300 mr-1"></i>
343
+ <span id="game-time">00:00</span>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="flex items-center space-x-4">
348
+ <button id="menu-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded">
349
+ <i class="fas fa-bars"></i> Menu
350
+ </button>
351
+ <div id="level-display" class="bg-gray-800 px-3 py-1 rounded">
352
+ Level <span id="current-level">1</span>/100
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Main Game Area -->
358
+ <div class="flex flex-1 overflow-hidden">
359
+ <!-- Sidebar -->
360
+ <div class="w-64 bg-gray-900 p-2 flex flex-col">
361
+ <div class="mb-4">
362
+ <h3 class="text-lg font-bold mb-2">Buildings</h3>
363
+ <div class="grid grid-cols-3 gap-2">
364
+ <div class="building bg-gray-700 rounded" title="Town Center">
365
+ <i class="fas fa-home"></i>
366
+ </div>
367
+ <div class="building bg-gray-700 rounded" title="Barracks">
368
+ <i class="fas fa-chess-rook"></i>
369
+ </div>
370
+ <div class="building bg-gray-700 rounded" title="Archery Range">
371
+ <i class="fas fa-bow-arrow"></i>
372
+ </div>
373
+ <div class="building bg-gray-700 rounded" title="Stable">
374
+ <i class="fas fa-horse"></i>
375
+ </div>
376
+ <div class="building bg-gray-700 rounded" title="Siege Workshop">
377
+ <i class="fas fa-catapult"></i>
378
+ </div>
379
+ <div class="building bg-gray-700 rounded" title="Dock">
380
+ <i class="fas fa-ship"></i>
381
+ </div>
382
+ <div class="building bg-gray-700 rounded" title="Monastery">
383
+ <i class="fas fa-place-of-worship"></i>
384
+ </div>
385
+ <div class="building bg-gray-700 rounded" title="University">
386
+ <i class="fas fa-graduation-cap"></i>
387
+ </div>
388
+ <div class="building bg-gray-700 rounded" title="Wonder">
389
+ <i class="fas fa-landmark"></i>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="mb-4">
395
+ <h3 class="text-lg font-bold mb-2">Units</h3>
396
+ <div class="grid grid-cols-3 gap-2" id="unit-buttons">
397
+ <!-- Units will be populated based on faction and buildings -->
398
+ </div>
399
+ </div>
400
+
401
+ <div class="mb-4">
402
+ <h3 class="text-lg font-bold mb-2">Technologies</h3>
403
+ <div class="grid grid-cols-3 gap-2" id="tech-buttons">
404
+ <!-- Technologies will be populated based on faction and buildings -->
405
+ </div>
406
+ </div>
407
+
408
+ <div class="mt-auto">
409
+ <h3 class="text-lg font-bold mb-2">Minimap</h3>
410
+ <div class="minimap rounded"></div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Game Map -->
415
+ <div class="flex-1 game-map relative overflow-hidden" id="game-map">
416
+ <!-- Map tiles and units will be rendered here -->
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Level Complete Modal -->
422
+ <div id="level-complete-modal" class="modal-overlay hidden">
423
+ <div class="modal-content">
424
+ <h2 class="text-3xl font-bold text-center text-yellow-400 mb-4">Level Complete!</h2>
425
+ <div class="text-center mb-6">
426
+ <p>You have successfully completed Level <span id="completed-level">1</span>.</p>
427
+ <p class="mt-2">Your reward: <span class="font-bold">50 Gold</span></p>
428
+ </div>
429
+
430
+ <div id="next-level-free" class="hidden mb-4">
431
+ <p class="text-center text-green-400">Next level unlocked!</p>
432
+ </div>
433
+
434
+ <div id="next-level-paid" class="hidden mb-4">
435
+ <p class="text-center">To unlock Level <span id="next-level-number">2</span>, pay 10 USDT</p>
436
+ <div class="flex justify-center mt-4">
437
+ <button id="pay-for-level" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg">
438
+ Pay 10 USDT
439
+ </button>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="flex justify-center space-x-4 mt-6">
444
+ <button id="return-to-menu" class="bg-gray-600 hover:bg-gray-500 text-white py-2 px-4 rounded">
445
+ Main Menu
446
+ </button>
447
+ <button id="continue-game" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg hidden">
448
+ Continue
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Payment Processing Modal -->
455
+ <div id="payment-modal" class="modal-overlay hidden">
456
+ <div class="modal-content">
457
+ <h2 class="text-2xl font-bold text-center mb-4">Processing Payment</h2>
458
+ <div class="text-center mb-4">
459
+ <p>Please confirm the transaction in your wallet to unlock Level <span id="payment-level">2</span>.</p>
460
+ </div>
461
+ <div class="progress-bar mb-4">
462
+ <div class="progress-fill" style="width: 0%"></div>
463
+ </div>
464
+ <div class="text-center text-sm text-gray-400">
465
+ <p id="payment-status">Waiting for transaction...</p>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Main Menu Modal -->
471
+ <div id="main-menu-modal" class="modal-overlay hidden">
472
+ <div class="modal-content">
473
+ <h2 class="text-2xl font-bold text-center mb-6">Game Menu</h2>
474
+
475
+ <div class="space-y-4">
476
+ <button id="resume-game" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg">
477
+ Resume Game
478
+ </button>
479
+ <button id="save-game" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg">
480
+ Save Game
481
+ </button>
482
+ <button id="load-game" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 rounded-lg">
483
+ Load Game
484
+ </button>
485
+ <button id="settings-btn" class="w-full bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 rounded-lg">
486
+ Settings
487
+ </button>
488
+ <button id="quit-game" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg">
489
+ Quit to Main Menu
490
+ </button>
491
+ </div>
492
+ </div>
493
+ </div>
494
+
495
+ <script>
496
+ // Game State
497
+ const gameState = {
498
+ walletConnected: false,
499
+ walletAddress: null,
500
+ selectedFaction: null,
501
+ currentLevel: 1,
502
+ unlockedLevels: [1], // Start with only level 1 unlocked
503
+ freeAccessWallet: '0xf4c7925aCB99366EC56432B40ae0d86c6F78c6A5',
504
+ resources: {
505
+ food: 200,
506
+ wood: 200,
507
+ gold: 100,
508
+ stone: 100,
509
+ factionResource: 0
510
+ },
511
+ population: {
512
+ current: 0,
513
+ max: 15
514
+ },
515
+ gameTime: 0
516
+ };
517
+
518
+ // DOM Elements
519
+ const mainMenu = document.getElementById('main-menu');
520
+ const gameView = document.getElementById('game-view');
521
+ const connectWalletBtn = document.getElementById('connect-wallet-btn');
522
+ const disconnectWalletBtn = document.getElementById('disconnect-wallet');
523
+ const walletConnected = document.getElementById('wallet-connected');
524
+ const walletAddress = document.getElementById('wallet-address');
525
+ const factionSelection = document.getElementById('faction-selection');
526
+ const factionCards = document.querySelectorAll('.faction-card');
527
+ const startGameBtn = document.getElementById('start-game-btn');
528
+ const levelCompleteModal = document.getElementById('level-complete-modal');
529
+ const completedLevel = document.getElementById('completed-level');
530
+ const nextLevelFree = document.getElementById('next-level-free');
531
+ const nextLevelPaid = document.getElementById('next-level-paid');
532
+ const nextLevelNumber = document.getElementById('next-level-number');
533
+ const payForLevel = document.getElementById('pay-for-level');
534
+ const returnToMenu = document.getElementById('return-to-menu');
535
+ const continueGame = document.getElementById('continue-game');
536
+ const paymentModal = document.getElementById('payment-modal');
537
+ const paymentLevel = document.getElementById('payment-level');
538
+ const paymentStatus = document.getElementById('payment-status');
539
+ const progressFill = document.querySelector('.progress-fill');
540
+ const mainMenuModal = document.getElementById('main-menu-modal');
541
+ const menuBtn = document.getElementById('menu-btn');
542
+ const resumeGame = document.getElementById('resume-game');
543
+ const quitGame = document.getElementById('quit-game');
544
+ const currentLevelDisplay = document.getElementById('current-level');
545
+ const foodCount = document.getElementById('food-count');
546
+ const woodCount = document.getElementById('wood-count');
547
+ const goldCount = document.getElementById('gold-count');
548
+ const stoneCount = document.getElementById('stone-count');
549
+ const populationCount = document.getElementById('population-count');
550
+ const gameTimeDisplay = document.getElementById('game-time');
551
+
552
+ // Initialize game
553
+ function initGame() {
554
+ // Set up event listeners
555
+ connectWalletBtn.addEventListener('click', connectWallet);
556
+ disconnectWalletBtn.addEventListener('click', disconnectWallet);
557
+
558
+ factionCards.forEach(card => {
559
+ card.addEventListener('click', () => selectFaction(card));
560
+ });
561
+
562
+ startGameBtn.addEventListener('click', startGame);
563
+ payForLevel.addEventListener('click', initiatePayment);
564
+ returnToMenu.addEventListener('click', returnToMainMenu);
565
+ continueGame.addEventListener('click', continueToNextLevel);
566
+ menuBtn.addEventListener('click', showMainMenuModal);
567
+ resumeGame.addEventListener('click', hideMainMenuModal);
568
+ quitGame.addEventListener('click', quitToMainMenu);
569
+
570
+ // Initialize resource display
571
+ updateResourceDisplay();
572
+
573
+ // Start game timer
574
+ setInterval(() => {
575
+ gameState.gameTime++;
576
+ const minutes = Math.floor(gameState.gameTime / 60).toString().padStart(2, '0');
577
+ const seconds = (gameState.gameTime % 60).toString().padStart(2, '0');
578
+ gameTimeDisplay.textContent = `${minutes}:${seconds}`;
579
+ }, 1000);
580
+ }
581
+
582
+ // Connect wallet
583
+ async function connectWallet() {
584
+ try {
585
+ // Check if MetaMask is installed
586
+ if (window.ethereum) {
587
+ // Request account access
588
+ const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
589
+
590
+ if (accounts.length > 0) {
591
+ gameState.walletAddress = accounts[0];
592
+ walletAddress.textContent = gameState.walletAddress;
593
+ walletConnected.classList.remove('hidden');
594
+ connectWalletBtn.classList.add('hidden');
595
+ factionSelection.classList.remove('hidden');
596
+ gameState.walletConnected = true;
597
+
598
+ // Check if this is the special wallet
599
+ if (gameState.walletAddress.toLowerCase() === gameState.freeAccessWallet.toLowerCase()) {
600
+ // Unlock all levels for this wallet
601
+ gameState.unlockedLevels = Array.from({length: 100}, (_, i) => i + 1);
602
+ showNotification("Special access granted! All levels unlocked.");
603
+ }
604
+ }
605
+ } else {
606
+ throw new Error("MetaMask or other Web3 wallet not detected");
607
+ }
608
+ } catch (error) {
609
+ console.error("Error connecting wallet:", error);
610
+ showNotification(`Error: ${error.message}`);
611
+ }
612
+ }
613
+
614
+ // Disconnect wallet
615
+ function disconnectWallet() {
616
+ gameState.walletConnected = false;
617
+ gameState.walletAddress = null;
618
+ walletConnected.classList.add('hidden');
619
+ connectWalletBtn.classList.remove('hidden');
620
+ factionSelection.classList.add('hidden');
621
+ startGameBtn.classList.add('hidden');
622
+ gameState.selectedFaction = null;
623
+
624
+ // Reset faction selection
625
+ factionCards.forEach(card => {
626
+ card.classList.remove('selected');
627
+ });
628
+ }
629
+
630
+ // Select faction
631
+ function selectFaction(card) {
632
+ // Deselect all cards
633
+ factionCards.forEach(c => {
634
+ c.classList.remove('selected');
635
+ });
636
+
637
+ // Select clicked card
638
+ card.classList.add('selected');
639
+ gameState.selectedFaction = card.dataset.faction;
640
+ startGameBtn.classList.remove('hidden');
641
+
642
+ // Update faction resource display
643
+ updateFactionResource();
644
+ }
645
+
646
+ // Update faction resource display
647
+ function updateFactionResource() {
648
+ const factionResourceDiv = document.getElementById('faction-resource');
649
+ factionResourceDiv.innerHTML = '';
650
+
651
+ if (gameState.selectedFaction) {
652
+ let icon, name;
653
+
654
+ switch(gameState.selectedFaction) {
655
+ case 'mahdi':
656
+ icon = '<i class="fas fa-star-and-crescent text-blue-300 mr-1"></i>';
657
+ name = 'Divine Guidance';
658
+ break;
659
+ case 'jesus':
660
+ icon = '<i class="fas fa-praying-hands text-white mr-1"></i>';
661
+ name = 'Faith';
662
+ break;
663
+ case 'sufyani':
664
+ icon = '<i class="fas fa-fist-raised text-red-300 mr-1"></i>';
665
+ name = 'Earthly Power';
666
+ break;
667
+ case 'antichrist':
668
+ icon = '<i class="fas fa-smile-wink text-purple-300 mr-1"></i>';
669
+ name = 'Illusionary Wealth';
670
+ break;
671
+ }
672
+
673
+ factionResourceDiv.innerHTML = `
674
+ <div class="flex items-center">
675
+ ${icon}
676
+ <span class="font-bold mr-1">${gameState.resources.factionResource}</span>
677
+ <span class="text-sm">${name}</span>
678
+ </div>
679
+ `;
680
+ }
681
+ }
682
+
683
+ // Start game
684
+ function startGame() {
685
+ if (!gameState.selectedFaction) return;
686
+
687
+ mainMenu.classList.add('hidden');
688
+ gameView.classList.remove('hidden');
689
+ currentLevelDisplay.textContent = gameState.currentLevel;
690
+
691
+ // Initialize game map (simplified for demo)
692
+ initGameMap();
693
+
694
+ // Show welcome message
695
+ showNotification(`Welcome, commander of the ${getFactionName(gameState.selectedFaction)}!`);
696
+ }
697
+
698
+ // Get faction name
699
+ function getFactionName(faction) {
700
+ switch(faction) {
701
+ case 'mahdi': return 'Forces of the Mahdi';
702
+ case 'jesus': return 'Followers of Jesus';
703
+ case 'sufyani': return 'Armies of the Sufyani';
704
+ case 'antichrist': return 'Legions of the Antichrist';
705
+ default: return '';
706
+ }
707
+ }
708
+
709
+ // Initialize game map (simplified)
710
+ function initGameMap() {
711
+ const gameMap = document.getElementById('game-map');
712
+ gameMap.innerHTML = '';
713
+
714
+ // Create some resource nodes (simplified)
715
+ createResourceNode('tree', 100, 100);
716
+ createResourceNode('tree', 300, 150);
717
+ createResourceNode('tree', 200, 400);
718
+ createResourceNode('gold', 500, 200);
719
+ createResourceNode('stone', 400, 350);
720
+ createResourceNode('food', 150, 300);
721
+
722
+ // Create town center
723
+ createBuilding('town-center', 300, 300);
724
+ }
725
+
726
+ // Create resource node
727
+ function createResourceNode(type, x, y) {
728
+ const node = document.createElement('div');
729
+ node.className = `map-tile ${type}`;
730
+ node.style.left = `${x}px`;
731
+ node.style.top = `${y}px`;
732
+ document.getElementById('game-map').appendChild(node);
733
+ }
734
+
735
+ // Create building
736
+ function createBuilding(type, x, y) {
737
+ const building = document.createElement('div');
738
+ building.className = 'map-tile building';
739
+ building.style.left = `${x}px`;
740
+ building.style.top = `${y}px`;
741
+
742
+ let icon;
743
+ switch(type) {
744
+ case 'town-center':
745
+ icon = '<i class="fas fa-home text-2xl"></i>';
746
+ break;
747
+ // Add other building types as needed
748
+ }
749
+
750
+ building.innerHTML = icon;
751
+ document.getElementById('game-map').appendChild(building);
752
+ }
753
+
754
+ // Complete level
755
+ function completeLevel() {
756
+ completedLevel.textContent = gameState.currentLevel;
757
+
758
+ const nextLevel = gameState.currentLevel + 1;
759
+ nextLevelNumber.textContent = nextLevel;
760
+
761
+ // Check if next level is unlocked
762
+ if (gameState.unlockedLevels.includes(nextLevel)) {
763
+ nextLevelFree.classList.remove('hidden');
764
+ nextLevelPaid.classList.add('hidden');
765
+ continueGame.classList.remove('hidden');
766
+ } else {
767
+ nextLevelFree.classList.add('hidden');
768
+ nextLevelPaid.classList.remove('hidden');
769
+ continueGame.classList.add('hidden');
770
+ }
771
+
772
+ levelCompleteModal.classList.remove('hidden');
773
+ }
774
+
775
+ // Initiate payment for next level
776
+ function initiatePayment() {
777
+ const nextLevel = gameState.currentLevel + 1;
778
+ paymentLevel.textContent = nextLevel;
779
+ paymentStatus.textContent = 'Waiting for transaction...';
780
+ progressFill.style.width = '0%';
781
+
782
+ levelCompleteModal.classList.add('hidden');
783
+ paymentModal.classList.remove('hidden');
784
+
785
+ // Simulate payment processing (in a real app, this would interact with a smart contract)
786
+ simulatePaymentProcessing();
787
+ }
788
+
789
+ // Simulate payment processing
790
+ function simulatePaymentProcessing() {
791
+ let progress = 0;
792
+ const interval = setInterval(() => {
793
+ progress += 10;
794
+ progressFill.style.width = `${progress}%`;
795
+
796
+ if (progress >= 30) {
797
+ paymentStatus.textContent = 'Transaction submitted...';
798
+ }
799
+
800
+ if (progress >= 60) {
801
+ paymentStatus.textContent = 'Waiting for confirmation...';
802
+ }
803
+
804
+ if (progress >= 100) {
805
+ clearInterval(interval);
806
+ paymentStatus.textContent = 'Payment confirmed!';
807
+
808
+ // Unlock the next level
809
+ const nextLevel = gameState.currentLevel + 1;
810
+ gameState.unlockedLevels.push(nextLevel);
811
+
812
+ // Close payment modal after delay
813
+ setTimeout(() => {
814
+ paymentModal.classList.add('hidden');
815
+ continueToNextLevel();
816
+ }, 1500);
817
+ }
818
+ }, 300);
819
+ }
820
+
821
+ // Continue to next level
822
+ function continueToNextLevel() {
823
+ gameState.currentLevel++;
824
+ currentLevelDisplay.textContent = gameState.currentLevel;
825
+
826
+ // Reset some game state for the new level
827
+ gameState.resources = {
828
+ food: 200,
829
+ wood: 200,
830
+ gold: 100,
831
+ stone: 100,
832
+ factionResource: 0
833
+ };
834
+ gameState.population.current = 0;
835
+ gameState.gameTime = 0;
836
+
837
+ updateResourceDisplay();
838
+ levelCompleteModal.classList.add('hidden');
839
+
840
+ // Reinitialize game map
841
+ initGameMap();
842
+
843
+ // Show level start message
844
+ showNotification(`Starting Level ${gameState.currentLevel}`);
845
+ }
846
+
847
+ // Return to main menu
848
+ function returnToMainMenu() {
849
+ levelCompleteModal.classList.add('hidden');
850
+ gameView.classList.add('hidden');
851
+ mainMenu.classList.remove('hidden');
852
+ }
853
+
854
+ // Show main menu modal
855
+ function showMainMenuModal() {
856
+ mainMenuModal.classList.remove('hidden');
857
+ }
858
+
859
+ // Hide main menu modal
860
+ function hideMainMenuModal() {
861
+ mainMenuModal.classList.add('hidden');
862
+ }
863
+
864
+ // Quit to main menu
865
+ function quitToMainMenu() {
866
+ mainMenuModal.classList.add('hidden');
867
+ gameView.classList.add('hidden');
868
+ mainMenu.classList.remove('hidden');
869
+ }
870
+
871
+ // Update resource display
872
+ function updateResourceDisplay() {
873
+ foodCount.textContent = gameState.resources.food;
874
+ woodCount.textContent = gameState.resources.wood;
875
+ goldCount.textContent = gameState.resources.gold;
876
+ stoneCount.textContent = gameState.resources.stone;
877
+ populationCount.textContent = `${gameState.population.current}/${gameState.population.max}`;
878
+ updateFactionResource();
879
+ }
880
+
881
+ // Show notification
882
+ function showNotification(message) {
883
+ // In a real game, you'd have a proper notification system
884
+ alert(message);
885
+ }
886
+
887
+ // Initialize the game when the page loads
888
+ window.addEventListener('DOMContentLoaded', initGame);
889
+
890
+ // For demo purposes - simulate completing level 1 after 10 seconds
891
+ setTimeout(() => {
892
+ if (gameView.classList.contains('hidden')) return;
893
+ completeLevel();
894
+ }, 10000);
895
+ </script>
896
+ <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=antiquesordo/echaton-final-reckoning" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
897
+ </html>