Spaces:

Nymbo
/

Tiny-Healer

Running

App Files Files Community

Nymbo commited on Aug 10, 2024

Commit

71b5cd3

verified ·

1 Parent(s): ae95585

adding lots of new mechanics, abilities, and styles

Browse files

Files changed (1) hide show

index.html +478 -64

index.html CHANGED Viewed

@@ -3,67 +3,131 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tiny Healer</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
             margin: 0;
-            background-color: #1a1a1a;
-            color: white;
         }
         #game-container {
             width: 800px;
             height: 600px;
-            border: 2px solid #333;
             padding: 20px;
-            background-color: #222;
         }
         #combat-window {
             display: flex;
             justify-content: space-between;
             margin-bottom: 20px;
         }
         #allies {
             width: 45%;
         }
         #boss {
             width: 45%;
         }
         .health-bar {
             height: 30px;
-            background-color: #4CAF50;
             margin-bottom: 10px;
             position: relative;
             cursor: pointer;
         }
-        .health-bar.selected {
-            background-color: #2196F3;
         }
         .health-bar-text {
             position: absolute;
             width: 100%;
             text-align: center;
             line-height: 30px;
         }
         #boss-health-bar {
             height: 50px;
-            background-color: #f44336;
         }
         #spell-buttons {
             display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
         }
         .spell-button {
             width: 18%;
             height: 50px;
-            background-color: #008CBA;
-            border: none;
-            color: white;
             text-align: center;
             text-decoration: none;
             display: inline-block;
@@ -72,86 +136,283 @@
             cursor: pointer;
             position: relative;
             overflow: hidden;
         }
         .spell-button:disabled {
-            background-color: #555;
             cursor: not-allowed;
         }
         .cooldown-progress {
             position: absolute;
             top: 0;
-            left: 0;
             height: 100%;
             width: 0;
             background-color: rgba(0, 0, 0, 0.5);
-            transition: width linear;
         }
-        #spellbook {
             width: 100%;
-            padding: 10px;
             background-color: #333;
             border: none;
-            color: white;
             font-size: 16px;
             margin-top: 10px;
         }
-        #spell-info {
-            margin-top: 10px;
-            padding: 10px;
             background-color: #444;
-            border-radius: 5px;
-            display: none;
         }
     </style>
 </head>
 <body>
     <div id="game-container">
         <div id="combat-window">
             <div id="allies"></div>
             <div id="boss">
                 <div id="boss-health-bar" class="health-bar">
                     <div class="health-bar-text">Boss HP: 5000/5000</div>
                 </div>
             </div>
         </div>
         <div id="spell-buttons"></div>
