Spaces:

Darrellthedesigner
/

test

Running

App Files Files Community

Darrellthedesigner commited on Apr 18, 2025

Commit

80aace4

verified ·

1 Parent(s): 4e26aa4

Add 2 files

Browse files

Files changed (2) hide show

index.html +642 -38
prompts.txt +2 -0

index.html CHANGED Viewed

@@ -1,41 +1,645 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></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=Darrellthedesigner/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tons of Gold: Stacking Bricks</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5d742 0%, #d4af37 50%, #996515 100%);
+            min-height: 100vh;
+        }
+        .title {
+            font-family: 'Playfair Display', serif;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+        .game-container {
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            border: 4px solid #d4af37;
+            background-color: rgba(0, 0, 0, 0.7);
+        }
+        .grid {
+            display: grid;
+            grid-template-rows: repeat(20, 1fr);
+            grid-template-columns: repeat(10, 1fr);
+            gap: 1px;
+            border: 2px solid #d4af37;
+        }
+        .cell {
+            aspect-ratio: 1;
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+        .gold {
+            background: linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
+            border: 1px solid #fff;
+            box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5);
+        }
+        .gold-light {
+            background: linear-gradient(135deg, #fff8c6 0%, #ffd700 50%, #daa520 100%);
+            border: 1px solid #fff;
+            box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.8);
+        }
+        .next-piece-container {
+            border: 2px solid #d4af37;
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        .controls-btn {
+            background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
+            border: none;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s;
+        }
+        .controls-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+        }
+        .controls-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .game-over {
+            background-color: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(5px);
+        }
+        .score-display {
+            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(184, 134, 11, 0.3) 100%);
+            border: 2px solid #d4af37;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .game-grid-container {
+                flex-direction: column;
+            }
+            .game-container {
+                margin-bottom: 1rem;
+            }
+            .controls-container {
+                width: 100%;
+            }
+        }
     </style>
