Hugging Face's logo

Spaces:
mhtamim
/
deepsite
Running

App Files Community
mhtamim commited on
Commit
2bb74bf
·
verified ·
1 Parent(s): 20de507

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +369 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 🐠
4
  colorFrom: purple
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepsite
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,369 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Neon Tetris</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0% { opacity: 0.7; }
12
+ 50% { opacity: 1; }
13
+ 100% { opacity: 0.7; }
14
+ }
15
+
16
+ @keyframes colorBlast {
17
+ 0% { transform: scale(1); opacity: 1; }
18
+ 100% { transform: scale(1.5); opacity: 0; }
19
+ }
20
+
21
+ .cell {
22
+ transition: background-color 0.1s, transform 0.1s;
23
+ }
24
+
25
+ .cell.filled {
26
+ box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
27
+ }
28
+
29
+ .color-blast {
30
+ position: absolute;
31
+ animation: colorBlast 0.5s forwards;
32
+ z-index: 10;
33
+ border-radius: 2px;
34
+ }
35
+
36
+ .game-container {
37
+ perspective: 1000px;
38
+ }
39
+
40
+ .tetris-board {
41
+ transform-style: preserve-3d;
42
+ transition: transform 0.3s;
43
+ }
44
+
45
+ .tetris-board.tilt-left {
46
+ transform: rotateY(-5deg);
47
+ }
48
+
49
+ .tetris-board.tilt-right {
50
+ transform: rotateY(5deg);
51
+ }
52
+
53
+ .next-piece-container {
54
+ background-color: rgba(255, 255, 255, 0.1);
55
+ border-radius: 8px;
56
+ padding: 10px;
57
+ }
58
+
59
+ .piece-I { background-color: #00f0f0; }
60
+ .piece-J { background-color: #0000f0; }
61
+ .piece-L { background-color: #f0a000; }
62
+ .piece-O { background-color: #f0f000; }
63
+ .piece-S { background-color: #00f000; }
64
+ .piece-T { background-color: #a000f0; }
65
+ .piece-Z { background-color: #f00000; }
66
+
67
+ .dark .piece-I { background-color: #00f0f0; }
68
+ .dark .piece-J { background-color: #0000f0; }
69
+ .dark .piece-L { background-color: #f0a000; }
70
+ .dark .piece-O { background-color: #f0f000; }
71
+ .dark .piece-S { background-color: #00f000; }
72
+ .dark .piece-T { background-color: #a000f0; }
73
+ .dark .piece-Z { background-color: #f00000; }
74
+
75
+ .light .piece-I { background-color: #00b8b8; }
76
+ .light .piece-J { background-color: #0000b8; }
77
+ .light .piece-L { background-color: #b87800; }
78
+ .light .piece-O { background-color: #b8b800; }
79
+ .light .piece-S { background-color: #00b800; }
80
+ .light .piece-T { background-color: #7800b8; }
81
+ .light .piece-Z { background-color: #b80000; }
82
+
83
+ .ghost-piece {
84
+ opacity: 0.3;
85
+ }
86
+
87
+ .game-over-overlay {
88
+ background-color: rgba(0, 0, 0, 0.7);
89
+ display: flex;
90
+ justify-content: center;
91
+ align-items: center;
92
+ z-index: 20;
93
+ }
94
+
95
+ .pulse-text {
96
+ animation: pulse 1.5s infinite;
97
+ }
98
+
99
+ .rotate-btn:hover {
100
+ transform: rotate(90deg);
101
+ transition: transform 0.3s;
102
+ }
103
+ </style>
104
+ </head>
105
+ <body class="dark:bg-gray-900 dark:text-white bg-gray-100 text-gray-900 transition-colors duration-300 min-h-screen flex flex-col">
106
+ <div class="container mx-auto px-4 py-8 flex-grow">
107
+ <header class="flex justify-between items-center mb-8">
108
+ <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500">
109
+ Neon Tetris
110
+ </h1>
111
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
112
+ <i class="fas fa-moon dark:hidden"></i>
113
+ <i class="fas fa-sun hidden dark:inline"></i>
114
+ </button>
115
+ </header>
116
+
117
+ <div class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
118
+ <div class="game-container relative">
119
+ <div id="tetris-board" class="tetris-board grid grid-cols-10 gap-px bg-gray-300 dark:bg-gray-700 p-px border-2 border-gray-400 dark:border-gray-600 rounded">
120
+ <!-- Board will be generated by JavaScript -->
121
+ </div>
122
+
123
+ <div id="game-over-overlay" class="game-over-overlay hidden absolute inset-0 rounded">
124
+ <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
125
+ <h2 class="text-3xl font-bold mb-4 text-red-500 pulse-text">Game Over!</h2>
126
+ <p class="text-xl mb-6">Your score: <span id="final-score" class="font-bold">0</span></p>
127
+ <button id="restart-btn" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-semibold transition-colors">
128
+ Play Again
129
+ </button>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="flex flex-col gap-6 w-full lg:w-auto">
135
+ <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
136
+ <h2 class="text-xl font-semibold mb-4">Game Info</h2>
137
+
138
+ <div class="grid grid-cols-2 gap-4 mb-6">
139
+ <div>
140
+ <p class="text-sm text-gray-500 dark:text-gray-400">Score</p>
141
+ <p id="score" class="text-2xl font-bold">0</p>
142
+ </div>
143
+ <div>
144
+ <p class="text-sm text-gray-500 dark:text-gray-400">Level</p>
145
+ <p id="level" class="text-2xl font-bold">1</p>
146
+ </div>
147
+ <div>
148
+ <p class="text-sm text-gray-500 dark:text-gray-400">Lines</p>
149
+ <p id="lines" class="text-2xl font-bold">0</p>
150
+ </div>
151
+ <div>
152
+ <p class="text-sm text-gray-500 dark:text-gray-400">Next</p>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="next-piece-container mb-6">
157
+ <div id="next-piece" class="grid grid-cols-4 gap-px bg-gray-200 dark:bg-gray-700 p-px w-24 h-24 mx-auto">
158
+ <!-- Next piece will be shown here -->
159
+ </div>
160
+ </div>
161
+
162
+ <div class="flex flex-col gap-3">
163
+ <div class="flex items-center gap-2">
164
+ <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">← →</kbd>
165
+ <span>Move</span>
166
+ </div>
167
+ <div class="flex items-center gap-2">
168
+ <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">↑</kbd>
169
+ <span>Rotate</span>
170
+ </div>
171
+ <div class="flex items-center gap-2">
172
+ <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">↓</kbd>
173
+ <span>Soft Drop</span>
174
+ </div>
175
+ <div class="flex items-center gap-2">
176
+ <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">Space</kbd>
177
+ <span>Hard Drop</span>
178
+ </div>
179
+ <div class="flex items-center gap-2">
180
+ <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded text-sm">P</kbd>
181
+ <span>Pause</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="flex gap-3 justify-center">
187
+ <button id="start-btn" class="px-6 py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-semibold transition-colors flex items-center gap-2">
188
+ <i class="fas fa-play"></i> Start Game
189
+ </button>
190
+ <button id="pause-btn" class="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-semibold transition-colors flex items-center gap-2" disabled>
191
+ <i class="fas fa-pause"></i> Pause
192
+ </button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <footer class="text-center py-4 text-gray-600 dark:text-gray-400 text-sm">
199
+ <p>Use arrow keys to play. Clear lines to score points!</p>
200
+ </footer>
201
+
202
+ <script>
203
+ // Game constants
204
+ const COLS = 10;
205
+ const ROWS = 20;
206
+ const BLOCK_SIZE = 30;
207
+ const EMPTY = 'empty';
208
+
209
+ // Tetromino pieces
210
+ const SHAPES = {
211
+ I: { shape: [[1, 1, 1, 1]], className: 'piece-I' },
212
+ J: { shape: [[1, 0, 0], [1, 1, 1]], className: 'piece-J' },
213
+ L: { shape: [[0, 0, 1], [1, 1, 1]], className: 'piece-L' },
214
+ O: { shape: [[1, 1], [1, 1]], className: 'piece-O' },
215
+ S: { shape: [[0, 1, 1], [1, 1, 0]], className: 'piece-S' },
216
+ T: { shape: [[0, 1, 0], [1, 1, 1]], className: 'piece-T' },
217
+ Z: { shape: [[1, 1, 0], [0, 1, 1]], className: 'piece-Z' }
218
+ };
219
+
220
+ const PIECES = Object.keys(SHAPES);
221
+
222
+ // Game variables
223
+ let board = [];
224
+ let currentPiece = null;
225
+ let nextPiece = null;
226
+ let currentPosition = { x: 0, y: 0 };
227
+ let score = 0;
228
+ let level = 1;
229
+ let lines = 0;
230
+ let gameInterval = null;
231
+ let isPaused = false;
232
+ let isGameOver = false;
233
+ let dropSpeed = 1000; // Initial speed in ms
234
+ let lastDropTime = 0;
235
+
236
+ // DOM elements
237
+ const tetrisBoard = document.getElementById('tetris-board');
238
+ const nextPieceDisplay = document.getElementById('next-piece');
239
+ const scoreDisplay = document.getElementById('score');
240
+ const levelDisplay = document.getElementById('level');
241
+ const linesDisplay = document.getElementById('lines');
242
+ const startBtn = document.getElementById('start-btn');
243
+ const pauseBtn = document.getElementById('pause-btn');
244
+ const restartBtn = document.getElementById('restart-btn');
245
+ const gameOverOverlay = document.getElementById('game-over-overlay');
246
+ const finalScoreDisplay = document.getElementById('final-score');
247
+ const themeToggle = document.getElementById('theme-toggle');
248
+
249
+ // Initialize the game
250
+ function init() {
251
+ createBoard();
252
+ generateNextPiece();
253
+ updateDisplays();
254
+ setupEventListeners();
255
+ }
256
+
257
+ // Create the game board
258
+ function createBoard() {
259
+ tetrisBoard.innerHTML = '';
260
+ board = Array(ROWS).fill().map(() => Array(COLS).fill(EMPTY));
261
+
262
+ // Create cells for the board
263
+ for (let y = 0; y < ROWS; y++) {
264
+ for (let x = 0; x < COLS; x++) {
265
+ const cell = document.createElement('div');
266
+ cell.className = 'cell w-8 h-8 bg-white dark:bg-gray-800';
267
+ cell.dataset.x = x;
268
+ cell.dataset.y = y;
269
+ tetrisBoard.appendChild(cell);
270
+ }
271
+ }
272
+
273
+ // Set the grid template columns to match the number of columns
274
+ tetrisBoard.style.gridTemplateColumns = `repeat(${COLS}, minmax(0, 1fr))`;
275
+ }
276
+
277
+ // Create the next piece display
278
+ function createNextPieceDisplay() {
279
+ nextPieceDisplay.innerHTML = '';
280
+
281
+ // Create cells for the next piece display
282
+ for (let y = 0; y < 4; y++) {
283
+ for (let x = 0; x < 4; x++) {
284
+ const cell = document.createElement('div');
285
+ cell.className = 'cell w-6 h-6 bg-gray-200 dark:bg-gray-700';
286
+ cell.dataset.x = x;
287
+ cell.dataset.y = y;
288
+ nextPieceDisplay.appendChild(cell);
289
+ }
290
+ }
291
+ }
292
+
293
+ // Generate a random piece
294
+ function generateRandomPiece() {
295
+ const randomPiece = PIECES[Math.floor(Math.random() * PIECES.length)];
296
+ return {
297
+ type: randomPiece,
298
+ shape: SHAPES[randomPiece].shape,
299
+ className: SHAPES[randomPiece].className
300
+ };
301
+ }
302
+
303
+ // Generate the next piece
304
+ function generateNextPiece() {
305
+ if (!nextPiece) {
306
+ nextPiece = generateRandomPiece();
307
+ }
308
+
309
+ currentPiece = nextPiece;
310
+ nextPiece = generateRandomPiece();
311
+
312
+ // Reset position to top center
313
+ currentPosition = {
314
+ x: Math.floor(COLS / 2) - Math.floor(currentPiece.shape[0].length / 2),
315
+ y: 0
316
+ };
317
+
318
+ // Display the next piece
319
+ displayNextPiece();
320
+
321
+ // Check if game over (new piece can't be placed)
322
+ if (checkCollision()) {
323
+ gameOver();
324
+ }
325
+ }
326
+
327
+ // Display the next piece in the preview area
328
+ function displayNextPiece() {
329
+ createNextPieceDisplay();
330
+
331
+ const cells = Array.from(nextPieceDisplay.children);
332
+ const piece = nextPiece;
333
+ const offsetX = Math.floor((4 - piece.shape[0].length) / 2);
334
+ const offsetY = Math.floor((4 - piece.shape.length) / 2);
335
+
336
+ for (let y = 0; y < piece.shape.length; y++) {
337
+ for (let x = 0; x < piece.shape[y].length; x++) {
338
+ if (piece.shape[y][x]) {
339
+ const cellIndex = (y + offsetY) * 4 + (x + offsetX);
340
+ if (cellIndex >= 0 && cellIndex < cells.length) {
341
+ cells[cellIndex].classList.add(piece.className, 'filled');
342
+ }
343
+ }
344
+ }
345
+ }
346
+ }
347
+
348
+ // Draw the current piece on the board
349
+ function drawPiece() {
350
+ clearGhostPiece();
351
+ drawGhostPiece();
352
+
353
+ const cells = Array.from(tetrisBoard.children);
354
+ const piece = currentPiece;
355
+
356
+ // Clear previous position
357
+ cells.forEach(cell => {
358
+ if (cell.classList.contains('current')) {
359
+ cell.classList.remove('current', piece.className, 'filled');
360
+ }
361
+ });
362
+
363
+ // Draw new position
364
+ for (let y = 0; y < piece.shape.length; y++) {
365
+ for (let x = 0; x < piece.shape[y].length; x++) {
366
+ if (piece.shape[y][x]) {
367
+ const boardX = currentPosition.x + x;
368
+ const boardY =
369
+ </html>