-        <select id="spellbook">
-            <option value="">Spellbook - Select a spell for info</option>
-            <option value="0">Quick Heal</option>
-            <option value="1">Strong Heal</option>
-            <option value="2">Healing Stream</option>
-            <option value="3">Chain Heal</option>
-            <option value="4">Team Heal</option>
-        </select>
-        <div id="spell-info"></div>
-    </div>
     <script>
         const allies = [];
         let boss = { hp: 5000, maxHp: 5000 };
         let selectedAlly = null;
         let globalCooldown = false;
         const spells = [
-            { name: "Quick Heal", cooldown: 1.5, heal: 10, description: "Heals the target for 10 HP. Global cooldown: 1.5 seconds." },
-            { name: "Strong Heal", cooldown: 15, heal: 30, description: "Heals the target for 30 HP. Cooldown: 15 seconds." },
-            { name: "Healing Stream", cooldown: 45, heal: 3, duration: 10, interval: 0.5, description: "Heals the target for 3 HP every 0.5 seconds for 10 seconds. Cooldown: 45 seconds." },
-            { name: "Chain Heal", cooldown: 15, heal: 10, targets: 3, description: "Heals 3 random allies for 10 HP each. Cooldown: 15 seconds." },
-            { name: "Team Heal", cooldown: 120, heal: 50, description: "Heals all allies for 50 HP. Cooldown: 2 minutes." }
         ];
         function createAlly(id) {
-            return { id, hp: 100, maxHp: 100 };
         }
         function updateHealthBar(entity, barElement) {
             const percentage = (entity.hp / entity.maxHp) * 100;
             barElement.style.width = `${percentage}%`;
             barElement.querySelector('.health-bar-text').textContent = `HP: ${entity.hp}/${entity.maxHp}`;
         }
         function createAllies() {
             const alliesContainer = document.getElementById('allies');
             for (let i = 0; i < 5; i++) {
                 const ally = createAlly(i);
                 allies.push(ally);
@@ -164,7 +425,9 @@
             }
         }
         function selectAlly(index) {
             const healthBars = document.querySelectorAll('#allies .health-bar');
             healthBars.forEach(bar => bar.classList.remove('selected'));
             healthBars[index].classList.add('selected');
@@ -172,28 +435,34 @@
             updateSpellButtons();
         }
         function createSpellButtons() {
             const spellButtonsContainer = document.getElementById('spell-buttons');
             spells.forEach((spell, index) => {
                 const button = document.createElement('button');
                 button.className = 'spell-button';
-                button.innerHTML = `${spell.name}<div class="cooldown-progress"></div>`;
                 button.onclick = () => castSpell(index);
                 button.disabled = true;
                 spellButtonsContainer.appendChild(button);
             });
         }
         function updateSpellButtons() {
             const spellButtons = document.querySelectorAll('.spell-button');
             spellButtons.forEach((button, index) => {
-                button.disabled = !selectedAlly || globalCooldown || button.classList.contains('on-cooldown');
             });
         }
         function castSpell(spellIndex) {
-            if (selectedAlly && !globalCooldown && !document.querySelectorAll('.spell-button')[spellIndex].classList.contains('on-cooldown')) {
-                const spell = spells[spellIndex];
                 switch (spellIndex) {
                     case 0:
                     case 1:
@@ -214,15 +483,19 @@
             }
         }
         function healAlly(ally, amount) {
-            ally.hp = Math.min(ally.hp + amount, ally.maxHp);
-            updateHealthBar(ally, document.querySelectorAll('.health-bar')[ally.id]);
         }
         function startHealingStream(ally, spell) {
             let ticks = spell.duration / spell.interval;
             function tick() {
-                if (ticks > 0) {
                     healAlly(ally, spell.heal);
                     ticks--;
                     setTimeout(tick, spell.interval * 1000);
@@ -231,28 +504,39 @@
             tick();
         }
         function chainHeal(spell) {
-            const targets = allies.sort(() => 0.5 - Math.random()).slice(0, spell.targets);
             targets.forEach(ally => healAlly(ally, spell.heal));
         }
         function teamHeal(spell) {
             allies.forEach(ally => healAlly(ally, spell.heal));
         }
         function startSpellCooldown(spellIndex) {
             const button = document.querySelectorAll('.spell-button')[spellIndex];
             const progressBar = button.querySelector('.cooldown-progress');
             button.classList.add('on-cooldown');
-            progressBar.style.transition = `width ${spells[spellIndex].cooldown}s linear`;
             progressBar.style.width = '100%';
             setTimeout(() => {
-                button.classList.remove('on-cooldown');
                 progressBar.style.width = '0';
                 updateSpellButtons();
             }, spells[spellIndex].cooldown * 1000);
         }
         function startGlobalCooldown() {
             globalCooldown = true;
             updateSpellButtons();
@@ -262,18 +546,139 @@
             }, 1500);
         }
         function bossDamage() {
-            const damageAmount = 8;
-            const targetAlly = allies[Math.floor(Math.random() * allies.length)];
             targetAlly.hp = Math.max(targetAlly.hp - damageAmount, 0);
             updateHealthBar(targetAlly, document.querySelectorAll('.health-bar')[targetAlly.id]);
         }
         function gameLoop() {
-            bossDamage();
-            setTimeout(gameLoop, 1000);
         }
         document.addEventListener('keydown', (event) => {
             const key = event.key;
             if (key >= '1' && key <= '5') {
@@ -281,20 +686,29 @@
             }
         });
-        document.getElementById('spellbook').addEventListener('change', (event) => {
-            const spellIndex = event.target.value;
-            const spellInfo = document.getElementById('spell-info');
-            if (spellIndex !== "") {
-                spellInfo.textContent = spells[spellIndex].description;
-                spellInfo.style.display = 'block';
-            } else {
-                spellInfo.style.display = 'none';
-            }
-        });
         createAllies();
         createSpellButtons();
         updateHealthBar(boss, document.getElementById('boss-health-bar'));
         gameLoop();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RPG Healer Combat Game</title>
     <style>
+        /* Basic body styling */
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
             margin: 0;
+            background-color: #0f0f0f;
+            color: #ffd100;
         }
