Add 2 files

index.html

@@ -39,6 +39,7 @@
         .cell {
             aspect-ratio: 1;
             background-color: rgba(0, 0, 0, 0.1);
+            position: relative;
         }
         
         .gold {
@@ -52,6 +53,19 @@
         }
         
         .gold::after {
+            content: '$';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #6a4a0a;
+            opacity: 0.7;
+            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+        }
+        
+        .gold::before {
             content: '';
             position: absolute;
             top: 0;
@@ -73,6 +87,19 @@
         }
         
         .gold-light::after {
+            content: '$';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #6a4a0a;
+            opacity: 0.7;
+            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
+        }
+        
+        .gold-light::before {
             content: '';
             position: absolute;
             top: 0;
@@ -115,12 +142,15 @@
             border: 2px solid #d4af37;
         }
 
-        /* Dark golden text */
         .text-gold-dark {
             color: #6a4a0a;
         }
 
-        /* Responsive adjustments */
+        .start-screen {
+            background-color: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(5px);
+        }
+
         @media (max-width: 768px) {
             .game-grid-container {
                 flex-direction: column;
@@ -133,14 +163,12 @@
             }
         }
 
-        /* Control panel container */
         .control-panel {
             max-height: calc(100vh - 60px);
             padding-bottom: 60px;
             overflow: hidden;
         }
 
