Spaces:

Jaspior
/

rogelike

Running

App Files Files Community

Jaspior commited on May 20, 2025

Commit

e637f22

verified ·

1 Parent(s): 75ce5a7

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +724 -19
prompts.txt +5 -0

README.md CHANGED Viewed

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

 ---
+title: rogelike
+emoji: 🐳
 colorFrom: red
+colorTo: red
 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,724 @@
-<!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>Roguelike Deckbuilder</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+            20%, 40%, 60%, 80% { transform: translateX(5px); }
+        }
+        .shake {
+            animation: shake 0.5s ease-in-out;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .pulse {
+            animation: pulse 1s infinite;
+        }
+        .hp-rolling {
+            color: #ef4444;
+            font-weight: bold;
+        }
+        .card {
+            transition: all 0.2s ease;
+        }
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        }
+        .emoji {
+            font-size: 3rem;
+            line-height: 1;
+        }
+        .player-emoji {
+            font-size: 2.5rem;
+            line-height: 1;
+        }
+        .upgrade-card {
+            border: 2px solid #8b5cf6;
+        }
+        .upgrade-card:hover {
+            border-color: #a78bfa;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <div class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold text-purple-400">Roguelike Deckbuilder</h1>
+            <div class="flex space-x-4">
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-gray-400">HP: </span>
+                    <span id="player-hp" class="font-bold">100</span>/<span id="player-max-hp">100</span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-gray-400">Energy: </span>
+                    <span id="player-energy" class="font-bold text-blue-400">3</span>/3
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-gray-400">Floor: </span>
+                    <span id="floor" class="font-bold">1</span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-gray-400">Gold: </span>
+                    <span id="player-gold" class="font-bold text-yellow-400">0</span>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column - Player -->
+            <div class="lg:col-span-1">
+                <!-- Player Area -->
+                <div class="bg-gray-800 rounded-xl p-6 flex flex-col">
+                    <h2 class="text-xl font-bold mb-4 text-green-400">Player</h2>
+                    <div class="bg-gray-700 rounded-lg p-6 w-full text-center mb-4 flex-grow flex flex-col items-center justify-center">
+                        <div class="player-emoji mb-4" id="player-emoji">🦊</div>
+                        <div class="my-2">
+                            <span class="text-gray-400">HP: </span>
+                            <span id="player-hp-display" class="font-bold">100</span>/<span id="player-max-hp-display">100</span>
+                        </div>
+                        <div class="my-2">
+                            <span class="text-gray-400">Block: </span>
+                            <span id="player-block" class="font-bold text-blue-400">0</span>
+                        </div>
+                        <div class="my-2">
+                            <span class="text-gray-400">Strength: </span>
+                            <span id="player-strength" class="font-bold text-red-400">0</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Middle Column - Enemy -->
+            <div class="lg:col-span-1">
+                <!-- Enemy Area -->
+                <div class="bg-gray-800 rounded-xl p-6 flex flex-col">
+                    <h2 class="text-xl font-bold mb-4 text-red-400">Enemy</h2>
+                    <div id="enemy-container" class="bg-gray-700 rounded-lg p-6 w-full text-center mb-4 flex-grow flex flex-col items-center justify-center">
+                        <div class="emoji mb-4" id="enemy-emoji">🐺</div>
+                        <div class="text-2xl font-bold" id="enemy-name">Slime</div>
+                        <div class="my-2">
+                            <span class="text-gray-400">HP: </span>
+                            <span id="enemy-hp" class="font-bold">30</span>/<span id="enemy-max-hp">30</span>
+                        </div>
+                        <div class="my-2">
+                            <span class="text-gray-400">Intent: </span>
+                            <span id="enemy-intent" class="font-bold text-yellow-400">Attack (10)</span>
+                        </div>
+                    </div>
+                    <div id="enemy-attack" class="hidden bg-red-900 text-white px-4 py-2 rounded-lg mb-4">
+                        Enemy attacks for <span id="enemy-damage">10</span> damage!
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column - Cards and Log -->
+            <div class="lg:col-span-1 space-y-8">
+                <!-- Player Deck Area -->
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h2 class="text-xl font-bold mb-4 text-green-400">Your Hand</h2>
+                    <div id="hand" class="grid grid-cols-1 gap-4 mb-4">
+                        <!-- Cards will be inserted here -->
+                    </div>
+                    <div class="mt-4 flex justify-between">
+                        <div>
+                            <h3 class="text-lg font-bold mb-2 text-gray-400">Deck: <span id="deck-count">10</span> cards</h3>
+                            <h3 class="text-lg font-bold mb-2 text-gray-400">Discard: <span id="discard-count">0</span> cards</h3>
+                        </div>
+                        <div class="flex justify-center">
+                            <button id="end-turn-btn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-lg transition">
+                                End Turn
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Battle Area -->
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h2 class="text-xl font-bold mb-4 text-yellow-400">Battle Log</h2>
+                    <div id="battle-log" class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto mb-4">
+                        <div class="text-gray-400">Battle begins!</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Upgrade Modal -->
+        <div id="upgrade-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+            <div class="bg-gray-800 rounded-xl p-8 max-w-2xl w-full">
+                <h2 class="text-3xl font-bold text-purple-500 mb-4">Choose an Upgrade</h2>
+                <p class="text-xl mb-6">You earned <span id="upgrade-gold" class="text-yellow-400">50</span> gold! Select an upgrade:</p>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <div id="upgrade-1" class="upgrade-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600 transition">
+                        <h3 class="font-bold text-lg mb-2">Max HP +10</h3>
+                        <p class="text-sm text-gray-400">Increase your maximum HP by 10</p>
+                        <div class="mt-2 text-yellow-400 font-bold">Cost: 50 gold</div>
+                    </div>
+                    <div id="upgrade-2" class="upgrade-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600 transition">
+                        <h3 class="font-bold text-lg mb-2">Energy +1</h3>
+                        <p class="text-sm text-gray-400">Gain 1 additional energy per turn</p>
+                        <div class="mt-2 text-yellow-400 font-bold">Cost: 75 gold</div>
+                    </div>
+                    <div id="upgrade-3" class="upgrade-card bg-gray-700 rounded-lg p-4 cursor-pointer hover:bg-gray-600 transition">
+                        <h3 class="font-bold text-lg mb-2">Strength +1</h3>
+                        <p class="text-sm text-gray-400">Increase your attack damage by 1</p>
+                        <div class="mt-2 text-yellow-400 font-bold">Cost: 50 gold</div>
+                    </div>
+                </div>
+                <div class="flex justify-between">
+                    <button id="skip-upgrade" class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg transition">
+                        Skip (Save Gold)
+                    </button>
+                    <div class="text-lg">
+                        <span class="text-gray-400">Current Gold: </span>
+                        <span id="current-gold" class="font-bold text-yellow-400">0</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Game Over Modal -->
+        <div id="game-over-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+            <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full">
+                <h2 class="text-3xl font-bold text-red-500 mb-4">Game Over</h2>
+                <p class="text-xl mb-6">You reached floor <span id="final-floor">1</span>!</p>
+                <button id="restart-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition">
+                    Play Again
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            player: {
+                hp: 100,
+                maxHp: 100,
+                energy: 3,
+                maxEnergy: 3,
+                deck: [],
+                hand: [],
+                discard: [],
+                block: 0,
+                strength: 0,
+                gold: 0,
+                emoji: "🦊"
+            },
+            enemy: {
+                name: "Slime",
+                hp: 30,
+                maxHp: 30,
+                intent: "Attack",
+                damage: 10,
+                emoji: "🐺",
+                actions: [
+                    { type: "Attack", damage: 10 },
+                    { type: "Attack", damage: 12 },
+                    { type: "Debuff", amount: 2 }
+                ]
+            },
+            floor: 1,
+            isPlayerTurn: true,
+            hpRolling: false,
+            hpRollTarget: 0,
+            hpRollInterval: null,
+            gameOver: false
+        };
+        // Card Definitions
+        const cards = [
+            { id: 1, name: "Strike", cost: 1, description: "Deal 6 damage", type: "Attack", damage: 6 },
+            { id: 2, name: "Defend", cost: 1, description: "Gain 5 Block", type: "Block", block: 5 },
+            { id: 3, name: "Bash", cost: 2, description: "Deal 10 damage", type: "Attack", damage: 10 },
+            { id: 4, name: "Slash", cost: 1, description: "Deal 8 damage", type: "Attack", damage: 8 },
+            { id: 5, name: "Dodge", cost: 1, description: "Gain 3 Block", type: "Block", block: 3 },
+            { id: 6, name: "Fireball", cost: 2, description: "Deal 15 damage", type: "Attack", damage: 15 },
+            { id: 7, name: "Heal", cost: 2, description: "Heal 8 HP", type: "Heal", heal: 8 },
+            { id: 8, name: "Double Strike", cost: 2, description: "Deal 5 damage twice", type: "Attack", damage: 5, hits: 2 },
+            { id: 9, name: "Shield", cost: 1, description: "Gain 7 Block", type: "Block", block: 7 },
+            { id: 10, name: "Cleave", cost: 1, description: "Deal 4 damage to all enemies", type: "Attack", damage: 4, aoe: true }
+        ];
+        // Initialize the game
+        function initGame() {
+            gameState.player.deck = [...cards];
+            gameState.player.hand = [];
+            gameState.player.discard = [];
+            gameState.player.hp = gameState.player.maxHp;
+            gameState.player.block = 0;
+            gameState.player.strength = 0;
+            gameState.player.gold = 0;
+            gameState.player.emoji = "🦊";
+            gameState.floor = 1;
+            gameState.gameOver = false;
+            // Clear battle log
+            document.getElementById('battle-log').innerHTML = '<div class="text-gray-400">Battle begins!</div>';
+            // Create a new enemy for the first floor
+            createEnemy();
+            // Shuffle deck and draw starting hand
+            shuffleDeck();
+            drawHand();
+            updateUI();
+        }
+        // Create a new enemy with scaled stats based on floor
+        function createEnemy() {
+            const enemyTypes = [
+                { name: "Slime", emoji: "🐍", baseHp: 30, baseDamage: 10 },
+                { name: "Goblin", emoji: "👹", baseHp: 40, baseDamage: 12 },
+                { name: "Skeleton", emoji: "💀", baseHp: 35, baseDamage: 14 },
+                { name: "Orc", emoji: "👺", baseHp: 50, baseDamage: 15 },
+                { name: "Dragon", emoji: "🐉", baseHp: 60, baseDamage: 18 }
+            ];
+            const type = enemyTypes[Math.floor(Math.random() * enemyTypes.length)];
+            const scale = 1 + (gameState.floor - 1) * 0.2;
+            gameState.enemy = {
+                name: type.name,
+                emoji: type.emoji,
+                hp: Math.floor(type.baseHp * scale),
+                maxHp: Math.floor(type.baseHp * scale),
+                intent: "Attack",
+                damage: Math.floor(type.baseDamage * scale),
+                actions: [
+                    { type: "Attack", damage: Math.floor(type.baseDamage * scale) },
+                    { type: "Attack", damage: Math.floor(type.baseDamage * 1.2 * scale) },
+                    { type: "Debuff", amount: 2 }
+                ]
+            };
+            setEnemyIntent();
+        }
+        // Set enemy's next action
+        function setEnemyIntent() {
+            const action = gameState.enemy.actions[Math.floor(Math.random() * gameState.enemy.actions.length)];
+            if (action.type === "Attack") {
+                gameState.enemy.intent = "Attack";
+                gameState.enemy.damage = action.damage;
+            } else if (action.type === "Debuff") {
+                gameState.enemy.intent = "Debuff";
+                gameState.enemy.damage = action.amount;
+            }
+            updateEnemyUI();
+        }
+        // Shuffle the deck
+        function shuffleDeck() {
+            for (let i = gameState.player.deck.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [gameState.player.deck[i], gameState.player.deck[j]] = [gameState.player.deck[j], gameState.player.deck[i]];
+            }
+        }
+        // Draw a hand of 5 cards
+        function drawHand() {
+            // Clear current hand (cards go to discard at end of turn)
+            gameState.player.hand = [];
+            gameState.player.energy = gameState.player.maxEnergy;
+            let cardsDrawn = 0;
+            while (cardsDrawn < 5) {
+                // If deck is empty, try to reshuffle discard into deck
+                if (gameState.player.deck.length === 0) {
+                    if (gameState.player.discard.length === 0) {
+                        // No cards left at all
+                        addToLog("No cards left to draw!", "red-400");
+                        break;
+                    }
+                    // Reshuffle discard into deck
+                    addToLog("Shuffling discard pile into deck!", "purple-400");
+                    gameState.player.deck = [...gameState.player.discard];
+                    gameState.player.discard = [];
+                    shuffleDeck();
+                }
+                // Draw a card
+                gameState.player.hand.push(gameState.player.deck.pop());
+                cardsDrawn++;
+            }
+            updateHandUI();
+            updateDeckUI();
+        }
+        // Play a card
+        function playCard(cardIndex) {
+            if (!gameState.isPlayerTurn || gameState.gameOver) return;
+            const card = gameState.player.hand[cardIndex];
+            // Check if player has enough energy
+            if (gameState.player.energy < card.cost) {
+                addToLog("Not enough energy to play " + card.name + "!", "red-400");
+                return;
+            }
+            // Spend energy
+            gameState.player.energy -= card.cost;
+            // Handle card effects
+            if (card.type === "Attack") {
+                let totalDamage = card.damage + gameState.player.strength;
+                if (card.hits) {
+                    for (let i = 0; i < card.hits; i++) {
+                        dealDamageToEnemy(totalDamage);
+                    }
+                    addToLog(`Dealt ${totalDamage} damage ${card.hits} times with ${card.name}!`, "green-400");
+                } else if (card.aoe) {
+                    dealDamageToEnemy(totalDamage);
+                    addToLog(`Dealt ${totalDamage} damage to all enemies with ${card.name}!`, "green-400");
+                } else {
+                    dealDamageToEnemy(totalDamage);
+                    addToLog(`Dealt ${totalDamage} damage with ${card.name}!`, "green-400");
+                }
+            } else if (card.type === "Block") {
+                gameState.player.block += card.block;
+                addToLog(`Gained ${card.block} Block from ${card.name}!`, "blue-400");
+            } else if (card.type === "Heal") {
+                gameState.player.hp = Math.min(gameState.player.hp + card.heal, gameState.player.maxHp);
+                addToLog(`Healed ${card.heal} HP with ${card.name}!`, "green-400");
+            }
+            // Move card to discard
+            gameState.player.discard.push(card);
+            gameState.player.hand.splice(cardIndex, 1);
+            // Check if enemy is dead
+            if (gameState.enemy.hp <= 0) {
+                addToLog(`Defeated the ${gameState.enemy.name}!`, "purple-400");
+                // Award gold
+                const goldEarned = Math.floor(20 + Math.random() * 20);
+                gameState.player.gold += goldEarned;
+                addToLog(`Earned ${goldEarned} gold!`, "yellow-400");
+                setTimeout(() => {
+                    gameState.floor++;
+                    // Every 3 floors, show upgrade options
+                    if (gameState.floor % 3 === 0) {
+                        showUpgradeOptions();
+                    } else {
+                        createEnemy();
+                        addToLog(`Moving to floor ${gameState.floor}...`, "yellow-400");
+                        // At start of new floor, shuffle discard into deck
+                        gameState.player.deck = [...gameState.player.discard, ...gameState.player.deck];
+                        gameState.player.discard = [];
+                        shuffleDeck();
+                        drawHand();
+                    }
+                }, 1000);
+            }
+            updateUI();
+        }
+        // Show upgrade options to player
+        function showUpgradeOptions() {
+            document.getElementById('upgrade-gold').textContent = gameState.player.gold;
+            document.getElementById('current-gold').textContent = gameState.player.gold;
+            document.getElementById('upgrade-modal').classList.remove('hidden');
+        }
+        // Apply upgrade based on player choice
+        function applyUpgrade(choice) {
+            document.getElementById('upgrade-modal').classList.add('hidden');
+            switch(choice) {
+                case 1: // Max HP
+                    if (gameState.player.gold >= 50) {
+                        gameState.player.gold -= 50;
+                        gameState.player.maxHp += 10;
+                        gameState.player.hp += 10;
+                        addToLog("Your max HP increased by 10!", "green-400");
+                    }
+                    break;
+                case 2: // Energy
+                    if (gameState.player.gold >= 75) {
+                        gameState.player.gold -= 75;
+                        gameState.player.maxEnergy += 1;
+                        addToLog("You gained +1 energy per turn!", "blue-400");
+                    }
+                    break;
+                case 3: // Strength
+                    if (gameState.player.gold >= 50) {
+                        gameState.player.gold -= 50;
+                        gameState.player.strength += 1;
+                        addToLog("Your attacks deal +1 damage!", "red-400");
+                    }
+                    break;
+            }
+            // Proceed to next floor
+            createEnemy();
+            addToLog(`Moving to floor ${gameState.floor}...`, "yellow-400");
+            // At start of new floor, shuffle discard into deck
+            gameState.player.deck = [...gameState.player.discard, ...gameState.player.deck];
+            gameState.player.discard = [];
+            shuffleDeck();
+            drawHand();
+            updateUI();
+        }
+        // Deal damage to enemy
+        function dealDamageToEnemy(amount) {
+            gameState.enemy.hp -= amount;
+            // Shake enemy when hit
+            const enemyElement = document.getElementById('enemy-container');
+            enemyElement.classList.add('shake');
+            setTimeout(() => {
+                enemyElement.classList.remove('shake');
+            }, 500);
+            if (gameState.enemy.hp <= 0) {
+                gameState.enemy.hp = 0;
+            }
+            updateEnemyUI();
+        }
+        // End player's turn
+        function endTurn() {
+            if (!gameState.isPlayerTurn || gameState.gameOver) return;
+            gameState.isPlayerTurn = false;
+            addToLog("Ending turn...", "gray-400");
+            // Discard remaining hand
+            gameState.player.discard.push(...gameState.player.hand);
+            gameState.player.hand = [];
+            // Enemy turn
+            setTimeout(() => {
+                enemyTurn();
+            }, 1000);
+            updateUI();
+        }
+        // Enemy's turn
+        function enemyTurn() {
+            if (gameState.enemy.intent === "Attack") {
+                const damage = Math.max(0, gameState.enemy.damage - gameState.player.block);
+                // Show attack animation
+                const enemyAttackElement = document.getElementById('enemy-attack');
+                document.getElementById('enemy-damage').textContent = damage;
+                enemyAttackElement.classList.remove('hidden');
+                setTimeout(() => {
+                    enemyAttackElement.classList.add('hidden');
+                    if (damage > 0) {
+                        // Start HP rolling effect
+                        startHPRoll(gameState.player.hp - damage);
+                        addToLog(`${gameState.enemy.name} attacks for ${damage} damage!`, "red-400");
+                    } else {
+                        addToLog(`${gameState.enemy.name} attacks but you blocked all damage!`, "blue-400");
+                    }
+                    // Reset block at end of turn
+                    gameState.player.block = 0;
+                    // Start player's next turn
+                    startPlayerTurn();
+                }, 1000);
+            } else if (gameState.enemy.intent === "Debuff") {
+                addToLog(`${gameState.enemy.name} weakens you for ${gameState.enemy.damage} damage next turn!`, "yellow-400");
+                // In a more complex game, we'd implement debuffs here
+                // Start player's next turn
+                startPlayerTurn();
+            }
+        }
+        // Start player's turn
+        function startPlayerTurn() {
+            gameState.isPlayerTurn = true;
+            setEnemyIntent();
+            drawHand();
+            addToLog("Your turn! Draw 5 cards.", "green-400");
+            updateUI();
+        }
+        // Start Earthbound-style HP rolling effect
+        function startHPRoll(targetHp) {
+            if (gameState.hpRolling) {
+                clearInterval(gameState.hpRollInterval);
+            }
+            gameState.hpRolling = true;
+            gameState.hpRollTarget = Math.max(0, targetHp);
+            const hpElement = document.getElementById('player-hp-display');
+            hpElement.classList.add('hp-rolling');
+            gameState.hpRollInterval = setInterval(() => {
+                if (gameState.player.hp > gameState.hpRollTarget) {
+                    gameState.player.hp--;
+                    updatePlayerUI();
+                    // Check for death
+                    if (gameState.player.hp <= 0) {
+                        gameState.player.hp = 0;
+                        gameOver();
+                        clearInterval(gameState.hpRollInterval);
+                        gameState.hpRolling = false;
+                        hpElement.classList.remove('hp-rolling');
+                    }
+                } else {
+                    clearInterval(gameState.hpRollInterval);
+                    gameState.hpRolling = false;
+                    hpElement.classList.remove('hp-rolling');
+                }
+            }, 100);
+        }
+        // Game over
+        function gameOver() {
+            gameState.gameOver = true;
+            addToLog("You have been defeated!", "red-400");
+            // Show game over modal
+            document.getElementById('final-floor').textContent = gameState.floor;
+            document.getElementById('game-over-modal').classList.remove('hidden');
+        }
+        // Restart game
+        function restartGame() {
+            document.getElementById('game-over-modal').classList.add('hidden');
+            initGame();
+        }
+        // Update all UI elements
+        function updateUI() {
+            updatePlayerUI();
+            updateEnemyUI();
+            updateHandUI();
+            updateDeckUI();
+            document.getElementById('floor').textContent = gameState.floor;
+            document.getElementById('player-energy').textContent = gameState.player.energy;
+            document.getElementById('player-gold').textContent = gameState.player.gold;
+            // Disable end turn button if not player's turn
+            document.getElementById('end-turn-btn').disabled = !gameState.isPlayerTurn;
+        }
+        // Update player UI
+        function updatePlayerUI() {
+            document.getElementById('player-hp').textContent = gameState.player.hp;
+            document.getElementById('player-max-hp').textContent = gameState.player.maxHp;
+            document.getElementById('player-hp-display').textContent = gameState.player.hp;
+            document.getElementById('player-max-hp-display').textContent = gameState.player.maxHp;
+            document.getElementById('player-block').textContent = gameState.player.block;
+            document.getElementById('player-strength').textContent = gameState.player.strength;
+            document.getElementById('player-emoji').textContent = gameState.player.emoji;
+        }
+        // Update enemy UI
+        function updateEnemyUI() {
+            document.getElementById('enemy-name').textContent = gameState.enemy.name;
+            document.getElementById('enemy-hp').textContent = gameState.enemy.hp;
+            document.getElementById('enemy-max-hp').textContent = gameState.enemy.maxHp;
+            document.getElementById('enemy-emoji').textContent = gameState.enemy.emoji;
+            if (gameState.enemy.intent === "Attack") {
+                document.getElementById('enemy-intent').textContent = `Attack (${gameState.enemy.damage})`;
+                document.getElementById('enemy-intent').className = "font-bold text-red-400";
+            } else if (gameState.enemy.intent === "Debuff") {
+                document.getElementById('enemy-intent').textContent = `Debuff (${gameState.enemy.damage})`;
+                document.getElementById('enemy-intent').className = "font-bold text-yellow-400";
+            }
+        }
+        // Update hand UI
+        function updateHandUI() {
+            const handElement = document.getElementById('hand');
+            handElement.innerHTML = '';
+            gameState.player.hand.forEach((card, index) => {
+                const cardElement = document.createElement('div');
+                cardElement.className = `card bg-gray-700 rounded-lg p-4 cursor-pointer ${gameState.player.energy < card.cost ? 'opacity-50' : ''}`;
+                cardElement.innerHTML = `
+                    <div class="font-bold text-lg mb-2">${card.name}</div>
+                    <div class="text-sm text-gray-400 mb-2">Cost: <span class="text-blue-400">${card.cost}</span></div>
+                    <div class="text-sm">${card.description}</div>
+                    ${gameState.player.strength > 0 && card.type === "Attack" ? `<div class="text-xs mt-2 text-red-400">+${gameState.player.strength} damage</div>` : ''}
+                `;
+                cardElement.addEventListener('click', () => playCard(index));
+                handElement.appendChild(cardElement);
+            });
+        }
+        // Update deck and discard counts
+        function updateDeckUI() {
+            document.getElementById('deck-count').textContent = gameState.player.deck.length;
+            document.getElementById('discard-count').textContent = gameState.player.discard.length;
+        }
+        // Add message to battle log
+        function addToLog(message, color = "white") {
+            const logElement = document.getElementById('battle-log');
+            const messageElement = document.createElement('div');
+            messageElement.className = `text-${color}`;
+            messageElement.textContent = message;
+            logElement.appendChild(messageElement);
+            logElement.scrollTop = logElement.scrollHeight;
+        }
+        // Event Listeners
+        document.getElementById('end-turn-btn').addEventListener('click', endTurn);
+        document.getElementById('restart-btn').addEventListener('click', restartGame);
+        // Upgrade event listeners
+        document.getElementById('upgrade-1').addEventListener('click', () => applyUpgrade(1));
+        document.getElementById('upgrade-2').addEventListener('click', () => applyUpgrade(2));
+        document.getElementById('upgrade-3').addEventListener('click', () => applyUpgrade(3));
+        document.getElementById('skip-upgrade').addEventListener('click', () => {
+            document.getElementById('upgrade-modal').classList.add('hidden');
+            createEnemy();
+            addToLog(`Moving to floor ${gameState.floor}...`, "yellow-400");
+            // At start of new floor, shuffle discard into deck
+            gameState.player.deck = [...gameState.player.discard, ...gameState.player.deck];
+            gameState.player.discard = [];
+            shuffleDeck();
+            drawHand();
+            updateUI();
+        });
+        // Initialize the game
+        initGame();
+    </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=Jaspior/rogelike" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+the code is very nice, just make the layout landscape insted portrait and put an emoticon as the enemy and as the player, please
+ok, just more two things:
+desfaça a úlitma alteração. COloque os cards de ataque e o log à direita do jogador e inimigo. De a possibilidade do jogador ficar mais forte também.
+ok, the used cars aren't being recycling. Please, put the hand and battle log on the side of the battle, please
+the card arent working =(