+        /* Main game container */
         #game-container {
             width: 800px;
             height: 600px;
+            border: 2px solid #4a4a4a;
             padding: 20px;
+            background-color: rgba(0, 0, 0, 0.8);
+            position: relative;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            border-radius: 10px;
         }
+        /* Combat window containing allies and boss */
         #combat-window {
             display: flex;
             justify-content: space-between;
             margin-bottom: 20px;
         }
+        /* Allies section */
         #allies {
             width: 45%;
         }
+        /* Boss section */
         #boss {
             width: 45%;
         }
+        /* Health bar styling */
         .health-bar {
             height: 30px;
+            background-color: #1a1a1a;
             margin-bottom: 10px;
             position: relative;
             cursor: pointer;
+            border: 1px solid #4a4a4a;
+            border-radius: 5px;
+            overflow: hidden;
         }
+        .health-bar::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            background-color: #00ff00;
+            transition: width 0.3s ease;
+        }
+        /* Selected ally health bar */
+        .health-bar.selected::before {
+            background-color: #00aaff;
+        }
+        /* Dead ally health bar */
+        .health-bar.dead::before {
+            background-color: #777;
         }
+        /* Bleeding ally health bar */
+        .health-bar.bleeding::before {
+            background-image: linear-gradient(45deg, #00ff00 25%, #ff0000 25%, #ff0000 50%, #00ff00 50%, #00ff00 75%, #ff0000 75%, #ff0000 100%);
+            background-size: 40px 40px;
+            animation: bleed-animation 1s linear infinite;
+        }
+        @keyframes bleed-animation {
+            0% {
+                background-position: 0 0;
+            }
+            100% {
+                background-position: 40px 0;
+            }
+        }
+        /* Health bar text */
         .health-bar-text {
             position: absolute;
             width: 100%;
             text-align: center;
             line-height: 30px;
+            z-index: 1;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
         }
+        /* Boss health bar */
         #boss-health-bar {
             height: 50px;
         }
+        #boss-health-bar::before {
+            background-color: #ff0000;
+        }
+        /* Spell buttons container */
         #spell-buttons {
             display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
         }
+        /* Individual spell button */
         .spell-button {
             width: 18%;
             height: 50px;
+            background-color: #4a4a4a;
+            border: 1px solid #ffd100;
+            color: #ffd100;
             text-align: center;
             text-decoration: none;
             display: inline-block;
             cursor: pointer;
             position: relative;
             overflow: hidden;
+            border-radius: 5px;
+            transition: all 0.3s ease;
         }
+        .spell-button:hover {
+            background-color: #666;
+        }
+        /* Disabled spell button */
         .spell-button:disabled {
+            background-color: #333;
+            border-color: #666;
+            color: #666;
             cursor: not-allowed;
         }
+        /* Cooldown progress bar on spell buttons */
         .cooldown-progress {
             position: absolute;
             top: 0;
+            right: 0;
             height: 100%;
             width: 0;
             background-color: rgba(0, 0, 0, 0.5);
+            transition: width 0.1s linear;
         }
+        /* Mana bar container */
+        #mana-bar {
             width: 100%;
