Hugging Face's logo

Spaces:
Nymbo
/
Tiny-Healer
Running

App Files Community
Nymbo commited on
Commit
cfed3a6
·
verified ·
1 Parent(s): 3413fd6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +109 -42
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>RPG Healer Combat Game</title>
7
  <style>
8
  /* Basic body styling */
9
  body {
@@ -13,7 +13,7 @@
13
  align-items: center;
14
  height: 100vh;
15
  margin: 0;
16
- background-color: #0f0f0f;
17
  color: #ffd100;
18
  }
19
 
@@ -21,12 +21,50 @@
21
  #game-container {
22
  width: 800px;
23
  height: 600px;
24
- border: 2px solid #4a4a4a;
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  padding: 20px;
26
- background-color: rgba(0, 0, 0, 0.8);
27
  position: relative;
28
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  border-radius: 10px;
 
 
 
 
 
 
30
  }
31
 
32
  /* Combat window containing allies and boss */
@@ -49,13 +87,13 @@
49
  /* Health bar styling */
50
  .health-bar {
51
  height: 30px;
52
- background-color: #1a1a1a;
53
  margin-bottom: 10px;
54
  position: relative;
55
  cursor: pointer;
56
- border: 1px solid #4a4a4a;
57
- border-radius: 5px;
58
  overflow: hidden;
 
59
  }
60
 
61
  .health-bar::before {
@@ -65,24 +103,25 @@
65
  left: 0;
66
  height: 100%;
67
  width: 100%;
68
- background-color: #00ff00;
69
  transition: width 0.3s ease;
 
70
  }
71
 
72
  /* Selected ally health bar */
73
  .health-bar.selected::before {
74
- background-color: #00aaff;
75
  }
76
 
77
  /* Dead ally health bar */
78
  .health-bar.dead::before {
79
- background-color: #777;
80
  }
81
 
82
  /* Bleeding ally health bar */
83
  .health-bar.bleeding::before {
84
- background-image: linear-gradient(45deg, #00ff00 25%, #ff0000 25%, #ff0000 50%, #00ff00 50%, #00ff00 75%, #ff0000 75%, #ff0000 100%);
85
- background-size: 40px 40px;
86
  animation: bleed-animation 1s linear infinite;
87
  }
88
 
@@ -91,7 +130,7 @@
91
  background-position: 0 0;
92
  }
93
  100% {
94
- background-position: 40px 0;
95
  }
96
  }
97
 
@@ -102,7 +141,8 @@
102
  text-align: center;
103
  line-height: 30px;
104
  z-index: 1;
105
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 
106
  }
107
 
108
  /* Boss health bar */
@@ -111,7 +151,7 @@
111
  }
112
 
113
  #boss-health-bar::before {
114
- background-color: #ff0000;
115
  }
116
 
117
  /* Spell buttons container */
@@ -125,7 +165,7 @@
125
  .spell-button {
126
  width: 18%;
127
  height: 50px;
128
- background-color: #4a4a4a;
129
  border: 1px solid #ffd100;
130
  color: #ffd100;
131
  text-align: center;
@@ -136,17 +176,18 @@
136
  cursor: pointer;
137
  position: relative;
138
  overflow: hidden;
139
- border-radius: 5px;
140
  transition: all 0.3s ease;
 
141
  }
142
 
143
  .spell-button:hover {
144
- background-color: #666;
145
  }
146
 
147
  /* Disabled spell button */
148
  .spell-button:disabled {
149
- background-color: #333;
150
  border-color: #666;
151
  color: #666;
152
  cursor: not-allowed;
@@ -167,19 +208,20 @@
167
  #mana-bar {
168
  width: 100%;
169
  height: 20px;
170
- background-color: #1a1a1a;
171
  position: relative;
172
- border: 1px solid #4a4a4a;
173
- border-radius: 5px;
174
  overflow: hidden;
 
175
  }
176
 
177
  /* Mana bar fill */
178
  #mana-bar-fill {
179
  height: 100%;
180
  width: 100%;
181
- background-color: #0077be;
182
  transition: width 0.5s;
 
183
  }
184
 
185
  /* Mana text */
@@ -189,7 +231,7 @@
189
  text-align: center;
190
  line-height: 20px;
191
  color: #fff;
192
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
193
  }
194
 
195
  /* Reset button */
@@ -200,17 +242,18 @@
200
  transform: translate(-50%, -50%);
201
  font-size: 24px;
202
  padding: 10px 20px;
203
- background-color: #ffd100;
204
  color: #000;
205
  border: none;
206
  cursor: pointer;
207
  display: none;
208
- border-radius: 5px;
209
  transition: all 0.3s ease;
 
210
  }
211
 
212
  #reset-button:hover {
