Spaces:

royam0820
/

royam0820-space

Running

App Files Files Community

royam0820 commited on Apr 9, 2025

Commit

ee8e9c9

verified ·

1 Parent(s): 26f814f

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +413 -19

README.md CHANGED Viewed

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

 ---
+title: royam0820-space
+emoji: 🐳
 colorFrom: yellow
+colorTo: blue
 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,413 @@
-<!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>Retro Pong</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        body {
+            background-color: #0f172a;
+            overflow: hidden;
+            font-family: 'Press Start 2P', cursive;
+        }
+        .game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .paddle {
+            position: absolute;
+            width: 15px;
+            background: linear-gradient(to bottom, #f43f5e, #f97316);
+            border-radius: 8px;
+            box-shadow: 0 0 10px #f43f5e, 0 0 20px #f43f5e;
+        }
+        .ball {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            background: linear-gradient(45deg, #f43f5e, #3b82f6);
+            border-radius: 50%;
+            box-shadow: 0 0 10px #3b82f6, 0 0 20px #f43f5e;
+        }
+        .score {
+            color: #f1f5f9;
+            text-shadow: 0 0 5px #3b82f6, 0 0 10px #3b82f6;
+            font-size: 2rem;
+            position: absolute;
+            top: 20px;
+        }
+        .center-line {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.1);
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+        }
+        .dashed-line {
+            height: 30px;
+            width: 2px;
+            background-color: rgba(255, 255, 255, 0.3);
+            margin: 10px 0;
+        }
+        .game-border {
+            position: absolute;
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            width: 98%;
+            height: 96%;
+        }
+        .neon-text {
+            color: #f1f5f9;
+            text-shadow: 0 0 5px #f43f5e, 0 0 10px #f43f5e;
+        }
+        .start-screen, .game-over-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 10;
+        }
+        .start-button {
+            background: linear-gradient(to bottom, #f43f5e, #3b82f6);
+            border: none;
+            padding: 15px 30px;
+            margin-top: 30px;
+            color: white;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 0 10px #3b82f6, 0 0 20px #f43f5e;
+        }
+        .start-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 20px #3b82f6, 0 0 40px #f43f5e;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div class="game-border"></div>
+        <div class="center-line">
+            <div class="dashed-line"></div>
+            <div class="dashed-line"></div>
+            <div class="dashed-line"></div>
+            <div class="dashed-line"></div>
+            <div class="dashed-line"></div>
+        </div>
+        <div id="playerScore" class="score left-1/3">0</div>
+        <div id="aiScore" class="score right-1/3">0</div>
+        <div id="playerPaddle" class="paddle left-4" style="height: 80px;"></div>
+        <div id="aiPaddle" class="paddle right-4" style="height: 80px;"></div>
+        <div id="ball" class="ball"></div>
+        <div id="startScreen" class="start-screen">
+            <h1 class="text-4xl md:text-6xl neon-text mb-6">RETRO PONG</h1>
+            <p class="text-xl neon-text mb-10">Use ↑ ↓ arrow keys to move your paddle</p>
+            <button id="startButton" class="start-button">START GAME</button>
+        </div>
+        <div id="gameOverScreen" class="game-over-screen hidden">
+            <h1 id="gameOverText" class="text-4xl md:text-6xl neon-text mb-6">GAME OVER</h1>
+            <p id="finalScore" class="text-xl neon-text mb-10">Score: 0 - 0</p>
+            <button id="restartButton" class="start-button">PLAY AGAIN</button>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const gameContainer = document.querySelector('.game-container');
+            const playerPaddle = document.getElementById('playerPaddle');
+            const aiPaddle = document.getElementById('aiPaddle');
+            const ball = document.getElementById('ball');
+            const playerScoreDisplay = document.getElementById('playerScore');
+            const aiScoreDisplay = document.getElementById('aiScore');
+            const startScreen = document.getElementById('startScreen');
+            const gameOverScreen = document.getElementById('gameOverScreen');
+            const startButton = document.getElementById('startButton');
+            const restartButton = document.getElementById('restartButton');
+            const gameOverText = document.getElementById('gameOverText');
+            const finalScore = document.getElementById('finalScore');
+            // Game variables
+            let gameWidth = gameContainer.offsetWidth;
+            let gameHeight = gameContainer.offsetHeight;
+            let paddleHeight = 80;
+            let paddleWidth = 15;
+            let ballSize = 15;
+            let playerScore = 0;
+            let aiScore = 0;
+            let gameRunning = false;
+            let animationId;
+            // Ball properties
+            let ballX = gameWidth / 2;
+            let ballY = gameHeight / 2;
+            let ballSpeedX = 5;
+            let ballSpeedY = 5;
+            // Paddle properties
+            let playerPaddleY = gameHeight / 2 - paddleHeight / 2;
+            let aiPaddleY = gameHeight / 2 - paddleHeight / 2;
+            let paddleSpeed = 8;
+            // Event listeners for buttons
+            startButton.addEventListener('click', startGame);
+            restartButton.addEventListener('click', startGame);
+            // Initialize paddle and ball positions
+            function initPositions() {
+                playerPaddleY = gameHeight / 2 - paddleHeight / 2;
+                aiPaddleY = gameHeight / 2 - paddleHeight / 2;
+                ballX = gameWidth / 2;
+                ballY = gameHeight / 2;
+                // Randomize ball direction
+                ballSpeedX = Math.random() > 0.5 ? 5 : -5;
+                ballSpeedY = (Math.random() * 4 - 2);
+                updatePositions();
+            }
+            // Update displayed positions
+            function updatePositions() {
+                playerPaddle.style.top = `${playerPaddleY}px`;
+                aiPaddle.style.top = `${aiPaddleY}px`;
+                ball.style.left = `${ballX}px`;
+                ball.style.top = `${ballY}px`;
+            }
+            // Reset game
+            function resetGame() {
+                playerScore = 0;
+                aiScore = 0;
+                updateScore();
+                initPositions();
+            }
+            // Update score display
+            function updateScore() {
+                playerScoreDisplay.textContent = playerScore;
+                aiScoreDisplay.textContent = aiScore;
+            }
+            // Game loop
+            function gameLoop() {
+                if (!gameRunning) return;
+                // Move ball
+                ballX += ballSpeedX;
+                ballY += ballSpeedY;
+                // Ball collision with top and bottom walls
+                if (ballY <= 0 || ballY + ballSize >= gameHeight) {
+                    ballSpeedY = -ballSpeedY;
+                    // Add some visual effect
+                    document.body.style.backgroundColor = '#1e293b';
+                    setTimeout(() => {
+                        document.body.style.backgroundColor = '#0f172a';
+                    }, 50);
+                }
+                // Ball collision with paddles
+                // Player paddle
+                if (
+                    ballX <= paddleWidth + 20 &&
+                    ballY + ballSize >= playerPaddleY &&
+                    ballY <= playerPaddleY + paddleHeight
+                ) {
+                    ballX = paddleWidth + 20;
+                    ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly
+                    // Change angle based on where ball hits paddle
+                    let deltaY = (ballY - (playerPaddleY + paddleHeight / 2)) / (paddleHeight / 2);
+                    ballSpeedY = deltaY * 6;
+                    // Add visual effect
+                    playerPaddle.style.boxShadow = '0 0 15px #f43f5e, 0 0 30px #f43f5e';
+                    setTimeout(() => {
+                        playerPaddle.style.boxShadow = '0 0 10px #f43f5e, 0 0 20px #f43f5e';
+                    }, 100);
+                }
+                // AI paddle
+                if (
+                    ballX + ballSize >= gameWidth - paddleWidth - 20 &&
+                    ballY + ballSize >= aiPaddleY &&
+                    ballY <= aiPaddleY + paddleHeight
+                ) {
+                    ballX = gameWidth - paddleWidth - 20 - ballSize;
+                    ballSpeedX = -ballSpeedX * 1.05; // Increase speed slightly
+                    // Change angle based on where ball hits paddle
+                    let deltaY = (ballY - (aiPaddleY + paddleHeight / 2)) / (paddleHeight / 2);
+                    ballSpeedY = deltaY * 6;
+                    // Add visual effect
+                    aiPaddle.style.boxShadow = '0 0 15px #f43f5e, 0 0 30px #f43f5e';
+                    setTimeout(() => {
+                        aiPaddle.style.boxShadow = '0 0 10px #f43f5e, 0 0 20px #f43f5e';
+                    }, 100);
+                }
+                // Ball out of bounds - score points
+                if (ballX + ballSize < 0) {
+                    // AI scores
+                    aiScore++;
+                    updateScore();
+                    if (aiScore >= 5) {
+                        endGame(false);
+                    } else {
+                        initPositions();
+                    }
+                } else if (ballX > gameWidth) {
+                    // Player scores
+                    playerScore++;
+                    updateScore();
+                    if (playerScore >= 5) {
+                        endGame(true);
+                    } else {
+                        initPositions();
+                    }
+                }
+                // AI paddle movement (simple tracking)
+                let aiPaddleCenter = aiPaddleY + paddleHeight / 2;
+                if (aiPaddleCenter < ballY - 10) {
+                    aiPaddleY += 5 * Math.min(1, Math.abs(ballSpeedY / 6)) * (ballSpeedX > 0 ? 1 : 0.5);
+                } else if (aiPaddleCenter > ballY + 10) {
+                    aiPaddleY -= 5 * Math.min(1, Math.abs(ballSpeedY / 6)) * (ballSpeedX > 0 ? 1 : 0.5);
+                }
+                // Keep paddles in bounds
+                if (playerPaddleY < 0) playerPaddleY = 0;
+                if (playerPaddleY > gameHeight - paddleHeight) playerPaddleY = gameHeight - paddleHeight;
+                if (aiPaddleY < 0) aiPaddleY = 0;
+                if (aiPaddleY > gameHeight - paddleHeight) aiPaddleY = gameHeight - paddleHeight;
+                // Update visual positions
+                updatePositions();
+                // Continue game loop
+                animationId = requestAnimationFrame(gameLoop);
+            }
+            // Handle keyboard input
+            const keysPressed = {};
+            document.addEventListener('keydown', (e) => {
+                keysPressed[e.key] = true;
+                // Prevent default for arrow keys to avoid page scrolling
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                keysPressed[e.key] = false;
+            });
+            // Handle paddle movement
+            function handlePaddleMovement() {
+                if (keysPressed['ArrowUp'] && playerPaddleY > 0) {
+                    playerPaddleY -= paddleSpeed;
+                }
+                if (keysPressed['ArrowDown'] && playerPaddleY < gameHeight - paddleHeight) {
+                    playerPaddleY += paddleSpeed;
+                }
+            }
+            // Start the game
+            function startGame() {
+                gameRunning = true;
+                startScreen.classList.add('hidden');
+                gameOverScreen.classList.add('hidden');
+                resetGame();
+                // Handle screen resize
+                window.addEventListener('resize', handleResize);
+                handleResize();
+                // Start the game loop
+                animationId = requestAnimationFrame(gameLoop);
+                // Start the input handling loop
+                setInterval(handlePaddleMovement, 1000/60);
+            }
+            // End the game
+            function endGame(playerWon) {
+                gameRunning = false;
+                cancelAnimationFrame(animationId);
+                gameOverText.textContent = playerWon ? 'YOU WIN!' : 'GAME OVER';
+                gameOverText.style.textShadow = playerWon ? '0 0 5px #3b82f6, 0 0 10px #3b82f6' : '0 0 5px #f43f5e, 0 0 10px #f43f5e';
+                finalScore.textContent = `Score: ${playerScore} - ${aiScore}`;
+                gameOverScreen.classList.remove('hidden');
+            }
+            // Handle window resize
+            function handleResize() {
+                gameWidth = gameContainer.offsetWidth;
+                gameHeight = gameContainer.offsetHeight;
+                // Reset positions on resize
+                initPositions();
+            }
+            // Set up glow effects for paddles
+            setInterval(() => {
+                if (gameRunning) {
+                    const colors = ['#f43f5e', '#3b82f6', '#f59e0b', '#10b981'];
+                    const randomColor1 = colors[Math.floor(Math.random() * colors.length)];
+                    const randomColor2 = colors[Math.floor(Math.random() * colors.length)];
+                    playerPaddle.style.background = `linear-gradient(to bottom, ${randomColor1}, ${randomColor2})`;
+                    aiPaddle.style.background = `linear-gradient(to bottom, ${randomColor2}, ${randomColor1})`;
+                }
+            }, 2000);
+            // Initial setup
+            initPositions();
+        });
+    </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=royam0820/royam0820-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>