Create a tertis game

README.md

@@ -1,10 +1,13 @@
 ---
-title: Blocky Stacky Blitz
-emoji: 🏃
-colorFrom: gray
-colorTo: gray
+title: Blocky Stacky Blitz 🎮
+colorFrom: green
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/game-controls.js

@@ -0,0 +1,61 @@
+class GameControls extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                button {
+                    transition: all 0.2s ease;
+                }
+                button:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                button:active {
+                    transform: translateY(0);
+                }
+            </style>
+            <div class="flex flex-col gap-4 bg-gray-800 p-6 rounded-lg shadow-lg">
+                <h2 class="text-xl font-semibold text-center text-purple-400 mb-2">Controls</h2>
+                <div class="grid grid-cols-3 gap-3">
+                    <button class="bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center">
+                        <i data-feather="arrow-left"></i>
+                    </button>
+                    <button class="bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center">
+                        <i data-feather="arrow-up"></i>
+                    </button>
+                    <button class="bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center">
+                        <i data-feather="arrow-right"></i>
+                    </button>
+                    <button class="bg-gray-700 hover:bg-gray-600 text-white p-4 rounded-lg flex items-center justify-center">
+                        <i data-feather="arrow-down"></i>
+                    </button>
+                    <button class="bg-purple-600 hover:bg-purple-500 text-white p-4 rounded-lg flex items-center justify-center col-span-2">
+                        <i data-feather="corner-down-left" class="mr-2"></i>
+                        <span>Hard Drop</span>
+                    </button>
+                </div>
+                <div class="flex gap-3 mt-2">
+                    <button id="startBtn" class="bg-green-600 hover:bg-green-500 text-white py-3 px-6 rounded-lg flex-1 flex items-center justify-center">
+                        <i data-feather="play" class="mr-2"></i>
+                        <span>Start</span>
+                    </button>
+                    <button id="resetBtn" class="bg-pink-600 hover:bg-pink-500 text-white py-3 px-6 rounded-lg flex-1 flex items-center justify-center">
+                        <i data-feather="refresh-cw" class="mr-2"></i>
+                        <span>Reset</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        this.shadowRoot.getElementById('startBtn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('start-game'));
+        });
+        
+        this.shadowRoot.getElementById('resetBtn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('reset-game'));
+        });
+        
+        feather.replace();
+    }
+}
+customElements.define('custom-game-controls', GameControls);

components/game-over.js

