Spaces:

linoyts
/

vibe-coded-90s-whack-a-mole

Running

App Files Files Community

linoyts HF Staff commited on 27 days ago

Commit

bb4c32f

verified ·

1 Parent(s): ad944e3

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Vibe Coded 90s Whack A Mole
-emoji: 📉
-colorFrom: yellow
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: vibe-coded-90s-whack-a-mole
+emoji: 🐳
+colorFrom: gray
+colorTo: green
 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,452 @@
-<!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>90's Whack-a-Mole with AI Questions</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>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+            background-color: #ffccf5;
+            background-image: linear-gradient(to right, #ffccf5, #ccf2ff);
+            overflow-x: hidden;
+        }
+        .title {
+            font-family: 'Press Start 2P', cursive;
+            text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff;
+            animation: rainbow 5s linear infinite;
+        }
+        .hole {
+            background: radial-gradient(circle, #4d2e00 30%, #000 100%);
+            box-shadow: inset 0 10px 0 0 #3a2200, 0 10px 0 0 rgba(0,0,0,0.3);
+        }
+        .mole {
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="25" fill="%23333"/><circle cx="40" cy="25" r="3" fill="%23fff"/><circle cx="60" cy="25" r="3" fill="%23fff"/><path d="M45 35 Q50 40 55 35" stroke="%23fff" fill="transparent" stroke-width="2"/><circle cx="50" cy="50" r="30" fill="%23333"/></svg>') center/contain no-repeat;
+            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10 10 L90 90 M10 90 L90 10" stroke="%23ff0000" stroke-width="8"/></svg>'), auto;
+        }
+        .hit {
+            animation: hit 0.3s;
+        }
+        .missed {
+            animation: missed 0.5s;
+        }
+        @keyframes hit {
+            0% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(20deg); }
+            100% { transform: translateY(0) rotate(0deg); }
+        }
+        @keyframes missed {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(10px); }
+            100% { transform: translateY(0); }
+        }
+        @keyframes rainbow {
+            0% { color: #ff0000; }
+            14% { color: #ff7f00; }
+            28% { color: #ffff00; }
+            42% { color: #00ff00; }
+            57% { color: #0000ff; }
+            71% { color: #4b0082; }
+            85% { color: #9400d3; }
+            100% { color: #ff0000; }
+        }
+        .question-box {
+            background: linear-gradient(135deg, #ffcc00, #ff9900);
+            border: 5px dashed #ff0066;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .button {
+            transition: all 0.3s;
+        }
+        .button:hover {
+            transform: scale(1.1) rotate(5deg);
+        }
+        .cursor-trail {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background-color: rgba(255, 0, 255, 0.5);
+            border-radius: 50%;
+            pointer-events: none;
+            transform: translate(-50%, -50%);
+            z-index: 9999;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center justify-center p-4">
+    <div id="cursor-trails"></div>
+    <h1 class="title text-4xl md:text-6xl mb-8 text-center">90's WHACK-A-MOLE</h1>
+    <div class="flex flex-col md:flex-row items-center justify-center gap-8 mb-8">
+        <div class="bg-purple-200 p-4 rounded-lg border-4 border-dashed border-pink-500">
+            <p class="text-xl font-bold text-purple-800">Score: <span id="score" class="text-3xl">0</span></p>
+        </div>
+        <div class="bg-blue-200 p-4 rounded-lg border-4 border-dashed border-cyan-500">
+            <p class="text-xl font-bold text-blue-800">Time: <span id="time" class="text-3xl">60</span>s</p>
+        </div>
+        <div class="bg-yellow-200 p-4 rounded-lg border-4 border-dashed border-orange-500">
+            <p class="text-xl font-bold text-yellow-800">Misses: <span id="misses" class="text-3xl">0</span></p>
+        </div>
+    </div>
+    <div class="grid grid-cols-3 gap-4 md:gap-8 mb-8">
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+        <div class="hole w-20 h-20 md:w-32 md:h-32 rounded-full relative overflow-hidden">
+            <div class="mole absolute inset-0 w-full h-full transition-all duration-300 opacity-0"></div>
+        </div>
+    </div>
+    <div class="flex gap-4 mb-8">
+        <button id="start-btn" class="button bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full text-xl shadow-lg">
+            <i class="fas fa-play mr-2"></i> START
+        </button>
+        <button id="reset-btn" class="button bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full text-xl shadow-lg">
+            <i class="fas fa-redo mr-2"></i> RESET
+        </button>
+    </div>
+    <div id="question-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="question-box p-6 md:p-8 rounded-xl max-w-md w-full mx-4 text-center">
+            <h2 class="text-2xl md:text-3xl font-bold mb-4 text-purple-800">AI QUESTION!</h2>
+            <p id="question-text" class="text-xl mb-6">Would you like to answer a question?</p>
+            <div class="flex justify-center gap-4">
+                <button id="yes-btn" class="button bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full text-lg">
+                    YES
+                </button>
+                <button id="no-btn" class="button bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-6 rounded-full text-lg">
+                    NO
+                </button>
+            </div>
+        </div>
+    </div>
+    <div id="answer-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+        <div class="question-box p-6 md:p-8 rounded-xl max-w-md w-full mx-4 text-center">
+            <h2 class="text-2xl md:text-3xl font-bold mb-4 text-purple-800">AI SAYS:</h2>
+            <p id="answer-text" class="text-xl mb-6">The answer to your question is...</p>
+            <button id="close-answer-btn" class="button bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full text-lg">
+                CONTINUE GAME
+            </button>
+        </div>
+    </div>
+    <div class="mt-8 text-center">
+        <p class="text-lg text-gray-700">Made with <i class="fas fa-heart text-red-500"></i> for the 90s kids!</p>
+        <div class="flex justify-center gap-4 mt-2">
+            <i class="fas fa-gamepad text-2xl text-purple-600"></i>
+            <i class="fas fa-music text-2xl text-blue-600"></i>
+            <i class="fas fa-tv text-2xl text-green-600"></i>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        let score = 0;
+        let timeLeft = 60;
+        let misses = 0;
+        let gameInterval;
+        let moleInterval;
+        let timerInterval;
+        let isGameRunning = false;
+        // DOM elements
+        const holes = document.querySelectorAll('.hole');
+        const moles = document.querySelectorAll('.mole');
+        const scoreDisplay = document.getElementById('score');
+        const timeDisplay = document.getElementById('time');
+        const missesDisplay = document.getElementById('misses');
+        const startBtn = document.getElementById('start-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        const questionModal = document.getElementById('question-modal');
+        const questionText = document.getElementById('question-text');
+        const answerModal = document.getElementById('answer-modal');
+        const answerText = document.getElementById('answer-text');
+        const yesBtn = document.getElementById('yes-btn');
+        const noBtn = document.getElementById('no-btn');
+        const closeAnswerBtn = document.getElementById('close-answer-btn');
+        const cursorTrails = document.getElementById('cursor-trails');
+        // 90s-themed AI questions
+        const questions = [
+            "Is the internet just a fad?",
+            "Will Y2K cause computers to crash worldwide?",
+            "Is dial-up the future of internet connectivity?",
+            "Should we be worried about the Millennium Bug?",
+            "Will CDs replace cassette tapes completely?",
+            "Is virtual reality just a passing trend?",
+            "Should I upgrade to Windows 95?",
+            "Will email replace traditional mail?",
+            "Is the World Wide Web here to stay?",
+            "Should I get a pager or a mobile phone?",
+            "Will Tamagotchis make us better parents?",
+            "Is the Clippy assistant helpful in Microsoft Office?",
+            "Should I use AltaVista or Yahoo for web searches?",
+            "Will DVD replace VHS tapes?",
+            "Is the Furby a security risk?",
+            "Should I be worried about computer viruses?",
+            "Will AOL dominate the internet forever?",
+            "Is the iMac's colorful design just a gimmick?",
+            "Should I upgrade to a 56k modem?",
+            "Will MP3 players replace CD players?"
+        ];
+        // AI answers (simplified for this demo)
+        const answers = [
+            "The internet is definitely not a fad - it's the future!",
+            "Y2K was overhyped, but some systems did have minor issues.",
+            "Dial-up is slow but was essential before broadband.",
+            "The Millennium Bug was real but mostly mitigated in time.",
+            "CDs did replace cassettes, but both were later replaced by digital.",
+            "VR took decades but is now making a strong comeback.",
+            "Windows 95 was revolutionary for its time!",
+            "Email became dominant but traditional mail still exists.",
+            "The Web changed everything and is definitely permanent.",
+            "Mobile phones won, but pagers had their moment.",
+            "Tamagotchis were fun but didn't teach real parenting.",
+            "Clippy was annoying and was eventually removed.",
+            "Neither - Google came along and dominated search.",
+            "DVDs did replace VHS, but streaming replaced both.",
+            "Furbies were just toys, not actual security risks.",
+            "Viruses are real threats - always use protection!",
+            "AOL declined but was important in early internet days.",
+            "The iMac's design was innovative and influential.",
+            "56k was the peak of dial-up before broadband.",
+            "MP3 players led to smartphones replacing both."
+        ];
+        // Cursor trail effect
+        document.addEventListener('mousemove', (e) => {
+            const trail = document.createElement('div');
+            trail.className = 'cursor-trail';
+            trail.style.left = `${e.pageX}px`;
+            trail.style.top = `${e.pageY}px`;
+            cursorTrails.appendChild(trail);
+            // Remove the trail after a short delay
+            setTimeout(() => {
+                trail.style.opacity = '0';
+                trail.style.transform = 'translate(-50%, -50%) scale(2)';
+                setTimeout(() => {
+                    cursorTrails.removeChild(trail);
+                }, 300);
+            }, 500);
+        });
+        // Start game
+        startBtn.addEventListener('click', () => {
+            if (isGameRunning) return;
+            isGameRunning = true;
+            score = 0;
+            timeLeft = 60;
+            misses = 0;
+            updateDisplays();
+            // Start timer
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                updateDisplays();
+                if (timeLeft <= 0) {
+                    endGame();
+                }
+            }, 1000);
+            // Start mole popping up
+            moleInterval = setInterval(popRandomMole, 800);
+            startBtn.disabled = true;
+            startBtn.classList.add('opacity-50');
+        });
+        // Reset game
+        resetBtn.addEventListener('click', () => {
+            endGame();
+            score = 0;
+            timeLeft = 60;
+            misses = 0;
+            updateDisplays();
+            // Hide all moles
+            moles.forEach(mole => {
+                mole.classList.remove('hit', 'missed');
+                mole.style.opacity = '0';
+                mole.style.pointerEvents = 'none';
+            });
+            startBtn.disabled = false;
+            startBtn.classList.remove('opacity-50');
+        });
+        // Pop up a random mole
+        function popRandomMole() {
+            if (!isGameRunning) return;
+            // Hide all moles first
+            moles.forEach(mole => {
+                mole.style.opacity = '0';
+                mole.style.pointerEvents = 'none';
+            });
+            // Select a random mole
+            const randomIndex = Math.floor(Math.random() * moles.length);
+            const mole = moles[randomIndex];
+            // Show the mole
+            mole.style.opacity = '1';
+            mole.style.pointerEvents = 'auto';
+            // Set timeout to hide the mole if not clicked
+            setTimeout(() => {
+                if (mole.style.opacity === '1') { // Mole wasn't clicked
+                    mole.classList.add('missed');
+                    misses++;
+                    updateDisplays();
+                    // Show question after miss
+                    setTimeout(() => {
+                        showQuestion();
+                    }, 300);
+                    setTimeout(() => {
+                        mole.classList.remove('missed');
+                        mole.style.opacity = '0';
+                        mole.style.pointerEvents = 'none';
+                    }, 500);
+                }
+            }, 700);
+        }
+        // Whack the mole
+        moles.forEach(mole => {
+            mole.addEventListener('click', () => {
+                if (!isGameRunning) return;
+                mole.classList.add('hit');
+                score++;
+                updateDisplays();
+                setTimeout(() => {
+                    mole.classList.remove('hit');
+                    mole.style.opacity = '0';
+                    mole.style.pointerEvents = 'none';
+                }, 300);
+            });
+        });
+        // Show AI question
+        function showQuestion() {
+            if (!isGameRunning) return;
+            // Pause game
+            clearInterval(moleInterval);
+            // Select random question
+            const randomIndex = Math.floor(Math.random() * questions.length);
+            questionText.textContent = questions[randomIndex];
+            // Store answer index for later
+            questionModal.dataset.answerIndex = randomIndex;
+            // Show modal
+            questionModal.classList.remove('hidden');
+        }
+        // Handle yes button (show answer)
+        yesBtn.addEventListener('click', () => {
+            questionModal.classList.add('hidden');
+            const answerIndex = questionModal.dataset.answerIndex;
+            answerText.textContent = answers[answerIndex];
+            answerModal.classList.remove('hidden');
+        });
+        // Handle no button (resume game)
+        noBtn.addEventListener('click', () => {
+            questionModal.classList.add('hidden');
+            resumeGame();
+        });
+        // Close answer and resume game
+        closeAnswerBtn.addEventListener('click', () => {
+            answerModal.classList.add('hidden');
+            resumeGame();
+        });
+        // Resume game after question
+        function resumeGame() {
+            if (isGameRunning) {
+                moleInterval = setInterval(popRandomMole, 800);
+            }
+        }
+        // End game
+        function endGame() {
+            isGameRunning = false;
+            clearInterval(moleInterval);
+            clearInterval(timerInterval);
+            // Hide any open modals
+            questionModal.classList.add('hidden');
+            answerModal.classList.add('hidden');
+            startBtn.disabled = false;
+            startBtn.classList.remove('opacity-50');
+        }
+        // Update displays
+        function updateDisplays() {
+            scoreDisplay.textContent = score;
+            timeDisplay.textContent = timeLeft;
+            missesDisplay.textContent = misses;
+        }
+    </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=linoyts/vibe-coded-90s-whack-a-mole" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>