Spaces:

themeht
/

tap-n-stack-coin-collector

Running

App Files Files Community

themeht commited on Nov 10, 2025

Commit

083db13

verified ·

1 Parent(s): fc1133e

a tapping game that user taps on a character and for teach taps it gives a coin and the coins are stored in the user balance

Browse files

Files changed (5) hide show

README.md +8 -5
components/confetti.js +54 -0
index.html +53 -19
script.js +88 -0
style.css +24 -22

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Tap N Stack Coin Collector
-emoji: 🌍
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Tap'n'Stack Coin Collector
+colorFrom: pink
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/confetti.js ADDED Viewed

	@@ -0,0 +1,54 @@

+class ConfettiEffect extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .confetti {
+                    position: absolute;
+                    width: 10px;
+                    height: 10px;
+                    background-color: #f00;
+                    opacity: 0;
+                }
+                @keyframes confetti-fall {
+                    0% {
+                        transform: translateY(0) rotate(0deg);
+                        opacity: 1;
+                    }
+                    100% {
+                        transform: translateY(100vh) rotate(360deg);
+                        opacity: 0;
+                    }
+                }
+            </style>
+            <div id="confetti-container"></div>
+        `;
+        this.container = this.shadowRoot.getElementById('confetti-container');
+    }
+    trigger() {
+        // Clear existing confetti
+        this.container.innerHTML = '';
+        // Create new confetti
+        const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
+        for (let i = 0; i < 50; i++) {
+            const confetti = document.createElement('div');
+            confetti.className = 'confetti';
+            confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+            confetti.style.left = `${Math.random() * 100}%`;
+            confetti.style.top = '0';
+            confetti.style.animation = `confetti-fall ${2 + Math.random() * 3}s linear forwards`;
+            confetti.style.animationDelay = `${Math.random() * 0.5}s`;
+            confetti.style.width = `${5 + Math.random() * 10}px`;
+            confetti.style.height = `${5 + Math.random() * 10}px`;
+            this.container.appendChild(confetti);
+        }
+    }
+}
+customElements.define('confetti-effect', ConfettiEffect);

index.html CHANGED Viewed

@@ -1,19 +1,53 @@
-<!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>Tap'n'Stack Coin Collector</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <header class="bg-indigo-600 text-white p-4 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-2xl font-bold">Tap'n'Stack </h1>
+            <div id="balance" class="flex items-center gap-2 bg-indigo-700 px-4 py-2 rounded-full">
+                <i data-feather="dollar-sign"></i>
+                <span class="font-mono">0</span>
+            </div>
+        </div>
+    </header>
+    <main class="flex-grow flex flex-col items-center justify-center p-4 container mx-auto">
+        <div class="relative mb-8">
+            <div id="character" class="w-48 h-48 bg-indigo-500 rounded-full flex items-center justify-center cursor-pointer transform transition-transform hover:scale-105 active:scale-95 shadow-xl">
+                <i data-feather="smile" class="text-white w-24 h-24"></i>
+            </div>
+            <div id="coin-effect" class="absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-300"></div>
+        </div>
+        <div class="stats bg-white p-6 rounded-xl shadow-lg w-full max-w-md">
+            <div class="grid grid-cols-2 gap-4">
+                <div class="stat-card bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-gray-500 text-sm">Total Taps</h3>
+                    <p id="total-taps" class="text-2xl font-bold">0</p>
+                </div>
+                <div class="stat-card bg-gray-50 p-4 rounded-lg">
+                    <h3 class="text-gray-500 text-sm">Coins Per Tap</h3>
+                    <p id="coins-per-tap" class="text-2xl font-bold">1</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-gray-800 text-white p-4 text-center">
+        <p>Keep tapping to earn more coins!  🚀</p>
+    </footer>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,88 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Game state
+    let balance = localStorage.getItem('coinBalance') ? parseInt(localStorage.getItem('coinBalance')) : 0;
+    let totalTaps = localStorage.getItem('totalTaps') ? parseInt(localStorage.getItem('totalTaps')) : 0;
+    let coinsPerTap = 1;
+    // DOM elements
+    const character = document.getElementById('character');
+    const balanceDisplay = document.querySelector('#balance span');
+    const totalTapsDisplay = document.getElementById('total-taps');
+    const coinsPerTapDisplay = document.getElementById('coins-per-tap');
+    const coinEffect = document.getElementById('coin-effect');
+    // Initialize displays
+    updateDisplays();
+    // Tap handler
+    character.addEventListener('click', (e) => {
+        // Increment counters
+        totalTaps++;
+        balance += coinsPerTap;
+        // Save to localStorage
+        localStorage.setItem('coinBalance', balance);
+        localStorage.setItem('totalTaps', totalTaps);
+        // Update displays
+        updateDisplays();
+        // Create coin effect
+        createCoinEffect(e);
+        // Add temporary animation class
+        character.classList.add('animate-pulse');
+        setTimeout(() => {
+            character.classList.remove('animate-pulse');
+        }, 200);
+    });
+    function updateDisplays() {
+        balanceDisplay.textContent = balance.toLocaleString();
+        totalTapsDisplay.textContent = totalTaps.toLocaleString();
+        coinsPerTapDisplay.textContent = coinsPerTap;
+    }
+    function createCoinEffect(e) {
+        // Get character position
+        const rect = character.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Create multiple coins
+        for (let i = 0; i < 3; i++) {
+            const coin = document.createElement('div');
+            coin.classList.add('coin');
+            // Position randomly around the click point
+            const offsetX = (Math.random() - 0.5) * 40;
+            const offsetY = (Math.random() - 0.5) * 40;
+            coin.style.left = `${centerX + offsetX}px`;
+            coin.style.top = `${centerY + offsetY}px`;
+            // Random delay for animation
+            coin.style.animationDelay = `${i * 0.1}s`;
+            document.body.appendChild(coin);
+            // Remove coin after animation
+            setTimeout(() => {
+                coin.remove();
+            }, 800);
+        }
+    }
+    // Check for saved data on load
+    if (totalTaps > 0) {
+        // Show welcome back message
+        const welcomeBack = document.createElement('div');
+        welcomeBack.className = 'fixed top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-full shadow-lg z-50 animate-bounce';
+        welcomeBack.textContent = `Welcome back! You have ${balance} coins!`;
+        document.body.appendChild(welcomeBack);
+        setTimeout(() => {
+            welcomeBack.remove();
+        }, 3000);
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,30 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+@keyframes coinBounce {
+    0% {
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(-100px) scale(0.5);
+        opacity: 0;
+    }
 }
+.coin {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: gold;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+    animation: coinBounce 0.8s forwards;
+    pointer-events: none;
 }
+#character {
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
 }
+#character:active {
+    transform: scale(0.95);
+}