@@ -0,0 +1,95 @@
+class GameOver extends HTMLElement {
+    static get observedAttributes() {
+        return ['visible'];
+    }
+    
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.visible = 'false';
+    }
+    
+    connectedCallback() {
+        this.render();
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'visible') {
+            this.visible = newValue;
+            this.render();
+        }
+    }
+    
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                .game-over {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.8);
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    opacity: 0;
+                    pointer-events: none;
+                    transition: opacity 0.3s ease;
+                    z-index: 10;
+                }
+                
+                .visible {
+                    opacity: 1;
+                    pointer-events: all;
+                }
+                
+                .game-over h2 {
+                    color: #fff;
+                    font-size: 2rem;
+                    margin-bottom: 2rem;
+                    text-align: center;
+                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+                }
+                
+                .restart-btn {
+                    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+                    color: white;
+                    border: none;
+                    padding: 0.75rem 2rem;
+                    font-size: 1rem;
+                    border-radius: 0.5rem;
+                    cursor: pointer;
+                    transition: transform 0.2s ease, box-shadow 0.2s ease;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                }
+                
+                .restart-btn:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                
+                .restart-btn:active {
+                    transform: translateY(0);
+                }
+            </style>
+            <div class="game-over ${this.visible === 'true' ? 'visible' : ''}">
+                <h2>GAME OVER</h2>
+                <button class="restart-btn">
+                    <i data-feather="refresh-cw" class="mr-2"></i>
+                    Play Again
+                </button>
+            </div>
+        `;
+        
+        if (this.visible === 'true') {
+            const button = this.shadowRoot.querySelector('.restart-btn');
+            button.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('restart-game'));
+            });
+            feather.replace();
+        }
+    }
+}
+customElements.define('custom-game-over', GameOver);

components/score-display.js

@@ -0,0 +1,39 @@
+class ScoreDisplay extends HTMLElement {
+    static get observedAttributes() {
+        return ['score'];
+    }
+    
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.score = 0;
+    }
+    
+    connectedCallback() {
+        this.render();
+    }
+    
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'score') {
+            this.score = newValue;
+            this.render();
+        }
+    }
+    
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                .score-display {
+                    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+                    border: 2px solid #6b46c1;
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+                }
+            </style>
+            <div class="score-display p-6 rounded-lg text-center">
+                <h3 class="text-lg font-semibold text-purple-400 mb-2">SCORE</h3>
+                <p class="text-4xl font-bold">${this.score}</p>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-score-display', ScoreDisplay);

index.html

@@ -1,19 +1,54 @@
-<!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>Blocky Stacky Blitz - Tetris Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="components/game-controls.js"></script>
+    <script src="components/score-display.js"></script>
+    <script src="components/game-over.js"></script>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <header class="mb-8 text-center">
+        <h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">Blocky Stacky Blitz</h1>
+        <p class="text-gray-400 mt-2">The ultimate tetris challenge</p>
+    </header>
+
+    <main class="flex flex-col md:flex-row items-center gap-8">
+        <div class="relative">
+            <canvas id="tetris" class="border-4 border-purple-600 rounded-lg shadow-2xl shadow-purple-900/50"></canvas>
+            <custom-game-over></custom-game-over>
+        </div>
+
+        <div class="flex flex-col gap-6">
+            <custom-score-display></custom-score-display>
+            <custom-game-controls></custom-game-controls>
+            
+            <div class="bg-gray-800 p-4 rounded-lg">
+                <h3 class="text-xl font-semibold mb-2 text-purple-400">How to Play</h3>
+                <ul class="text-gray-300 space-y-1">
+                    <li><span class="text-pink-400">← →</span> Move left/right</li>
+                    <li><span class="text-pink-400">↓</span> Soft drop</li>
+                    <li><span class="text-pink-400">↑</span> Rotate</li>
+                    <li><span class="text-pink-400">Space</span> Hard drop</li>
+                    <li><span class="text-pink-400">P</span> Pause</li>
+                </ul>
+            </div>
+        </div>
+    </main>
+
+    <footer class="mt-12 text-center text-gray-500 text-sm">
+        <p>Built with ♥ using HTML5 Canvas</p>
+    </footer>
+
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,286 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('tetris');
+    const ctx = canvas.getContext('2d');
+    
+    // Scale canvas
+    const scale = window.devicePixelRatio;
+    canvas.width = Math.floor(canvas.clientWidth * scale);
+    canvas.height = Math.floor(canvas.clientHeight * scale);
+    ctx.scale(scale, scale);
+    
+    // Game state
+    const COLS = 10;
+    const ROWS = 20;
+    const BLOCK_SIZE = canvas.width / 10 / scale;
+    const COLORS = [
+        null,
+        '#3B82F6', // I
+        '#8B5CF6', // J
+        '#F59E0B', // L
+        '#10B981', // O
+        '#EF4444', // S
+        '#EC4899', // T
+        '#84CC16'  // Z
+    ];
+    
+    let board = createBoard();
+    let piece = null;
+    let score = 0;
+    let gameOver = false;
+    let dropCounter = 0;
+    let lastTime = 0;
+    let dropInterval = 1000;
+    
+    // Pieces
+    const PIECES = [
+        null,
+        { shape: [[0,0,0,0], [1,1,1,1], [0,0,0,0], [0,0,0,0]], color: 'I' },
+        { shape: [[2,0,0], [2,2,2], [0,0,0]], color: 'J' },
+        { shape: [[0,0,3], [3,3,3], [0,0,0]], color: 'L' },
+        { shape: [[0,4,4], [0,4,4], [0,0,0]], color: 'O' },
+        { shape: [[0,5,5], [5,5,0], [0,0,0]], color: 'S' },
+        { shape: [[0,6,0], [6,6,6], [0,0,0]], color: 'T' },
+        { shape: [[7,7,0], [0,7,7], [0,0,0]], color: 'Z' }
+    ];
+    
+    // Game functions
+    function createBoard() {
+        return Array.from({length: ROWS}, () => Array(COLS).fill(0));
+    }
+    
+    function createPiece() {
+        const randomIndex = Math.floor(Math.random() * 7) + 1;
+        return {
+            position: {x: Math.floor(COLS / 2) - 1, y: 0},
+            shape: PIECES[randomIndex].shape,
+            color: PIECES[randomIndex].color
+        };
+    }
+    
+    function draw() {
+        // Clear canvas
+        ctx.fillStyle = '#111827';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // Draw board
+        board.forEach((row, y) => {
+            row.forEach((value, x) => {
+                if (value !== 0) {
+                    ctx.fillStyle = COLORS[value];
+                    ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                    ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+                }
+            });
+        });
+        
+        // Draw current piece
+        if (piece) {
+            piece.shape.forEach((row, y) => {
+                row.forEach((value, x) => {
+                    if (value !== 0) {
+                        ctx.fillStyle = COLORS[value];
+                        ctx.fillRect(
+                            (piece.position.x + x) * BLOCK_SIZE,
+                            (piece.position.y + y) * BLOCK_SIZE,
+                            BLOCK_SIZE,
+                            BLOCK_SIZE
+                        );
+                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                        ctx.strokeRect(
+                            (piece.position.x + x) * BLOCK_SIZE,
+                            (piece.position.y + y) * BLOCK_SIZE,
+                            BLOCK_SIZE,
+                            BLOCK_SIZE
+                        );
+                    }
+                });
+            });
+        }
+    }
+    
+    function collide() {
+        for (let y = 0; y < piece.shape.length; y++) {
+            for (let x = 0; x < piece.shape[y].length; x++) {
+                if (piece.shape[y][x] !== 0 &&
+                    (board[y + piece.position.y] === undefined ||
+                     board[y + piece.position.y][x + piece.position.x] === undefined ||
+                     board[y + piece.position.y][x + piece.position.x] !== 0)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    
+    function rotate() {
+        const rotated = [];
+        for (let y = 0; y < piece.shape[0].length; y++) {
+            const row = [];
+            for (let x = piece.shape.length - 1; x >= 0; x--) {
+                row.push(piece.shape[x][y]);
+            }
+            rotated.push(row);
+        }
+        
+        const previousShape = piece.shape;
+        piece.shape = rotated;
+        
+        if (collide()) {
+            piece.shape = previousShape;
+        }
+    }
+    
+    function movePiece(direction) {
+        piece.position.x += direction;
+        if (collide()) {
+            piece.position.x -= direction;
+        }
+    }
+    
+    function hardDrop() {
+        while (!collide()) {
+            piece.position.y++;
+        }
+        piece.position.y--;
+        merge();
+        removeRows();
+        piece = createPiece();
+        
+        if (collide()) {
+            gameOver = true;
+            document.querySelector('custom-game-over').setAttribute('visible', 'true');
+        }
+    }
+    
+    function merge() {
+        piece.shape.forEach((row, y) => {
+            row.forEach((value, x) => {
+                if (value !== 0) {
+                    board[y + piece.position.y][x + piece.position.x] = value;
+                }
+            });
+        });
+    }
+    
+    function removeRows() {
+        let linesCleared = 0;
+        
+        outer: for (let y = board.length - 1; y >= 0; y--) {
+            for (let x = 0; x < board[y].length; x++) {
+                if (board[y][x] === 0) {
+                    continue outer;
+                }
+            }
+            
+            const row = board.splice(y, 1)[0].fill(0);
+            board.unshift(row);
+            y++;
+            
+            linesCleared++;
+        }
+        
+        if (linesCleared > 0) {
+            score += calculateScore(linesCleared);
+            updateScoreDisplay();
+        }
+    }
+    
+    function calculateScore(lines) {
+        switch(lines) {
+            case 1: return 100;
+            case 2: return 300;
+            case 3: return 500;
+            case 4: return 800;
+            default: return 0;
+        }
+    }
+    
+    function updateScoreDisplay() {
+        document.querySelector('custom-score-display').setAttribute('score', score.toString());
+    }
+    
+    function resetGame() {
+        board = createBoard();
+        piece = createPiece();
+        score = 0;
+        gameOver = false;
+        dropInterval = 1000;
+        updateScoreDisplay();
+        document.querySelector('custom-game-over').setAttribute('visible', 'false');
+    }
+    
+    // Game loop
+    function update(time = 0) {
+        if (gameOver) return;
+        
+        const deltaTime = time - lastTime;
+        lastTime = time;
+        
+        dropCounter += deltaTime;
+        if (dropCounter > dropInterval) {
+            piece.position.y++;
+            if (collide()) {
+                piece.position.y--;
+                merge();
+                removeRows();
+                piece = createPiece();
+                
+                if (collide()) {
+                    gameOver = true;
+                    document.querySelector('custom-game-over').setAttribute('visible', 'true');
+                }
+            }
+            dropCounter = 0;
+        }
+        
+        draw();
+        requestAnimationFrame(update);
+    }
+    
+    // Controls
+    document.addEventListener('keydown', event => {
+        if (gameOver) return;
+        
+        switch(event.keyCode) {
+            case 37: // Left
+                movePiece(-1);
+                break;
+            case 39: // Right
+                movePiece(1);
+                break;
+            case 40: // Down
+                piece.position.y++;
+                if (collide()) {
+                    piece.position.y--;
+                    merge();
+                    removeRows();
+                    piece = createPiece();
+                    
+                    if (collide()) {
+                        gameOver = true;
+                        document.querySelector('custom-game-over').setAttribute('visible', 'true');
+                    }
+                }
+                dropCounter = 0;
+                break;
+            case 38: // Up
+                rotate();
+                break;
+            case 32: // Space
+                hardDrop();
+                break;
+            case 80: // P
+                // Pause logic would go here
+                break;
+        }
+    });
+    
+    // Initialize game
+    piece = createPiece();
+    update();
+    
+    // Custom element event listeners
+    document.addEventListener('start-game', resetGame);
+    document.addEventListener('reset-game', resetGame);
+});

style.css

@@ -1,28 +1,50 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@400;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Rubik', sans-serif;
+}
+
+h1, h2, h3 {
+    font-family: 'Press Start 2P', cursive;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+canvas {
+    background-color: #111827;
+    width: 300px;
+    height: 600px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@media (min-width: 768px) {
+    canvas {
+        width: 400px;
+        height: 800px;
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.tetris-block {
+    position: absolute;
+    box-sizing: border-box;
+    border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.I {
+    background-color: #3b82f6;
+}
+.J {
+    background-color: #8b5cf6;
+}
+.L {
+    background-color: #f59e0b;
+}
+.O {
+    background-color: #10b981;
+}
+.S {
+    background-color: #ef4444;
+}
+.T {
+    background-color: #ec4899;
 }
+.Z {
+    background-color: #84cc16;
+}