D20DungeonCrawlerAI

Running

App Files Files Community

awacke1 commited on Oct 5

Commit

1f5d9a3

•

1 Parent(s): dab9c19

Update index.html

Browse files

Files changed (1) hide show

index.html +297 -19

index.html CHANGED Viewed

@@ -1,19 +1,297 @@
-<!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>🎲 D20 Dungeon Crawler 🏰</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            background-color: #2c3e50;
+            color: #ecf0f1;
+        }
+        #game-container {
+            background-color: #34495e;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.3);
+            max-width: 800px;
+            width: 100%;
+        }
+        button {
+            margin: 5px;
+            padding: 10px 15px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        select {
+            margin: 5px;
+            padding: 5px 10px;
+        }
+        #dungeon-image {
+            width: 100%;
+            height: 200px;
+            background-color: #2c3e50;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            text-align: center;
+        }
+        #choices {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+        #combat-log {
+            max-height: 200px;
+            overflow-y: auto;
+            background-color: #2c3e50;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        #monster-trophies {
+            display: flex;
+            flex-wrap: wrap;
+            margin-top: 10px;
+        }
+        .monster-trophy {
+            font-size: 24px;
+            margin-right: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <h1>🎲 D20 Dungeon Crawler 🏰</h1>
+        <div id="character-creation">
+            <h2>👤 Character Creation</h2>
+            <select id="race">
+                <option value="human">👨 Human</option>
+                <option value="elf">🧝‍♂️ Elf</option>
+                <option value="dwarf">🧔 Dwarf</option>
+                <option value="halfling">🧒 Halfling</option>
+            </select>
+            <select id="class">
+                <option value="warrior">⚔️ Warrior</option>
+                <option value="mage">🧙‍♂️ Mage</option>
+                <option value="rogue">🗡️ Rogue</option>
+                <option value="cleric">✨ Cleric</option>
+            </select>
+            <button onclick="createCharacter()">🎭 Create Character</button>
+        </div>
+        <div id="game-area" style="display: none;">
+            <div id="dungeon-image"></div>
+            <div id="encounter-description"></div>
+            <div id="choices"></div>
+            <div id="player-stats"></div>
+            <div id="combat-log"></div>
+            <div id="monster-trophies"></div>
+        </div>
+    </div>
+    <svg id="d20" width="100" height="100" viewBox="0 0 100 100" style="display: none;">
+        <polygon points="50,5 95,75 5,75" fill="#f3f3f3" stroke="#000" stroke-width="2"/>
+        <text x="50" y="55" font-size="24" text-anchor="middle" id="roll-result"></text>
+    </svg>
+    <script>
+        let player, currentEncounter, score = 0, monsterTrophies = [];
+        const settingsData = `
+🏛️🏮,Ancient Temple,A crumbling temple with flickering torches and moss-covered statues
+🌳🍄,Enchanted Forest,A mystical forest filled with glowing mushrooms and whispering trees
+🏔️❄️,Frozen Peaks,Treacherous icy mountains with howling winds and hidden crevasses
+🏜️🐫,Desert Ruins,Sun-baked ruins half-buried in shifting sands
+🌋🔥,Volcanic Cavern,A scorching cave system with rivers of lava and sulfurous air
+🌊🐚,Sunken City,The remains of an ancient city submerged beneath crystal-clear waters
+🕯️📚,Arcane Library,Towering bookshelves filled with magical tomes and floating candles
+⚰️💀,Haunted Crypt,A chilling burial chamber echoing with unseen whispers
+🌿🦋,Fairy Glade,A serene clearing shimmering with magical butterflies and flower petals
+🕰️⚙️,Clockwork Maze,An intricate labyrinth of gears, pistons, and ticking mechanisms
+🌙🐺,Shadowy Woods,Dark and foreboding forest where eyes seem to watch from every shadow
+🔮🎭,Illusory Palace,A grand castle where nothing is as it seems, constantly shifting
+🕳️🦇,Abyssal Chasm,A deep, dark pit with strange echoes and unseen terrors
+🌈🦄,Crystal Cavern,A dazzling cave system filled with luminous, multi-colored crystals
+🎪🎭,Carnival of Souls,An eerie, abandoned fairground with a sinister undercurrent
+🗿🌴,Primal Jungle,A dense, primordial jungle teeming with ancient creatures and ruins
+🌀🌌,Astral Plane,A surreal realm of floating islands and swirling cosmic energies
+🏴‍☠️🦜,Ghost Ship,A decrepit vessel sailing through mists, crewed by spectral pirates
+🕋🎶,Harmonic Sanctuary,A tranquil temple where magical music fills the air
+🏭👾,Alien Hive,A bizarre, organic structure pulsing with otherworldly life
+`;
+        const monstersData = `
+👹🗡️,Goblin,A small, green-skinned creature with a wicked grin and rusty dagger
+💀🏹,Skeleton Archer,A reanimated skeleton wielding a creaky bow with surprising accuracy
+🐺🌙,Dire Wolf,A massive wolf with glowing eyes and razor-sharp fangs
+🕷️🕸️,Giant Spider,A hairy arachnid the size of a horse, with venom dripping from its fangs
+🧟‍♂️🔗,Zombie,A shambling corpse with rotting flesh, driven by an insatiable hunger
+🧙‍♀️🔮,Evil Witch,A cackling hag with gnarled fingers and a bubbling cauldron of curses
+🐉🔥,Young Dragon,A scaled wyrm with smoke curling from its nostrils, hungry for treasure
+🦇🧛‍♂️,Vampire,A pale, aristocratic figure with razor-sharp fangs and hypnotic eyes
+🌿🍃,Treant,An ancient tree come to life, with bark-covered limbs and mossy beard
+🦎🔱,Lizardfolk Warrior,A scaly humanoid with sharp claws and primitive weapons
+👻🔗,Poltergeist,An invisible spirit that delights in chaos and flying objects
+🐙🌊,Kraken Spawn,A mass of writhing tentacles emerging from dark waters
+🦅🦁,Griffin,A majestic creature with the head and wings of an eagle and body of a lion
+🗿🔨,Stone Golem,A hulking figure carved from living rock, nearly impervious to harm
+🦄🌈,Corrupted Unicorn,Once pure, now twisted by dark magic with a deadly horn
+🧜‍♀️🎶,Siren,A hauntingly beautiful creature with an alluring, deadly song
+🐲☁️,Cloud Giant,A towering humanoid wreathed in mists, with storm-powered magic
+🦂🔥,Infernal Scorpion,A massive scorpion with a carapace of smoldering coals
+🧠👁️,Mind Flayer,A tentacle-faced horror with powerful psionic abilities
+🌑🐺,Shadow Wolf,A beast made of living darkness with glowing red eyes
+`;
+        const settings = parseCSV(settingsData);
+        const monsters = parseCSV(monstersData);
+        function parseCSV(data) {
+            return data.trim().split('\n').map(line => {
+                const [emoji, name, description] = line.split(',');
+                return { emoji, name, description };
+            });
+        }
+        function createCharacter() {
+            const race = document.getElementById('race').value;
+            const characterClass = document.getElementById('class').value;
+            player = {
+                race,
+                class: characterClass,
+                maxHp: 50,
+                hp: 50,
+                attack: 10,
+                defense: 5,
+                magic: 8
+            };
+            document.getElementById('character-creation').style.display = 'none';
+            document.getElementById('game-area').style.display = 'block';
+            updateStats();
+            nextEncounter();
+        }
+        function updateStats() {
+            document.getElementById('player-stats').innerHTML = `
+                👤 Player: ❤️ HP ${player.hp}/${player.maxHp}, ⚔️ ATK ${player.attack}, 🛡️ DEF ${player.defense}, 🔮 MAG ${player.magic}
+                <br>🏆 Score: ${score}
+            `;
+        }
+        function nextEncounter() {
+            const setting = settings[Math.floor(Math.random() * settings.length)];
+            const monster = monsters[Math.floor(Math.random() * monsters.length)];
+            currentEncounter = {
+                setting,
+                monster,
+                monsterHp: 30,
+                description: `${setting.emoji} You find yourself in ${setting.name}. ${setting.description}
+                              <br><br>${monster.emoji} Suddenly, a ${monster.name} appears! ${monster.description}`,
+                choices: generateChoices()
+            };
+            document.getElementById('dungeon-image').innerHTML = setting.emoji;
+            document.getElementById('encounter-description').innerHTML = currentEncounter.description;
+            displayChoices();
+        }
+        function generateChoices() {
+            return [
+                { text: "⚔️ Attack with your weapon", successRate: 0.7, statUsed: "attack" },
+                { text: "🔮 Cast a spell", successRate: 0.6, statUsed: "magic" },
+                { text: "🕵️ Try to sneak past", successRate: 0.5, statUsed: "defense" },
+                { text: "🗣️ Attempt to communicate", successRate: 0.3, statUsed: "magic" }
+            ];
+        }
+        function displayChoices() {
+            const choicesDiv = document.getElementById('choices');
+            choicesDiv.innerHTML = "";
+            currentEncounter.choices.forEach((choice, index) => {
+                const button = document.createElement('button');
+                button.textContent = `${String.fromCharCode(65 + index)}. ${choice.text}`;
+                button.onclick = () => makeChoice(index);
+                choicesDiv.appendChild(button);
+            });
+        }
+        async function makeChoice(index) {
+            const choice = currentEncounter.choices[index];
+            const roll = await rollD20();
+            const success = roll / 20 <= choice.successRate;
+            const statBonus = player[choice.statUsed] / 10;
+            const totalSuccessRate = Math.min(choice.successRate + statBonus, 1);
+            if (success) {
+                const damage = Math.floor(roll * totalSuccessRate);
+                currentEncounter.monsterHp -= damage;
+                score += damage;
+                log(`✅ Success! ${choice.text} (🎲 Roll: ${roll}, 📊 Success Rate: ${(totalSuccessRate * 100).toFixed(1)}%, 💥 Damage: ${damage}, 🏆 Score: +${damage})`);
+            } else {
+                player.hp -= 5;
+                log(`❌ Failure... ${choice.text} (🎲 Roll: ${roll}, 📊 Success Rate: ${(totalSuccessRate * 100).toFixed(1)}%, ❤️ HP: -5)`);
+            }
+            updateStats();
+            if (player.hp <= 0) {
+                log("💀 Game over! You have been defeated.");
+                return;
+            }
+            if (currentEncounter.monsterHp <= 0) {
+                log(`🎉 Victory! You defeated the ${currentEncounter.monster.name}!`);
+                monsterTrophies.push(currentEncounter.monster.emoji);
+                updateMonsterTrophies();
+                player.hp = player.maxHp; // Heal to full after battle
+                updateStats();
+                nextEncounter();
+            } else {
+                log(`The ${currentEncounter.monster.name} has ${currentEncounter.monsterHp} HP remaining.`);
+            }
+        }
+        function updateMonsterTrophies() {
+            const trophiesDiv = document.getElementById('monster-trophies');
+            trophiesDiv.innerHTML = monsterTrophies.map(emoji => `<span class="monster-trophy">${emoji}</span>`).join('');
+        }
+        function rollD20() {
+            return new Promise(resolve => {
+                const d20 = document.getElementById('d20');
+                d20.style.display = 'block';
+                const result = Math.floor(Math.random() * 20) + 1;
+                document.getElementById('roll-result').textContent = result;
+                d20.animate([
+                    { transform: 'rotate(0deg)' },
+                    { transform: 'rotate(360deg)' }
+                ], {
+                    duration: 1000,
+                    iterations: 1
+                }).onfinish = () => {
+                    d20.style.display = 'none';
+                    resolve(result);
+                };
+            });
+        }
+        function log(message) {
+            const combatLog = document.getElementById('combat-log');
+            combatLog.innerHTML += `<p>${message}</p>`;
+            combatLog.scrollTop = combatLog.scrollHeight;
+        }
+    </script>
+</body>
+</html>