Spaces:

1234techrules
/

a-space

Running

App Files Files Community

1234techrules commited on Apr 1

Commit

cadeb06

verified ·

1 Parent(s): 7efb96d

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +721 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: A Space
-emoji: 🐠
-colorFrom: yellow
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: a-space
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,721 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Battler - Defeat Bugs with Coding Knowledge!</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20%, 60% { transform: translateX(-10px); }
+            40%, 80% { transform: translateX(10px); }
+        }
+        .shake {
+            animation: shake 0.5s;
+        }
+        .damage-number {
+            position: absolute;
+            font-weight: bold;
+            color: #ef4444;
+            animation: fadeOut 1s ease-out forwards;
+            pointer-events: none;
+            font-size: 1.5rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        @keyframes fadeOut {
+            to { opacity: 0; transform: translateY(-30px); }
+        }
+        .modal {
+            transition: opacity 0.3s ease;
+        }
+        .modal-content {
+            transition: all 0.3s ease;
+            transform: translateY(20px);
+        }
+        .modal.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal.show .modal-content {
+            transform: translateY(0);
+        }
+        #battle-log {
+            scrollbar-width: thin;
+            scrollbar-color: #c7d2fe #f1f5f9;
+        }
+        #battle-log::-webkit-scrollbar {
+            width: 8px;
+        }
+        #battle-log::-webkit-scrollbar-track {
+            background: #f1f5f9;
+            border-radius: 4px;
+        }
+        #battle-log::-webkit-scrollbar-thumb {
+            background-color: #c7d2fe;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-gray-50 font-sans">
+    <div class="container mx-auto px-4 py-6 max-w-6xl">
+        <!-- Header -->
+        <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
+            <div class="flex items-center">
+                <div class="mr-3 bg-indigo-600 text-white p-2 rounded-lg shadow">
+                    <i class="fas fa-gamepad text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">Code Battler</h1>
+                    <p class="text-sm text-gray-500">Defeat bugs with your coding knowledge</p>
+                </div>
+            </div>
+            <div class="flex items-center gap-3">
+                <div class="bg-white rounded-lg px-3 py-1.5 shadow-sm flex items-center border border-gray-100">
+                    <i class="fas fa-coins text-yellow-500 mr-2 text-sm"></i>
+                    <span id="coins" class="font-medium">0</span>
+                </div>
+                <div class="bg-white rounded-lg px-3 py-1.5 shadow-sm flex items-center border border-gray-100">
+                    <i class="fas fa-trophy text-indigo-500 mr-2 text-sm"></i>
+                    <span id="level" class="font-medium">1</span>
+                </div>
+            </div>
+        </header>
+        <!-- Game Layout -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Player Area -->
+            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center">
+                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                    <i class="fas fa-user-shield mr-2 text-indigo-500"></i> Your Pet
+                </h2>
+                <div class="mb-4 relative w-40 h-40 bg-indigo-50 rounded-full flex items-center justify-center shadow">
+                    <img id="player-pet-img" src="https://cdn-icons-png.flaticon.com/512/616/616408.png" alt="Pet" class="w-full h-full object-contain">
+                </div>
+                <div class="w-full mb-4">
+                    <div class="h-2 bg-gray-200 rounded-full w-full">
+                        <div id="player-health" class="h-full rounded-full bg-gradient-to-r from-green-500 to-green-400" style="width: 100%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-500 mt-1">
+                        <span>HP</span>
+                        <span id="player-hp-text">15/15</span>
+                    </div>
+                </div>
+                <div class="text-center w-full">
+                    <h3 id="pet-name" class="font-semibold text-gray-800">Code Cat</h3>
+                    <p id="pet-level" class="text-xs text-gray-500">Level <span class="font-medium">1</span></p>
+                    <div class="mt-6 grid grid-cols-2 gap-2 w-full">
+                        <button id="attack-btn" class="bg-red-500 hover:bg-red-600 text-white py-2 px-3 rounded-lg text-sm transition">
+                            <i class="fas fa-bolt mr-1"></i>Attack
+                        </button>
+                        <button id="heal-btn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-3 rounded-lg text-sm transition">
+                            <i class="fas fa-heart mr-1"></i>Heal
+                        </button>
+                        <button id="special-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-3 rounded-lg text-sm transition col-span-2">
+                            <i class="fas fa-star mr-1"></i>Special (2 moves)
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Battle Log & Question Area -->
+            <div class="flex flex-col gap-4">
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex-1">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
+                        <i class="fas fa-scroll mr-2 text-indigo-500"></i> Battle Log
+                    </h2>
+                    <div id="battle-log" class="h-64 overflow-y-auto bg-gray-50 rounded-lg p-3 space-y-2 text-sm">
+                        <p class="text-gray-500 italic">Welcome to Code Battler! Defeat monsters by answering coding questions correctly.</p>
+                    </div>
+                </div>
+                <div id="question-area" class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hidden">
+                    <h3 class="font-semibold mb-3 text-gray-800 flex items-center">
+                        <i class="fas fa-question-circle mr-2 text-indigo-500"></i> Code Challenge
+                    </h3>
+                    <p id="question-text" class="mb-4 text-gray-700"></p>
+                    <div id="options" class="grid grid-cols-1 gap-2"></div>
+                </div>
+                <div class="flex gap-2">
+                    <button id="learn-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm flex-1 transition">
+                        <i class="fas fa-book mr-1"></i> Learn
+                    </button>
+                    <button id="shop-btn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm flex-1 transition">
+                        <i class="fas fa-shopping-cart mr-1"></i> Shop
+                    </button>
+                </div>
+            </div>
+            <!-- Enemy Area -->
+            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col items-center">
+                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                    <i class="fas fa-bug mr-2 text-red-500"></i> Enemy
+                </h2>
+                <div class="mb-4 relative w-40 h-40 bg-red-50 rounded-full flex items-center justify-center shadow">
+                    <img id="enemy-img" src="https://cdn-icons-png.flaticon.com/512/740/740878.png" alt="Enemy" class="w-full h-full object-contain">
+                </div>
+                <div class="w-full mb-4">
+                    <div class="h-2 bg-gray-200 rounded-full w-full">
+                        <div id="enemy-health" class="h-full rounded-full bg-gradient-to-r from-green-500 to-green-400" style="width: 100%"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-500 mt-1">
+                        <span>HP</span>
+                        <span id="enemy-hp-text">15/15</span>
+                    </div>
+                </div>
+                <div class="text-center w-full">
+                    <h3 id="enemy-name" class="font-semibold text-gray-800">Bug Monster</h3>
+                    <p id="enemy-level" class="text-xs text-gray-500">Level <span class="font-medium">1</span></p>
+                    <div class="mt-4 bg-gray-50 rounded-lg p-3 shadow-sm">
+                        <h4 class="font-medium text-xs mb-1 text-gray-700 flex items-center">
+                            <i class="fas fa-eye mr-1 text-indigo-500"></i> Next Move
+                        </h4>
+                        <p id="enemy-next-move" class="text-xs text-gray-700">Preparing attack...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modals -->
+    <div id="shop-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
+        <div class="w-full max-w-2xl max-h-[90vh] overflow-auto">
+            <div class="bg-white rounded-xl shadow-lg modal-content p-6">
+                <div class="flex justify-between items-center mb-5 pb-3 border-b border-gray-200">
+                    <h2 class="text-xl font-semibold text-gray-800">
+                        <i class="fas fa-paw mr-2 text-indigo-500"></i> Pet Shop
+                    </h2>
+                    <button id="close-shop" class="text-gray-400 hover:text-gray-600">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-4" id="shop-pets">
+                    <!-- Pets will be added here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
+        <div class="w-full max-w-sm">
+            <div class="bg-white rounded-xl shadow-lg p-6 text-center modal-content">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 flex items-center justify-center">
+                    <i class="fas fa-skull-crossbones text-2xl text-red-500"></i>
+                </div>
+                <h2 id="game-over-title" class="text-xl font-semibold text-gray-800 mb-1">Game Over</h2>
+                <p id="game-over-message" class="text-gray-600 mb-5">You were defeated!</p>
+                <button id="restart-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-6 rounded-lg transition">
+                    <i class="fas fa-redo mr-1"></i> Play Again
+                </button>
+            </div>
+        </div>
+    </div>
+    <div id="level-up-modal" class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal">
+        <div class="w-full max-w-sm">
+            <div class="bg-white rounded-xl shadow-lg p-6 text-center modal-content">
+                <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-indigo-100 flex items-center justify-center">
+                    <i class="fas fa-trophy text-2xl text-indigo-500"></i>
+                </div>
+                <h2 class="text-xl font-semibold text-gray-800 mb-1">Level Up!</h2>
+                <p class="text-gray-600">You've reached level <span id="new-level" class="font-semibold text-indigo-500">2</span>!</p>
+                <div class="flex items-center justify-center my-4">
+                    <i class="fas fa-coins text-yellow-500 mr-2"></i>
+                    <span class="font-medium">+50 coins bonus!</span>
+                </div>
+                <button id="continue-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-6 rounded-lg transition">
+                    <i class="fas fa-arrow-right mr-1"></i> Continue
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            coins: 0,
+            level: 1,
+            currentPet: 'cat',
+            unlockedPets: ['cat'],
+            playerHealth: 15,
+            maxHealth: 15,
+            enemyHealth: 15,
+            attackCount: 0,
+            gameActive: true,
+            enemyNextMove: 'attack',
+            currentEnemy: 0,
+            totalCoinsEarned: 0,
+            pets: {
+                cat: { name: 'Code Cat', image: 'https://cdn-icons-png.flaticon.com/512/616/616408.png', cost: 0 },
+                dog: { name: 'Debug Dog', image: 'https://cdn-icons-png.flaticon.com/512/616/616430.png', cost: 50, special: "+1 attack damage" },
+                owl: { name: 'Syntax Owl', image: 'https://cdn-icons-png.flaticon.com/512/3281/3281289.png', cost: 150, special: "+10% heal power" }
+            },
+            enemies: [
+                { name: 'Bug Monster', image: 'https://cdn-icons-png.flaticon.com/512/740/740878.png' },
+                { name: 'Glitch Gremlin', image: 'https://cdn-icons-png.flaticon.com/512/2491/2491902.png' },
+                { name: 'Error Eel', image: 'https://cdn-icons-png.flaticon.com/512/3069/3069172.png' }
+            ],
+            questions: [
+                {
+                    question: "Which HTML tag is used to link an external CSS file?",
+                    options: ["<script>", "<style>", "<link>", "<css>"],
+                    answer: 2
+                },
+                {
+                    question: "Which CSS property changes the text color?",
+                    options: ["text-color", "font-color", "color", "text-style"],
+                    answer: 2
+                },
+                {
+                    question: "How do you write 'Hello World' in an alert box?",
+                    options: ["alertBox('Hello World')", "alert('Hello World')", "msg('Hello World')", "msgBox('Hello World')"],
+                    answer: 1
+                }
+            ]
+        };
+        // DOM Elements
+        const coinsDisplay = document.getElementById('coins');
+        const levelDisplay = document.getElementById('level');
+        const playerHealthBar = document.getElementById('player-health');
+        const enemyHealthBar = document.getElementById('enemy-health');
+        const playerHpText = document.getElementById('player-hp-text');
+        const enemyHpText = document.getElementById('enemy-hp-text');
+        const battleLog = document.getElementById('battle-log');
+        const attackBtn = document.getElementById('attack-btn');
+        const healBtn = document.getElementById('heal-btn');
+        const specialBtn = document.getElementById('special-btn');
+        const shopBtn = document.getElementById('shop-btn');
+        const learnBtn = document.getElementById('learn-btn');
+        const shopModal = document.getElementById('shop-modal');
+        const closeShopBtn = document.getElementById('close-shop');
+        const gameOverModal = document.getElementById('game-over-modal');
+        const restartBtn = document.getElementById('restart-btn');
+        const levelUpModal = document.getElementById('level-up-modal');
+        const continueBtn = document.getElementById('continue-btn');
+        const questionArea = document.getElementById('question-area');
+        const questionText = document.getElementById('question-text');
+        const optionsContainer = document.getElementById('options');
+        const playerPetImg = document.getElementById('player-pet-img');
+        const petNameDisplay = document.getElementById('pet-name');
+        const petLevelDisplay = document.getElementById('pet-level');
+        const enemyImage = document.getElementById('enemy-img');
+        const enemyNameDisplay = document.getElementById('enemy-name');
+        const enemyLevelDisplay = document.getElementById('enemy-level');
+        const enemyNextMoveDisplay = document.getElementById('enemy-next-move');
+        const newLevelDisplay = document.getElementById('new-level');
+        const shopPetsContainer = document.getElementById('shop-pets');
+        // Helper functions
+        function showModal(modal) {
+            modal.classList.add('show');
+        }
+        function hideModal(modal) {
+            modal.classList.remove('show');
+        }
+        function addToLog(message, type = 'info') {
+            const colors = {
+                player: 'bg-blue-50 text-blue-800',
+                enemy: 'bg-red-50 text-red-800',
+                info: 'bg-gray-50 text-gray-600'
+            };
+            const logEntry = document.createElement('div');
+            logEntry.className = `p-2 rounded ${colors[type]}`;
+            logEntry.textContent = message;
+            battleLog.appendChild(logEntry);
+            battleLog.scrollTop = battleLog.scrollHeight;
+        }
+        function showDamage(element, amount, isHeal = false) {
+            const damageElement = document.createElement('div');
+            damageElement.className = isHeal ? 'heal-number' : 'damage-number';
+            damageElement.textContent = (isHeal ? '+' : '-') + amount;
+            damageElement.style.color = isHeal ? '#10b981' : '#ef4444';
+            element.appendChild(damageElement);
+            setTimeout(() => damageElement.remove(), 1000);
+        }
+        function updateUI() {
+            coinsDisplay.textContent = gameState.coins;
+            levelDisplay.textContent = gameState.level;
+            // Update health bars
+            const playerHealthPercent = (gameState.playerHealth / gameState.maxHealth) * 100;
+            const enemyHealthPercent = (gameState.enemyHealth / 15) * 100;
+            playerHealthBar.style.width = `${playerHealthPercent}%`;
+            enemyHealthBar.style.width = `${enemyHealthPercent}%`;
+            // Update health colors
+            playerHealthBar.className = `h-full rounded-full ${
+                playerHealthPercent > 70 ? 'bg-gradient-to-r from-green-500 to-green-400' :
+                playerHealthPercent > 30 ? 'bg-gradient-to-r from-yellow-500 to-yellow-400' :
+                'bg-gradient-to-r from-red-500 to-red-400'
+            }`;
+            enemyHealthBar.className = `h-full rounded-full ${
+                enemyHealthPercent > 70 ? 'bg-gradient-to-r from-green-500 to-green-400' :
+                enemyHealthPercent > 30 ? 'bg-gradient-to-r from-yellow-500 to-yellow-400' :
+                'bg-gradient-to-r from-red-500 to-red-400'
+            }`;
+            playerHpText.textContent = `${gameState.playerHealth}/${gameState.maxHealth}`;
+            enemyHpText.textContent = `${gameState.enemyHealth}/15`;
+            // Update pet info
+            playerPetImg.src = gameState.pets[gameState.currentPet].image;
+            petNameDisplay.textContent = gameState.pets[gameState.currentPet].name;
+            petLevelDisplay.innerHTML = `Level <span class="font-medium">${gameState.level}</span>`;
+            // Update enemy info
+            enemyImage.src = gameState.enemies[gameState.currentEnemy].image;
+            enemyNameDisplay.textContent = gameState.enemies[gameState.currentEnemy].name;
+            enemyLevelDisplay.innerHTML = `Level <span class="font-medium">${gameState.level}</span>`;
+            // Update button states
+            attackBtn.disabled = !gameState.gameActive;
+            healBtn.disabled = !gameState.gameActive;
+            specialBtn.disabled = !gameState.gameActive;
+        }
+        function setEnemy() {
+            const enemy = gameState.enemies[gameState.currentEnemy];
+            enemyImage.src = enemy.image;
+            enemyNameDisplay.textContent = enemy.name;
+            enemyHealthBar.style.width = '100%';
+            gameState.enemyHealth = 15;
+            gameState.enemyNextMove = Math.random() > 0.3 ? 'attack' : 'heal';
+            enemyNextMoveDisplay.textContent = gameState.enemyNextMove === 'attack' ? 'Preparing attack...' : 'Preparing to heal...';
+        }
+        // Game Actions
+        function playerAttack() {
+            if (!gameState.gameActive) return;
+            let damage = Math.floor(Math.random() * 3) + 2; // 2-4 damage
+            if (gameState.currentPet === 'dog') damage += 1; // Debug Dog bonus
+            gameState.enemyHealth -= damage;
+            if (gameState.enemyHealth < 0) gameState.enemyHealth = 0;
+            enemyImage.parentElement.classList.add('shake');
+            showDamage(enemyImage.parentElement, damage);
+            addToLog(`Your ${gameState.pets[gameState.currentPet].name} attacks for ${damage} damage!`, 'player');
+            updateUI();
+            setTimeout(() => {
+                enemyImage.parentElement.classList.remove('shake');
+                if (gameState.enemyHealth <= 0) {
+                    enemyDefeated();
+                } else {
+                    gameState.attackCount++;
+                    if (gameState.attackCount % 2 === 0) {
+                        showQuestion();
+                    } else {
+                        setTimeout(enemyTurn, 1000);
+                    }
+                }
+            }, 500);
+        }
+        function playerHeal() {
+            if (!gameState.gameActive) return;
+            let healAmount = Math.floor(Math.random() * 3) + 2; // 2-4 heal
+            if (gameState.currentPet === 'owl') healAmount = Math.floor(healAmount * 1.1); // Syntax Owl bonus
+            gameState.playerHealth += healAmount;
+            if (gameState.playerHealth > gameState.maxHealth) gameState.playerHealth = gameState.maxHealth;
+            playerPetImg.parentElement.classList.add('shake');
+            showDamage(playerPetImg.parentElement, healAmount, true);
+            addToLog(`Your ${gameState.pets[gameState.currentPet].name} heals for ${healAmount} health!`, 'player');
+            updateUI();
+            setTimeout(() => {
+                playerPetImg.parentElement.classList.remove('shake');
+                gameState.attackCount++;
+                if (gameState.attackCount % 2 === 0) {
+                    showQuestion();
+                } else {
+                    setTimeout(enemyTurn, 1000);
+                }
+            }, 500);
+        }
+        function playerSpecial() {
+            if (!gameState.gameActive) return;
+            let damage = Math.floor(Math.random() * 5) + 3; // 3-7 damage
+            if (gameState.currentPet === 'dog') damage += 1; // Debug Dog bonus
+            gameState.enemyHealth -= damage;
+            if (gameState.enemyHealth < 0) gameState.enemyHealth = 0;
+            enemyImage.parentElement.classList.add('shake');
+            showDamage(enemyImage.parentElement, damage);
+            addToLog(`Your ${gameState.pets[gameState.currentPet].name} uses SPECIAL for ${damage} damage!`, 'player');
+            updateUI();
+            setTimeout(() => {
+                enemyImage.parentElement.classList.remove('shake');
+                if (gameState.enemyHealth <= 0) {
+                    enemyDefeated();
+                } else {
+                    gameState.attackCount += 2;
+                    showQuestion();
+                }
+            }, 500);
+        }
+        function enemyTurn() {
+            if (!gameState.gameActive) return;
+            if (gameState.enemyNextMove === 'attack') {
+                const damage = Math.floor(Math.random() * 3) + 1; // 1-3 damage
+                gameState.playerHealth -= damage;
+                if (gameState.playerHealth < 0) gameState.playerHealth = 0;
+                playerPetImg.parentElement.classList.add('shake');
+                showDamage(playerPetImg.parentElement, damage);
+                addToLog(`${gameState.enemies[gameState.currentEnemy].name} attacks for ${damage} damage!`, 'enemy');
+                setTimeout(() => {
+                    playerPetImg.parentElement.classList.remove('shake');
+                    if (gameState.playerHealth <= 0) {
+                        gameOver(false);
+                    } else {
+                        gameState.enemyNextMove = Math.random() > 0.3 ? 'attack' : 'heal';
+                        enemyNextMoveDisplay.textContent = gameState.enemyNextMove === 'attack' ? 'Preparing attack...' : 'Preparing to heal...';
+                        updateUI();
+                    }
+                }, 500);
+            } else {
+                const healAmount = Math.floor(Math.random() * 3) + 1; // 1-3 heal
+                gameState.enemyHealth += healAmount;
+                if (gameState.enemyHealth > 15) gameState.enemyHealth = 15;
+                showDamage(enemyImage.parentElement, healAmount, true);
+                addToLog(`${gameState.enemies[gameState.currentEnemy].name} heals for ${healAmount} health!`, 'enemy');
+                gameState.enemyNextMove = Math.random() > 0.3 ? 'attack' : 'heal';
+                enemyNextMoveDisplay.textContent = gameState.enemyNextMove === 'attack' ? 'Preparing attack...' : 'Preparing to heal...';
+                updateUI();
+            }
+        }
+        function enemyDefeated() {
+            const coinsEarned = Math.floor(Math.random() * 20) + 10 * gameState.level;
+            gameState.coins += coinsEarned;
+            gameState.totalCoinsEarned += coinsEarned;
+            gameState.currentEnemy++;
+            addToLog(`You defeated ${gameState.enemies[gameState.currentEnemy-1].name} and earned ${coinsEarned} coins!`, 'player');
+            if (gameState.currentEnemy >= gameState.enemies.length) {
+                gameState.currentEnemy = 0;
+                levelUp();
+            } else {
+                setTimeout(() => {
+                    setEnemy();
+                    addToLog(`A wild ${gameState.enemies[gameState.currentEnemy].name} appeared!`, 'enemy');
+                    updateUI();
+                }, 1500);
+            }
+            updateUI();
+        }
+        function levelUp() {
+            gameState.level++;
+            const coinsBonus = 50;
+            gameState.coins += coinsBonus;
+            gameState.totalCoinsEarned += coinsBonus;
+            gameState.maxHealth += 5;
+            gameState.playerHealth = gameState.maxHealth;
+            newLevelDisplay.textContent = gameState.level;
+            showModal(levelUpModal);
+            gameState.gameActive = false;
+            updateUI();
+        }
+        function gameOver(won) {
+            gameState.gameActive = false;
+            showModal(gameOverModal);
+        }
+        function showQuestion() {
+            const randomQuestion = gameState.questions[Math.floor(Math.random() * gameState.questions.length)];
+            questionText.textContent = randomQuestion.question;
+            optionsContainer.innerHTML = '';
+            randomQuestion.options.forEach((option, index) => {
+                const button = document.createElement('button');
+                button.textContent = option;
+                button.className = 'bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-3 rounded text-left transition question-option';
+                button.onclick = () => checkAnswer(index, randomQuestion.answer);
+                optionsContainer.appendChild(button);
+            });
+            questionArea.classList.remove('hidden');
+            gameState.gameActive = false;
+        }
+        function checkAnswer(selectedIndex, correctIndex) {
+            const options = document.querySelectorAll('.question-option');
+            options.forEach(option => option.disabled = true);
+            options[correctIndex].classList.add('bg-green-500', 'text-white', 'hover:bg-green-500');
+            if (selectedIndex !== correctIndex) {
+                options[selectedIndex].classList.add('bg-red-500', 'text-white', 'hover:bg-red-500');
+            }
+            if (selectedIndex === correctIndex) {
+                addToLog("Correct answer! Your knowledge strengthens your pet!", 'player');
+                setTimeout(() => {
+                    questionArea.classList.add('hidden');
+                    gameState.gameActive = true;
+                    setTimeout(enemyTurn, 1000);
+                }, 1500);
+            } else {
+                addToLog("Wrong answer! The enemy gets an extra turn!", 'enemy');
+                setTimeout(() => {
+                    questionArea.classList.add('hidden');
+                    gameState.gameActive = true;
+                    setTimeout(() => {
+                        enemyTurn();
+                        setTimeout(enemyTurn, 1000);
+                    }, 1000);
+                }, 1500);
+            }
+        }
+        function renderShop() {
+            shopPetsContainer.innerHTML = '';
+            Object.entries(gameState.pets).forEach(([petType, pet]) => {
+                const isUnlocked = gameState.unlockedPets.includes(petType);
+                const isSelected = gameState.currentPet === petType;
+                const petCard = document.createElement('div');
+                petCard.className = 'bg-white p-4 rounded-lg border border-gray-100 flex flex-col items-center';
+                petCard.innerHTML = `
+                    <div class="relative w-20 h-20 mb-3">
+                        <img src="${pet.image}" alt="${pet.name}" class="w-full h-full object-contain ${isUnlocked ? '' : 'opacity-50 grayscale'}">
+                    </div>
+                    <h3 class="font-semibold text-sm text-center">${pet.name}</h3>
+                    ${pet.special ? `<p class="text-xs text-center text-gray-600 mt-1">${pet.special}</p>` : ''}
+                    <div class="mt-3 text-xs font-medium ${isUnlocked ? 'text-indigo-600' : 'text-gray-500'}">
+                        ${isUnlocked ? (isSelected ? '✓ Selected' : 'Unlocked') : `${pet.cost} coins`}
+                    </div>
+                    <button class="mt-3 w-full py-1 rounded text-sm ${isUnlocked
+                        ? (isSelected ? 'bg-gray-200 text-gray-500' : 'bg-indigo-500 hover:bg-indigo-600 text-white')
+                        : (gameState.coins >= pet.cost ? 'bg-indigo-500 hover:bg-indigo-600 text-white' : 'bg-gray-200 text-gray-500')}"
+                        ${isUnlocked ? '' : (gameState.coins >= pet.cost ? '' : 'disabled')}
+                        data-pet="${petType}">
+                        ${isUnlocked ? (isSelected ? 'Selected' : 'Select') : 'Buy'}
+                    </button>
+                `;
+                shopPetsContainer.appendChild(petCard);
+            });
+        }
+        function resetGame() {
+            gameState.coins = 0;
+            gameState.level = 1;
+            gameState.currentPet = 'cat';
+            gameState.unlockedPets = ['cat'];
+            gameState.playerHealth = 15;
+            gameState.maxHealth = 15;
+            gameState.enemyHealth = 15;
+            gameState.attackCount = 0;
+            gameState.gameActive = true;
+            gameState.currentEnemy = 0;
+            gameState.totalCoinsEarned = 0;
+            questionArea.classList.add('hidden');
+            hideModal(gameOverModal);
+            hideModal(levelUpModal);
+            hideModal(shopModal);
+            battleLog.innerHTML = '<p class="text-gray-500 italic p-2 rounded bg-gray-50">Welcome to Code Battler! Defeat monsters by answering coding questions correctly.</p>';
+            setEnemy();
+            updateUI();
+            addToLog(`A wild ${gameState.enemies[gameState.currentEnemy].name} appeared!`, 'enemy');
+        }
+        // Event Listeners
+        attackBtn.addEventListener('click', playerAttack);
+        healBtn.addEventListener('click', playerHeal);
+        specialBtn.addEventListener('click', playerSpecial);
+        shopBtn.addEventListener('click', () => {
+            renderShop();
+            showModal(shopModal);
+            gameState.gameActive = false;
+        });
+        learnBtn.addEventListener('click', () => {
+            // Learn mode would go here
+            alert("Learn mode would be implemented here");
+        });
+        closeShopBtn.addEventListener('click', () => {
+            hideModal(shopModal);
+            gameState.gameActive = true;
+        });
+        restartBtn.addEventListener('click', resetGame);
+        continueBtn.addEventListener('click', () => {
+            hideModal(levelUpModal);
+            gameState.gameActive = true;
+            setEnemy();
+            addToLog(`A wild ${gameState.enemies[gameState.currentEnemy].name} appeared!`, 'enemy');
+            updateUI();
+        });
+        // Shop pet selection
+        shopPetsContainer.addEventListener('click', (e) => {
+            const petBtn = e.target.closest('button');
+            if (!petBtn) return;
+            const petType = petBtn.dataset.pet;
+            const pet = gameState.pets[petType];
+            if (!gameState.unlockedPets.includes(petType)) {
+                if (gameState.coins >= pet.cost) {
+                    gameState.coins -= pet.cost;
+                    gameState.unlockedPets.push(petType);
+                    addToLog(`You unlocked the ${pet.name}!`, 'info');
+                    renderShop();
+                    updateUI();
+                }
+            } else if (gameState.currentPet !== petType) {
+                gameState.currentPet = petType;
+                addToLog(`You selected the ${pet.name}!`, 'info');
+                renderShop();
+                updateUI();
+            }
+        });
+        // Initialize the game
+        setEnemy();
+        updateUI();
+        addToLog(`A wild ${gameState.enemies[gameState.currentEnemy].name} appeared!`, 'enemy');
+    </script>
+<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=1234techrules/a-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>