Spaces:

privateuserh
/

pickleball-mining-game-vbeta1-01

Running

App Files Files Community

privateuserh commited on Apr 16

Commit

f7283d9

verified ·

1 Parent(s): 44aa483

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +487 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Pickleball Mining Game Vbeta1 01
-emoji: 🏃
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: pickleball-mining-game-vbeta1-01
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 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,487 @@
-<!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>Pickleball Mining Adventure</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        .bounce-animation {
+            animation: bounce 1s infinite;
+        }
+        .mining-animation {
+            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
+        }
+        @keyframes shake {
+            10%, 90% { transform: translate3d(-1px, 0, 0); }
+            20%, 80% { transform: translate3d(2px, 0, 0); }
+            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+            40%, 60% { transform: translate3d(4px, 0, 0); }
+        }
+        .progress-bar {
+            transition: width 0.3s ease;
+        }
+        .tooltip {
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .has-tooltip:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="bg-green-50 min-h-screen flex flex-col">
+    <div class="container mx-auto px-4 py-8 flex-grow">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold text-green-800">Pickleball Mining</h1>
+                <p class="text-green-600">Dig for pickleball treasures!</p>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="bg-white rounded-lg shadow p-3 flex items-center">
+                    <i class="fas fa-coins text-yellow-500 text-xl mr-2"></i>
+                    <span id="coins" class="font-bold">0</span>
+                </div>
+                <div class="bg-white rounded-lg shadow p-3 flex items-center">
+                    <i class="fas fa-trophy text-purple-500 text-xl mr-2"></i>
+                    <span id="level" class="font-bold">1</span>
+                </div>
+            </div>
+        </header>
+        <!-- Game Area -->
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
+            <!-- Mining Area -->
+            <div class="relative bg-green-200 h-64 flex items-center justify-center">
+                <div id="mine" class="w-48 h-48 bg-gray-800 rounded-full flex items-center justify-center cursor-pointer transition-transform hover:scale-105">
+                    <div id="pickaxe" class="text-4xl absolute bounce-animation">⛏️</div>
+                    <div id="mining-effect" class="hidden absolute inset-0 flex items-center justify-center">
+                        <div class="mining-animation text-6xl">💎</div>
+                    </div>
+                </div>
+                <!-- Floating items that appear when mining -->
+                <div id="floating-items" class="absolute inset-0 pointer-events-none"></div>
+            </div>
+            <!-- Progress Bar -->
+            <div class="bg-gray-200 h-4">
+                <div id="level-progress" class="progress-bar bg-green-500 h-full w-0"></div>
+            </div>
+        </div>
+        <!-- Upgrades -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+            <!-- Pickaxe Upgrade -->
+            <div class="bg-white rounded-lg shadow p-4">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-lg">Pickaxe Power</h3>
+                    <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Level <span id="pickaxe-level">1</span></span>
+                </div>
+                <p class="text-gray-600 text-sm mb-3">Increases coins per hit</p>
+                <div class="flex justify-between items-center">
+                    <button id="upgrade-pickaxe" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded transition-colors">
+                        Upgrade (<span id="pickaxe-cost">100</span> coins)
+                    </button>
+                    <div class="has-tooltip relative">
+                        <i class="fas fa-info-circle text-gray-400"></i>
+                        <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32">
+                            Current: +<span id="pickaxe-value">1</span> coin per hit
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Stamina Upgrade -->
+            <div class="bg-white rounded-lg shadow p-4">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-lg">Stamina</h3>
+                    <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Level <span id="stamina-level">1</span></span>
+                </div>
+                <p class="text-gray-600 text-sm mb-3">Reduces mining cooldown</p>
+                <div class="flex justify-between items-center">
+                    <button id="upgrade-stamina" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors">
+                        Upgrade (<span id="stamina-cost">150</span> coins)
+                    </button>
+                    <div class="has-tooltip relative">
+                        <i class="fas fa-info-circle text-gray-400"></i>
+                        <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32">
+                            Current: <span id="stamina-value">1.0</span>s cooldown
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Luck Upgrade -->
+            <div class="bg-white rounded-lg shadow p-4">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-lg">Luck</h3>
+                    <span class="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">Level <span id="luck-level">1</span></span>
+                </div>
+                <p class="text-gray-600 text-sm mb-3">Chance for bonus rewards</p>
+                <div class="flex justify-between items-center">
+                    <button id="upgrade-luck" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded transition-colors">
+                        Upgrade (<span id="luck-cost">200</span> coins)
+                    </button>
+                    <div class="has-tooltip relative">
+                        <i class="fas fa-info-circle text-gray-400"></i>
+                        <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded p-2 w-32">
+                            Current: <span id="luck-value">5</span>% bonus chance
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Inventory -->
+        <div class="bg-white rounded-lg shadow p-4">
+            <h2 class="text-xl font-bold mb-4 text-green-800">Inventory</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3">
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">🏓</div>
+                    <div class="text-sm">Pickleballs</div>
+                    <div id="pickleball-count" class="font-bold">0</div>
+                </div>
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">💎</div>
+                    <div class="text-sm">Gems</div>
+                    <div id="gem-count" class="font-bold">0</div>
+                </div>
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">🏆</div>
+                    <div class="text-sm">Trophies</div>
+                    <div id="trophy-count" class="font-bold">0</div>
+                </div>
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">🍯</div>
+                    <div class="text-sm">Honey</div>
+                    <div id="honey-count" class="font-bold">0</div>
+                </div>
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">🔑</div>
+                    <div class="text-sm">Keys</div>
+                    <div id="key-count" class="font-bold">0</div>
+                </div>
+                <div class="border rounded p-2 text-center">
+                    <div class="text-3xl mb-1">🎾</div>
+                    <div class="text-sm">Balls</div>
+                    <div id="ball-count" class="font-bold">0</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Level Up Modal -->
+    <div id="level-up-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="bg-white rounded-xl p-8 max-w-md text-center animate-bounce">
+            <div class="text-6xl mb-4 text-yellow-500">🎉</div>
+            <h2 class="text-2xl font-bold mb-2">Level Up!</h2>
+            <p class="mb-4">You've reached level <span id="new-level">2</span>!</p>
+            <p class="text-green-600 font-bold mb-4">+50 coins bonus!</p>
+            <button id="close-level-up" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-full">
+                Continue Mining
+            </button>
+        </div>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            coins: 0,
+            level: 1,
+            xp: 0,
+            xpNeeded: 100,
+            inventory: {
+                pickleballs: 0,
+                gems: 0,
+                trophies: 0,
+                honey: 0,
+                keys: 0,
+                balls: 0
+            },
+            upgrades: {
+                pickaxe: {
+                    level: 1,
+                    cost: 100,
+                    value: 1
+                },
+                stamina: {
+                    level: 1,
+                    cost: 150,
+                    value: 1.0
+                },
+                luck: {
+                    level: 1,
+                    cost: 200,
+                    value: 5
+                }
+            },
+            isMining: false,
+            cooldown: false
+        };
+        // DOM Elements
+        const mine = document.getElementById('mine');
+        const pickaxe = document.getElementById('pickaxe');
+        const miningEffect = document.getElementById('mining-effect');
+        const floatingItems = document.getElementById('floating-items');
+        const coinsDisplay = document.getElementById('coins');
+        const levelDisplay = document.getElementById('level');
+        const levelProgress = document.getElementById('level-progress');
+        // Upgrade Elements
+        const pickaxeLevel = document.getElementById('pickaxe-level');
+        const pickaxeCost = document.getElementById('pickaxe-cost');
+        const pickaxeValue = document.getElementById('pickaxe-value');
+        const staminaLevel = document.getElementById('stamina-level');
+        const staminaCost = document.getElementById('stamina-cost');
+        const staminaValue = document.getElementById('stamina-value');
+        const luckLevel = document.getElementById('luck-level');
+        const luckCost = document.getElementById('luck-cost');
+        const luckValue = document.getElementById('luck-value');
+        // Inventory Elements
+        const pickleballCount = document.getElementById('pickleball-count');
+        const gemCount = document.getElementById('gem-count');
+        const trophyCount = document.getElementById('trophy-count');
+        const honeyCount = document.getElementById('honey-count');
+        const keyCount = document.getElementById('key-count');
+        const ballCount = document.getElementById('ball-count');
+        // Modal Elements
+        const levelUpModal = document.getElementById('level-up-modal');
+        const newLevelDisplay = document.getElementById('new-level');
+        const closeLevelUp = document.getElementById('close-level-up');
+        // Initialize the game
+        function initGame() {
+            updateDisplays();
+            // Event Listeners
+            mine.addEventListener('click', mineClick);
+            document.getElementById('upgrade-pickaxe').addEventListener('click', () => upgrade('pickaxe'));
+            document.getElementById('upgrade-stamina').addEventListener('click', () => upgrade('stamina'));
+            document.getElementById('upgrade-luck').addEventListener('click', () => upgrade('luck'));
+            closeLevelUp.addEventListener('click', () => levelUpModal.classList.add('hidden'));
+        }
+        // Handle mine click
+        function mineClick() {
+            if (gameState.cooldown) return;
+            // Start mining animation
+            gameState.isMining = true;
+            pickaxe.classList.add('hidden');
+            miningEffect.classList.remove('hidden');
+            // After a short delay, finish mining
+            setTimeout(() => {
+                finishMining();
+            }, 300);
+        }
+        // Finish mining action
+        function finishMining() {
+            gameState.isMining = false;
+            pickaxe.classList.remove('hidden');
+            miningEffect.classList.add('hidden');
+            // Calculate rewards
+            const baseReward = gameState.upgrades.pickaxe.value;
+            let totalReward = baseReward;
+            // Check for bonus from luck
+            if (Math.random() * 100 < gameState.upgrades.luck.value) {
+                const bonus = Math.floor(baseReward * 0.5 + Math.random() * baseReward * 0.5);
+                totalReward += bonus;
+                showFloatingItem('💰', bonus);
+            }
+            // Add XP
+            addXP(baseReward);
+            // Add coins
+            addCoins(totalReward);
+            // Random chance to get items
+            if (Math.random() < 0.3) {
+                const items = ['🏓', '💎', '🏆', '🍯', '🔑', '🎾'];
+                const randomItem = items[Math.floor(Math.random() * items.length)];
+                addInventoryItem(randomItem);
+                showFloatingItem(randomItem);
+            }
+            // Start cooldown
+            startCooldown();
+        }
+        // Show floating item animation
+        function showFloatingItem(emoji, value = null) {
+            const item = document.createElement('div');
+            item.className = 'absolute text-2xl animate-bounce';
+            item.style.left = `${Math.random() * 70 + 15}%`;
+            item.style.bottom = '30%';
+            item.innerHTML = emoji;
+            if (value) {
+                const valueDisplay = document.createElement('div');
+                valueDisplay.className = 'absolute text-xs font-bold text-yellow-600';
+                valueDisplay.textContent = `+${value}`;
+                valueDisplay.style.bottom = '-20px';
+                item.appendChild(valueDisplay);
+            }
+            floatingItems.appendChild(item);
+            // Remove after animation
+            setTimeout(() => {
+                item.remove();
+            }, 1500);
+        }
+        // Start cooldown after mining
+        function startCooldown() {
+            gameState.cooldown = true;
+            mine.classList.add('opacity-50');
+            setTimeout(() => {
+                gameState.cooldown = false;
+                mine.classList.remove('opacity-50');
+            }, gameState.upgrades.stamina.value * 1000);
+        }
+        // Add coins to total
+        function addCoins(amount) {
+            gameState.coins += amount;
+            updateDisplays();
+        }
+        // Add XP and check for level up
+        function addXP(amount) {
+            gameState.xp += amount;
+            if (gameState.xp >= gameState.xpNeeded) {
+                levelUp();
+            }
+            updateDisplays();
+        }
+        // Level up the player
+        function levelUp() {
+            gameState.level++;
+            gameState.xp -= gameState.xpNeeded;
+            gameState.xpNeeded = Math.floor(gameState.xpNeeded * 1.5);
+            // Bonus coins for leveling up
+            gameState.coins += 50;
+            // Show level up modal
+            newLevelDisplay.textContent = gameState.level;
+            levelUpModal.classList.remove('hidden');
+            // Update displays again after level up
+            updateDisplays();
+        }
+        // Upgrade a stat
+        function upgrade(type) {
+            const upgrade = gameState.upgrades[type];
+            if (gameState.coins >= upgrade.cost) {
+                gameState.coins -= upgrade.cost;
+                upgrade.level++;
+                // Increase values based on type
+                switch(type) {
+                    case 'pickaxe':
+                        upgrade.value += 1;
+                        upgrade.cost = Math.floor(upgrade.cost * 1.8);
+                        break;
+                    case 'stamina':
+                        upgrade.value = Math.max(0.2, upgrade.value - 0.2);
+                        upgrade.cost = Math.floor(upgrade.cost * 1.6);
+                        break;
+                    case 'luck':
+                        upgrade.value += 2;
+                        upgrade.cost = Math.floor(upgrade.cost * 1.7);
+                        break;
+                }
+                updateDisplays();
+            } else {
+                alert("Not enough coins!");
+            }
+        }
+        // Add item to inventory
+        function addInventoryItem(emoji) {
+            switch(emoji) {
+                case '🏓':
+                    gameState.inventory.pickleballs++;
+                    break;
+                case '💎':
+                    gameState.inventory.gems++;
+                    break;
+                case '🏆':
+                    gameState.inventory.trophies++;
+                    break;
+                case '🍯':
+                    gameState.inventory.honey++;
+                    break;
+                case '🔑':
+                    gameState.inventory.keys++;
+                    break;
+                case '🎾':
+                    gameState.inventory.balls++;
+                    break;
+            }
+            updateDisplays();
+        }
+        // Update all displays
+        function updateDisplays() {
+            // Main stats
+            coinsDisplay.textContent = gameState.coins;
+            levelDisplay.textContent = gameState.level;
+            // XP progress
+            const progressPercent = (gameState.xp / gameState.xpNeeded) * 100;
+            levelProgress.style.width = `${progressPercent}%`;
+            // Upgrades
+            pickaxeLevel.textContent = gameState.upgrades.pickaxe.level;
+            pickaxeCost.textContent = gameState.upgrades.pickaxe.cost;
+            pickaxeValue.textContent = gameState.upgrades.pickaxe.value;
+            staminaLevel.textContent = gameState.upgrades.stamina.level;
+            staminaCost.textContent = gameState.upgrades.stamina.cost;
+            staminaValue.textContent = gameState.upgrades.stamina.value.toFixed(1);
+            luckLevel.textContent = gameState.upgrades.luck.level;
+            luckCost.textContent = gameState.upgrades.luck.cost;
+            luckValue.textContent = gameState.upgrades.luck.value;
+            // Inventory
+            pickleballCount.textContent = gameState.inventory.pickleballs;
+            gemCount.textContent = gameState.inventory.gems;
+            trophyCount.textContent = gameState.inventory.trophies;
+            honeyCount.textContent = gameState.inventory.honey;
+            keyCount.textContent = gameState.inventory.keys;
+            ballCount.textContent = gameState.inventory.balls;
+        }
+        // Start 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=privateuserh/pickleball-mining-game-vbeta1-01" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>