Spaces:

ThetaPhiPsi
/

noras-hangman

Running

App Files Files Community

ThetaPhiPsi commited on Apr 13

Commit

a35d7b3

verified ·

1 Parent(s): 6a4c654

Add 1 files

Browse files

Files changed (1) hide show

index.html +152 -8

index.html CHANGED Viewed

@@ -44,6 +44,16 @@
         .sad-face {
             transform: rotate(180deg);
         }
     </style>
 </head>
 <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans">
@@ -54,7 +64,7 @@
     </header>
     <main class="container mx-auto px-4 py-8 flex-grow flex flex-col items-center">
-        <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 mb-8">
             <div class="flex flex-col md:flex-row gap-8">
                 <!-- Hangman Drawing -->
                 <div class="w-full md:w-1/2 flex flex-col items-center">
@@ -92,6 +102,7 @@
                 <div class="w-full md:w-1/2 flex flex-col">
                     <div class="mb-6">
                         <p class="text-gray-600 mb-2">Kategorie: <span id="category" class="font-semibold">Tiere</span></p>
                         <div id="word-display" class="flex justify-center gap-2 mb-6 flex-wrap"></div>
                     </div>
@@ -111,7 +122,7 @@
                     <div id="message" class="hidden mb-4 p-3 rounded-lg text-center font-bold"></div>
                     <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">
-                        Neues Spiel starten
                     </button>
                 </div>
             </div>
@@ -146,6 +157,46 @@
             </div>
         </div>
         <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6">
             <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -292,6 +343,16 @@
             let gameHistory = JSON.parse(localStorage.getItem('norasGameHistory')) || [];
             let wins = 0;
             let losses = 0;
             // DOM elements
             const wordDisplay = document.getElementById('word-display');
