Spaces:

GuangyuanSD
/

ejectionface

Running

App Files Files Community

GuangyuanSD commited on Apr 8, 2025

Commit

4899a72

verified ·

1 Parent(s): b703bc7

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: ejectionface
+emoji: 🐳
+colorFrom: gray
+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,726 @@
-<!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>Ejection FACE!</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Press Start 2P', cursive;
+            background-color: #000;
+            color: white;
+            cursor: none;
+        }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
+        }
+        #starfield {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        .star {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background-color: white;
+            border-radius: 50%;
+        }
+        .target {
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            transition: transform 0.1s ease-out;
+            z-index: 2;
+        }
+        .hit-effect {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 3;
+        }
+        .hit-effect.active {
+            opacity: 1;
+        }
+        #custom-cursor {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            pointer-events: none;
+            z-index: 999;
+            transform-origin: center center;
+            transform: rotate(0deg);
+        }
+        #score-display {
+            position: absolute;
+            top: 20px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 24px;
+            color: #ff0;
+            text-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        #score-display.active {
+            opacity: 1;
+        }
+        #hud {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            z-index: 10;
+        }
+        .weapon {
+            width: 60px;
+            height: 60px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            border: 2px solid #555;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+        }
+        .weapon:hover {
+            transform: scale(1.1);
+            border-color: #ff0;
+        }
+        .weapon.locked {
+            filter: grayscale(100%);
+            opacity: 0.5;
+        }
+        .weapon.selected {
+            border-color: #ff0;
+            box-shadow: 0 0 10px #ff0;
+        }
+        .weapon-price {
+            position: absolute;
+            top: -15px;
+            right: -10px;
+            background-color: #000;
+            color: #ff0;
+            padding: 2px 5px;
+            border-radius: 10px;
+            font-size: 10px;
+            border: 1px solid #ff0;
+        }
+        .projectile {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            z-index: 5;
+            transform-origin: center;
+        }
+        #hit-sound, #shoot-sound, #bg-music {
+            display: none;
+        }
+        .hit-marker {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff0000"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
+            background-size: contain;
+            opacity: 0;
+            animation: hitMarker 1s forwards;
+            z-index: 4;
+        }
+        @keyframes hitMarker {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { transform: scale(1.5); opacity: 1; }
+            100% { transform: scale(1); opacity: 0; }
+        }
+        .ejection-text {
+            position: absolute;
+            font-size: 48px;
+            color: #ff0;
+            text-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
+            animation: ejectionText 1.5s forwards;
+            z-index: 10;
+            opacity: 0;
+        }
+        @keyframes ejectionText {
+            0% { transform: scale(0.5); opacity: 0; }
+            20% { transform: scale(1.2); opacity: 1; }
+            40% { transform: scale(0.9); }
+            60% { transform: scale(1.1); }
+            80% { transform: scale(0.95); }
+            100% { transform: scale(1); opacity: 0; }
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="starfield"></div>
+        <div id="targets-container"></div>
+        <div id="projectiles-container"></div>
+        <div id="hit-markers-container"></div>
+        <div id="score-display">Ejection FACE!</div>
+        <div id="hud">
+            <div class="score-box">Hits: <span id="hit-count">0</span> | Score: <span id="score">0</span></div>
+            <div class="weapon selected" data-weapon="basic" data-price="0">
+                <div class="weapon-price">FREE</div>
+            </div>
+            <div class="weapon locked" data-weapon="rapid" data-price="50">
+                <div class="weapon-price">50</div>
+            </div>
+            <div class="weapon locked" data-weapon="double" data-price="150">
+                <div class="weapon-price">150</div>
+            </div>
+            <div class="weapon locked" data-weapon="shotgun" data-price="300">
+                <div class="weapon-price">300</div>
+            </div>
+            <div class="weapon locked" data-weapon="bouncy" data-price="500">
+                <div class="weapon-price">500</div>
+            </div>
+        </div>
+        <div id="custom-cursor"></div>
+    </div>
+    <audio id="hit-sound" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="shoot-sound" preload="auto">
+        <source src="https://assets.mixkit.co/sfx/preview/mixkit-short-laser-gun-shot-1670.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="bg-music" loop>
+        <source src="https://assets.mixkit.co/music/preview/mixkit-game-show-suspense-waiting-668.mp3" type="audio/mpeg">
+    </audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game state
+            const state = {
+                score: 0,
+                hits: 0,
+                targets: [],
+                projectiles: [],
+                stars: [],
+                currentWeapon: 'basic',
+                weapons: {
+                    basic: { price: 0, fireRate: 500, projectileCount: 1, spread: 0, bouncy: false },
+                    rapid: { price: 50, fireRate: 250, projectileCount: 1, spread: 0, bouncy: false },
+                    double: { price: 150, fireRate: 500, projectileCount: 2, spread: 10, bouncy: false },
+                    shotgun: { price: 300, fireRate: 800, projectileCount: 5, spread: 20, bouncy: false },
+                    bouncy: { price: 500, fireRate: 400, projectileCount: 1, spread: 0, bouncy: true }
+                },
+                lastShot: 0,
+                colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+                currentColorIndex: 0,
+                targetSpeed: 2,
+                targetCount: 1
+            };
+            // DOM elements
+            const gameContainer = document.getElementById('game-container');
+            const starfield = document.getElementById('starfield');
+            const targetsContainer = document.getElementById('targets-container');
+            const projectilesContainer = document.getElementById('projectiles-container');
+            const hitMarkersContainer = document.getElementById('hit-markers-container');
+            const scoreDisplay = document.getElementById('score-display');
+            const hitCountElement = document.getElementById('hit-count');
+            const scoreElement = document.getElementById('score');
+            const customCursor = document.getElementById('custom-cursor');
+            const hitSound = document.getElementById('hit-sound');
+            const shootSound = document.getElementById('shoot-sound');
+            const bgMusic = document.getElementById('bg-music');
+            const weaponElements = document.querySelectorAll('.weapon');
+            // Initialize game
+            initStarfield();
+            createTargets(state.targetCount);
+            setupCursor();
+            setupWeapons();
+            playMusic();
+            // Event listeners
+            gameContainer.addEventListener('mousemove', handleMouseMove);
+            gameContainer.addEventListener('click', handleShoot);
+            // Game loop
+            function gameLoop() {
+                updateTargets();
+                updateProjectiles();
+                checkCollisions();
+                requestAnimationFrame(gameLoop);
+            }
+            gameLoop();
+            // Initialize starfield
+            function initStarfield() {
+                const starCount = Math.floor(window.innerWidth * window.innerHeight / 1000);
+                for (let i = 0; i < starCount; i++) {
+                    createStar();
+                }
+            }
+            function createStar() {
+                const star = document.createElement('div');
+                star.className = 'star';
+                const x = Math.random() * window.innerWidth;
+                const y = Math.random() * window.innerHeight;
+                const size = Math.random() * 3;
+                const opacity = Math.random();
+                star.style.left = `${x}px`;
+                star.style.top = `${y}px`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.opacity = opacity;
+                starfield.appendChild(star);
+                // Animate star (parallax effect)
+                const speed = 0.5 + Math.random() * 2;
+                function animateStar() {
+                    const currentX = parseFloat(star.style.left);
+                    const currentY = parseFloat(star.style.top);
+                    // Move star outward from center
+                    const centerX = window.innerWidth / 2;
+                    const centerY = window.innerHeight / 2;
+                    let dx = currentX - centerX;
+                    let dy = currentY - centerY;
+                    // Normalize direction vector
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    dx /= distance;
+                    dy /= distance;
+                    // Move star
+                    star.style.left = `${currentX + dx * speed}px`;
+                    star.style.top = `${currentY + dy * speed}px`;
+                    // Reset star if it goes out of bounds
+                    if (parseFloat(star.style.left) < 0 || parseFloat(star.style.left) > window.innerWidth ||
+                        parseFloat(star.style.top) < 0 || parseFloat(star.style.top) > window.innerHeight) {
+                        star.style.left = `${Math.random() * window.innerWidth}px`;
+                        star.style.top = `${Math.random() * window.innerHeight}px`;
+                    }
+                    requestAnimationFrame(animateStar);
+                }
+                animateStar();
+            }
+            // Create targets
+            function createTargets(count) {
+                targetsContainer.innerHTML = '';
+                state.targets = [];
+                for (let i = 0; i < count; i++) {
+                    createTarget(i);
+                }
+            }
+            function createTarget(index) {
+                const target = document.createElement('div');
+                target.className = 'target';
+                // Use huggingface emoji as target
+                target.style.backgroundImage = 'url("https://huggingface.co/front/assets/huggingface_logo-noborder.svg")';
+                // Position randomly but ensure it's fully visible
+                const maxX = window.innerWidth - 250;
+                const maxY = window.innerHeight - 250;
+                const x = Math.max(0, Math.min(maxX, Math.random() * maxX));
+                const y = Math.max(0, Math.min(maxY, Math.random() * maxY));
+                target.style.left = `${x}px`;
+                target.style.top = `${y}px`;
+                // Add hit effect
+                const hitEffect = document.createElement('div');
+                hitEffect.className = 'hit-effect';
+                hitEffect.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><circle cx=\'50\' cy=\'50\' r=\'40\' fill=\'' + state.colors[state.currentColorIndex] + '\' opacity=\'0.7\'/></svg>")';
+                target.appendChild(hitEffect);
+                targetsContainer.appendChild(target);
+                // Store target data
+                state.targets.push({
+                    element: target,
+                    hitEffect: hitEffect,
+                    x: x,
+                    y: y,
+                    vx: (Math.random() - 0.5) * state.targetSpeed,
+                    vy: (Math.random() - 0.5) * state.targetSpeed,
+                    index: index
+                });
+            }
+            // Update targets position
+            function updateTargets() {
+                state.targets.forEach(target => {
+                    // Update position
+                    target.x += target.vx;
+                    target.y += target.vy;
+                    // Bounce off edges
+                    if (target.x <= 0 || target.x >= window.innerWidth - 250) {
+                        target.vx = -target.vx * (0.9 + Math.random() * 0.2);
+                    }
+                    if (target.y <= 0 || target.y >= window.innerHeight - 250) {
+                        target.vy = -target.vy * (0.9 + Math.random() * 0.2);
+                    }
+                    // Random direction changes
+                    if (Math.random() < 0.02) {
+                        target.vx += (Math.random() - 0.5) * 0.5;
+                        target.vy += (Math.random() - 0.5) * 0.5;
+                        // Limit speed
+                        const speed = Math.sqrt(target.vx * target.vx + target.vy * target.vy);
+                        const maxSpeed = state.targetSpeed * 1.5;
+                        if (speed > maxSpeed) {
+                            target.vx = (target.vx / speed) * maxSpeed;
+                            target.vy = (target.vy / speed) * maxSpeed;
+                        }
+                    }
+                    // Apply position
+                    target.element.style.left = `${target.x}px`;
+                    target.element.style.top = `${target.y}px`;
+                });
+            }
+            // Setup custom cursor
+            function setupCursor() {
+                customCursor.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[state.currentColorIndex] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/></svg>")';
+            }
+            function handleMouseMove(e) {
+                customCursor.style.left = `${e.clientX - 20}px`;
+                customCursor.style.top = `${e.clientY - 20}px`;
+                // Rotate cursor slightly for visual feedback
+                const rotation = Math.sin(Date.now() / 200) * 5;
+                customCursor.style.transform = `rotate(${rotation}deg)`;
+            }
+            // Handle shooting
+            function handleShoot(e) {
+                const now = Date.now();
+                const weapon = state.weapons[state.currentWeapon];
+                if (now - state.lastShot < weapon.fireRate) return;
+                state.lastShot = now;
+                // Play shoot sound
+                shootSound.currentTime = 0;
+                shootSound.play();
+                // Create projectiles based on weapon type
+                for (let i = 0; i < weapon.projectileCount; i++) {
+                    createProjectile(e.clientX, e.clientY, i);
+                }
+                // Animate cursor
+                customCursor.style.transform = 'scale(0.8)';
+                setTimeout(() => {
+                    customCursor.style.transform = 'scale(1)';
+                }, 100);
+            }
+            function createProjectile(mouseX, mouseY, index) {
+                const projectile = document.createElement('div');
+                projectile.className = 'projectile';
+                // Calculate direction from center to mouse
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight / 2;
+                let dx = mouseX - centerX;
+                let dy = mouseY - centerY;
+                // Normalize direction vector
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                dx /= distance;
+                dy /= distance;
+                // Apply weapon spread
+                const weapon = state.weapons[state.currentWeapon];
+                const spreadAngle = (index - (weapon.projectileCount - 1) / 2) * weapon.spread * (Math.PI / 180);
+                // Rotate direction by spread angle
+                const cos = Math.cos(spreadAngle);
+                const sin = Math.sin(spreadAngle);
+                const tx = dx * cos - dy * sin;
+                const ty = dx * sin + dy * cos;
+                dx = tx;
+                dy = ty;
+                // Set projectile color
+                projectile.style.backgroundColor = state.colors[state.currentColorIndex];
+                // Set initial position at center
+                projectile.style.left = `${centerX}px`;
+                projectile.style.top = `${centerY}px`;
+                projectilesContainer.appendChild(projectile);
+                // Store projectile data
+                const projectileData = {
+                    element: projectile,
+                    x: centerX,
+                    y: centerY,
+                    vx: dx * 10,
+                    vy: dy * 10,
+                    bounces: 0,
+                    maxBounces: weapon.bouncy ? 3 : 0
+                };
+                state.projectiles.push(projectileData);
+            }
+            // Update projectiles position
+            function updateProjectiles() {
+                state.projectiles.forEach((projectile, index) => {
+                    // Update position
+                    projectile.x += projectile.vx;
+                    projectile.y += projectile.vy;
+                    // Bounce off edges if bouncy
+                    if (projectile.maxBounces > 0) {
+                        if (projectile.x <= 0 || projectile.x >= window.innerWidth) {
+                            projectile.vx = -projectile.vx;
+                            projectile.bounces++;
+                            projectile.x = Math.max(0, Math.min(window.innerWidth, projectile.x));
+                        }
+                        if (projectile.y <= 0 || projectile.y >= window.innerHeight) {
+                            projectile.vy = -projectile.vy;
+                            projectile.bounces++;
+                            projectile.y = Math.max(0, Math.min(window.innerHeight, projectile.y));
+                        }
+                    }
+                    // Apply position
+                    projectile.element.style.left = `${projectile.x}px`;
+                    projectile.element.style.top = `${projectile.y}px`;
+                    // Remove if out of bounds or max bounces reached
+                    if (projectile.x < 0 || projectile.x > window.innerWidth ||
+                        projectile.y < 0 || projectile.y > window.innerHeight ||
+                        projectile.bounces > projectile.maxBounces) {
+                        projectile.element.remove();
+                        state.projectiles.splice(index, 1);
+                    }
+                });
+            }
+            // Check for collisions
+            function checkCollisions() {
+                state.projectiles.forEach((projectile, pIndex) => {
+                    state.targets.forEach(target => {
+                        // Simple circle-rectangle collision detection
+                        const targetRect = {
+                            x: target.x,
+                            y: target.y,
+                            width: 250,
+                            height: 250
+                        };
+                        // Find closest point on rectangle to circle
+                        const closestX = Math.max(targetRect.x, Math.min(projectile.x, targetRect.x + targetRect.width));
+                        const closestY = Math.max(targetRect.y, Math.min(projectile.y, targetRect.y + targetRect.height));
+                        // Calculate distance
+                        const distanceX = projectile.x - closestX;
+                        const distanceY = projectile.y - closestY;
+                        const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+                        if (distance < 10) { // Projectile radius
+                            // Hit!
+                            handleHit(target, projectile);
+                            // Remove projectile
+                            projectile.element.remove();
+                            state.projectiles.splice(pIndex, 1);
+                        }
+                    });
+                });
+            }
+            function handleHit(target, projectile) {
+                // Play hit sound
+                hitSound.currentTime = 0;
+                hitSound.play();
+                // Show hit effect
+                target.hitEffect.classList.add('active');
+                setTimeout(() => {
+                    target.hitEffect.classList.remove('active');
+                }, 500);
+                // Create hit marker
+                const hitMarker = document.createElement('div');
+                hitMarker.className = 'hit-marker';
+                hitMarker.style.left = `${projectile.x - 15}px`;
+                hitMarker.style.top = `${projectile.y - 15}px`;
+                hitMarkersContainer.appendChild(hitMarker);
+                setTimeout(() => {
+                    hitMarker.remove();
+                }, 1000);
+                // Update score
+                state.hits++;
+                state.score += 10;
+                hitCountElement.textContent = state.hits;
+                scoreElement.textContent = state.score;
+                // Show "Ejection FACE!" text
+                const ejectionText = document.createElement('div');
+                ejectionText.className = 'ejection-text';
+                ejectionText.textContent = 'Ejection FACE!';
+                ejectionText.style.left = `${window.innerWidth / 2 - 150}px`;
+                ejectionText.style.top = `${window.innerHeight / 2 - 50}px`;
+                gameContainer.appendChild(ejectionText);
+                setTimeout(() => {
+                    ejectionText.remove();
+                }, 1500);
+                // Change target direction on hit
+                target.vx = (Math.random() - 0.5) * state.targetSpeed * 2;
+                target.vy = (Math.random() - 0.5) * state.targetSpeed * 2;
+                // Increase difficulty every 10 hits
+                if (state.hits % 10 === 0) {
+                    state.targetSpeed += 0.2;
+                    // Make targets change direction more often
+                    state.targets.forEach(t => {
+                        t.vx *= 1.1;
+                        t.vy *= 1.1;
+                    });
+                }
+                // Add new target every 100 hits
+                if (state.hits % 100 === 0) {
+                    state.targetCount++;
+                    state.currentColorIndex = (state.currentColorIndex + 1) % state.colors.length;
+                    setupCursor();
+                    createTargets(state.targetCount);
+                }
+                // Unlock weapons if enough score
+                weaponElements.forEach(weapon => {
+                    const weaponType = weapon.dataset.weapon;
+                    const price = parseInt(weapon.dataset.price);
+                    if (state.score >= price) {
+                        weapon.classList.remove('locked');
+                    }
+                });
+            }
+            // Setup weapon selection
+            function setupWeapons() {
+                weaponElements.forEach(weapon => {
+                    const weaponType = weapon.dataset.weapon;
+                    // Set weapon icons
+                    switch (weaponType) {
+                        case 'basic':
+                            weapon.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[0] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/></svg>")';
+                            break;
+                        case 'rapid':
+                            weapon.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[1] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/><circle cx=\'50\' cy=\'50\' r=\'15\' fill=\'none\' stroke=\'' + state.colors[1] + '\' stroke-width=\'3\'/></svg>")';
+                            break;
+                        case 'double':
+                            weapon.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[2] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/><path d=\'M30 30 L70 70 M30 70 L70 30\' stroke=\'' + state.colors[2] + '\' stroke-width=\'3\'/></svg>")';
+                            break;
+                        case 'shotgun':
+                            weapon.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[3] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/><path d=\'M50 30 L30 50 M50 30 L70 50 M50 70 L30 50 M50 70 L70 50\' stroke=\'' + state.colors[3] + '\' stroke-width=\'3\'/></svg>")';
+                            break;
+                        case 'bouncy':
+                            weapon.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[4] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/><path d=\'M20 20 Q50 30 80 20 Q85 50 80 80 Q50 70 20 80 Q15 50 20 20\' fill=\'none\' stroke=\'' + state.colors[4] + '\' stroke-width=\'3\'/></svg>")';
+                            break;
+                    }
+                    weapon.addEventListener('click', () => {
+                        if (weapon.classList.contains('locked')) return;
+                        // Select weapon
+                        weaponElements.forEach(w => w.classList.remove('selected'));
+                        weapon.classList.add('selected');
+                        state.currentWeapon = weaponType;
+                        setupCursor();
+                    });
+                });
+            }
+            // Play background music
+            function playMusic() {
+                bgMusic.volume = 0.3;
+                bgMusic.play();
+            }
+        });
+    </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=GuangyuanSD/ejectionface" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>