Hugging Face's logo

Spaces:
Darrellthedesigner
/
test
Running

App Files Community
Darrellthedesigner commited on
Commit
6cd96df
·
verified ·
1 Parent(s): 80aace4

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +72 -35
  2. prompts.txt +2 -1
index.html CHANGED
@@ -12,6 +12,7 @@
12
  font-family: 'Poppins', sans-serif;
13
  background: linear-gradient(135deg, #f5d742 0%, #d4af37 50%, #996515 100%);
14
  min-height: 100vh;
 
15
  }
16
 
17
  .title {
@@ -41,13 +42,43 @@
41
  .gold {
42
  background: linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
43
  border: 1px solid #fff;
44
- box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
 
47
  .gold-light {
48
  background: linear-gradient(135deg, #fff8c6 0%, #ffd700 50%, #daa520 100%);
49
  border: 1px solid #fff;
50
- box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.8);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  }
52
 
53
  .next-piece-container {
@@ -94,77 +125,84 @@
94
  width: 100%;
95
  }
96
  }
 
 
 
 
 
97
  </style>
98
  </head>
99
- <body class="flex flex-col items-center justify-start py-4 px-2 overflow-x-hidden">
100
- <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>
101
- <h2 class="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6 text-yellow-300">Stacking Bricks</h2>
 
 
102
 
103
- <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">
104
- <div class="game-container relative">
105
- <div id="grid" class="grid w-[250px] h-[500px] sm:w-[300px] sm:h-[600px]"></div>
106
- <div id="game-over" class="game-over absolute inset-0 hidden flex-col items-center justify-center text-white">
107
- <h3 class="text-2xl sm:text-3xl font-bold mb-4 text-yellow-300">Game Over!</h3>
108
- <p class="text-lg sm:text-xl mb-6">Your score: <span id="final-score" class="font-bold text-yellow-300">0</span></p>
109
  <button id="restart-btn" class="controls-btn px-6 py-2 rounded-full text-white font-bold">
110
  Play Again
111
  </button>
112
  </div>
113
  </div>
114
 
115
- <div class="flex flex-col gap-4 sm:gap-6 w-full max-w-xs">
116
- <div class="score-display p-4 rounded-lg">
117
  <div class="flex justify-between mb-2">
118
- <span class="text-yellow-200 font-semibold">Score:</span>
119
- <span id="score" class="text-white font-bold">0</span>
120
  </div>
121
  <div class="flex justify-between mb-2">
122
- <span class="text-yellow-200 font-semibold">Level:</span>
123
- <span id="level" class="text-white font-bold">1</span>
124
  </div>
125
  <div class="flex justify-between">
126
- <span class="text-yellow-200 font-semibold">Lines:</span>
127
- <span id="lines" class="text-white font-bold">0</span>
128
  </div>
129
  </div>
130
 
131
- <div class="next-piece-container p-4 rounded-lg">
132
- <h3 class="text-yellow-200 font-semibold mb-2 text-center">Next Piece</h3>
133
- <div id="next-piece" class="grid grid-cols-4 grid-rows-4 w-24 h-24 gap-1 mx-auto"></div>
134
  </div>
135
 
136
- <div class="bg-black bg-opacity-30 p-4 rounded-lg">
137
- <h3 class="text-yellow-200 font-semibold mb-3 text-center">Controls</h3>
138
- <div class="grid grid-cols-3 gap-2 text-white text-sm">
139
  <div class="text-center">
140
- <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">↑</div>
141
  <span>Rotate</span>
142
  </div>
143
  <div class="text-center">
144
- <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">←</div>
145
  <span>Left</span>
146
  </div>
147
  <div class="text-center">
148
- <div class="controls-btn w-10 h-10 mx-auto mb-1 flex items-center justify-center">→</div>
149
  <span>Right</span>
150
  </div>
151
  <div class="text-center col-span-3">
152
- <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">↓ (Drop Faster)</div>
153
  </div>
154
  <div class="text-center col-span-3">
155
- <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">Space (Instant Drop)</div>
156
  </div>
157
  <div class="text-center col-span-3">
158
- <div class="controls-btn w-full h-10 mx-auto mb-1 flex items-center justify-center">P (Pause)</div>
159
  </div>
160
  </div>
161
  </div>
162
  </div>
163
  </div>
164
 
165
- <div class="mt-4 sm:mt-6 text-yellow-200 text-center px-2">
166
- <p class="text-sm sm:text-base">Stack the gold bars to complete lines and earn points!</p>
167
- <p class="text-xs sm:text-sm mt-1 text-yellow-300">Each line cleared increases your score and level.</p>
168
  </div>
169
 
170
  <script>
@@ -172,7 +210,6 @@
172
  // Game constants
173
  const COLS = 10;
174
  const ROWS = 20;
175
- const BLOCK_SIZE = 30;
176
  const NEXT_PIECE_SIZE = 4;
177
 
178
  // Game variables
 
12
  font-family: 'Poppins', sans-serif;
13
  background: linear-gradient(135deg, #f5d742 0%, #d4af37 50%, #996515 100%);
14
  min-height: 100vh;
15
+ overflow: hidden;
16
  }
17
 
18
  .title {
 
42
  .gold {
43
  background: linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
44
  border: 1px solid #fff;
45
+ box-shadow:
46
+ inset 0 0 10px rgba(255, 215, 0, 0.5),
47
+ 0 0 5px rgba(255, 215, 0, 0.8);
48
+ position: relative;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .gold::after {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ right: 0;
58
+ height: 30%;
59
+ background: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
60
+ transform: rotate(-45deg) translate(-25%, -50%);
61
  }
62
 
63
  .gold-light {
64
  background: linear-gradient(135deg, #fff8c6 0%, #ffd700 50%, #daa520 100%);
65
  border: 1px solid #fff;
66
+ box-shadow:
67
+ inset 0 0 10px rgba(255, 215, 0, 0.8),
68
+ 0 0 8px rgba(255, 215, 0, 0.9);
69
+ position: relative;
70
+ overflow: hidden;
71
+ }
72
+
73
+ .gold-light::after {
74
+ content: '';
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ right: 0;
79
+ height: 30%;
80
+ background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
81
+ transform: rotate(-45deg) translate(-25%, -50%);
82
  }
83
 
84
  .next-piece-container {
 
125
  width: 100%;
126
  }
127
  }
128
+
129
+ /* Dark golden text */
130
+ .text-gold-dark {
131
+ color: #996515;
132
+ }
133
  </style>
134
  </head>
135
+ <body class="flex flex-col items-center justify-start py-2 px-2 overflow-hidden">
136
+ <div class="flex flex-col items-center mb-1 sm:mb-2">
137
+ <h1 class="title text-3xl sm:text-4xl md:text-5xl font-bold text-gold-dark">Tons of Gold</h1>
138
+ <h2 class="text-lg sm:text-xl font-semibold text-gold-dark">Stacking Bricks</h2>
139
+ </div>
140
 
141
+ <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;">
142
+ <div class="game-container relative" style="width: 70vmin; height: 140vmin; max-width: 300px; max-height: 600px;">
143
+ <div id="grid" class="grid w-full h-full"></div>
144
+ <div id="game-over" class="game-over absolute inset-0 hidden flex-col items-center justify-center text-gold-dark">
145
+ <h3 class="text-2xl sm:text-3xl font-bold mb-4">Game Over!</h3>
146
+ <p class="text-lg sm:text-xl mb-6">Your score: <span id="final-score" class="font-bold">0</span></p>
147
  <button id="restart-btn" class="controls-btn px-6 py-2 rounded-full text-white font-bold">
148
  Play Again
149
  </button>
150
  </div>
151
  </div>
152
 
153
+ <div class="flex flex-col gap-2 sm:gap-4 w-full" style="max-width: 200px;">
154
+ <div class="score-display p-3 rounded-lg">
155
  <div class="flex justify-between mb-2">
156
+ <span class="text-gold-dark font-semibold">Score:</span>
157
+ <span id="score" class="text-gold-dark font-bold">0</span>
158
  </div>
159
  <div class="flex justify-between mb-2">
160
+ <span class="text-gold-dark font-semibold">Level:</span>
161
+ <span id="level" class="text-gold-dark font-bold">1</span>
162
  </div>
163
  <div class="flex justify-between">
164
+ <span class="text-gold-dark font-semibold">Lines:</span>
165
+ <span id="lines" class="text-gold-dark font-bold">0</span>
166
  </div>
167
  </div>
168
 
169
+ <div class="next-piece-container p-3 rounded-lg">
170
+ <h3 class="text-gold-dark font-semibold mb-2 text-center">Next Piece</h3>
171
+ <div id="next-piece" class="grid grid-cols-4 grid-rows-4 w-20 h-20 gap-1 mx-auto"></div>
172
  </div>
173
 
174
+ <div class="bg-black bg-opacity-30 p-3 rounded-lg">
175
+ <h3 class="text-gold-dark font-semibold mb-2 text-center">Controls</h3>
176
+ <div class="grid grid-cols-3 gap-2 text-gold-dark text-xs sm:text-sm">
177
  <div class="text-center">
178
+ <div class="controls-btn w-8 h-8 mx-auto mb-1 flex items-center justify-center">↑</div>
179
  <span>Rotate</span>
180
  </div>
181
  <div class="text-center">
182
+ <div class="controls-btn w-8 h-8 mx-auto mb-1 flex items-center justify-center">←</div>
183
  <span>Left</span>
184
  </div>
185
  <div class="text-center">
186
+ <div class="controls-btn w-8 h-8 mx-auto mb-1 flex items-center justify-center">→</div>
187
  <span>Right</span>
188
  </div>
189
  <div class="text-center col-span-3">
190
+ <div class="controls-btn w-full h-8 mx-auto mb-1 flex items-center justify-center text-xs">↓ Drop Faster</div>
191
  </div>
192
  <div class="text-center col-span-3">
193
+ <div class="controls-btn w-full h-8 mx-auto mb-1 flex items-center justify-center text-xs">Space Instant Drop</div>
194
  </div>
195
  <div class="text-center col-span-3">
196
+ <div class="controls-btn w-full h-8 mx-auto mb-1 flex items-center justify-center text-xs">P Pause</div>
197
  </div>
198
  </div>
199
  </div>
200
  </div>
201
  </div>
202
 
203
+ <div class="mt-2 sm:mt-3 text-center px-2">
204
+ <p class="text-xs sm:text-sm text-gold-dark">Stack the gold bars to complete lines and earn points!</p>
205
+ <p class="text-xs mt-1 text-gold-dark">Each line cleared increases your score and level.</p>
206
  </div>
207
 
208
  <script>
 
210
  // Game constants
211
  const COLS = 10;
212
  const ROWS = 20;
 
213
  const NEXT_PIECE_SIZE = 4;
214
 
215
  // Game variables
prompts.txt CHANGED
@@ -1,2 +1,3 @@
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
 
 
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
3
+ 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.