@@ -318,6 +379,16 @@
             const wrongSound = document.getElementById('wrong-sound');
             const winSound = document.getElementById('win-sound');
             const loseSound = document.getElementById('lose-sound');
             // Initialize the game
             function initGame() {
@@ -344,17 +415,33 @@
                 face.classList.remove('sad-face');
                 face.classList.add('happy-face');
-                // Select a random category
-                const categories = Object.keys(wordCategories);
-                currentCategory = categories[Math.floor(Math.random() * categories.length)];
                 categoryDisplay.textContent = wordCategories[currentCategory].name;
-                // Select a random word from the category
-                const words = wordCategories[currentCategory].words;
-                const randomWordObj = words[Math.floor(Math.random() * words.length)];
                 currentWord = randomWordObj.word;
                 hintText.textContent = randomWordObj.hint;
                 // Update UI
                 updateMistakesDisplay();
                 createWordDisplay();
@@ -489,6 +576,9 @@
                     winSound.currentTime = 0;
                     winSound.play();
                     // Add to game history
                     addToGameHistory(true);
                     createConfetti();
@@ -508,6 +598,11 @@
                     loseSound.currentTime = 0;
                     loseSound.play();
                     // Add to game history
                     addToGameHistory(false);
@@ -554,6 +649,7 @@
                 // Save to localStorage
                 localStorage.setItem('norasGameHistory', JSON.stringify(gameHistory));
                 // Update stats
                 updateStats();
@@ -592,6 +688,39 @@
                 lossesDisplay.textContent = losses;
             }
             // Show hint
             hintButton.addEventListener('click', function() {
                 if (!hintUsed && gameActive) {
@@ -604,6 +733,13 @@
             // New game button
             newGameButton.addEventListener('click', initGame);
             // Toggle game history visibility
             toggleHistoryButton.addEventListener('click', function() {
                 if (gameHistorySection.classList.contains('hidden')) {
@@ -644,6 +780,14 @@
                 }
             }
             // Start the game
             initGame();
             updateStats();

         .sad-face {
             transform: rotate(180deg);
         }
+        .final-stats {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            border-radius: 1rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .progress-ring {
+            transition: stroke-dashoffset 0.5s;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
     </style>
 </head>
 <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans">
     </header>
     <main class="container mx-auto px-4 py-8 flex-grow flex flex-col items-center">
+        <div id="game-container" class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 mb-8">
             <div class="flex flex-col md:flex-row gap-8">
                 <!-- Hangman Drawing -->
                 <div class="w-full md:w-1/2 flex flex-col items-center">
                 <div class="w-full md:w-1/2 flex flex-col">
                     <div class="mb-6">
                         <p class="text-gray-600 mb-2">Kategorie: <span id="category" class="font-semibold">Tiere</span></p>
+                        <p class="text-gray-600 mb-2">Wörter übrig: <span id="words-left" class="font-semibold">10</span></p>
                         <div id="word-display" class="flex justify-center gap-2 mb-6 flex-wrap"></div>
                     </div>
                     <div id="message" class="hidden mb-4 p-3 rounded-lg text-center font-bold"></div>
                     <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">
+                        Nächstes Wort
                     </button>
                 </div>
             </div>
             </div>
         </div>
+        <!-- Final Statistics -->
+        <div id="final-stats" class="w-full max-w-4xl final-stats p-8 mb-8 hidden">
+            <h2 class="text-3xl font-bold text-center mb-6">Spiel beendet! 🎉</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+                <div>
+                    <h3 class="text-xl font-semibold mb-4">Zusammenfassung</h3>
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-700">Gewonnene Spiele:</span>
+                            <span id="final-wins" class="font-bold text-green-600">0</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-700">Verlorene Spiele:</span>
+                            <span id="final-losses" class="font-bold text-red-600">0</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-700">Wörter erraten:</span>
+                            <span id="words-guessed" class="font-bold text-blue-600">0/0</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <span class="text-gray-700">Durchschnittliche Fehler:</span>
+                            <span id="avg-mistakes" class="font-bold text-purple-600">0</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col items-center">
+                    <svg width="200" height="200" viewBox="0 0 200 200" class="mb-4">
+                        <circle cx="100" cy="100" r="90" fill="none" stroke="#e5e7eb" stroke-width="10"/>
+                        <circle id="win-ring" cx="100" cy="100" r="90" fill="none" stroke="#10b981" stroke-width="10" stroke-dasharray="565.48" stroke-dashoffset="565.48" class="progress-ring"/>
+                    </svg>
+                    <p class="text-center text-gray-700">Erfolgsquote: <span id="success-rate" class="font-bold">0</span>%</p>
+                </div>
+            </div>
+            <div class="mt-8 text-center">
+                <button id="restart-game-button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+                    <i class="fas fa-redo mr-2"></i>Neues Spiel starten
+                </button>
+            </div>
+        </div>
         <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6">
             <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
             let gameHistory = JSON.parse(localStorage.getItem('norasGameHistory')) || [];
             let wins = 0;
             let losses = 0;
+            let usedWords = {};
+            let wordsLeft = 0;
+            // Initialize usedWords object
+            function initUsedWords() {
+                usedWords = {};
+                for (const category in wordCategories) {
+                    usedWords[category] = [];
+                }
+            }
             // DOM elements
             const wordDisplay = document.getElementById('word-display');
             const wrongSound = document.getElementById('wrong-sound');
             const winSound = document.getElementById('win-sound');
             const loseSound = document.getElementById('lose-sound');
+            const wordsLeftDisplay = document.getElementById('words-left');
+            const finalStatsSection = document.getElementById('final-stats');
+            const finalWinsDisplay = document.getElementById('final-wins');
+            const finalLossesDisplay = document.getElementById('final-losses');
+            const wordsGuessedDisplay = document.getElementById('words-guessed');
+            const avgMistakesDisplay = document.getElementById('avg-mistakes');
+            const successRateDisplay = document.getElementById('success-rate');
+            const restartGameButton = document.getElementById('restart-game-button');
+            const winRing = document.getElementById('win-ring');
+            const gameContainer = document.getElementById('game-container');
             // Initialize the game
             function initGame() {
                 face.classList.remove('sad-face');
                 face.classList.add('happy-face');
+                // Select a random category that still has words left
+                const availableCategories = Object.keys(wordCategories).filter(category => {
+                    return wordCategories[category].words.length > usedWords[category].length;
+                });
+                // If no categories have words left, show final stats
+                if (availableCategories.length === 0) {
+                    showFinalStats();
+                    return;
+                }
+                currentCategory = availableCategories[Math.floor(Math.random() * availableCategories.length)];
                 categoryDisplay.textContent = wordCategories[currentCategory].name;
+                // Select a random word from the category that hasn't been used yet
+                const availableWords = wordCategories[currentCategory].words.filter(wordObj => {
+                    return !usedWords[currentCategory].includes(wordObj.word);
+                });
+                const randomWordObj = availableWords[Math.floor(Math.random() * availableWords.length)];
                 currentWord = randomWordObj.word;
                 hintText.textContent = randomWordObj.hint;
+                // Update words left display
+                wordsLeft = wordCategories[currentCategory].words.length - usedWords[currentCategory].length - 1;
+                wordsLeftDisplay.textContent = wordsLeft;
                 // Update UI
                 updateMistakesDisplay();
                 createWordDisplay();
                     winSound.currentTime = 0;
                     winSound.play();
+                    // Mark word as used
+                    usedWords[currentCategory].push(currentWord);
                     // Add to game history
                     addToGameHistory(true);
                     createConfetti();
                     loseSound.currentTime = 0;
                     loseSound.play();
+                    // Mark word as used (only if not already marked)
+                    if (!usedWords[currentCategory].includes(currentWord)) {
+                        usedWords[currentCategory].push(currentWord);
+                    }
                     // Add to game history
                     addToGameHistory(false);
                 // Save to localStorage
                 localStorage.setItem('norasGameHistory', JSON.stringify(gameHistory));
+                localStorage.setItem('norasUsedWords', JSON.stringify(usedWords));
                 // Update stats
                 updateStats();
                 lossesDisplay.textContent = losses;
             }
+            // Show final statistics
+            function showFinalStats() {
+                gameContainer.classList.add('hidden');
+                finalStatsSection.classList.remove('hidden');
+                const totalGames = wins + losses;
+                const successRate = totalGames > 0 ? Math.round((wins / totalGames) * 100) : 0;
+                const totalMistakes = gameHistory.reduce((sum, game) => sum + game.mistakes, 0);
+                const avgMistakes = totalGames > 0 ? (totalMistakes / totalGames).toFixed(1) : 0;
+                // Calculate total words guessed
+                let totalWords = 0;
+                let guessedWords = 0;
+                for (const category in wordCategories) {
+                    totalWords += wordCategories[category].words.length;
+                    guessedWords += usedWords[category].length;
+                }
+                finalWinsDisplay.textContent = wins;
+                finalLossesDisplay.textContent = losses;
+                wordsGuessedDisplay.textContent = `${guessedWords}/${totalWords}`;
+                avgMistakesDisplay.textContent = avgMistakes;
+                successRateDisplay.textContent = successRate;
+                // Animate the progress ring
+                const circumference = 2 * Math.PI * 90;
+                const offset = circumference - (successRate / 100) * circumference;
+                winRing.style.strokeDashoffset = offset;
+                // Reset used words for a new game
+                initUsedWords();
+            }
             // Show hint
             hintButton.addEventListener('click', function() {
                 if (!hintUsed && gameActive) {
             // New game button
             newGameButton.addEventListener('click', initGame);
+            // Restart game button (from final stats)
+            restartGameButton.addEventListener('click', function() {
+                finalStatsSection.classList.add('hidden');
+                gameContainer.classList.remove('hidden');
+                initGame();
+            });
             // Toggle game history visibility
             toggleHistoryButton.addEventListener('click', function() {
                 if (gameHistorySection.classList.contains('hidden')) {
                 }
             }
+            // Load used words from localStorage
+            const savedUsedWords = localStorage.getItem('norasUsedWords');
+            if (savedUsedWords) {
+                usedWords = JSON.parse(savedUsedWords);
+            } else {
+                initUsedWords();
+            }
             // Start the game
             initGame();
             updateStats();