Spaces:

shubham6924
/

mini-game

Running

App Files Files Community

shubham6924 commited on Apr 12

Commit

5578d97

verified ·

1 Parent(s): 947bc8e

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mini Game
-emoji: 🐢
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mini-game
+emoji: 🐳
+colorFrom: yellow
+colorTo: red
 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,414 @@
-<!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>Roof Running AC Unit Minigame</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 fall {
+            0% { transform: translateY(0); opacity: 1; }
+            100% { transform: translateY(100px); opacity: 0; }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+            20%, 40%, 60%, 80% { transform: translateX(5px); }
+        }
+        .cube {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .cube:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+        }
+        .removing {
+            animation: fall 0.5s forwards;
+        }
+        .shake {
+            animation: shake 0.5s;
+        }
+        .progress-bar {
+            transition: width 0.5s linear;
+        }
+        .bg-red { background-color: #ef4444; }
+        .bg-green { background-color: #10b981; }
+        .bg-blue { background-color: #3b82f6; }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden border-2 border-gray-700">
+        <!-- Header -->
+        <div class="bg-gray-700 p-4 flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+                <i class="fas fa-screwdriver text-yellow-400 text-2xl"></i>
+                <h1 class="text-xl font-bold">AC Unit Theft Minigame</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-clock text-blue-400"></i>
+                    <span id="timer" class="font-mono">60</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-cubes text-green-400"></i>
+                    <span id="remaining">88</span>
+                </div>
+            </div>
+        </div>
+        <!-- Game Area -->
+        <div class="p-6">
+            <!-- Instructions -->
+            <div id="instructions" class="bg-gray-700 rounded-lg p-4 mb-6">
+                <div class="flex justify-between items-center">
+                    <h2 class="font-bold text-lg mb-2">How to play:</h2>
+                    <button id="close-instructions" class="text-gray-300 hover:text-white">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <ul class="list-disc pl-5 space-y-1 text-sm">
+                    <li>Click on groups of 2+ same-colored cubes to remove them</li>
+                    <li>Cubes will fall down and align left after removal</li>
+                    <li>Remove all cubes before time runs out to succeed</li>
+                    <li>Single cubes cannot be removed</li>
+                </ul>
+            </div>
+            <!-- Game Grid -->
+            <div class="flex justify-center">
+                <div id="game-grid" class="grid grid-cols-11 gap-1 bg-gray-900 p-2 rounded-lg border border-gray-700"></div>
+            </div>
+            <!-- Progress Bar -->
+            <div class="mt-6 bg-gray-700 rounded-full h-4 overflow-hidden">
+                <div id="progress-bar" class="h-full bg-gradient-to-r from-green-500 to-blue-500 progress-bar" style="width: 100%"></div>
+            </div>
+        </div>
+        <!-- Controls -->
+        <div class="bg-gray-700 p-4 flex justify-between items-center">
+            <button id="start-btn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition">
+                <i class="fas fa-play"></i>
+                <span>Start Game</span>
+            </button>
+            <button id="reset-btn" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg font-medium flex items-center space-x-2 transition">
+                <i class="fas fa-redo"></i>
+                <span>Reset</span>
+            </button>
+        </div>
+    </div>
+    <!-- Result Modal -->
+    <div id="result-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50">
+        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full border-2 border-gray-700 transform transition-all duration-300 scale-95 opacity-0">
+            <div class="text-center">
+                <div id="result-icon" class="text-6xl mb-4">
+                    <i class="fas fa-check-circle text-green-500"></i>
+                </div>
+                <h2 id="result-title" class="text-2xl font-bold mb-2">Success!</h2>
+                <p id="result-message" class="text-gray-300 mb-6">You successfully stole the AC unit!</p>
+                <button id="close-modal" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg font-medium transition">
+                    Continue
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        const GRID_WIDTH = 11;
+        const GRID_HEIGHT = 8;
+        const COLORS = ['red', 'green', 'blue'];
+        const TIME_LIMIT = 60; // seconds
+        let gameGrid = [];
+        let selectedCells = [];
+        let gameActive = false;
+        let timeLeft = TIME_LIMIT;
+        let timerInterval;
+        let remainingCubes = GRID_WIDTH * GRID_HEIGHT;
+        // DOM elements
+        const gameGridElement = document.getElementById('game-grid');
+        const timerElement = document.getElementById('timer');
+        const remainingElement = document.getElementById('remaining');
+        const progressBar = document.getElementById('progress-bar');
+        const startBtn = document.getElementById('start-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        const instructions = document.getElementById('instructions');
+        const closeInstructions = document.getElementById('close-instructions');
+        const resultModal = document.getElementById('result-modal');
+        const resultTitle = document.getElementById('result-title');
+        const resultMessage = document.getElementById('result-message');
+        const resultIcon = document.getElementById('result-icon');
+        const closeModal = document.getElementById('close-modal');
+        // Initialize game
+        function initGame() {
+            gameGrid = [];
+            selectedCells = [];
+            gameGridElement.innerHTML = '';
+            // Create grid
+            for (let y = 0; y < GRID_HEIGHT; y++) {
+                gameGrid[y] = [];
+                for (let x = 0; x < GRID_WIDTH; x++) {
+                    const color = COLORS[Math.floor(Math.random() * COLORS.length)];
+                    gameGrid[y][x] = { color, x, y };
+                    const cube = document.createElement('div');
+                    cube.className = `w-8 h-8 rounded-sm cube bg-${color}`;
+                    cube.dataset.x = x;
+                    cube.dataset.y = y;
+                    cube.addEventListener('click', () => handleCubeClick(x, y));
+                    gameGridElement.appendChild(cube);
+                }
+            }
+            remainingCubes = GRID_WIDTH * GRID_HEIGHT;
+            remainingElement.textContent = remainingCubes;
+        }
+        // Start the game
+        function startGame() {
+            if (gameActive) return;
+            gameActive = true;
+            timeLeft = TIME_LIMIT;
+            timerElement.textContent = timeLeft;
+            progressBar.style.width = '100%';
+            startBtn.disabled = true;
+            startBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
+            startBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                timerElement.textContent = timeLeft;
+                progressBar.style.width = `${(timeLeft / TIME_LIMIT) * 100}%`;
+                if (timeLeft <= 10) {
+                    progressBar.classList.remove('bg-gradient-to-r', 'from-green-500', 'to-blue-500');
+                    progressBar.classList.add('bg-gradient-to-r', 'from-yellow-500', 'to-red-500');
+                }
+                if (timeLeft <= 0) {
+                    endGame(false);
+                }
+            }, 1000);
+        }
+        // Reset the game
+        function resetGame() {
+            clearInterval(timerInterval);
+            gameActive = false;
+            startBtn.disabled = false;
+            startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
+            startBtn.classList.remove('bg-gray-500', 'cursor-not-allowed');
+            progressBar.classList.remove('bg-gradient-to-r', 'from-yellow-500', 'to-red-500');
+            progressBar.classList.add('bg-gradient-to-r', 'from-green-500', 'to-blue-500');
+            initGame();
+        }
+        // Handle cube click
+        function handleCubeClick(x, y) {
+            if (!gameActive) return;
+            const cube = gameGrid[y][x];
+            if (!cube) return;
+            // Find connected cubes of the same color
+            const connected = findConnectedCubes(x, y, cube.color);
+            // If less than 2 connected cubes, can't remove
+            if (connected.length < 2) {
+                const cubeElement = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
+                cubeElement.classList.add('shake');
+                setTimeout(() => {
+                    cubeElement.classList.remove('shake');
+                }, 500);
+                return;
+            }
+            // Mark cubes for removal
+            connected.forEach(pos => {
+                const { x, y } = pos;
+                gameGrid[y][x] = null;
+                const cubeElement = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
+                cubeElement.classList.add('removing');
+                setTimeout(() => {
+                    cubeElement.remove();
+                }, 500);
+            });
+            // Update remaining cubes count
+            remainingCubes -= connected.length;
+            remainingElement.textContent = remainingCubes;
+            // After animation completes, collapse the grid
+            setTimeout(() => {
+                collapseGrid();
+                // Check if game is won
+                if (remainingCubes === 0) {
+                    endGame(true);
+                }
+            }, 500);
+        }
+        // Find connected cubes of the same color
+        function findConnectedCubes(x, y, color, visited = []) {
+            const key = `${x},${y}`;
+            if (visited.includes(key)) return [];
+            visited.push(key);
+            const results = [{ x, y }];
+            // Check adjacent cells (up, down, left, right)
+            const directions = [
+                { dx: 0, dy: -1 }, // up
+                { dx: 0, dy: 1 },  // down
+                { dx: -1, dy: 0 }, // left
+                { dx: 1, dy: 0 }   // right
+            ];
+            for (const dir of directions) {
+                const nx = x + dir.dx;
+                const ny = y + dir.dy;
+                if (
+                    nx >= 0 && nx < GRID_WIDTH &&
+                    ny >= 0 && ny < GRID_HEIGHT &&
+                    gameGrid[ny][nx] &&
+                    gameGrid[ny][nx].color === color
+                ) {
+                    results.push(...findConnectedCubes(nx, ny, color, visited));
+                }
+            }
+            return results;
+        }
+        // Collapse the grid after removal
+        function collapseGrid() {
+            // First, let columns fall down
+            for (let x = 0; x < GRID_WIDTH; x++) {
+                let emptySpots = 0;
+                // From bottom to top
+                for (let y = GRID_HEIGHT - 1; y >= 0; y--) {
+                    if (!gameGrid[y][x]) {
+                        emptySpots++;
+                    } else if (emptySpots > 0) {
+                        // Move cube down
+                        gameGrid[y + emptySpots][x] = gameGrid[y][x];
+                        gameGrid[y][x] = null;
+                    }
+                }
+            }
+            // Then, shift columns left to fill empty columns
+            let emptyColumns = 0;
+            for (let x = 0; x < GRID_WIDTH; x++) {
+                // Check if column is empty
+                let columnEmpty = true;
+                for (let y = 0; y < GRID_HEIGHT; y++) {
+                    if (gameGrid[y][x]) {
+                        columnEmpty = false;
+                        break;
+                    }
+                }
+                if (columnEmpty) {
+                    emptyColumns++;
+                } else if (emptyColumns > 0) {
+                    // Shift column left
+                    for (let y = 0; y < GRID_HEIGHT; y++) {
+                        gameGrid[y][x - emptyColumns] = gameGrid[y][x];
+                        gameGrid[y][x] = null;
+                    }
+                }
+            }
+            // Rebuild the grid visually
+            gameGridElement.innerHTML = '';
+            for (let y = 0; y < GRID_HEIGHT; y++) {
+                for (let x = 0; x < GRID_WIDTH; x++) {
+                    if (gameGrid[y][x]) {
+                        const cube = gameGrid[y][x];
+                        const cubeElement = document.createElement('div');
+                        cubeElement.className = `w-8 h-8 rounded-sm cube bg-${cube.color}`;
+                        cubeElement.dataset.x = x;
+                        cubeElement.dataset.y = y;
+                        cubeElement.addEventListener('click', () => handleCubeClick(x, y));
+                        gameGridElement.appendChild(cubeElement);
+                    }
+                }
+            }
+        }
+        // End the game
+        function endGame(success) {
+            clearInterval(timerInterval);
+            gameActive = false;
+            // Show result modal
+            if (success) {
+                resultTitle.textContent = "Success!";
+                resultMessage.textContent = "You successfully stole the AC unit!";
+                resultIcon.innerHTML = '<i class="fas fa-check-circle text-green-500"></i>';
+            } else {
+                resultTitle.textContent = "Failed!";
+                resultMessage.textContent = "You ran out of time! The cops might be coming...";
+                resultIcon.innerHTML = '<i class="fas fa-times-circle text-red-500"></i>';
+            }
+            resultModal.classList.remove('hidden');
+            setTimeout(() => {
+                document.querySelector('#result-modal > div').classList.remove('scale-95', 'opacity-0');
+                document.querySelector('#result-modal > div').classList.add('scale-100', 'opacity-100');
+            }, 10);
+        }
+        // Event listeners
+        startBtn.addEventListener('click', () => {
+            startGame();
+            instructions.classList.add('hidden');
+        });
+        resetBtn.addEventListener('click', resetGame);
+        closeInstructions.addEventListener('click', () => {
+            instructions.classList.add('hidden');
+        });
+        closeModal.addEventListener('click', () => {
+            document.querySelector('#result-modal > div').classList.remove('scale-100', 'opacity-100');
+            document.querySelector('#result-modal > div').classList.add('scale-95', 'opacity-0');
+            setTimeout(() => {
+                resultModal.classList.add('hidden');
+                resetGame();
+            }, 300);
+        });
+        // Initialize on load
+        document.addEventListener('DOMContentLoaded', () => {
+            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=shubham6924/mini-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>