Hugging Face's logo

Spaces:
ThetaPhiPsi
/
noras-hangman
Running

App Files Community
ThetaPhiPsi commited on
Commit
7dda9ee
·
verified ·
1 Parent(s): 42c3ce8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +431 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Noras Hangman
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: noras-hangman
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,431 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Noras Wortratespiel</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-part {
11
+ opacity: 0;
12
+ transition: opacity 0.3s ease;
13
+ }
14
+ .hangman-part.visible {
15
+ opacity: 1;
16
+ }
17
+ .letter-tile {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .letter-tile:hover:not(.guessed) {
21
+ transform: scale(1.1);
22
+ box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
23
+ }
24
+ @keyframes bounce {
25
+ 0%, 100% { transform: translateY(0); }
26
+ 50% { transform: translateY(-10px); }
27
+ }
28
+ .bounce {
29
+ animation: bounce 0.5s;
30
+ }
31
+ .confetti {
32
+ position: absolute;
33
+ width: 10px;
34
+ height: 10px;
35
+ background-color: #f00;
36
+ opacity: 0;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans">
41
+ <header class="w-full bg-blue-600 text-white py-4 shadow-md">
42
+ <div class="container mx-auto px-4">
43
+ <h1 class="text-3xl font-bold text-center">Noras Wortratespiel</h1>
44
+ </div>
45
+ </header>
46
+
47
+ <main class="container mx-auto px-4 py-8 flex-grow flex flex-col items-center">
48
+ <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 mb-8">
49
+ <div class="flex flex-col md:flex-row gap-8">
50
+ <!-- Hangman Drawing -->
51
+ <div class="w-full md:w-1/2 flex flex-col items-center">
52
+ <div class="relative w-48 h-48 mb-6">
53
+ <!-- Gallows -->
54
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800"></div>
55
+ <div class="absolute top-0 left-1/4 w-1/2 h-1 bg-gray-800"></div>
56
+ <div class="absolute top-0 left-1/4 w-1 h-48 bg-gray-800"></div>
57
+ <div class="absolute bottom-0 left-0 w-32 h-1 bg-gray-800"></div>
58
+
59
+ <!-- Hangman Parts -->
60
+ <div id="head" class="hangman-part absolute top-8 left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full border-4 border-gray-800"></div>
61
+ <div id="body" class="hangman-part absolute top-18 left-1/2 transform -translate-x-1/2 w-1 h-12 bg-gray-800"></div>
62
+ <div id="left-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top rotate-45"></div>
63
+ <div id="right-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-45"></div>
64
+ <div id="left-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top rotate-30"></div>
65
+ <div id="right-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-30"></div>
66
+ <div id="face" class="hangman-part absolute top-10 left-1/2 transform -translate-x-1/2 flex justify-between w-6">
67
+ <div class="w-2 h-2 rounded-full bg-gray-800"></div>
68
+ <div class="w-2 h-2 rounded-full bg-gray-800"></div>
69
+ </div>
70
+ <div id="mouth" class="hangman-part absolute top-14 left-1/2 transform -translate-x-1/2 w-4 h-1 bg-gray-800 rounded-full"></div>
71
+ </div>
72
+
73
+ <div class="text-center">
74
+ <p class="text-lg font-semibold mb-2">Fehler: <span id="mistakes">0</span>/8</p>
75
+ <div class="w-full bg-gray-200 rounded-full h-4">
76
+ <div id="progress-bar" class="bg-green-500 h-4 rounded-full" style="width: 100%"></div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Game Area -->
82
+ <div class="w-full md:w-1/2 flex flex-col">
83
+ <div class="mb-6">
84
+ <p class="text-gray-600 mb-2">Kategorie: <span id="category" class="font-semibold">Tiere</span></p>
85
+ <div id="word-display" class="flex justify-center gap-2 mb-6 flex-wrap"></div>
86
+ </div>
87
+
88
+ <div class="mb-6">
89
+ <p class="text-gray-600 mb-2">Verfügbare Buchstaben:</p>
90
+ <div id="keyboard" class="flex flex-wrap gap-2 justify-center"></div>
91
+ </div>
92
+
93
+ <div id="hint-area" class="mb-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200 hidden">
94
+ <p class="text-yellow-800 font-medium"><i class="fas fa-lightbulb mr-2"></i>Tipp: <span id="hint-text"></span></p>
95
+ </div>
96
+
97
+ <button id="hint-button" class="mb-6 bg-yellow-400 hover:bg-yellow-500 text-yellow-800 font-medium py-2 px-4 rounded-lg transition-colors">
98
+ <i class="fas fa-lightbulb mr-2"></i>Tipp anzeigen
99
+ </button>
100
+
101
+ <div id="message" class="hidden mb-4 p-3 rounded-lg text-center font-bold"></div>
102
+
103
+ <button id="new-game-button" class="mt-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors hidden">
104
+ Neues Spiel starten
105
+ </button>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6">
111
+ <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2>
112
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
113
+ <div class="bg-blue-100 p-4 rounded-lg">
114
+ <div class="flex items-center mb-2">
115
+ <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div>
116
+ <h3 class="font-semibold">Wort erraten</h3>
117
+ </div>
118
+ <p class="text-gray-700">Klicke auf die Buchstaben, um das geheime Wort zu erraten.</p>
119
+ </div>
120
+ <div class="bg-green-100 p-4 rounded-lg">
121
+ <div class="flex items-center mb-2">
122
+ <div class="bg-green-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
123
+ <h3 class="font-semibold">Achtung Fehler</h3>
124
+ </div>
125
+ <p class="text-gray-700">Jeder falsche Buchstabe bringt den Strichmännchen näher zum Galgen.</p>
126
+ </div>
127
+ <div class="bg-yellow-100 p-4 rounded-lg">
128
+ <div class="flex items-center mb-2">
129
+ <div class="bg-yellow-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
130
+ <h3 class="font-semibold">Tipps nutzen</h3>
131
+ </div>
132
+ <p class="text-gray-700">Wenn du nicht weiter weißt, klicke auf den Tipp-Button für Hilfe.</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </main>
137
+
138
+ <footer class="w-full bg-blue-600 text-white py-4 mt-8">
139
+ <div class="container mx-auto px-4 text-center">
140
+ <p>Viel Spaß beim Spielen, liebe Nora! ❤️</p>
141
+ </div>
142
+ </footer>
143
+
144
+ <script>
145
+ document.addEventListener('DOMContentLoaded', function() {
146
+ // Game words with categories and hints (easy German words)
147
+ const wordCategories = {
148
+ tiere: {
149
+ name: "Tiere",
150
+ words: [
151
+ { word: "HUND", hint: "Bellt und ist der beste Freund des Menschen" },
152
+ { word: "KATZE", hint: "Schnurrt und hat weiche Pfoten" },
153
+ { word: "FISCH", hint: "Schwimmt im Wasser und atmet durch Kiemen" },
154
+ { word: "VOGEL", hint: "Hat Federn und kann fliegen" },
155
+ { word: "MAUS", hint: "Klein, schnell und mag Käse" }
156
+ ]
157
+ },
158
+ schule: {
159
+ name: "Schule",
160
+ words: [
161
+ { word: "BUCH", hint: "Hat viele Seiten mit Geschichten oder Wissen" },
162
+ { word: "STIFT", hint: "Damit schreibt oder malt man" },
163
+ { word: "TASCHE", hint: "Trägt man auf dem Rücken mit Schulmaterial" },
164
+ { word: "LEHRER", hint: "Bringt Kindern etwas bei" },
165
+ { word: "KREIDE", hint: "Damit schreibt man an die Tafel" }
166
+ ]
167
+ },
168
+ spielzeug: {
169
+ name: "Spielzeug",
170
+ words: [
171
+ { word: "BALL", hint: "Rund und man kann damit werfen oder kicken" },
172
+ { word: "PUPPE", hint: "Sieht aus wie ein Baby oder eine Person" },
173
+ { word: "AUTO", hint: "Hat Räder und man kann es schieben" },
174
+ { word: "BAUER", hint: "Damit kann man Türme und Häuser bauen" },
175
+ { word: "PUZZLE", hint: "Viele Teile, die zusammengesetzt werden müssen" }
176
+ ]
177
+ }
178
+ };
179
+
180
+ // Game state
181
+ let currentWord = "";
182
+ let guessedLetters = [];
183
+ let mistakes = 0;
184
+ let maxMistakes = 8;
185
+ let hintUsed = false;
186
+ let currentCategory = "";
187
+ let gameActive = true;
188
+
189
+ // DOM elements
190
+ const wordDisplay = document.getElementById('word-display');
191
+ const keyboard = document.getElementById('keyboard');
192
+ const mistakesDisplay = document.getElementById('mistakes');
193
+ const progressBar = document.getElementById('progress-bar');
194
+ const message = document.getElementById('message');
195
+ const newGameButton = document.getElementById('new-game-button');
196
+ const hintButton = document.getElementById('hint-button');
197
+ const hintArea = document.getElementById('hint-area');
198
+ const hintText = document.getElementById('hint-text');
199
+ const categoryDisplay = document.getElementById('category');
200
+ const hangmanParts = [
201
+ 'head', 'body', 'left-arm', 'right-arm',
202
+ 'left-leg', 'right-leg', 'face', 'mouth'
203
+ ];
204
+
205
+ // Initialize the game
206
+ function initGame() {
207
+ // Reset game state
208
+ guessedLetters = [];
209
+ mistakes = 0;
210
+ hintUsed = false;
211
+ gameActive = true;
212
+
213
+ // Clear displays
214
+ wordDisplay.innerHTML = '';
215
+ keyboard.innerHTML = '';
216
+ message.classList.add('hidden');
217
+ newGameButton.classList.add('hidden');
218
+ hintArea.classList.add('hidden');
219
+
220
+ // Reset hangman
221
+ hangmanParts.forEach(part => {
222
+ document.getElementById(part).classList.remove('visible');
223
+ });
224
+
225
+ // Select a random category
226
+ const categories = Object.keys(wordCategories);
227
+ currentCategory = categories[Math.floor(Math.random() * categories.length)];
228
+ categoryDisplay.textContent = wordCategories[currentCategory].name;
229
+
230
+ // Select a random word from the category
231
+ const words = wordCategories[currentCategory].words;
232
+ const randomWordObj = words[Math.floor(Math.random() * words.length)];
233
+ currentWord = randomWordObj.word;
234
+ hintText.textContent = randomWordObj.hint;
235
+
236
+ // Update UI
237
+ updateMistakesDisplay();
238
+ createWordDisplay();
239
+ createKeyboard();
240
+ }
241
+
242
+ // Create the word display with blanks
243
+ function createWordDisplay() {
244
+ wordDisplay.innerHTML = '';
245
+ for (let i = 0; i < currentWord.length; i++) {
246
+ const letter = currentWord[i];
247
+ const letterElement = document.createElement('div');
248
+ letterElement.className = 'w-10 h-10 flex items-center justify-center text-2xl font-bold border-b-2 border-gray-800';
249
+
250
+ if (guessedLetters.includes(letter)) {
251
+ letterElement.textContent = letter;
252
+ letterElement.classList.add('text-blue-600');
253
+ } else {
254
+ letterElement.textContent = ' ';
255
+ }
256
+
257
+ wordDisplay.appendChild(letterElement);
258
+ }
259
+ }
260
+
261
+ // Create the keyboard
262
+ function createKeyboard() {
263
+ const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ'.split('');
264
+
265
+ letters.forEach(letter => {
266
+ const button = document.createElement('button');
267
+ button.textContent = letter;
268
+ button.className = 'letter-tile w-10 h-10 flex items-center justify-center bg-blue-100 hover:bg-blue-200 text-blue-800 font-bold rounded-lg transition-all';
269
+
270
+ if (guessedLetters.includes(letter)) {
271
+ button.classList.add('guessed');
272
+ button.classList.remove('bg-blue-100', 'hover:bg-blue-200');
273
+ button.classList.add('bg-gray-200', 'cursor-not-allowed');
274
+ }
275
+
276
+ button.addEventListener('click', () => handleLetterClick(letter, button));
277
+ keyboard.appendChild(button);
278
+ });
279
+ }
280
+
281
+ // Handle letter clicks
282
+ function handleLetterClick(letter, button) {
283
+ if (!gameActive || guessedLetters.includes(letter)) return;
284
+
285
+ guessedLetters.push(letter);
286
+ button.classList.add('guessed');
287
+ button.classList.remove('bg-blue-100', 'hover:bg-blue-200');
288
+ button.classList.add('bg-gray-200', 'cursor-not-allowed');
289
+
290
+ if (currentWord.includes(letter)) {
291
+ // Correct guess
292
+ button.classList.remove('bg-gray-200');
293
+ button.classList.add('bg-green-100', 'text-green-800');
294
+ button.classList.add('bounce');
295
+ setTimeout(() => button.classList.remove('bounce'), 500);
296
+
297
+ createWordDisplay();
298
+ checkWin();
299
+ } else {
300
+ // Wrong guess
301
+ button.classList.remove('bg-gray-200');
302
+ button.classList.add('bg-red-100', 'text-red-800');
303
+ button.classList.add('bounce');
304
+ setTimeout(() => button.classList.remove('bounce'), 500);
305
+
306
+ mistakes++;
307
+ updateMistakesDisplay();
308
+ showHangmanPart();
309
+ checkLose();
310
+ }
311
+ }
312
+
313
+ // Show the next hangman part
314
+ function showHangmanPart() {
315
+ if (mistakes <= hangmanParts.length) {
316
+ const part = hangmanParts[mistakes - 1];
317
+ document.getElementById(part).classList.add('visible');
318
+ }
319
+ }
320
+
321
+ // Update mistakes display
322
+ function updateMistakesDisplay() {
323
+ mistakesDisplay.textContent = mistakes;
324
+ const progressPercentage = 100 - (mistakes / maxMistakes * 100);
325
+ progressBar.style.width = `${progressPercentage}%`;
326
+
327
+ if (mistakes >= 5) {
328
+ progressBar.classList.remove('bg-green-500');
329
+ progressBar.classList.add('bg-yellow-500');
330
+ }
331
+
332
+ if (mistakes >= 7) {
333
+ progressBar.classList.remove('bg-yellow-500');
334
+ progressBar.classList.add('bg-red-500');
335
+ }
336
+ }
337
+
338
+ // Check if player won
339
+ function checkWin() {
340
+ const wordGuessed = currentWord.split('').every(letter => guessedLetters.includes(letter));
341
+
342
+ if (wordGuessed) {
343
+ gameActive = false;
344
+ message.textContent = 'Herzlichen Glückwunsch! Du hast gewonnen! 🎉';
345
+ message.classList.remove('hidden');
346
+ message.classList.add('bg-green-100', 'text-green-800');
347
+ newGameButton.classList.remove('hidden');
348
+ createConfetti();
349
+ }
350
+ }
351
+
352
+ // Check if player lost
353
+ function checkLose() {
354
+ if (mistakes >= maxMistakes) {
355
+ gameActive = false;
356
+ message.textContent = `Schade! Das Wort war: ${currentWord}`;
357
+ message.classList.remove('hidden');
358
+ message.classList.add('bg-red-100', 'text-red-800');
359
+ newGameButton.classList.remove('hidden');
360
+
361
+ // Reveal the word
362
+ revealWord();
363
+ }
364
+ }
365
+
366
+ // Reveal the word when game is lost
367
+ function revealWord() {
368
+ wordDisplay.innerHTML = '';
369
+ for (let i = 0; i < currentWord.length; i++) {
370
+ const letter = currentWord[i];
371
+ const letterElement = document.createElement('div');
372
+ letterElement.className = 'w-10 h-10 flex items-center justify-center text-2xl font-bold border-b-2 border-gray-800';
373
+ letterElement.textContent = letter;
374
+
375
+ if (guessedLetters.includes(letter)) {
376
+ letterElement.classList.add('text-blue-600');
377
+ } else {
378
+ letterElement.classList.add('text-red-600');
379
+ }
380
+
381
+ wordDisplay.appendChild(letterElement);
382
+ }
383
+ }
384
+
385
+ // Show hint
386
+ hintButton.addEventListener('click', function() {
387
+ if (!hintUsed && gameActive) {
388
+ hintArea.classList.remove('hidden');
389
+ hintButton.classList.add('hidden');
390
+ hintUsed = true;
391
+ }
392
+ });
393
+
394
+ // New game button
395
+ newGameButton.addEventListener('click', initGame);
396
+
397
+ // Create confetti effect
398
+ function createConfetti() {
399
+ const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
400
+ const container = document.querySelector('main');
401
+
402
+ for (let i = 0; i < 100; i++) {
403
+ const confetti = document.createElement('div');
404
+ confetti.className = 'confetti';
405
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
406
+ confetti.style.left = `${Math.random() * 100}%`;
407
+ confetti.style.top = '-10px';
408
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
409
+
410
+ container.appendChild(confetti);
411
+
412
+ setTimeout(() => {
413
+ confetti.style.opacity = '1';
414
+ confetti.style.top = `${Math.random() * 100}%`;
415
+ confetti.style.left = `${Math.random() * 100}%`;
416
+ confetti.style.transition = `all ${3 + Math.random() * 5}s ease-out`;
417
+
418
+ setTimeout(() => {
419
+ confetti.style.opacity = '0';
420
+ setTimeout(() => confetti.remove(), 1000);
421
+ }, 3000);
422
+ }, 0);
423
+ }
424
+ }
425
+
426
+ // Start the game
427
+ initGame();
428
+ });
429
+ </script>
430
+ <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=ThetaPhiPsi/noras-hangman" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
431
+ </html>