+            height: 20px;
+            background-color: #1a1a1a;
+            position: relative;
+            border: 1px solid #4a4a4a;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        /* Mana bar fill */
+        #mana-bar-fill {
+            height: 100%;
+            width: 100%;
+            background-color: #0077be;
+            transition: width 0.5s;
+        }
+        /* Mana text */
+        #mana-text {
+            position: absolute;
+            width: 100%;
+            text-align: center;
+            line-height: 20px;
+            color: #fff;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+        }
+        /* Reset button */
+        #reset-button {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            padding: 10px 20px;
+            background-color: #ffd100;
+            color: #000;
+            border: none;
+            cursor: pointer;
+            display: none;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+        #reset-button:hover {
+            background-color: #ffea00;
+        }
+        /* Game over and victory messages */
+        #game-over, #victory {
+            position: absolute;
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 36px;
+            display: none;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+        }
+        #game-over {
+            color: #ff0000;
+        }
+        #victory {
+            color: #00ff00;
+        }
+        /* Accordion styles */
+        .accordion {
             background-color: #333;
+            color: #ffd100;
+            cursor: pointer;
+            padding: 18px;
+            width: 100%;
+            text-align: left;
             border: none;
+            outline: none;
+            transition: 0.4s;
             font-size: 16px;
+            border-radius: 5px;
             margin-top: 10px;
         }
+        .accordion:hover {
             background-color: #444;
+        }
+        .panel {
+            padding: 0 18px;
+            background-color: #1a1a1a;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+            border-radius: 0 0 5px 5px;
+        }
+        /* Markdown styles */
+        .markdown {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #ccc;
+        }
+        .markdown h1, .markdown h2, .markdown h3 {
+            color: #ffd100;
+        }
+        .markdown code {
+            background-color: #333;
+            padding: 2px 4px;
+            border-radius: 4px;
+        }
+        .markdown pre {
+            background-color: #333;
+            padding: 10px;
+            border-radius: 4px;
+            overflow-x: auto;
         }
     </style>
 </head>
 <body>
+    <!-- Main game container -->
     <div id="game-container">
+        <!-- Combat window containing allies and boss -->
         <div id="combat-window">
+            <!-- Allies section -->
             <div id="allies"></div>
+            <!-- Boss section -->
             <div id="boss">
+                <!-- Boss health bar -->
                 <div id="boss-health-bar" class="health-bar">
                     <div class="health-bar-text">Boss HP: 5000/5000</div>
                 </div>
             </div>
         </div>
+        <!-- Spell buttons container -->
         <div id="spell-buttons"></div>
+        <!-- Mana bar -->
+        <div id="mana-bar">
+            <div id="mana-bar-fill"></div>
+            <div id="mana-text">Mana: 100/100</div>
+        </div>
+        <!-- Game over message -->
+        <div id="game-over">GAME OVER</div>
+        <!-- Victory message -->
+        <div id="victory">VICTORY!</div>
+        <!-- Reset button -->
+        <button id="reset-button">RESET</button>
+        <!-- Spellbook Accordion -->
+        <button class="accordion">Spellbook</button>
+        <div class="panel">
+            <div id="spellbook"></div>
+        </div>
+                <!-- Info Accordion -->
+        <button class="accordion">Info</button>
+        <div class="panel">
+            <div id="info" class="markdown">
+                <h1>Tiny Healer</h1>
+                <h2>TL;DR</h2>
+                <p>Tiny Healer is made with the gameplay loop of a healer in World of Warcraft in mind. Healing in a dungeon minus the game.</p>
+                <h2>Rules</h2>
+                <ul>
+                    <li>You are a healer, you cannot die yourself.</li>
+                    <li>Target your allies and cast spells to heal them (keybinds are 1-5).</li>
+                    <li>Allies automatically attack the boss.</li>
+                    <li>Game Over when all allies are dead.</li>
+                    <li>Victory when the boss is dead.</li>
+                </ul>
+                <h2>Mechanics</h2>
+                <ul>
+                    <li>The boss deals damage to a random ally every second.</li>
+                    <li>The boss periodically applies a Bleed to a random ally.</li>
+                    <li>You regenerate Mana passively.</li>
+                    <li>The Global Cooldown is 1.5 sec.</li>
+                </ul>
+                <h2>Usage</h2>
+                <p>It's only a few hundred lines of Pygame! The idea is to have a structure to tweak/tune mechanics and create your own boss encounters.</p>
+            </div>
+        </div>
     <script>