-        /* Ensure game area fits on screen */
         .game-area {
             max-height: 100vh;
             padding-top: 20px;
@@ -163,6 +191,12 @@
                     Play Again
                 </button>
             </div>
+            <div id="start-screen" class="start-screen absolute inset-0 flex flex-col items-center justify-center text-gold-dark">
+                <h3 class="text-2xl sm:text-3xl font-bold mb-6">TONS OF GOLD</h3>
+                <button id="start-btn" class="controls-btn px-8 py-3 rounded-full text-white font-bold text-lg">
+                    START GAME
+                </button>
+            </div>
         </div>
         
         <div class="flex flex-col gap-2 sm:gap-4 w-full control-panel" style="max-width: 200px;">
@@ -238,6 +272,7 @@
             let isPaused = false;
             let dropInterval;
             let dropSpeed = 1000; // Initial speed in ms
+            let gameStarted = false;
             
             // DOM elements
             const gridElement = document.getElementById('grid');
@@ -248,6 +283,8 @@
             const gameOverElement = document.getElementById('game-over');
             const finalScoreElement = document.getElementById('final-score');
             const restartBtn = document.getElementById('restart-btn');
+            const startBtn = document.getElementById('start-btn');
+            const startScreen = document.getElementById('start-screen');
             
             // Piece shapes (gold bars)
             const SHAPES = [
@@ -309,13 +346,28 @@
             // Initialize the game
             function init() {
                 createGrid();
-                generateNewPiece();
-                generateNextPiece();
+                renderGrid();
                 updateScore();
-                startGame();
                 addEventListeners();
             }
             
+            // Start the game
+            function startGame() {
+                gameStarted = true;
+                gameOver = false;
+                score = 0;
+                level = 1;
+                lines = 0;
+                grid = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+                updateScore();
+                renderGrid();
+                generateNewPiece();
+                generateNextPiece();
+                resetDropInterval();
+                startScreen.classList.add('hidden');
+                gameOverElement.classList.add('hidden');
+            }
+            
             // Create the game grid
             function createGrid() {
                 gridElement.innerHTML = '';
@@ -382,6 +434,19 @@
                             cell.style.backgroundColor = nextPiece.color;
                             cell.style.border = '1px solid #fff';
                             cell.style.boxShadow = 'inset 0 0 5px rgba(255, 255, 255, 0.5)';
+                            
+                            // Add dollar sign to preview pieces
+                            const dollarSign = document.createElement('div');
+                            dollarSign.textContent = '$';
+                            dollarSign.style.position = 'absolute';
+                            dollarSign.style.top = '50%';
+                            dollarSign.style.left = '50%';
+                            dollarSign.style.transform = 'translate(-50%, -50%)';
+                            dollarSign.style.color = '#6a4a0a';
+                            dollarSign.style.opacity = '0.7';
+                            dollarSign.style.fontWeight = 'bold';
+                            dollarSign.style.textShadow = '1px 1px 1px rgba(0,0,0,0.3)';
+                            cell.appendChild(dollarSign);
                         } else {
                             cell.style.backgroundColor = 'transparent';
                         }
@@ -449,7 +514,7 @@
             
             // Rotate the current piece
             function rotate() {
-                if (isPaused || gameOver) return;
+                if (isPaused || gameOver || !gameStarted) return;
                 
                 const originalShape = currentPiece.shape;
                 const originalX = currentPiece.x;
@@ -483,7 +548,7 @@
             
             // Move the piece left
             function moveLeft() {
-                if (isPaused || gameOver) return;
+                if (isPaused || gameOver || !gameStarted) return;
                 
                 currentPiece.x -= 1;
                 if (collision()) {
@@ -494,7 +559,7 @@
             
             // Move the piece right
             function moveRight() {
-                if (isPaused || gameOver) return;
+                if (isPaused || gameOver || !gameStarted) return;
                 
                 currentPiece.x += 1;
                 if (collision()) {
@@ -505,7 +570,7 @@
             
             // Move the piece down
             function moveDown() {
-                if (isPaused || gameOver) return;
+                if (isPaused || gameOver || !gameStarted) return;
                 
                 currentPiece.y += 1;
                 
@@ -519,7 +584,7 @@
             
             // Hard drop - instantly drop the piece
             function hardDrop() {
-                if (isPaused || gameOver) return;
+                if (isPaused || gameOver || !gameStarted) return;
                 
                 while (!collision()) {
                     currentPiece.y += 1;
@@ -613,22 +678,10 @@
                 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;
+                gameStarted = false;
                 clearInterval(dropInterval);
                 finalScoreElement.textContent = score;
                 gameOverElement.classList.remove('hidden');
@@ -644,7 +697,7 @@
             
             // Toggle pause
             function togglePause() {
-                if (gameOver) return;
+                if (gameOver || !gameStarted) return;
                 
                 isPaused = !isPaused;
                 
@@ -658,6 +711,11 @@
             // Add event listeners
             function addEventListeners() {
                 document.addEventListener('keydown', (e) => {
+                    if (!gameStarted && e.key === 'Enter') {
+                        startGame();
+                        return;
+                    }
+                    
                     if (gameOver && e.key === 'Enter') {
                         startGame();
                         return;
@@ -687,9 +745,10 @@
                 });
                 
                 restartBtn.addEventListener('click', startGame);
+                startBtn.addEventListener('click', startGame);
             }
             
-            // Start the game
+            // Initialize the game
             init();
         });
     </script>

prompts.txt

@@ -1,4 +1,5 @@
 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
 the main game screen is cutoff at the bottom, I can only see half the area, please fix
 make the game's dimensions responsive, so that no matter the device or screen size that all of the elements are visible without scrolling. also make sure the blocks look like gold bars. make the text dark golden instead of white so its more readable.
-the right column with the controls and stuff is still not aligned properly, it starts above the top of the screen, please fix, also use a condensed font for the title in all caps. make the dark golden text darker. there seems to be an issue with the sizing on the control area, it extends to the bottom of the page, it should only have padding of 60px after the pause button.
+the right column with the controls and stuff is still not aligned properly, it starts above the top of the screen, please fix, also use a condensed font for the title in all caps. make the dark golden text darker. there seems to be an issue with the sizing on the control area, it extends to the bottom of the page, it should only have padding of 60px after the pause button.
+make the gold bricks have little dark gold dollar signs on them, also make a start button so it doesn't start automatically upon load