Spaces:

isatis
/

test

Running

App Files Files Community

isatis commited on Mar 29

Commit

4f331af

verified ·

1 Parent(s): 1c6b0c1

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 📈
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: blue
+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,418 @@
-<!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>Medieval Pong: Siege of the Castle</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #111;
+            overflow: hidden;
+            font-family: 'MedievalSharp', cursive;
+            color: #d4af37;
+            text-align: center;
+        }
+        #game-container {
+            position: relative;
+            width: 800px;
+            height: 500px;
+            margin: 20px auto;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500"><rect width="800" height="500" fill="%23101010"/><rect x="50" y="100" width="700" height="300" fill="%23222" stroke="%23d4af37" stroke-width="2"/><rect x="300" y="150" width="200" height="200" fill="%23333" stroke="%23d4af37" stroke-width="2"/><rect x="350" y="200" width="100" height="150" fill="%23555" stroke="%23d4af37" stroke-width="2"/><rect x="375" y="200" width="50" height="30" fill="%23d4af37"/><polygon points="400,50 450,150 350,150" fill="%23777" stroke="%23d4af37" stroke-width="2"/><circle cx="400" cy="250" r="10" fill="%23d4af37"/><line x1="400" y1="260" x2="400" y2="350" stroke="%23d4af37" stroke-width="2"/><line x1="370" y1="290" x2="430" y2="290" stroke="%23d4af37" stroke-width="2"/></svg>');
+            border: 3px solid #d4af37;
+            box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
+        }
+        #scoreboard {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 50px;
+            font-size: 24px;
+            text-shadow: 2px 2px 4px #000;
+        }
+        .paddle {
+            position: absolute;
+            width: 20px;
+            height: 100px;
+            background: linear-gradient(to bottom, #8B0000, #B22222, #8B0000);
+            border: 2px solid #d4af37;
+            border-radius: 5px;
+            box-shadow: 0 0 15px #FF4500;
+        }
+        #left-paddle {
+            left: 30px;
+            top: 200px;
+        }
+        #right-paddle {
+            right: 30px;
+            top: 200px;
+        }
+        .flame {
+            position: absolute;
+            width: 10px;
+            height: 20px;
+            background: radial-gradient(ellipse at center, #FF8C00 0%, #FF4500 50%, transparent 70%);
+            border-radius: 50%;
+            animation: flicker 0.3s infinite alternate;
+        }
+        @keyframes flicker {
+            0% { opacity: 0.7; transform: scaleY(0.9); }
+            100% { opacity: 1; transform: scaleY(1.1); }
+        }
+        #ball {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: radial-gradient(circle at 30% 30%, #FFF, #FFD700, #B22222);
+            border-radius: 50%;
+            box-shadow: 0 0 10px #FF4500;
+        }
+        .explosion {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,69,0,0.8) 0%, rgba(255,140,0,0.6) 40%, rgba(255,215,0,0) 70%);
+            animation: explode 0.5s forwards;
+            pointer-events: none;
+        }
+        @keyframes explode {
+            0% { transform: scale(0.1); opacity: 1; }
+            100% { transform: scale(2); opacity: 0; }
+        }
+        .particle {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background-color: #FF8C00;
+            border-radius: 50%;
+            animation: particle-fly 1s forwards;
+            pointer-events: none;
+        }
+        @keyframes particle-fly {
+            0% { transform: translate(0, 0); opacity: 1; }
+            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
+        }
+        #start-screen, #game-over {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 10;
+        }
+        #game-over {
+            display: none;
+        }
+        h1 {
+            font-size: 48px;
+            margin-bottom: 20px;
+            text-shadow: 3px 3px 5px #000;
+        }
+        button {
+            padding: 15px 30px;
+            font-family: 'MedievalSharp', cursive;
+            font-size: 20px;
+            background: linear-gradient(to bottom, #8B0000, #B22222);
+            color: #d4af37;
+            border: 2px solid #d4af37;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px #FF4500;
+        }
+        #instructions {
+            margin-top: 20px;
+            font-size: 18px;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="scoreboard">
+            <div id="player-score">Player: 0</div>
+            <div id="ai-score">AI: 0</div>
+        </div>
+        <div id="left-paddle" class="paddle"></div>
+        <div id="right-paddle" class="paddle"></div>
+        <div id="ball"></div>
+        <div id="start-screen">
+            <h1>Medieval Pong: Siege of the Castle</h1>
+            <button id="start-button">Begin the Siege!</button>
+            <div id="instructions">
+                Defend your castle! Use W/S keys to move your flaming paddle.<br>
+                Each hit creates an explosive impact. First to 5 wins!
+            </div>
+        </div>
+        <div id="game-over">
+            <h1 id="result-message">Victory!</h1>
+            <button id="restart-button">Fight Again!</button>
+        </div>
+    </div>
+    <script>
+        // Game elements
+        const gameContainer = document.getElementById('game-container');
+        const leftPaddle = document.getElementById('left-paddle');
+        const rightPaddle = document.getElementById('right-paddle');
+        const ball = document.getElementById('ball');
+        const playerScoreDisplay = document.getElementById('player-score');
+        const aiScoreDisplay = document.getElementById('ai-score');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over');
+        const resultMessage = document.getElementById('result-message');
+        const startButton = document.getElementById('start-button');
+        const restartButton = document.getElementById('restart-button');
+        // Game state
+        let gameRunning = false;
+        let playerScore = 0;
+        let aiScore = 0;
+        let ballX = 400;
+        let ballY = 250;
+        let ballSpeedX = 4;
+        let ballSpeedY = 4;
+        let leftPaddleY = 200;
+        let rightPaddleY = 200;
+        const paddleHeight = 100;
+        const paddleWidth = 20;
+        const ballSize = 20;
+        const gameWidth = 800;
+        const gameHeight = 500;
+        // Key states
+        const keys = {
+            w: false,
+            s: false
+        };
+        // Add flame effects to paddles
+        function addFlames() {
+            // Left paddle flames
+            for (let i = 0; i < 3; i++) {
+                const flame = document.createElement('div');
+                flame.className = 'flame';
+                flame.style.left = '-10px';
+                flame.style.top = `${20 + i * 30}px`;
+                leftPaddle.appendChild(flame);
+            }
+            // Right paddle flames
+            for (let i = 0; i < 3; i++) {
+                const flame = document.createElement('div');
+                flame.className = 'flame';
+                flame.style.right = '-10px';
+                flame.style.top = `${20 + i * 30}px`;
+                rightPaddle.appendChild(flame);
+            }
+        }
+        // Create explosion effect
+        function createExplosion(x, y) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = `${x - 20}px`;
+            explosion.style.top = `${y - 20}px`;
+            gameContainer.appendChild(explosion);
+            // Create particles
+            for (let i = 0; i < 10; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = `${x - 3}px`;
+                particle.style.top = `${y - 3}px`;
+                // Random direction for particles
+                const angle = Math.random() * Math.PI * 2;
+                const speed = 2 + Math.random() * 5;
+                const tx = Math.cos(angle) * speed * 30;
+                const ty = Math.sin(angle) * speed * 30;
+                particle.style.setProperty('--tx', `${tx}px`);
+                particle.style.setProperty('--ty', `${ty}px`);
+                gameContainer.appendChild(particle);
+                // Remove particles after animation
+                setTimeout(() => {
+                    particle.remove();
+                }, 1000);
+            }
+            // Remove explosion after animation
+            setTimeout(() => {
+                explosion.remove();
+            }, 500);
+        }
+        // Update game state
+        function update() {
+            if (!gameRunning) return;
+            // Move player paddle
+            if (keys.w && leftPaddleY > 0) {
+                leftPaddleY -= 5;
+            }
+            if (keys.s && leftPaddleY < gameHeight - paddleHeight) {
+                leftPaddleY += 5;
+            }
+            // Simple AI for right paddle
+            const paddleCenter = rightPaddleY + paddleHeight / 2;
+            if (paddleCenter < ballY - 10) {
+                rightPaddleY += 4;
+            } else if (paddleCenter > ballY + 10) {
+                rightPaddleY -= 4;
+            }
+            // Keep AI paddle in bounds
+            if (rightPaddleY < 0) rightPaddleY = 0;
+            if (rightPaddleY > gameHeight - paddleHeight) rightPaddleY = gameHeight - paddleHeight;
+            // Update paddle positions
+            leftPaddle.style.top = `${leftPaddleY}px`;
+            rightPaddle.style.top = `${rightPaddleY}px`;
+            // Move ball
+            ballX += ballSpeedX;
+            ballY += ballSpeedY;
+            // Ball collision with top and bottom
+            if (ballY <= 0 || ballY >= gameHeight - ballSize) {
+                ballSpeedY = -ballSpeedY;
+                createExplosion(ballX, ballY <= 0 ? ballSize : gameHeight - ballSize);
+            }
+            // Ball collision with paddles
+            if (
+                ballX <= 30 + paddleWidth &&
+                ballY + ballSize >= leftPaddleY &&
+                ballY <= leftPaddleY + paddleHeight
+            ) {
+                ballSpeedX = -ballSpeedX * 1.1; // Increase speed slightly
+                ballSpeedY += (ballY - (leftPaddleY + paddleHeight / 2)) * 0.05; // Add angle based on hit position
+                createExplosion(30 + paddleWidth, ballY);
+            }
+            if (
+                ballX >= gameWidth - 30 - paddleWidth - ballSize &&
+                ballY + ballSize >= rightPaddleY &&
+                ballY <= rightPaddleY + paddleHeight
+            ) {
+                ballSpeedX = -ballSpeedX * 1.1; // Increase speed slightly
+                ballSpeedY += (ballY - (rightPaddleY + paddleHeight / 2)) * 0.05; // Add angle based on hit position
+                createExplosion(gameWidth - 30 - paddleWidth, ballY);
+            }
+            // Ball out of bounds (score)
+            if (ballX < 0) {
+                aiScore++;
+                aiScoreDisplay.textContent = `AI: ${aiScore}`;
+                resetBall();
+                if (aiScore >= 5) endGame(false);
+            }
+            if (ballX > gameWidth) {
+                playerScore++;
+                playerScoreDisplay.textContent = `Player: ${playerScore}`;
+                resetBall();
+                if (playerScore >= 5) endGame(true);
+            }
+            // Update ball position
+            ball.style.left = `${ballX}px`;
+            ball.style.top = `${ballY}px`;
+            // Continue animation
+            requestAnimationFrame(update);
+        }
+        // Reset ball to center
+        function resetBall() {
+            ballX = gameWidth / 2 - ballSize / 2;
+            ballY = gameHeight / 2 - ballSize / 2;
+            ballSpeedX = (Math.random() > 0.5 ? 1 : -1) * 4;
+            ballSpeedY = (Math.random() * 4 - 2);
+            // Show ball at center
+            ball.style.left = `${ballX}px`;
+            ball.style.top = `${ballY}px`;
+            // Pause for a moment
+            gameRunning = false;
+            setTimeout(() => {
+                gameRunning = true;
+                update();
+            }, 1000);
+        }
+        // End game
+        function endGame(playerWon) {
+            gameRunning = false;
+            resultMessage.textContent = playerWon ? "Victory! The Castle Stands!" : "Defeat! The Castle Burns!";
+            gameOverScreen.style.display = "flex";
+        }
+        // Start game
+        function startGame() {
+            playerScore = 0;
+            aiScore = 0;
+            playerScoreDisplay.textContent = "Player: 0";
+            aiScoreDisplay.textContent = "AI: 0";
+            startScreen.style.display = "none";
+            gameOverScreen.style.display = "none";
+            resetBall();
+            gameRunning = true;
+            update();
+        }
+        // Event listeners
+        document.addEventListener('keydown', (e) => {
+            if (e.key.toLowerCase() === 'w') keys.w = true;
+            if (e.key.toLowerCase() === 's') keys.s = true;
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key.toLowerCase() === 'w') keys.w = false;
+            if (e.key.toLowerCase() === 's') keys.s = false;
+        });
+        startButton.addEventListener('click', startGame);
+        restartButton.addEventListener('click', startGame);
+        // Initialize
+        addFlames();
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>