hello, i want a towestacking browser game where you habe one start block in the center and you need to drop moving blocks to build a tower as high as possible

README.md

@@ -1,10 +1,13 @@
 ---
-title: Towerstack Frenzy
-emoji: 📉
-colorFrom: indigo
+title: TowerStack Frenzy 🏗️
+colorFrom: yellow
 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/controls.js

@@ -0,0 +1,57 @@
+class CustomControls extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .controls-container {
+                    @apply bg-gray-800 p-4 rounded-lg shadow-xl;
+                }
+                .control-group {
+                    @apply mb-4;
+                }
+                .control-label {
+                    @apply block text-sm font-medium mb-1;
+                }
+                .control-select {
+                    @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md bg-gray-700 text-white;
+                }
+                .btn {
+                    @apply w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
+                }
+                .btn-secondary {
+                    @apply mt-2 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500;
+                }
+            </style>
+            <div class="controls-container">
+                <div class="control-group">
+                    <label class="control-label">Mode:</label>
+                    <select id="mode-select" class="control-select">
+                        <option value="draw">Draw Mode</option>
+                        <option value="start">Set Start</option>
+                        <option value="end">Set End</option>
+                        <option value="wall">Place Walls</option>
+                    </select>
+                </div>
+                
+                <button id="solve-btn" class="btn">
+                    <i data-feather="play" class="mr-2"></i> Solve Puzzle
+                </button>
+                
+                <button id="reset-btn" class="btn-secondary">
+                    <i data-feather="refresh-cw" class="mr-2"></i> Reset Board
+                </button>
+                
+                <div class="control-group mt-6">
+                    <h3 class="font-bold mb-2">Instructions:</h3>
+                    <p class="text-sm text-gray-300">
+                        1. Set start and end points<br>
+                        2. Add walls to create obstacles<br>
+                        3. Click "Solve Puzzle" to find path
+                    </p>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-controls', CustomControls);

components/game-board.js

@@ -0,0 +1,21 @@
+class CustomGameBoard extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .game-container {
+                    @apply bg-gray-800 p-4 rounded-lg shadow-xl;
+                }
+                .game-title {
+                    @apply text-xl font-bold mb-4 text-center;
+                }
+            </style>
+            <div class="game-container">
+                <h2 class="game-title">Logic Puzzle Board</h2>
+                <div class="game-board"></div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-game-board', CustomGameBoard);

components/navbar.js

@@ -0,0 +1,50 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    @apply bg-gray-800 text-white shadow-lg;
+                }
+                .container {
+                    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+                }
+                .nav-content {
+                    @apply flex items-center justify-between h-16;
+                }
+                .logo {
+                    @apply flex-shrink-0 flex items-center text-xl font-bold;
+                }
+                .nav-links {
+                    @apply hidden md:flex space-x-8;
+                }
+                .nav-link {
+                    @apply px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700;
+                }
+                .mobile-menu-btn {
+                    @apply md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700;
+                }
+            </style>
+            <nav>
+                <div class="container">
+                    <div class="nav-content">
+                        <div class="logo">
+                            <i data-feather="cpu"></i>
+                            <span class="ml-2">MindBender Logic Lab</span>
+                        </div>
+                        <div class="nav-links">
+                            <a href="#" class="nav-link active">Home</a>
+                            <a href="#" class="nav-link">About</a>
+                            <a href="#" class="nav-link">Tutorial</a>
+                        </div>
+                        <button class="mobile-menu-btn">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

components/tower-game.js

