Spaces:

Darrellthedesigner
/

test

Running

App Files Files Community

Darrellthedesigner commited on Apr 18, 2025

Commit

26e3d05

verified ·

1 Parent(s): 6cd96df

Add 2 files

Browse files

Files changed (2) hide show

index.html +23 -8
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <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;
@@ -16,7 +16,9 @@
         }
         .title {
-            font-family: 'Playfair Display', serif;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
@@ -113,6 +115,11 @@
             border: 2px solid #d4af37;
         }
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .game-grid-container {
@@ -126,19 +133,27 @@
             }
         }
-        /* Dark golden text */
-        .text-gold-dark {
-            color: #996515;
         }
     </style>
 </head>
 <body class="flex flex-col items-center justify-start py-2 px-2 overflow-hidden">
     <div class="flex flex-col items-center mb-1 sm:mb-2">
-        <h1 class="title text-3xl sm:text-4xl md:text-5xl font-bold text-gold-dark">Tons of Gold</h1>
         <h2 class="text-lg sm:text-xl font-semibold text-gold-dark">Stacking Bricks</h2>
     </div>
-    <div class="flex flex-col lg:flex-row items-center justify-center gap-2 sm:gap-4 md:gap-6 w-full max-w-5xl px-2" style="max-height: 90vh;">
         <div class="game-container relative" style="width: 70vmin; height: 140vmin; max-width: 300px; max-height: 600px;">
             <div id="grid" class="grid w-full h-full"></div>
             <div id="game-over" class="game-over absolute inset-0 hidden flex-col items-center justify-center text-gold-dark">
@@ -150,7 +165,7 @@
             </div>
         </div>
-        <div class="flex flex-col gap-2 sm:gap-4 w-full" style="max-width: 200px;">
             <div class="score-display p-3 rounded-lg">
                 <div class="flex justify-between mb-2">
                     <span class="text-gold-dark font-semibold">Score:</span>

     <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&family=Roboto+Condensed:wght@700&display=swap');
         body {
             font-family: 'Poppins', sans-serif;
         }
         .title {
+            font-family: 'Roboto Condensed', sans-serif;
+            text-transform: uppercase;
+            letter-spacing: 2px;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
             border: 2px solid #d4af37;
         }
+        /* Dark golden text */
+        .text-gold-dark {
+            color: #6a4a0a;
+        }
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .game-grid-container {
             }
         }
+        /* 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;
         }
     </style>
 </head>
 <body class="flex flex-col items-center justify-start py-2 px-2 overflow-hidden">
     <div class="flex flex-col items-center mb-1 sm:mb-2">
+        <h1 class="title text-3xl sm:text-4xl md:text-5xl font-bold text-gold-dark">TONS OF GOLD</h1>
         <h2 class="text-lg sm:text-xl font-semibold text-gold-dark">Stacking Bricks</h2>
     </div>
+    <div class="flex flex-col lg:flex-row items-center justify-center gap-2 sm:gap-4 md:gap-6 w-full max-w-5xl px-2 game-area">
         <div class="game-container relative" style="width: 70vmin; height: 140vmin; max-width: 300px; max-height: 600px;">
             <div id="grid" class="grid w-full h-full"></div>
             <div id="game-over" class="game-over absolute inset-0 hidden flex-col items-center justify-center text-gold-dark">
             </div>
         </div>
+        <div class="flex flex-col gap-2 sm:gap-4 w-full control-panel" style="max-width: 200px;">
             <div class="score-display p-3 rounded-lg">
                 <div class="flex justify-between mb-2">
                     <span class="text-gold-dark font-semibold">Score:</span>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 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.

 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.