213
- background-color: #ffea00;
214
  }
215
 
216
  /* Game over and victory messages */
@@ -221,20 +264,20 @@
221
  transform: translate(-50%, -50%);
222
  font-size: 36px;
223
  display: none;
224
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
225
  }
226
 
227
  #game-over {
228
- color: #ff0000;
229
  }
230
 
231
  #victory {
232
- color: #00ff00;
233
  }
234
 
235
  /* Accordion styles */
236
  .accordion {
237
- background-color: #333;
238
  color: #ffd100;
239
  cursor: pointer;
240
  padding: 18px;
@@ -244,21 +287,23 @@
244
  outline: none;
245
  transition: 0.4s;
246
  font-size: 16px;
247
- border-radius: 5px;
248
  margin-top: 10px;
 
249
  }
250
 
251
  .accordion:hover {
252
- background-color: #444;
253
  }
254
 
255
  .panel {
256
  padding: 0 18px;
257
- background-color: #1a1a1a;
258
  max-height: 0;
259
  overflow: hidden;
260
  transition: max-height 0.2s ease-out;
261
- border-radius: 0 0 5px 5px;
 
262
  }
263
 
264
  /* Markdown styles */
@@ -287,6 +332,12 @@
287
  </style>
288
  </head>
289
  <body>
 
 
 
 
 
 
290
  <!-- Main game container -->
291
  <div id="game-container">
292
  <!-- Combat window containing allies and boss -->
@@ -321,7 +372,7 @@
321
  <div id="spellbook"></div>
322
  </div>
323
 
324
- <!-- Info Accordion -->
325
  <button class="accordion">Info</button>
326
  <div class="panel">
327
  <div id="info" class="markdown">
@@ -381,14 +432,22 @@
381
 
382
  // Function to create an ally object
383
  function createAlly(id) {
384
- return { id, hp: 100, maxHp: 100, alive: true, bleeding: false };
 
 
 
 
 
 
 
 
385
  }
386
 
387
  // Function to update health bars
388
  function updateHealthBar(entity, barElement) {
389
  const percentage = (entity.hp / entity.maxHp) * 100;
390
  barElement.style.width = `${percentage}%`;
391
- barElement.querySelector('.health-bar-text').textContent = `HP: ${entity.hp}/${entity.maxHp}`;
392
  if (entity.hp <= 0) {
393
  barElement.classList.add('dead');
394
  }
@@ -418,7 +477,7 @@
418
  allies.push(ally);
419
  const healthBar = document.createElement('div');
420
  healthBar.className = 'health-bar';
421
- healthBar.innerHTML = `<div class="health-bar-text">Ally ${i + 1} HP: 100/100</div>`;
422
  healthBar.onclick = () => selectAlly(i);
423
  alliesContainer.appendChild(healthBar);
424
  updateHealthBar(ally, healthBar);
@@ -633,8 +692,10 @@
633
  updateSpellButtons();
634
  }
635
 
636
- // Function to reset the game
637
  function resetGame() {
 
 
638
  gameActive = true;
639
  document.getElementById('game-over').style.display = 'none';
640
  document.getElementById('victory').style.display = 'none';
@@ -689,6 +750,13 @@
689
  // Event listener for reset button
690
  document.getElementById('reset-button').addEventListener('click', resetGame);
691
 
 
 
 
 
 
 
 
692
  // Event listeners for accordions
693
  const accordions = document.getElementsByClassName("accordion");
694
  for (let i = 0; i < accordions.length; i++) {
@@ -709,7 +777,6 @@
709
  updateHealthBar(boss, document.getElementById('boss-health-bar'));
710
  updateManaBar();
711
  populateSpellbook();
712
- gameLoop();
713
  </script>
714
  </body>
715
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Tiny Healer - RPG Healer Combat Game</title>
7
  <style>
8
  /* Basic body styling */
9
  body {
 
13
  align-items: center;
14
  height: 100vh;
15
  margin: 0;
16
+ background: linear-gradient(to bottom right, #1e3c72, #2a5298);
17
  color: #ffd100;
18
  }
19
 
 
21
  #game-container {
22
  width: 800px;
23
  height: 600px;
24
+ border: none;
25
+ padding: 20px;
26
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(50, 50, 50, 0.9));
27
+ position: relative;
28
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
29
+ border-radius: 15px;
30
+ display: none; /* Hidden by default, shown after Start is clicked */
31
+ }
32
+
33
+ /* Welcome screen */
34
+ #welcome-screen {
35
+ width: 800px;
36
+ height: 600px;
37
+ border: none;
38
  padding: 20px;
39
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(50, 50, 50, 0.9));
40
  position: relative;
