Hugging Face's logo

Spaces:
sqibhe
/
hangman
Running

App Files Community
sqibhe commited on
Commit
94ed895
·
verified ·
1 Parent(s): f8ecde9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +687 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hangman
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: red
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: hangman
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
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,687 @@
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>Hangman Game</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
+ .hangman-container {
11
+ position: relative;
12
+ width: 300px;
13
+ height: 350px;
14
+ margin: 0 auto;
15
+ }
16
+
17
+ .hangman-part {
18
+ position: absolute;
19
+ display: none;
20
+ }
21
+
22
+ /* Gallows */
23
+ #gallows-base {
24
+ width: 150px;
25
+ height: 15px;
26
+ bottom: 0;
27
+ left: 75px;
28
+ background-color: #8B4513;
29
+ display: block;
30
+ border-radius: 3px;
31
+ }
32
+
33
+ #gallows-pole {
34
+ width: 15px;
35
+ height: 250px;
36
+ bottom: 15px;
37
+ left: 75px;
38
+ background-color: #8B4513;
39
+ display: block;
40
+ border-radius: 3px;
41
+ }
42
+
43
+ #gallows-top {
44
+ width: 120px;
45
+ height: 15px;
46
+ top: 0;
47
+ left: 90px;
48
+ background-color: #8B4513;
49
+ display: block;
50
+ border-radius: 3px;
51
+ }
52
+
53
+ #gallows-rope {
54
+ width: 8px;
55
+ height: 40px;
56
+ top: 15px;
57
+ left: 210px;
58
+ background-color: #654321;
59
+ display: block;
60
+ border-radius: 3px;
61
+ }
62
+
63
+ /* Hangman parts */
64
+ #head {
65
+ width: 50px;
66
+ height: 50px;
67
+ border-radius: 50%;
68
+ top: 55px;
69
+ left: 185px;
70
+ background-color: #FFD700;
71
+ border: 3px solid #DAA520;
72
+ box-sizing: border-box;
73
+ }
74
+
75
+ #face {
76
+ width: 50px;
77
+ height: 50px;
78
+ border-radius: 50%;
79
+ top: 55px;
80
+ left: 185px;
81
+ display: none;
82
+ }
83
+
84
+ #eye-left {
85
+ width: 8px;
86
+ height: 8px;
87
+ background-color: #333;
88
+ border-radius: 50%;
89
+ top: 70px;
90
+ left: 195px;
91
+ }
92
+
93
+ #eye-right {
94
+ width: 8px;
95
+ height: 8px;
96
+ background-color: #333;
97
+ border-radius: 50%;
98
+ top: 70px;
99
+ left: 217px;
100
+ }
101
+
102
+ #mouth {
103
+ width: 20px;
104
+ height: 5px;
105
+ background-color: #333;
106
+ border-radius: 5px;
107
+ top: 85px;
108
+ left: 195px;
109
+ }
110
+
111
+ #body {
112
+ width: 15px;
113
+ height: 100px;
114
+ top: 105px;
115
+ left: 202px;
116
+ background-color: #FFD700;
117
+ border: 3px solid #DAA520;
118
+ box-sizing: border-box;
119
+ }
120
+
121
+ #left-arm {
122
+ width: 60px;
123
+ height: 15px;
124
+ top: 130px;
125
+ left: 142px;
126
+ background-color: #FFD700;
127
+ border: 3px solid #DAA520;
128
+ box-sizing: border-box;
129
+ transform: rotate(30deg);
130
+ transform-origin: right;
131
+ }
132
+
133
+ #right-arm {
134
+ width: 60px;
135
+ height: 15px;
136
+ top: 130px;
137
+ left: 217px;
138
+ background-color: #FFD700;
139
+ border: 3px solid #DAA520;
140
+ box-sizing: border-box;
141
+ transform: rotate(-30deg);
142
+ transform-origin: left;
143
+ }
144
+
145
+ #left-leg {
146
+ width: 60px;
147
+ height: 15px;
148
+ top: 205px;
149
+ left: 152px;
150
+ background-color: #FFD700;
151
+ border: 3px solid #DAA520;
152
+ box-sizing: border-box;
153
+ transform: rotate(20deg);
154
+ transform-origin: right;
155
+ }
156
+
157
+ #right-leg {
158
+ width: 60px;
159
+ height: 15px;
160
+ top: 205px;
161
+ left: 202px;
162
+ background-color: #FFD700;
163
+ border: 3px solid #DAA520;
164
+ box-sizing: border-box;
165
+ transform: rotate(-20deg);
166
+ transform-origin: left;
167
+ }
168
+
169
+ .letter-tile {
170
+ width: 40px;
171
+ height: 50px;
172
+ border-bottom: 3px solid #333;
173
+ font-size: 24px;
174
+ font-weight: bold;
175
+ display: flex;
176
+ align-items: flex-end;
177
+ justify-content: center;
178
+ margin: 0 5px;
179
+ }
180
+
181
+ .keyboard-key {
182
+ width: 40px;
183
+ height: 40px;
184
+ font-size: 18px;
185
+ font-weight: bold;
186
+ cursor: pointer;
187
+ transition: all 0.2s;
188
+ display: flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ border-radius: 8px;
192
+ }
193
+
194
+ .keyboard-key:hover {
195
+ transform: scale(1.1);
196
+ }
197
+
198
+ .keyboard-key.used {
199
+ opacity: 0.5;
200
+ cursor: not-allowed;
201
+ }
202
+
203
+ .keyboard-key.correct {
204
+ background-color: #4CAF50;
205
+ color: white;
206
+ }
207
+
208
+ .keyboard-key.wrong {
209
+ background-color: #F44336;
210
+ color: white;
211
+ }
212
+
213
+ .modal {
214
+ transition: opacity 0.3s ease;
215
+ }
216
+
217
+ .word-input-container {
218
+ display: flex;
219
+ align-items: center;
220
+ margin-bottom: 10px;
221
+ }
222
+
223
+ .word-input-container input {
224
+ flex-grow: 1;
225
+ margin-right: 10px;
226
+ }
227
+
228
+ /* Walking animation */
229
+ @keyframes walk {
230
+ 0% { transform: translateX(0) rotate(0deg); }
231
+ 25% { transform: translateX(20px) rotate(5deg); }
232
+ 50% { transform: translateX(40px) rotate(0deg); }
233
+ 75% { transform: translateX(60px) rotate(-5deg); }
234
+ 100% { transform: translateX(80px) rotate(0deg); }
235
+ }
236
+
237
+ .walking {
238
+ animation: walk 2s infinite linear;
239
+ }
240
+
241
+ /* Speech bubble */
242
+ .speech-bubble {
243
+ position: absolute;
244
+ background: #fff;
245
+ border-radius: 10px;
246
+ padding: 10px;
247
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
248
+ max-width: 200px;
249
+ font-size: 14px;
250
+ z-index: 10;
251
+ }
252
+
253
+ .speech-bubble:after {
254
+ content: '';
255
+ position: absolute;
256
+ bottom: -10px;
257
+ left: 20px;
258
+ border-width: 10px 10px 0;
259
+ border-style: solid;
260
+ border-color: #fff transparent;
261
+ }
262
+ </style>
263
+ </head>
264
+ <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
265
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-4xl">
266
+ <h1 class="text-4xl font-bold text-center mb-8 text-indigo-700">
267
+ <i class="fas fa-ghost mr-2"></i> Hangman Game <i class="fas fa-ghost ml-2"></i>
268
+ </h1>
269
+
270
+ <!-- Initial setup section -->
271
+ <div id="initial-setup" class="mb-8">
272
+ <h2 class="text-2xl font-semibold mb-4 text-gray-800">Game Setup</h2>
273
+ <div class="flex flex-col space-y-4">
274
+ <div>
275
+ <label for="word-count" class="block text-sm font-medium text-gray-700 mb-1">How many words do you want to play with?</label>
276
+ <input type="number" id="word-count" min="1" max="10" value="1" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
277
+ </div>
278
+ <button id="proceed-to-words" class="bg-indigo-600 text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition duration-200">
279
+ Proceed to Add Words <i class="fas fa-arrow-right ml-2"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Word input section (hidden initially) -->
285
+ <div id="word-input-section" class="mb-8 hidden">
286
+ <h2 class="text-2xl font-semibold mb-4 text-gray-800">Enter Your Words</h2>
287
+ <div id="word-inputs" class="mb-4">
288
+ <!-- Word inputs will be added here -->
289
+ </div>
290
+ <div>
291
+ <label for="hint" class="block text-sm font-medium text-gray-700 mb-1">Optional hint (category):</label>
292
+ <input type="text" id="hint" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. Animals, Countries, etc.">
293
+ </div>
294
+ <button id="start-game" class="mt-4 bg-indigo-600 text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition duration-200">
295
+ Start Game <i class="fas fa-play ml-2"></i>
296
+ </button>
297
+ </div>
298
+
299
+ <!-- Game section (hidden initially) -->
300
+ <div id="game-section" class="hidden">
301
+ <div class="flex flex-col md:flex-row gap-8">
302
+ <!-- Left side - Hangman display -->
303
+ <div class="w-full md:w-1/2">
304
+ <div class="bg-gray-50 p-6 rounded-lg shadow-inner relative">
305
+ <h2 class="text-xl font-semibold mb-4 text-center">Hangman</h2>
306
+ <div class="hangman-container">
307
+ <!-- Gallows structure -->
308
+ <div id="gallows-base" class="hangman-part"></div>
309
+ <div id="gallows-pole" class="hangman-part"></div>
310
+ <div id="gallows-top" class="hangman-part"></div>
311
+ <div id="gallows-rope" class="hangman-part"></div>
312
+
313
+ <!-- Hangman parts -->
314
+ <div id="head" class="hangman-part"></div>
315
+ <div id="face" class="hangman-part">
316
+ <div id="eye-left" class="hangman-part"></div>
317
+ <div id="eye-right" class="hangman-part"></div>
318
+ <div id="mouth" class="hangman-part"></div>
319
+ </div>
320
+ <div id="body" class="hangman-part"></div>
321
+ <div id="left-arm" class="hangman-part"></div>
322
+ <div id="right-arm" class="hangman-part"></div>
323
+ <div id="left-leg" class="hangman-part"></div>
324
+ <div id="right-leg" class="hangman-part"></div>
325
+ </div>
326
+
327
+ <div id="hangman-speech" class="speech-bubble hidden" style="bottom: -60px; left: 50px;"></div>
328
+
329
+ <div class="mt-6 text-center">
330
+ <p id="hint-display" class="text-gray-600 italic"></p>
331
+ <p id="remaining-guesses" class="text-lg font-medium mt-2">Remaining wrong guesses: <span class="text-indigo-600">5</span></p>
332
+ <p id="current-word" class="text-sm text-gray-500 mt-1">Word 1 of 1</p>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Right side - Word and keyboard -->
338
+ <div class="w-full md:w-1/2">
339
+ <div class="bg-gray-50 p-6 rounded-lg shadow-inner">
340
+ <h2 class="text-xl font-semibold mb-4 text-center">Guess the Word</h2>
341
+
342
+ <!-- Word display -->
343
+ <div id="word-display" class="flex justify-center gap-2 mb-8 flex-wrap"></div>
344
+
345
+ <!-- Keyboard -->
346
+ <div id="keyboard" class="grid grid-cols-7 gap-2">
347
+ <!-- Keyboard will be generated by JavaScript -->
348
+ </div>
349
+
350
+ <div class="mt-6 flex justify-center gap-4">
351
+ <button id="new-game" class="bg-gray-600 text-white px-4 py-2 rounded-md font-medium hover:bg-gray-700 transition duration-200">
352
+ <i class="fas fa-redo mr-2"></i> New Game
353
+ </button>
354
+ <button id="next-word" class="bg-indigo-600 text-white px-4 py-2 rounded-md font-medium hover:bg-indigo-700 transition duration-200 hidden">
355
+ Next Word <i class="fas fa-arrow-right ml-2"></i>
356
+ </button>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Game over modal -->
365
+ <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden modal">
366
+ <div class="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
367
+ <h2 id="game-result-title" class="text-3xl font-bold mb-4 text-center"></h2>
368
+ <p id="game-result-message" class="text-lg mb-6 text-center"></p>
369
+ <div class="flex justify-center">
370
+ <button id="play-again" class="bg-indigo-600 text-white px-6 py-2 rounded-md font-medium hover:bg-indigo-700 transition duration-200">
371
+ <i class="fas fa-play mr-2"></i> Play Again
372
+ </button>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <script>
378
+ document.addEventListener('DOMContentLoaded', function() {
379
+ // Game variables
380
+ let words = [];
381
+ let hint = '';
382
+ let currentWordIndex = 0;
383
+ let secretWord = '';
384
+ let guessedLetters = [];
385
+ let wrongGuesses = 0;
386
+ const maxWrongGuesses = 5;
387
+ const hangmanParts = ['head', 'face', 'body', 'left-arm', 'right-arm', 'left-leg', 'right-leg'];
388
+
389
+ // DOM elements
390
+ const initialSetup = document.getElementById('initial-setup');
391
+ const wordInputSection = document.getElementById('word-input-section');
392
+ const wordInputsContainer = document.getElementById('word-inputs');
393
+ const gameSection = document.getElementById('game-section');
394
+ const wordCountInput = document.getElementById('word-count');
395
+ const proceedToWordsBtn = document.getElementById('proceed-to-words');
396
+ const startGameBtn = document.getElementById('start-game');
397
+ const newGameBtn = document.getElementById('new-game');
398
+ const nextWordBtn = document.getElementById('next-word');
399
+ const playAgainBtn = document.getElementById('play-again');
400
+ const wordDisplay = document.getElementById('word-display');
401
+ const keyboard = document.getElementById('keyboard');
402
+ const hintDisplay = document.getElementById('hint-display');
403
+ const remainingGuesses = document.getElementById('remaining-guesses');
404
+ const currentWordDisplay = document.getElementById('current-word');
405
+ const gameOverModal = document.getElementById('game-over-modal');
406
+ const gameResultTitle = document.getElementById('game-result-title');
407
+ const gameResultMessage = document.getElementById('game-result-message');
408
+ const hangmanSpeech = document.getElementById('hangman-speech');
409
+
410
+ // Initialize the keyboard
411
+ function initKeyboard() {
412
+ keyboard.innerHTML = '';
413
+ const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
414
+
415
+ alphabet.forEach(letter => {
416
+ const key = document.createElement('div');
417
+ key.className = 'keyboard-key flex items-center justify-center bg-gray-200 rounded-md';
418
+ key.textContent = letter;
419
+ key.dataset.letter = letter;
420
+ key.addEventListener('click', () => handleGuess(letter));
421
+ keyboard.appendChild(key);
422
+ });
423
+ }
424
+
425
+ // Create word inputs based on word count
426
+ function createWordInputs() {
427
+ const wordCount = parseInt(wordCountInput.value);
428
+ wordInputsContainer.innerHTML = '';
429
+
430
+ for (let i = 0; i < wordCount; i++) {
431
+ const container = document.createElement('div');
432
+ container.className = 'word-input-container';
433
+
434
+ const input = document.createElement('input');
435
+ input.type = 'text';
436
+ input.className = 'w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500';
437
+ input.placeholder = `Word ${i + 1}`;
438
+ input.dataset.index = i;
439
+
440
+ container.appendChild(input);
441
+ wordInputsContainer.appendChild(container);
442
+ }
443
+
444
+ initialSetup.classList.add('hidden');
445
+ wordInputSection.classList.remove('hidden');
446
+ document.querySelector('.word-input-container input').focus();
447
+ }
448
+
449
+ // Start a new game
450
+ function startGame() {
451
+ // Collect all words
452
+ words = [];
453
+ const inputs = wordInputsContainer.querySelectorAll('input');
454
+ inputs.forEach(input => {
455
+ if (input.value.trim()) {
456
+ words.push(input.value.trim().toUpperCase());
457
+ }
458
+ });
459
+
460
+ if (words.length === 0) {
461
+ alert('Please enter at least one word to start the game!');
462
+ return;
463
+ }
464
+
465
+ hint = document.getElementById('hint').value.trim();
466
+
467
+ // Start with first word
468
+ currentWordIndex = 0;
469
+ setupWord();
470
+
471
+ // Hide setup, show game
472
+ wordInputSection.classList.add('hidden');
473
+ gameSection.classList.remove('hidden');
474
+
475
+ // Initialize keyboard
476
+ initKeyboard();
477
+
478
+ // Hide all hangman parts
479
+ hangmanParts.forEach(part => {
480
+ document.getElementById(part).style.display = 'none';
481
+ });
482
+
483
+ // Show gallows
484
+ document.getElementById('gallows-base').style.display = 'block';
485
+ document.getElementById('gallows-pole').style.display = 'block';
486
+ document.getElementById('gallows-top').style.display = 'block';
487
+ document.getElementById('gallows-rope').style.display = 'block';
488
+
489
+ // Update UI
490
+ hintDisplay.textContent = hint ? `Hint: ${hint}` : 'No hint provided';
491
+ currentWordDisplay.textContent = `Word ${currentWordIndex + 1} of ${words.length}`;
492
+
493
+ // Hide next word button if only one word
494
+ if (words.length === 1) {
495
+ nextWordBtn.classList.add('hidden');
496
+ } else {
497
+ nextWordBtn.classList.remove('hidden');
498
+ }
499
+ }
500
+
501
+ // Setup the current word
502
+ function setupWord() {
503
+ secretWord = words[currentWordIndex];
504
+ guessedLetters = [];
505
+ wrongGuesses = 0;
506
+
507
+ // Update UI
508
+ remainingGuesses.innerHTML = `Remaining wrong guesses: <span class="text-indigo-600">${maxWrongGuesses - wrongGuesses}</span>`;
509
+ currentWordDisplay.textContent = `Word ${currentWordIndex + 1} of ${words.length}`;
510
+
511
+ // Display word with blanks
512
+ updateWordDisplay();
513
+
514
+ // Reset keyboard
515
+ initKeyboard();
516
+
517
+ // Reset hangman
518
+ hangmanParts.forEach(part => {
519
+ document.getElementById(part).style.display = 'none';
520
+ });
521
+
522
+ // Show face
523
+ document.getElementById('face').style.display = 'block';
524
+ document.getElementById('eye-left').style.display = 'block';
525
+ document.getElementById('eye-right').style.display = 'block';
526
+ document.getElementById('mouth').style.display = 'block';
527
+
528
+ // Show speech bubble
529
+ showSpeech("Help me! Guess the word to save me!");
530
+ }
531
+
532
+ // Update the word display with guessed letters
533
+ function updateWordDisplay() {
534
+ wordDisplay.innerHTML = '';
535
+
536
+ secretWord.split('').forEach(letter => {
537
+ const tile = document.createElement('div');
538
+ tile.className = 'letter-tile';
539
+
540
+ if (guessedLetters.includes(letter) || letter === ' ') {
541
+ tile.textContent = letter;
542
+ } else if (letter === '-') {
543
+ tile.textContent = '-';
544
+ } else {
545
+ tile.textContent = '';
546
+ }
547
+
548
+ wordDisplay.appendChild(tile);
549
+ });
550
+
551
+ // Check if player has won
552
+ if (isWordGuessed()) {
553
+ wordCompleted();
554
+ }
555
+ }
556
+
557
+ // Handle a letter guess
558
+ function handleGuess(letter) {
559
+ const keyElement = document.querySelector(`.keyboard-key[data-letter="${letter}"]`);
560
+
561
+ // If letter was already guessed, do nothing
562
+ if (keyElement.classList.contains('used')) {
563
+ return;
564
+ }
565
+
566
+ // Mark letter as used
567
+ keyElement.classList.add('used');
568
+
569
+ // Check if letter is in the word
570
+ if (secretWord.includes(letter)) {
571
+ keyElement.classList.add('correct');
572
+ guessedLetters.push(letter);
573
+ updateWordDisplay();
574
+
575
+ // Show positive feedback
576
+ const correctCount = secretWord.split('').filter(l => l === letter).length;
577
+ showSpeech(`Thank you! ${correctCount} ${letter}'s found! You're one step closer to saving me!`);
578
+ } else {
579
+ keyElement.classList.add('wrong');
580
+ wrongGuesses++;
581
+ updateHangman();
582
+ remainingGuesses.innerHTML = `Remaining wrong guesses: <span class="text-indigo-600">${maxWrongGuesses - wrongGuesses}</span>`;
583
+
584
+ // Show negative feedback
585
+ showSpeech("Ouch! That's wrong! I'm dying here!");
586
+
587
+ // Check if player has lost
588
+ if (wrongGuesses >= maxWrongGuesses) {
589
+ endGame(false);
590
+ }
591
+ }
592
+ }
593
+
594
+ // Update the hangman display based on wrong guesses
595
+ function updateHangman() {
596
+ if (wrongGuesses > 0 && wrongGuesses <= hangmanParts.length) {
597
+ const partToShow = hangmanParts[wrongGuesses - 1];
598
+ document.getElementById(partToShow).style.display = 'block';
599
+
600
+ // Update face expression based on wrong guesses
601
+ if (wrongGuesses >= 3) {
602
+ document.getElementById('mouth').style.borderRadius = '0';
603
+ document.getElementById('mouth').style.height = '3px';
604
+ document.getElementById('mouth').style.width = '15px';
605
+ document.getElementById('mouth').style.top = '88px';
606
+ }
607
+ }
608
+ }
609
+
610
+ // Show speech bubble
611
+ function showSpeech(text) {
612
+ hangmanSpeech.textContent = text;
613
+ hangmanSpeech.classList.remove('hidden');
614
+
615
+ // Hide after 3 seconds
616
+ setTimeout(() => {
617
+ hangmanSpeech.classList.add('hidden');
618
+ }, 3000);
619
+ }
620
+
621
+ // Check if the entire word has been guessed
622
+ function isWordGuessed() {
623
+ return secretWord.split('').every(letter =>
624
+ guessedLetters.includes(letter) || letter === ' ' || letter === '-'
625
+ );
626
+ }
627
+
628
+ // Handle when a word is completed
629
+ function wordCompleted() {
630
+ // Free the hangman from the rope
631
+ document.getElementById('gallows-rope').style.display = 'none';
632
+
633
+ // Make the hangman walk
634
+ const hangman = document.querySelector('.hangman-container');
635
+ hangman.classList.add('walking');
636
+
637
+ // Show success message
638
+ showSpeech("You saved me! Thank you!");
639
+
640
+ // Check if there are more words
641
+ if (currentWordIndex < words.length - 1) {
642
+ // Show next word button
643
+ nextWordBtn.classList.remove('hidden');
644
+ } else {
645
+ // All words completed
646
+ endGame(true);
647
+ }
648
+ }
649
+
650
+ // Move to next word
651
+ function nextWord() {
652
+ // Stop walking animation
653
+ const hangman = document.querySelector('.hangman-container');
654
+ hangman.classList.remove('walking');
655
+
656
+ // Show rope again
657
+ document.getElementById('gallows-rope').style.display = 'block';
658
+
659
+ // Move to next word
660
+ currentWordIndex++;
661
+ setupWord();
662
+
663
+ // Hide next word button if last word
664
+ if (currentWordIndex === words.length - 1) {
665
+ nextWordBtn.classList.add('hidden');
666
+ }
667
+ }
668
+
669
+ // End the game (win or lose)
670
+ function endGame(isWin) {
671
+ // Stop walking animation if any
672
+ const hangman = document.querySelector('.hangman-container');
673
+ hangman.classList.remove('walking');
674
+
675
+ if (isWin) {
676
+ gameResultTitle.textContent = 'You Win!';
677
+ gameResultTitle.className = 'text-3xl font-bold mb-4 text-center text-green-600';
678
+ gameResultMessage.textContent = `Congratulations! You guessed all ${words.length} words!`;
679
+ } else {
680
+ gameResultTitle.textContent = 'Game Over';
681
+ gameResultTitle.className = 'text-3xl font-bold mb-4 text-center text-red-600';
682
+ gameResultMessage.textContent = `The word was "${secretWord}". Better luck next time!`;
683
+
684
+ // Reveal all letters in the word
685
+ secretWord.split('').forEach(letter => {
686
+ if (!guessed
687
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ On the start of the Game Please ask user how many Words He/she wanted to ask? Based on that you will need to make give him an option to add those words, Also you will need to make a really simulation of the hangman with more realistic Looks, When someone do a wrong guess The Simulated man needs to Alert with "I am Daying" On every single Correct Guess The Hangman Needs to Comment Thanks for saving me You are On step Closed. Also on the successfull Guessing of the word hangman should be free from ROPE and Start walking.