+        // Array to store ally objects
         const allies = [];
+        // Boss object
         let boss = { hp: 5000, maxHp: 5000 };
+        // Currently selected ally
         let selectedAlly = null;
+        // Global cooldown flag
         let globalCooldown = false;
+        // Game active flag
+        let gameActive = true;
+        // Player's current mana
+        let playerMana = 100;
+        // Maximum mana
+        const maxMana = 100;
+        // Boss bleed ability cooldown
+        let bossBleedCooldown = 0;
+        // Spell definitions
         const spells = [
+            { name: "Quick Heal", cooldown: 0, heal: 5, manaCost: 3, description: "A fast, low-cost heal that restores 5 HP." },
+            { name: "Strong Heal", cooldown: 15, heal: 30, manaCost: 5, description: "A powerful heal that restores 30 HP, but has a longer cooldown." },
+            { name: "Healing Stream", cooldown: 45, heal: 3, duration: 10, interval: 0.5, manaCost: 6, description: "Heals the target for 3 HP every 0.5 seconds for 10 seconds." },
+            { name: "Chain Heal", cooldown: 15, heal: 10, targets: 3, manaCost: 10, description: "Heals 3 random allies for 10 HP each." },
+            { name: "Team Heal", cooldown: 120, heal: 30, manaCost: 20, description: "Heals all allies for 30 HP, but has a very long cooldown." }
         ];
+        // Function to create an ally object
         function createAlly(id) {
+            return { id, hp: 100, maxHp: 100, alive: true, bleeding: false };
         }
+        // Function to update health bars
         function updateHealthBar(entity, barElement) {
             const percentage = (entity.hp / entity.maxHp) * 100;
             barElement.style.width = `${percentage}%`;
             barElement.querySelector('.health-bar-text').textContent = `HP: ${entity.hp}/${entity.maxHp}`;
+            if (entity.hp <= 0) {
+                barElement.classList.add('dead');
+            }
+            if (entity.bleeding) {
+                barElement.classList.add('bleeding');
+            } else {
+                barElement.classList.remove('bleeding');
+            }
         }
+        // Function to update the mana bar
+        function updateManaBar() {
+            const manaBarFill = document.getElementById('mana-bar-fill');
+            const manaText = document.getElementById('mana-text');
+            const percentage = (playerMana / maxMana) * 100;
+            manaBarFill.style.width = `${percentage}%`;
+            manaText.textContent = `Mana: ${playerMana}/${maxMana}`;
+        }
+        // Function to create ally health bars
         function createAllies() {
             const alliesContainer = document.getElementById('allies');
+            alliesContainer.innerHTML = '';
+            allies.length = 0;
             for (let i = 0; i < 5; i++) {
                 const ally = createAlly(i);
                 allies.push(ally);
             }
         }
+        // Function to select an ally
         function selectAlly(index) {
+            if (!allies[index].alive) return;
             const healthBars = document.querySelectorAll('#allies .health-bar');
             healthBars.forEach(bar => bar.classList.remove('selected'));
             healthBars[index].classList.add('selected');
             updateSpellButtons();
         }
+        // Function to create spell buttons
         function createSpellButtons() {
             const spellButtonsContainer = document.getElementById('spell-buttons');
+            spellButtonsContainer.innerHTML = '';
             spells.forEach((spell, index) => {
                 const button = document.createElement('button');
                 button.className = 'spell-button';
+                button.innerHTML = `${spell.name}<br>(${spell.manaCost} Mana)<div class="cooldown-progress"></div>`;
                 button.onclick = () => castSpell(index);
                 button.disabled = true;
                 spellButtonsContainer.appendChild(button);
             });
         }
+        // Function to update spell button states
         function updateSpellButtons() {
             const spellButtons = document.querySelectorAll('.spell-button');
             spellButtons.forEach((button, index) => {
+                button.disabled = !selectedAlly || !selectedAlly.alive || globalCooldown || button.classList.contains('on-cooldown') || !gameActive || playerMana < spells[index].manaCost;
             });
         }