+</head>
+<body class="flex flex-col items-center justify-start py-4 px-2 overflow-x-hidden">
+    <h1 class="title text-4xl sm:text-5xl md:text-6xl font-bold mb-2 sm:mb-4 text-yellow-200">Tons of Gold</h1>
+    <h2 class="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-yellow-300">Stacking Bricks</h2>
+    <div class="flex flex-col lg:flex-row items-center justify-center gap-4 sm:gap-6 md:gap-8 w-full max-w-6xl px-2">
+        <div class="game-container relative">
+            <div id="grid" class="grid w-[250px] h-[500px] sm:w-[300px] sm:h-[600px]"></div>
+            <div id="game-over" class="game-over absolute inset-0 hidden flex-col items-center justify-center text-white">
+                <h3 class="text-2xl sm:text-3xl font-bold mb-4 text-yellow-300">Game Over!</h3>
+                <p class="text-lg sm:text-xl mb-6">Your score: <span id="final-score" class="font-bold text-yellow-300">0</span></p>
+                <button id="restart-btn" class="controls-btn px-6 py-2 rounded-full text-white font-bold">
+                    Play Again
+                </button>
+            </div>
+        </div>
+        <div class="flex flex-col gap-4 sm:gap-6 w-full max-w-xs">
+            <div class="score-display p-4 rounded-lg">
+                <div class="flex justify-between mb-2">
+                    <span class="text-yellow-200 font-semibold">Score:</span>
+                    <span id="score" class="text-white font-bold">0</span>
+                </div>
+                <div class="flex justify-between mb-2">
+                    <span class="text-yellow-200 font-semibold">Level:</span>
+                    <span id="level" class="text-white font-bold">1</span>
+                </div>
+                <div class="flex justify-between">
+                    <span class="text-yellow-200 font-semibold">Lines:</span>
+                    <span id="lines" class="text-white font-bold">0</span>
+                </div>
+            </div>
+            <div class="next-piece-container p-4 rounded-lg">
+                <h3 class="text-yellow-200 font-semibold mb-2 text-center">Next Piece</h3>
+                <div id="next-piece" class="grid grid-cols-4 grid-rows-4 w-24 h-24 gap-1 mx-auto"></div>
+            </div>
+            <div class="bg-black bg-opacity-30 p-4 rounded-lg">
+                <h3 class="text-yellow-200 font-semibold mb-3 text-center">Controls</h3>
+                <div class="grid grid-cols-3 gap-2 text-white text-sm">
+                    <div class="text-center">
+                        <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">↑</div>
+                        <span>Rotate</span>
+                    </div>
+                    <div class="text-center">
+                        <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">←</div>
+                        <span>Left</span>
+                    </div>
+                    <div class="text-center">
+                        <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">→</div>
+                        <span>Right</span>
+                    </div>
+                    <div class="text-center col-span-3">
+                        <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">↓ (Drop Faster)</div>
+                    </div>
+                    <div class="text-center col-span-3">
+                        <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">Space (Instant Drop)</div>
+                    </div>
+                    <div class="text-center col-span-3">
+                        <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">P (Pause)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="mt-4 sm:mt-6 text-yellow-200 text-center px-2">
+        <p class="text-sm sm:text-base">Stack the gold bars to complete lines and earn points!</p>
+        <p class="text-xs sm:text-sm mt-1 text-yellow-300">Each line cleared increases your score and level.</p>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game constants
+            const COLS = 10;
+            const ROWS = 20;
+            const BLOCK_SIZE = 30;
+            const NEXT_PIECE_SIZE = 4;
+            // Game variables
+            let grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+            let currentPiece = null;
+            let nextPiece = null;
+            let score = 0;
+            let level = 1;
+            let lines = 0;
+            let gameOver = false;
+            let isPaused = false;
+            let dropInterval;
+            let dropSpeed = 1000; // Initial speed in ms
+            // DOM elements
+            const gridElement = document.getElementById('grid');
+            const nextPieceElement = document.getElementById('next-piece');
+            const scoreElement = document.getElementById('score');
+            const levelElement = document.getElementById('level');
+            const linesElement = document.getElementById('lines');
+            const gameOverElement = document.getElementById('game-over');
+            const finalScoreElement = document.getElementById('final-score');
+            const restartBtn = document.getElementById('restart-btn');
+            // Piece shapes (gold bars)
+            const SHAPES = [
+                // I shape (long gold bar)
+                [
+                    [0, 0, 0, 0],
+                    [1, 1, 1, 1],
+                    [0, 0, 0, 0],
+                    [0, 0, 0, 0]
+                ],
+                // J shape
+                [
+                    [1, 0, 0],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                // L shape
+                [
+                    [0, 0, 1],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                // O shape (gold cube)
+                [
+                    [1, 1],
+                    [1, 1]
+                ],
+                // S shape
+                [
+                    [0, 1, 1],
+                    [1, 1, 0],
+                    [0, 0, 0]
+                ],
+                // T shape
+                [
+                    [0, 1, 0],
+                    [1, 1, 1],
+                    [0, 0, 0]
+                ],
+                // Z shape
+                [
+                    [1, 1, 0],
+                    [0, 1, 1],
+                    [0, 0, 0]
+                ]
+            ];
+            // Colors for pieces (different shades of gold)
+            const COLORS = [
+                '#FFD700', // Gold
+                '#DAA520', // Goldenrod
+                '#F0E68C', // Khaki
+                '#EEE8AA', // Pale Goldenrod
+                '#B8860B', // Dark Goldenrod
+                '#FFDF00', // Golden Yellow
+                '#E6BE8A'  // Gold (metallic)
+            ];
+            // Initialize the game
+            function init() {
+                createGrid();
+                generateNewPiece();
+                generateNextPiece();
+                updateScore();
+                startGame();
+                addEventListeners();
+            }
+            // Create the game grid
+            function createGrid() {
+                gridElement.innerHTML = '';
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'cell';
+                        cell.id = `cell-${row}-${col}`;
+                        gridElement.appendChild(cell);
+                    }
+                }
+            }
+            // Generate a new random piece
+            function generateNewPiece() {
+                if (nextPiece) {
+                    currentPiece = nextPiece;
+                } else {
+                    const randomShapeIndex = Math.floor(Math.random() * SHAPES.length);
+                    const randomColorIndex = Math.floor(Math.random() * COLORS.length);
+                    currentPiece = {
+                        shape: SHAPES[randomShapeIndex],
+                        color: COLORS[randomColorIndex],
+                        x: Math.floor(COLS / 2) - Math.floor(SHAPES[randomShapeIndex][0].length / 2),
+                        y: 0
+                    };
+                }
+                // Check if game over
+                if (collision()) {
+                    endGame();
+                }
+                generateNextPiece();
+            }
+            // Generate the next piece to show in the preview
+            function generateNextPiece() {
+                const randomShapeIndex = Math.floor(Math.random() * SHAPES.length);
+                const randomColorIndex = Math.floor(Math.random() * COLORS.length);
+                nextPiece = {
+                    shape: SHAPES[randomShapeIndex],
+                    color: COLORS[randomColorIndex],
+                    x: 0,
+                    y: 0
+                };
+                renderNextPiece();
+            }
+            // Render the next piece preview
+            function renderNextPiece() {
+                nextPieceElement.innerHTML = '';
+                for (let row = 0; row < NEXT_PIECE_SIZE; row++) {
+                    for (let col = 0; col < NEXT_PIECE_SIZE; col++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'cell';
+                        if (nextPiece.shape[row] && nextPiece.shape[row][col]) {
+                            cell.style.backgroundColor = nextPiece.color;
+                            cell.style.border = '1px solid #fff';
+                            cell.style.boxShadow = 'inset 0 0 5px rgba(255, 255, 255, 0.5)';
+                        } else {
+                            cell.style.backgroundColor = 'transparent';
+                        }
+                        nextPieceElement.appendChild(cell);
+                    }
+                }
+            }
+            // Draw the current piece on the grid
+            function drawPiece() {
+                clearPiece();
+                for (let row = 0; row < currentPiece.shape.length; row++) {
+                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
+                        if (currentPiece.shape[row][col]) {
+                            const gridRow = currentPiece.y + row;
+                            const gridCol = currentPiece.x + col;
+                            if (gridRow >= 0 && gridRow < ROWS && gridCol >= 0 && gridCol < COLS) {
+                                const cell = document.getElementById(`cell-${gridRow}-${gridCol}`);
+                                cell.classList.add('gold');
+                                cell.style.backgroundColor = currentPiece.color;
+                            }
+                        }
+                    }
+                }
+            }
+            // Clear the current piece from the grid
+            function clearPiece() {
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.getElementById(`cell-${row}-${col}`);
+                        if (cell.classList.contains('gold')) {
+                            cell.classList.remove('gold');
+                            cell.style.backgroundColor = '';
+                        }
+                    }
+                }
+            }
+            // Check for collisions
+            function collision() {
+                for (let row = 0; row < currentPiece.shape.length; row++) {
+                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
+                        if (currentPiece.shape[row][col]) {
+                            const gridRow = currentPiece.y + row;
+                            const gridCol = currentPiece.x + col;
+                            // Check boundaries and other pieces
+                            if (
+                                gridRow >= ROWS ||
+                                gridCol < 0 ||
+                                gridCol >= COLS ||
+                                (gridRow >= 0 && grid[gridRow][gridCol])
+                            ) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                return false;
+            }
+            // Rotate the current piece
+            function rotate() {
+                if (isPaused || gameOver) return;
+                const originalShape = currentPiece.shape;
+                const originalX = currentPiece.x;
+                const originalY = currentPiece.y;
+                // Transpose and reverse rows to rotate
+                const rotated = currentPiece.shape[0].map((_, i) =>
+                    currentPiece.shape.map(row => row[i]).reverse()
+                );
+                currentPiece.shape = rotated;
+                // If rotation causes collision, try wall kicks
+                if (collision()) {
+                    // Try moving left
+                    currentPiece.x -= 1;
+                    if (collision()) {
+                        // Try moving right
+                        currentPiece.x += 2;
+                        if (collision()) {
+                            // Revert to original position if all kicks fail
+                            currentPiece.x = originalX;
+                            currentPiece.shape = originalShape;
+                            return;
+                        }
+                    }
+                }
+                drawPiece();
+            }
+            // Move the piece left
+            function moveLeft() {
+                if (isPaused || gameOver) return;
+                currentPiece.x -= 1;
+                if (collision()) {
+                    currentPiece.x += 1;
+                }
+                drawPiece();
+            }
+            // Move the piece right
+            function moveRight() {
+                if (isPaused || gameOver) return;
+                currentPiece.x += 1;
+                if (collision()) {
+                    currentPiece.x -= 1;
+                }
+                drawPiece();
+            }
+            // Move the piece down
+            function moveDown() {
+                if (isPaused || gameOver) return;
+                currentPiece.y += 1;
+                if (collision()) {
+                    currentPiece.y -= 1;
+                    lockPiece();
+                }
+                drawPiece();
+            }
+            // Hard drop - instantly drop the piece
+            function hardDrop() {
+                if (isPaused || gameOver) return;
+                while (!collision()) {
+                    currentPiece.y += 1;
+                }
+                currentPiece.y -= 1;
+                lockPiece();
+                drawPiece();
+            }
+            // Lock the piece in place and check for completed lines
+            function lockPiece() {
+                // Add piece to the grid
+                for (let row = 0; row < currentPiece.shape.length; row++) {
+                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
+                        if (currentPiece.shape[row][col]) {
+                            const gridRow = currentPiece.y + row;
+                            const gridCol = currentPiece.x + col;
+                            if (gridRow >= 0) {
+                                grid[gridRow][gridCol] = 1;
+                                const cell = document.getElementById(`cell-${gridRow}-${gridCol}`);
+                                cell.classList.remove('gold');
+                                cell.classList.add('gold-light');
+                                cell.style.backgroundColor = currentPiece.color;
+                            }
+                        }
+                    }
+                }
+                // Check for completed lines
+                checkLines();
+                // Generate new piece
+                generateNewPiece();
+            }
+            // Check for completed lines and clear them
+            function checkLines() {
+                let linesCleared = 0;
+                for (let row = ROWS - 1; row >= 0; row--) {
+                    if (grid[row].every(cell => cell === 1)) {
+                        // Remove the line
+                        grid.splice(row, 1);
+                        // Add new empty line at the top
+                        grid.unshift(Array(COLS).fill(0));
+                        linesCleared++;
+                        row++; // Check the same row again after shifting
+                    }
+                }
+                if (linesCleared > 0) {
+                    // Update score based on lines cleared
+                    const points = [0, 40, 100, 300, 1200][linesCleared] * level;
+                    score += points;
+                    lines += linesCleared;
+                    // Level up every 10 lines
+                    level = Math.floor(lines / 10) + 1;
+                    // Increase speed
+                    dropSpeed = Math.max(100, 1000 - (level - 1) * 100);
+                    resetDropInterval();
+                    updateScore();
+                    renderGrid();
+                }
+            }
+            // Render the entire grid
+            function renderGrid() {
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.getElementById(`cell-${row}-${col}`);
+                        if (grid[row][col]) {
+                            cell.classList.add('gold-light');
+                        } else {
+                            cell.classList.remove('gold-light');
+                            cell.style.backgroundColor = '';
+                        }
+                    }
+                }
+            }
+            // Update the score display
+            function updateScore() {
+                scoreElement.textContent = score;
+                levelElement.textContent = level;
+                linesElement.textContent = lines;
+            }
+            // Start the game
+            function startGame() {
+                gameOver = false;
+                score = 0;
+                level = 1;
+                lines = 0;
+                grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+                updateScore();
+                renderGrid();
+                resetDropInterval();
+                gameOverElement.classList.add('hidden');
+            }
+            // End the game
+            function endGame() {
+                gameOver = true;
+                clearInterval(dropInterval);
+                finalScoreElement.textContent = score;
+                gameOverElement.classList.remove('hidden');
+            }
+            // Reset the drop interval with current speed
+            function resetDropInterval() {
+                if (dropInterval) {
+                    clearInterval(dropInterval);
+                }
+                dropInterval = setInterval(moveDown, dropSpeed);
+            }
+            // Toggle pause
+            function togglePause() {
+                if (gameOver) return;
+                isPaused = !isPaused;
+                if (isPaused) {
+                    clearInterval(dropInterval);
+                } else {
+                    resetDropInterval();
+                }
+            }
+            // Add event listeners
+            function addEventListeners() {
+                document.addEventListener('keydown', (e) => {
+                    if (gameOver && e.key === 'Enter') {
+                        startGame();
+                        return;
+                    }
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                            moveLeft();
+                            break;
+                        case 'ArrowRight':
+                            moveRight();
+                            break;
+                        case 'ArrowDown':
+                            moveDown();
+                            break;
+                        case 'ArrowUp':
+                            rotate();
+                            break;
+                        case ' ':
+                            hardDrop();
+                            break;
+                        case 'p':
+                        case 'P':
+                            togglePause();
+                            break;
+                    }
+                });
+                restartBtn.addEventListener('click', startGame);
+            }
+            // Start the game
+            init();
+        });
+    </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=Darrellthedesigner/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1,2 @@


1	+ make a Tetris-like game, where the blocks are gold bars. allow keyboard controls, and use a golden color scheme throughout. The game is called Tons of Gold: Stacking Bricks
2	+ the main game screen is cutoff at the bottom, I can only see half the area, please fix