41
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
42
+ border-radius: 15px;
43
+ display: flex;
44
+ flex-direction: column;
45
+ justify-content: center;
46
+ align-items: center;
47
+ }
48
+
49
+ #welcome-screen h1 {
50
+ font-size: 48px;
51
+ margin-bottom: 20px;
52
+ }
53
+
54
+ #start-button {
55
+ font-size: 24px;
56
+ padding: 10px 20px;
57
+ background: linear-gradient(to bottom, #ffd100, #ffb800);
58
+ color: #000;
59
+ border: none;
60
+ cursor: pointer;
61
  border-radius: 10px;
62
+ transition: all 0.3s ease;
63
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
64
+ }
65
+
66
+ #start-button:hover {
67
+ background: linear-gradient(to bottom, #ffea00, #ffdd00);
68
  }
69
 
70
  /* Combat window containing allies and boss */
 
87
  /* Health bar styling */
88
  .health-bar {
89
  height: 30px;
90
+ background: linear-gradient(to right, #232526, #414345);
91
  margin-bottom: 10px;
92
  position: relative;
93
  cursor: pointer;
94
+ border-radius: 10px;
 
95
  overflow: hidden;
96
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
97
  }
98
 
99
  .health-bar::before {
 
103
  left: 0;
104
  height: 100%;
105
  width: 100%;
106
+ background: linear-gradient(to right, #32cd32, #228b22);
107
  transition: width 0.3s ease;
108
+ border-radius: 10px;
109
  }
110
 
111
  /* Selected ally health bar */
112
  .health-bar.selected::before {
113
+ background: linear-gradient(to right, #00bfff, #1e90ff);
114
  }
115
 
116
  /* Dead ally health bar */
117
  .health-bar.dead::before {
118
+ background: linear-gradient(to right, #696969, #808080);
119
  }
120
 
121
  /* Bleeding ally health bar */
122
  .health-bar.bleeding::before {
123
+ background-image: linear-gradient(45deg, #32cd32 25%, #ff4500 25%, #ff4500 50%, #32cd32 50%, #32cd32 75%, #ff4500 75%, #ff4500 100%);
124
+ background-size: 50px 50px;
125
  animation: bleed-animation 1s linear infinite;
126
  }
127
 
 
130
  background-position: 0 0;
131
  }
132
  100% {
133
+ background-position: 50px 0;
134
  }
135
  }
136
 
 
141
  text-align: center;
142
  line-height: 30px;
143
  z-index: 1;
144
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
145
+ color: #fff;
146
  }
147
 
148
  /* Boss health bar */
 
151
  }
152
 
153
  #boss-health-bar::before {
154
+ background: linear-gradient(to right, #ff4500, #b22222);
155
  }
156
 
157
  /* Spell buttons container */
 
165
  .spell-button {
166
  width: 18%;
167
  height: 50px;
168
+ background: linear-gradient(to bottom, #4a4a4a, #2e2e2e);
169
  border: 1px solid #ffd100;
170
  color: #ffd100;
171
  text-align: center;
 
176
  cursor: pointer;
177
  position: relative;
178
  overflow: hidden;
179
+ border-radius: 10px;
180
  transition: all 0.3s ease;
181
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
182
  }
183
 
184
  .spell-button:hover {
185
+ background: linear-gradient(to bottom, #666, #444);
186
  }
187
 
188
  /* Disabled spell button */
189
  .spell-button:disabled {
190
+ background: linear-gradient(to bottom, #333, #111);
191
  border-color: #666;
192
  color: #666;
193
  cursor: not-allowed;
 
208
  #mana-bar {
209
  width: 100%;
210
  height: 20px;
211
+ background: linear-gradient(to right, #141414, #282828);
212
  position: relative;
213
+ border-radius: 10px;
 
214
  overflow: hidden;
215
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
216
  }
217
 
218
  /* Mana bar fill */
219
  #mana-bar-fill {
220
  height: 100%;
221
  width: 100%;
222
+ background: linear-gradient(to right, #1e90ff, #4169e1);
223
  transition: width 0.5s;
224
+ border-radius: 10px;
225
  }
226
 
227
  /* Mana text */
 
231
  text-align: center;
232
  line-height: 20px;
233
  color: #fff;
234
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
235
  }
236
 
237
  /* Reset button */
 
242
  transform: translate(-50%, -50%);
243
  font-size: 24px;
244
  padding: 10px 20px;
245
+ background: linear-gradient(to bottom, #ffd100, #ffb800);
246
  color: #000;
247
  border: none;
248
  cursor: pointer;
249
  display: none;
250
+ border-radius: 10px;
251
  transition: all 0.3s ease;
252
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
253
  }
254
 
255
  #reset-button:hover {
256
+ background: linear-gradient(to bottom, #ffea00, #ffdd00);
257
  }
258
 
259
  /* Game over and victory messages */
 
264
  transform: translate(-50%, -50%);
265
  font-size: 36px;
266
  display: none;
267
+ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
268
  }
269
 
270
  #game-over {
271
+ color: #ff4500;
272
  }
273
 
274
  #victory {
275
+ color: #32cd32;
276
  }
277
 
278
  /* Accordion styles */
279
  .accordion {
280
+ background: linear-gradient(to right, #333, #444);
281
  color: #ffd100;
282
  cursor: pointer;
283
  padding: 18px;
 
287
  outline: none;
288
  transition: 0.4s;
289
  font-size: 16px;
290
+ border-radius: 10px;
291
  margin-top: 10px;
292
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
293
  }
294
 
295
  .accordion:hover {
296
+ background: linear-gradient(to right, #444, #555);
297
  }
298
 
299
  .panel {
300
  padding: 0 18px;
301
+ background: linear-gradient(to bottom, #1a1a1a, #222);
302
  max-height: 0;
303
  overflow: hidden;
304
  transition: max-height 0.2s ease-out;
305
+ border-radius: 0 0 10px 10px;
306
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
307
  }
308
 
309
  /* Markdown styles */
 
332
  </style>
333
  </head>
334
  <body>
335
+ <!-- Welcome screen -->
336
+ <div id="welcome-screen">
337
+ <h1>Welcome to Tiny Healer</h1>
338
+ <button id="start-button">Start Game</button>
339
+ </div>
340
+
341
  <!-- Main game container -->
342
  <div id="game-container">
343
  <!-- Combat window containing allies and boss -->
 
372
  <div id="spellbook"></div>
373
  </div>
374
 
375
+ <!-- Info Accordion -->
376
  <button class="accordion">Info</button>
377
  <div class="panel">
378
  <div id="info" class="markdown">
 
432
 
433
  // Function to create an ally object
434
  function createAlly(id) {
435
+ const allyTypes = [
436
+ { type: "Tank", maxHp: 300 }, // First ally is a Tank
437
+ { type: "Rogue", maxHp: 100 }, // Second ally is a Rogue
438
+ { type: "Rogue", maxHp: 100 }, // Third ally is a Rogue
439
+ { type: "Mage", maxHp: 100 }, // Fourth ally is a Mage
440
+ { type: "Mage", maxHp: 100 }, // Fifth ally is a Mage
441
+ ];
442
+ const ally = allyTypes[id];
443
+ return { id, type: ally.type, hp: ally.maxHp, maxHp: ally.maxHp, alive: true, bleeding: false };
444
  }
445
 
446
  // Function to update health bars
447
  function updateHealthBar(entity, barElement) {
448
  const percentage = (entity.hp / entity.maxHp) * 100;
449
  barElement.style.width = `${percentage}%`;
450
+ barElement.querySelector('.health-bar-text').textContent = `${entity.type} HP: ${entity.hp}/${entity.maxHp}`;
451
  if (entity.hp <= 0) {
452
  barElement.classList.add('dead');
453
  }
 
477
  allies.push(ally);
478
  const healthBar = document.createElement('div');
479
  healthBar.className = 'health-bar';
480
+ healthBar.innerHTML = `<div class="health-bar-text">${ally.type} HP: ${ally.hp}/${ally.maxHp}</div>`;
481
  healthBar.onclick = () => selectAlly(i);
482
  alliesContainer.appendChild(healthBar);
483
  updateHealthBar(ally, healthBar);
 
692
  updateSpellButtons();
693
  }
694
 
695
+ // Function to reset the game and return to the welcome screen
696
  function resetGame() {
697
+ document.getElementById('game-container').style.display = 'none';
698
+ document.getElementById('welcome-screen').style.display = 'flex';
699
  gameActive = true;
700
  document.getElementById('game-over').style.display = 'none';
701
  document.getElementById('victory').style.display = 'none';
 
750
  // Event listener for reset button
751
  document.getElementById('reset-button').addEventListener('click', resetGame);
752
 
753
+ // Event listener for start button
754
+ document.getElementById('start-button').addEventListener('click', () => {
755
+ document.getElementById('welcome-screen').style.display = 'none';
756
+ document.getElementById('game-container').style.display = 'block';
757
+ gameLoop(); // Start the game loop
758
+ });
759
+
760
  // Event listeners for accordions
761
  const accordions = document.getElementsByClassName("accordion");
762
  for (let i = 0; i < accordions.length; i++) {
 
777
  updateHealthBar(boss, document.getElementById('boss-health-bar'));
778
  updateManaBar();
779
  populateSpellbook();
 
780
  </script>
781
  </body>
782
  </html>