+        // Function to cast a spell
         function castSpell(spellIndex) {
+            const spell = spells[spellIndex];
+            if (selectedAlly && selectedAlly.alive && !globalCooldown && !document.querySelectorAll('.spell-button')[spellIndex].classList.contains('on-cooldown') && gameActive && playerMana >= spell.manaCost) {
+                playerMana -= spell.manaCost;
+                updateManaBar();
                 switch (spellIndex) {
                     case 0:
                     case 1:
             }
         }
+        // Function to heal an ally
         function healAlly(ally, amount) {
+            if (ally.alive) {
+                ally.hp = Math.min(ally.hp + amount, ally.maxHp);
+                updateHealthBar(ally, document.querySelectorAll('.health-bar')[ally.id]);
+            }
         }
+        // Function to start a healing stream
         function startHealingStream(ally, spell) {
             let ticks = spell.duration / spell.interval;
             function tick() {
+                if (ticks > 0 && ally.alive && gameActive) {
                     healAlly(ally, spell.heal);
                     ticks--;
                     setTimeout(tick, spell.interval * 1000);
             tick();
         }
+        // Function to perform chain heal
         function chainHeal(spell) {
+            const livingAllies = allies.filter(ally => ally.alive);
+            const targets = livingAllies.sort(() => 0.5 - Math.random()).slice(0, spell.targets);
             targets.forEach(ally => healAlly(ally, spell.heal));
         }
+        // Function to heal all allies
         function teamHeal(spell) {
             allies.forEach(ally => healAlly(ally, spell.heal));
         }
+        // Function to start spell cooldown
         function startSpellCooldown(spellIndex) {
             const button = document.querySelectorAll('.spell-button')[spellIndex];
             const progressBar = button.querySelector('.cooldown-progress');
             button.classList.add('on-cooldown');
+            progressBar.style.transition = 'width 0.1s linear';
             progressBar.style.width = '100%';
             setTimeout(() => {
+                progressBar.style.transition = `width ${spells[spellIndex].cooldown}s linear`;
                 progressBar.style.width = '0';
+            }, 100);
+            setTimeout(() => {
+                button.classList.remove('on-cooldown');
                 updateSpellButtons();
             }, spells[spellIndex].cooldown * 1000);
         }
+        // Function to start global cooldown
         function startGlobalCooldown() {
             globalCooldown = true;
             updateSpellButtons();
             }, 1500);
         }
+        // Function for boss to damage allies
         function bossDamage() {
+            if (!gameActive) return;
+            const damageAmount = 5;
+            const livingAllies = allies.filter(ally => ally.alive);
+            if (livingAllies.length === 0) {
+                endGame();
+                return;
+            }
+            const targetAlly = livingAllies[Math.floor(Math.random() * livingAllies.length)];
             targetAlly.hp = Math.max(targetAlly.hp - damageAmount, 0);
+            if (targetAlly.hp === 0) {
+                targetAlly.alive = false;
+            }
             updateHealthBar(targetAlly, document.querySelectorAll('.health-bar')[targetAlly.id]);
+            if (allies.every(ally => !ally.alive)) {
+                endGame();
+            }
+        }
+        // Function for boss bleed ability
+        function bossBleedAbility() {
+            if (!gameActive) return;
+            bossBleedCooldown--;
+            if (bossBleedCooldown <= 0) {
+                const livingAllies = allies.filter(ally => ally.alive);
+                if (livingAllies.length > 0) {
+                    const targetAlly = livingAllies[Math.floor(Math.random() * livingAllies.length)];
+                    targetAlly.bleeding = true;
+                    updateHealthBar(targetAlly, document.querySelectorAll('.health-bar')[targetAlly.id]);
+                    let bleedTicks = 4;
+                    function bleedTick() {
+                        if (bleedTicks > 0 && targetAlly.alive && gameActive) {
+                            targetAlly.hp = Math.max(targetAlly.hp - 10, 0);
+                            updateHealthBar(targetAlly, document.querySelectorAll('.health-bar')[targetAlly.id]);
+                            bleedTicks--;
+                            if (bleedTicks === 0) {
+                                targetAlly.bleeding = false;
+                                updateHealthBar(targetAlly, document.querySelectorAll('.health-bar')[targetAlly.id]);
+                            } else {
+                                setTimeout(bleedTick, 1000);
+                            }
+                        }
+                    }
+                    bleedTick();
+                }
+                bossBleedCooldown = 15;
+            }
+        }
+        // Function for allies to attack boss
+        function alliesAttack() {
+            if (!gameActive) return;
+            const damagePerAlly = 5;
+            const livingAllies = allies.filter(ally => ally.alive);
+            const totalDamage = livingAllies.length * damagePerAlly;
+            boss.hp = Math.max(boss.hp - totalDamage, 0);
+            updateHealthBar(boss, document.getElementById('boss-health-bar'));
+            if (boss.hp <= 0) {
+                victory();
+            }
+        }
+        // Function to regenerate mana
+        function regenerateMana() {
+            if (gameActive && playerMana < maxMana) {
+                playerMana = Math.min(playerMana + 1, maxMana);
+                updateManaBar();
+            }
+        }
+        // Function to end the game (loss)
+        function endGame() {
+            gameActive = false;
+            document.getElementById('game-over').style.display = 'block';
+            document.getElementById('reset-button').style.display = 'block';
+            updateSpellButtons();
+        }
+        // Function to end the game (victory)
+        function victory() {
+            gameActive = false;
+            document.getElementById('victory').style.display = 'block';
+            document.getElementById('reset-button').style.display = 'block';
+            updateSpellButtons();
+        }
+        // Function to reset the game
+        function resetGame() {
+            gameActive = true;
+            document.getElementById('game-over').style.display = 'none';
+            document.getElementById('victory').style.display = 'none';
+            document.getElementById('reset-button').style.display = 'none';
+            createAllies();
+            createSpellButtons();
+            boss = { hp: 5000, maxHp: 5000 };
+            updateHealthBar(boss, document.getElementById('boss-health-bar'));
+            selectedAlly = null;
+            globalCooldown = false;
+            playerMana = maxMana;
+            bossBleedCooldown = 15;
+            updateManaBar();
+            updateSpellButtons();
         }
+        // Main game loop
         function gameLoop() {
+            if (gameActive) {
+                bossDamage();
+                bossBleedAbility();
+                alliesAttack();
+                setTimeout(gameLoop, 1000);
+            }
         }
+        // Function to populate the spellbook
+        function populateSpellbook() {
+            const spellbookContainer = document.getElementById('spellbook');
+            spellbookContainer.innerHTML = '';
+            spells.forEach(spell => {
+                const spellInfo = document.createElement('div');
+                spellInfo.innerHTML = `<h3>${spell.name}</h3>
+                                       <p>${spell.description}</p>
+                                       <p>Mana Cost: ${spell.manaCost}</p>
+                                       <p>Cooldown: ${spell.cooldown} seconds</p>`;
+                spellbookContainer.appendChild(spellInfo);
+            });
+        }
+        // Set up mana regeneration interval
+        setInterval(regenerateMana, 2000);
+        // Event listener for keyboard input
         document.addEventListener('keydown', (event) => {
             const key = event.key;
             if (key >= '1' && key <= '5') {
             }
         });
+        // Event listener for reset button
+        document.getElementById('reset-button').addEventListener('click', resetGame);
+        // Event listeners for accordions
+        const accordions = document.getElementsByClassName("accordion");
+        for (let i = 0; i < accordions.length; i++) {
+            accordions[i].addEventListener("click", function() {
+                this.classList.toggle("active");
+                const panel = this.nextElementSibling;
+                if (panel.style.maxHeight) {
+                    panel.style.maxHeight = null;
+                } else {
+                    panel.style.maxHeight = panel.scrollHeight + "px";
+                }
+            });
+        }
+        // Initial game setup
         createAllies();
         createSpellButtons();
         updateHealthBar(boss, document.getElementById('boss-health-bar'));
+        updateManaBar();
+        populateSpellbook();
         gameLoop();
     </script>
 </body>