@@ -0,0 +1,117 @@
+class TowerGame extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .game-container {
+          width: 100%;
+          height: 500px;
+          background: #f0f0f0;
+          position: relative;
+          overflow: hidden;
+          border-radius: 8px;
+          border: 2px solid #333;
+        }
+        .block {
+          position: absolute;
+          background: linear-gradient(135deg, #667eea, #764ba2);
+          border-radius: 4px;
+          box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+          transition: transform 0.2s;
+        }
+        .active-block {
+          background: linear-gradient(135deg, #f56565, #ed8936);
+        }
+        .score-display {
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: #333;
+          z-index: 10;
+        }
+      </style>
+      <div class="game-container">
+        <div class="score-display">Height: 0</div>
+      </div>
+    `;
+    this.initGame();
+  }
+
+  initGame() {
+    this.gameWidth = 300;
+    this.gameHeight = 500;
+    this.blockWidth = 60;
+    this.blockHeight = 20;
+    this.speed = 2;
+    this.direction = 1;
+    this.tower = [];
+    this.score = 0;
+    this.gameOver = false;
+
+    // Create base block
+    this.createBlock(this.gameWidth/2 - this.blockWidth/2, this.gameHeight - this.blockHeight, true);
+    
+    // Start game loop
+    this.gameLoop();
+    
+    // Set up controls
+    this.shadowRoot.querySelector('.game-container').addEventListener('click', () => this.placeBlock());
+  }
+
+  createBlock(x, y, isBase = false) {
+    const block = document.createElement('div');
+    block.className = isBase ? 'block' : 'block active-block';
+    block.style.width = `${this.blockWidth}px`;
+    block.style.height = `${this.blockHeight}px`;
+    block.style.left = `${x}px`;
+    block.style.top = `${y}px`;
+    this.shadowRoot.querySelector('.game-container').appendChild(block);
+
+    if (!isBase) {
+      this.activeBlock = { element: block, x, y, movingRight: true };
+    } else {
+      this.tower.push({ element: block, x, y });
+    }
+  }
+
+  gameLoop() {
+    if (this.gameOver) return;
+
+    if (this.activeBlock) {
+      // Move active block
+      this.activeBlock.x += this.direction * this.speed;
+      this.activeBlock.element.style.left = `${this.activeBlock.x}px`;
+
+      // Change direction at edges
+      if (this.activeBlock.x <= 0) this.direction = 1;
+      if (this.activeBlock.x + this.blockWidth >= this.gameWidth) this.direction = -1;
+    }
+
+    requestAnimationFrame(() => this.gameLoop());
+  }
+
+  placeBlock() {
+    if (!this.activeBlock || this.gameOver) return;
+
+    // Add active block to tower
+    this.activeBlock.element.classList.remove('active-block');
+    this.tower.push(this.activeBlock);
+    this.score++;
+    this.updateScore();
+
+    // Create new active block
+    const newY = this.tower[this.tower.length-1].y - this.blockHeight;
+    this.createBlock(0, newY);
+
+    // Increase speed slightly
+    this.speed = Math.min(5, this.speed + 0.1);
+  }
+
+  updateScore() {
+    this.shadowRoot.querySelector('.score-display').textContent = `Height: ${this.score}`;
+  }
+}
+
+customElements.define('tower-game', TowerGame);

index.html

@@ -1,19 +1,34 @@
-<!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>MindBender Logic Lab</title>
+    <link rel="stylesheet" href="style.css">
+    <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>
+    <script src="components/navbar.js"></script>
+    <script src="components/tower-game.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col lg:flex-row gap-8">
+            <div class="lg:w-3/4">
+    <tower-game></tower-game>
+</div>
+            <div class="lg:w-1/4">
+    <div class="mt-4 text-center">
+      <p class="text-gray-300">Click to drop blocks and build your tower!</p>
+    </div>
+</div>
+        </div>
+    </main>
+
+    <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,200 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Game state
+    const gameState = {
+        boardSize: 10,
+        cells: [],
+        startPos: null,
+        endPos: null,
+        walls: [],
+        mode: 'draw', // 'draw', 'start', 'end', 'wall'
+        isSolving: false,
+        solutionPath: []
+    };
+
+    // Initialize the game
+    function initGame() {
+        createBoard();
+        setupEventListeners();
+    }
+
+    // Create the game board
+    function createBoard() {
+        const gameBoard = document.querySelector('custom-game-board');
+        gameBoard.shadowRoot.innerHTML = `
+            <style>
+                .game-board {
+                    display: grid;
+                    gap: 0;
+                    grid-template-columns: repeat(${gameState.boardSize}, 1fr);
+                }
+            </style>
+            <div class="game-board bg-gray-800 p-2 rounded-lg shadow-xl"></div>
+        `;
+
+        const boardElement = gameBoard.shadowRoot.querySelector('.game-board');
+        boardElement.innerHTML = '';
+
+        gameState.cells = [];
+        for (let y = 0; y < gameState.boardSize; y++) {
+            for (let x = 0; x < gameState.boardSize; x++) {
+                const cell = document.createElement('div');
+                cell.className = 'cell';
+                cell.dataset.x = x;
+                cell.dataset.y = y;
+                boardElement.appendChild(cell);
+                gameState.cells.push({ x, y, element: cell });
+            }
+        }
+    }
+
+    // Setup event listeners
+    function setupEventListeners() {
+        const gameBoard = document.querySelector('custom-game-board');
+        gameBoard.shadowRoot.querySelector('.game-board').addEventListener('click', handleCellClick);
+
+        const controls = document.querySelector('custom-controls');
+        controls.shadowRoot.querySelector('#solve-btn').addEventListener('click', solvePuzzle);
+        controls.shadowRoot.querySelector('#reset-btn').addEventListener('click', resetBoard);
+        controls.shadowRoot.querySelector('#mode-select').addEventListener('change', (e) => {
+            gameState.mode = e.target.value;
+        });
+    }
+
+    // Handle cell clicks
+    function handleCellClick(e) {
+        if (gameState.isSolving) return;
+        
+        const cell = e.target.closest('.cell');
+        if (!cell) return;
+        
+        const x = parseInt(cell.dataset.x);
+        const y = parseInt(cell.dataset.y);
+        
+        switch (gameState.mode) {
+            case 'start':
+                setStartPosition(x, y);
+                break;
+            case 'end':
+                setEndPosition(x, y);
+                break;
+            case 'wall':
+                toggleWall(x, y);
+                break;
+            default:
+                // Do nothing
+                break;
+        }
+    }
+
+    // Set start position
+    function setStartPosition(x, y) {
+        // Clear previous start
+        if (gameState.startPos) {
+            const prevCell = document.querySelector(`.cell[data-x="${gameState.startPos.x}"][data-y="${gameState.startPos.y}"]`);
+            prevCell?.classList.remove('start');
+        }
+        
+        // Set new start
+        const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
+        cell.classList.add('start');
+        gameState.startPos = { x, y };
+    }
+
+    // Set end position
+    function setEndPosition(x, y) {
+        // Clear previous end
+        if (gameState.endPos) {
+            const prevCell = document.querySelector(`.cell[data-x="${gameState.endPos.x}"][data-y="${gameState.endPos.y}"]`);
+            prevCell?.classList.remove('end');
+        }
+        
+        // Set new end
+        const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
+        cell.classList.add('end');
+        gameState.endPos = { x, y };
+    }
+
+    // Toggle wall
+    function toggleWall(x, y) {
+        const cell = document.querySelector(`.cell[data-x="${x}"][data-y="${y}"]`);
+        const isWall = cell.classList.contains('wall');
+        
+        if (isWall) {
+            cell.classList.remove('wall');
+            gameState.walls = gameState.walls.filter(wall => !(wall.x === x && wall.y === y));
+        } else {
+            cell.classList.add('wall');
+            gameState.walls.push({ x, y });
+        }
+    }
+
+    // Solve the puzzle
+    function solvePuzzle() {
+        if (!gameState.startPos || !gameState.endPos) {
+            alert('Please set both start and end positions!');
+            return;
+        }
+
+        gameState.isSolving = true;
+        gameState.solutionPath = findPath();
+        animateSolution();
+    }
+
+    // Find path (simplified for demo)
+    function findPath() {
+        // This is a simplified pathfinding algorithm
+        // In a real implementation, you would use A* or similar
+        const path = [];
+        let current = { ...gameState.startPos };
+        
+        while (current.x !== gameState.endPos.x || current.y !== gameState.endPos.y) {
+            path.push({ ...current });
+            
+            // Simple movement towards target
+            if (current.x < gameState.endPos.x) current.x++;
+            else if (current.x > gameState.endPos.x) current.x--;
+            
+            if (current.y < gameState.endPos.y) current.y++;
+            else if (current.y > gameState.endPos.y) current.y--;
+            
+            // Prevent infinite loops
+            if (path.length > gameState.boardSize * 2) break;
+        }
+        
+        path.push({ ...gameState.endPos });
+        return path;
+    }
+
+    // Animate the solution
+    function animateSolution() {
+        if (gameState.solutionPath.length === 0) {
+            gameState.isSolving = false;
+            return;
+        }
+        
+        const step = gameState.solutionPath.shift();
+        const cell = document.querySelector(`.cell[data-x="${step.x}"][data-y="${step.y}"]`);
+        
+        if (!cell.classList.contains('start') && !cell.classList.contains('end')) {
+            cell.classList.add('path', 'trace-animation');
+        }
+        
+        setTimeout(animateSolution, 200);
+    }
+
+    // Reset the board
+    function resetBoard() {
+        gameState.startPos = null;
+        gameState.endPos = null;
+        gameState.walls = [];
+        gameState.solutionPath = [];
+        gameState.isSolving = false;
+        
+        document.querySelectorAll('.cell').forEach(cell => {
+            cell.className = 'cell';
+        });
+    }
+
+    // Initialize the game
+    initGame();
+});

style.css

@@ -1,28 +1,48 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles for the game elements */
+.cell {
+    @apply w-12 h-12 flex items-center justify-center border border-gray-700 cursor-pointer;
+    transition: all 0.2s ease;
+}
+
+.cell:hover {
+    @apply bg-gray-800;
+}
+
+.cell.active {
+    @apply bg-blue-600 text-white;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.cell.wall {
+    @apply bg-gray-700;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.cell.start {
+    @apply bg-green-600;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.cell.end {
+    @apply bg-red-600;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.cell.path {
+    @apply bg-yellow-500;
 }
+/* Tower game animations */
+@keyframes blockDrop {
+  0% { transform: translateY(-20px); }
+  100% { transform: translateY(0); }
+}
+
+.block {
+  animation: blockDrop 0.2s ease-out;
+}
+
+/* Responsive game container */
+.game-board {
+    @apply grid gap-0;
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+}