- minor clean up

TobiasMue91 · TobiasMue91 · commit fdb568e5b69d · 2024-08-04T19:51:10.000+02:00
diff --git a/games/death_by_ai.html b/games/death_by_ai.html
@@ -19,25 +19,13 @@
 <body class="bg-gradient-to-r from-gray-900 to-black text-white min-h-screen flex items-center justify-center">
 <div id="appContainer" class="container mx-auto p-4 max-w-2xl"></div>
 <script>const appContainer = document.getElementById('appContainer');
-let currentRound = 0;
-let playerScore = 0;
-let streak = 0;
-let difficulty = 'medium';
-let playerName = '';
-let playerAvatar = '😀';
-let timerInterval;
-let timeLeft = 60;
-let xp = 0;
-let scenarioType = 'AI generated';
-let isSpeedrun = false;
-let speedrunTime = 0;
-let speedrunInterval;
-let roundStartTime;
-let totalSpeedrunTime = 0;
-const backgrounds = ['from-gray-900 to-black', 'from-blue-900 to-black', 'from-green-900 to-black', 'from-red-900 to-black', 'from-purple-900 to-black'];
-const randomUsernames = ['SurvivalGuru', 'LuckyEscaper', 'DeathDefier', 'ChanceChaser', 'FateChallenger', 'RiskTaker', 'DangerDodger', 'ThrillerThriver', 'AdventureAce', 'PerilPro'];
-const scenarioTopics = ['Natural Disaster', 'Wildlife Encounter', 'Urban Emergency', 'Historical Event', 'Sci-Fi Situation', 'Supernatural Occurrence', 'Medical Crisis', 'Extreme Sport Accident', 'Espionage Mission', 'Post-Apocalyptic Scenario', 'Ancient Civilization Discovery', 'Virtual Reality Glitch', 'Time Travel Mishap', 'Underwater Exploration', 'Space Exploration Crisis', 'Parallel Universe Incident', 'Mythological Creature Encounter', 'Psychological Thriller', 'Haunted Location', 'Survival Game Show'];
-const avatars = ['😀', '😎', '🤠', '🧐', '🥸', '🤓', '👻', '💀', '👽', '🤖', '🦸', '🧙', '🧛', '🧟', '🥷', '🦹', '🧑‍🚀', '🧝', '🧞', '🧜'];
+let currentRound = 0, playerScore = 0, streak = 0, difficulty = 'medium', playerName = '', playerAvatar = '😀',
+    timerInterval, timeLeft = 60, xp = 0, scenarioType = 'AI generated', isSpeedrun = false, roundStartTime,
+    totalSpeedrunTime = 0;
+const backgrounds = ['from-gray-900 to-black', 'from-blue-900 to-black', 'from-green-900 to-black', 'from-red-900 to-black', 'from-purple-900 to-black'],
+    randomUsernames = ['SurvivalGuru', 'LuckyEscaper', 'DeathDefier', 'ChanceChaser', 'FateChallenger', 'RiskTaker', 'DangerDodger', 'ThrillerThriver', 'AdventureAce', 'PerilPro'],
+    scenarioTopics = ['Natural Disaster', 'Wildlife Encounter', 'Urban Emergency', 'Historical Event', 'Sci-Fi Situation', 'Supernatural Occurrence', 'Medical Crisis', 'Extreme Sport Accident', 'Espionage Mission', 'Post-Apocalyptic Scenario', 'Ancient Civilization Discovery', 'Virtual Reality Glitch', 'Time Travel Mishap', 'Underwater Exploration', 'Space Exploration Crisis', 'Parallel Universe Incident', 'Mythological Creature Encounter', 'Psychological Thriller', 'Haunted Location', 'Survival Game Show'],
+    avatars = ['😀', '😎', '🤠', '🧐', '🥸', '🤓', '👻', '💀', '👽', '🤖', '🦸', '🧙', '🧛', '🧟', '🥷', '🦹', '🧑‍🚀', '🧝', '🧞', '🧜'];
 
 function startGame() {
     currentRound = 0;
@@ -49,7 +37,7 @@
 
 function renderCharacterCreation() {
     const unlockedAvatars = avatars.slice(0, Math.min(10 + Math.floor(xp / 100), avatars.length));
-    appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg"><h2 class="text-3xl mb-4 text-green-400 font-bold">Create Your Character</h2><input id="player-name" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full mb-4" placeholder="Enter your name (optional)" value="${randomUsernames[Math.floor(Math.random() * randomUsernames.length)]}"><div class="mb-4"><label class="block mb-2 font-semibold">Choose your avatar:</label><div class="flex justify-center flex-wrap">${avatars.map((emoji, index) => `<button class="avatar-btn text-2xl p-2 m-1 rounded ${emoji === playerAvatar ? 'bg-green-500' : 'bg-gray-600'} ${index >= unlockedAvatars.length ? 'opacity-50 cursor-not-allowed' : ''}" data-emoji="${emoji}" ${index >= unlockedAvatars.length ? 'disabled' : ''} title="${index >= unlockedAvatars.length ? 'Unlock at ' + (index * 100) + ' XP' : ''}">${index >= unlockedAvatars.length ? '🔒' : emoji}</button>`).join('')}</div></div><div class="mb-4"><label class="block mb-2 font-semibold">Scenario Type:</label><select id="scenario-type" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full"><option value="AI generated">AI generated</option><option value="Custom">Custom</option></select></div><div class="mb-4"><label class="block mb-2 font-semibold">Game Mode:</label><select id="game-mode" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full"><option value="normal">Normal</option><option value="speedrun">Speedrun</option></select></div><button id="start-game" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full mb-4">Start Game</button><button id="how-to-play" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">How to Play</button><p class="mt-4 text-xl font-bold">XP: ${xp}</p></div>`;
+    appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg"><h2 class="text-3xl mb-4 text-green-400 font-bold">Create Your Character</h2><input id="player-name" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full mb-4" placeholder="Enter your name (optional)" value="${randomUsernames[Math.floor(Math.random() * randomUsernames.length)]}"><div class="mb-4"><label class="block mb-2 font-semibold">Choose your avatar:</label><div class="flex justify-center flex-wrap">${avatars.map((emoji, index) => `<button class="avatar-btn text-2xl p-2 m-1 rounded ${emoji === playerAvatar ? 'bg-green-500' : 'bg-gray-600'}${index >= unlockedAvatars.length ? ' opacity-50 cursor-not-allowed' : ''}" data-emoji="${emoji}"${index >= unlockedAvatars.length ? ' disabled' : ''} title="${index >= unlockedAvatars.length ? 'Unlock at ' + (index * 100) + ' XP' : ''}">${index >= unlockedAvatars.length ? '🔒' : emoji}</button>`).join('')}</div></div><div class="mb-4"><label class="block mb-2 font-semibold">Scenario Type:</label><select id="scenario-type" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full"><option value="AI generated">AI generated</option><option value="Custom">Custom</option></select></div><div class="mb-4"><label class="block mb-2 font-semibold">Game Mode:</label><select id="game-mode" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full"><option value="normal">Normal</option><option value="speedrun">Speedrun</option></select></div><button id="start-game" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full mb-4">Start Game</button><button id="how-to-play" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">How to Play</button><p class="mt-4 text-xl font-bold">XP: ${xp}</p></div>`;
     document.querySelectorAll('.avatar-btn:not([disabled])').forEach(btn => btn.addEventListener('click', (e) => {
         document.querySelectorAll('.avatar-btn').forEach(b => b.classList.remove('bg-green-500'));
         e.target.classList.add('bg-green-500');
@@ -75,12 +63,7 @@
 async function nextRound() {
     if (currentRound < 5) {
         currentRound++;
-        let scenario;
-        if (scenarioType === 'Custom') {
-            scenario = await promptForCustomScenario();
-        } else {
-            scenario = await generateScenario();
-        }
+        let scenario = scenarioType === 'Custom' ? await promptForCustomScenario() : await generateScenario();
         renderPromptInput(scenario);
     } else {
         renderScoreboard();
@@ -91,8 +74,7 @@
     return new Promise((resolve) => {
         appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg"><h2 class="text-3xl mb-4 text-green-400 font-bold">Enter Custom Scenario</h2><textarea id="custom-scenario" class="bg-gray-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 w-full h-32 mb-4" placeholder="Enter your custom scenario..."></textarea><button id="submit-scenario" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Submit</button></div>`;
         document.getElementById('submit-scenario').addEventListener('click', () => {
-            const customScenario = document.getElementById('custom-scenario').value || "You find yourself in a mysterious and dangerous situation.";
-            resolve(customScenario);
+            resolve(document.getElementById('custom-scenario').value || "You find yourself in a mysterious and dangerous situation.");
         });
     });
 }
@@ -187,16 +169,7 @@
             xp += 5;
         }
         localStorage.setItem('deathByAIXP', xp.toString());
-        appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg opacity-0 transition-opacity duration-1000" id="fate-container">
-            <h2 class="text-3xl mb-4 text-green-400 font-bold">Your Fate</h2>
-            <p class="text-xl mb-4 font-semibold">${fate.explanation}</p>
-            <p class="text-2xl font-bold ${fate.survived ? 'text-green-400' : 'text-red-400'}">${fate.survived ? 'You survived!' : 'You died!'}</p>
-            ${isSpeedrun ? `
-            <p class="text-xl mb-4 font-semibold">Round Time: ${roundTime.toFixed(2)}s</p>
-            <p class="text-xl mb-4 font-semibold">Total Speedrun Time: ${totalSpeedrunTime.toFixed(2)}s</p>
-            ` : ''}
-            <button id="next-round" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Next Round</button>
-        </div>`;
+        appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg opacity-0 transition-opacity duration-1000" id="fate-container"><h2 class="text-3xl mb-4 text-green-400 font-bold">Your Fate</h2><p class="text-xl mb-4 font-semibold">${fate.explanation}</p><p class="text-2xl font-bold ${fate.survived ? 'text-green-400' : 'text-red-400'}">${fate.survived ? 'You survived!' : 'You died!'}</p>${isSpeedrun ? `<p class="text-xl mb-4 font-semibold">Round Time: ${roundTime.toFixed(2)}s</p><p class="text-xl mb-4 font-semibold">Total Speedrun Time: ${totalSpeedrunTime.toFixed(2)}s</p>` : ''}<button id="next-round" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">Next Round</button></div>`;
         setTimeout(() => {
             document.getElementById('fate-container').classList.remove('opacity-0');
         }, 100);
@@ -213,28 +186,12 @@ <h2 class="text-3xl mb-4 text-green-400 font-bold">Your Fate</h2>
 function renderScoreboard() {
     const highScore = Math.max(playerScore, parseInt(localStorage.getItem('deathByAIHighScore') || '0'));
     localStorage.setItem('deathByAIHighScore', highScore.toString());
-
     let speedrunHighScore = parseFloat(localStorage.getItem('deathByAISpeedrunHighScore') || '999999');
     if (isSpeedrun && totalSpeedrunTime < speedrunHighScore) {
         speedrunHighScore = totalSpeedrunTime;
         localStorage.setItem('deathByAISpeedrunHighScore', speedrunHighScore.toString());
     }
-
-    appContainer.innerHTML = `
-    <div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg">
-        <h2 class="text-3xl mb-4 text-green-400 font-bold">Game Over</h2>
-        <p class="text-2xl mb-2 font-semibold">${playerName} ${playerAvatar}</p>
-        <p class="text-xl mb-4 font-semibold">Your final score: ${playerScore}/5</p>
-        <p class="text-xl mb-4 font-semibold">High Score: ${highScore}/5</p>
-        ${isSpeedrun ? `
-        <p class="text-xl mb-4 font-semibold">Total Speedrun Time: ${totalSpeedrunTime.toFixed(2)}s</p>
-        <p class="text-xl mb-4 font-semibold">Speedrun High Score: ${speedrunHighScore.toFixed(2)}s</p>
-        ` : ''}
-        <p class="text-xl mb-4 font-bold">XP: ${xp}</p>
-        <button id="new-game" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full mb-4">New Game</button>
-        <button id="how-to-play" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">How to Play</button>
-    </div>`;
-
+    appContainer.innerHTML = `<div class="text-center bg-gray-800 bg-opacity-90 p-8 rounded-lg shadow-lg"><h2 class="text-3xl mb-4 text-green-400 font-bold">Game Over</h2><p class="text-2xl mb-2 font-semibold">${playerName} ${playerAvatar}</p><p class="text-xl mb-4 font-semibold">Your final score: ${playerScore}/5</p><p class="text-xl mb-4 font-semibold">High Score: ${highScore}/5</p>${isSpeedrun ? `<p class="text-xl mb-4 font-semibold">Total Speedrun Time: ${totalSpeedrunTime.toFixed(2)}s</p><p class="text-xl mb-4 font-semibold">Speedrun High Score: ${speedrunHighScore.toFixed(2)}s</p>` : ''}<p class="text-xl mb-4 font-bold">XP: ${xp}</p><button id="new-game" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full mb-4">New Game</button><button id="how-to-play" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105 w-full">How to Play</button></div>`;
     document.getElementById('new-game').addEventListener('click', startGame);
     document.getElementById('how-to-play').addEventListener('click', showTutorial);
 }
