Spaces:

Nymbo
/

Tiny-Healer

Running

App Files Files Community

Nymbo commited on Aug 8, 2024

Commit

75b1060

verified ·

1 Parent(s): d155c5f

Update index.html

Browse files

Files changed (1) hide show

index.html +301 -19

index.html CHANGED Viewed

@@ -1,19 +1,301 @@
-<!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>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;
+            font-size: 14px;
+            margin: 4px 2px;
+            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);
+                const healthBar = document.createElement('div');
+                healthBar.className = 'health-bar';
+                healthBar.innerHTML = `<div class="health-bar-text">Ally ${i + 1} HP: 100/100</div>`;
+                healthBar.onclick = () => selectAlly(i);
+                alliesContainer.appendChild(healthBar);
+                updateHealthBar(ally, healthBar);
+            }
+        }
+        function selectAlly(index) {
+            const healthBars = document.querySelectorAll('#allies .health-bar');
+            healthBars.forEach(bar => bar.classList.remove('selected'));
+            healthBars[index].classList.add('selected');
+            selectedAlly = allies[index];
+            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:
+                        healAlly(selectedAlly, spell.heal);
+                        break;
+                    case 2:
+                        startHealingStream(selectedAlly, spell);
+                        break;
+                    case 3:
+                        chainHeal(spell);
+                        break;
+                    case 4:
+                        teamHeal(spell);
+                        break;
+                }
+                startSpellCooldown(spellIndex);
+                startGlobalCooldown();
+            }
+        }
+        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);
+                }
+            }
+            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();
+            setTimeout(() => {
+                globalCooldown = false;
+                updateSpellButtons();
+            }, 1500);
+        }
+        function bossDamage() {
+            const damageAmount = 15;
+            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') {
+                castSpell(parseInt(key) - 1);
+            }
+        });
+        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>
+</html>