Hugging Face's logo

Spaces:
DarkDuckDock
/
deepsite
Running

App Files Community
DarkDuckDock commited on
Commit
1b2ce87
·
verified ·
1 Parent(s): ff8d22f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +392 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 🐠
4
  colorFrom: blue
5
- colorTo: red
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: blue
5
+ colorTo: blue
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,392 @@
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>Classic Minesweeper</title>
7
+ <style>
8
+ :root {
9
+ --cell-size: 40px;
10
+ --cell-bg: #c0c0c0;
11
+ --cell-border-light: #f0f0f0;
12
+ --cell-border-dark: #808080;
13
+ --cell-revealed: #b8b8b8;
14
+ --mine-counter: #ff0000;
15
+ --primary-color: #4682b4;
16
+ --button-hover: #5f9ea0;
17
+ }
18
+
19
+ * {
20
+ box-sizing: border-box;
21
+ margin: 0;
22
+ padding: 0;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ justify-content: center;
31
+ min-height: 100vh;
32
+ background-color: #f5f5f5;
33
+ padding: 20px;
34
+ }
35
+
36
+ .game-container {
37
+ background-color: white;
38
+ border-radius: 10px;
39
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
40
+ padding: 20px;
41
+ text-align: center;
42
+ }
43
+
44
+ h1 {
45
+ color: var(--primary-color);
46
+ margin-bottom: 20px;
47
+ font-size: 2.5rem;
48
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
49
+ }
50
+
51
+ .game-info {
52
+ display: flex;
53
+ justify-content: space-between;
54
+ margin-bottom: 15px;
55
+ background-color: var(--primary-color);
56
+ color: white;
57
+ padding: 10px 20px;
58
+ border-radius: 5px;
59
+ font-weight: bold;
60
+ }
61
+
62
+ .counter, .timer {
63
+ font-family: 'Courier New', monospace;
64
+ font-size: 1.5rem;
65
+ letter-spacing: 2px;
66
+ }
67
+
68
+ .board {
69
+ display: grid;
70
+ grid-template-columns: repeat(9, var(--cell-size));
71
+ grid-gap: 2px;
72
+ margin: 0 auto 20px;
73
+ border: 4px solid var(--cell-border-dark);
74
+ border-radius: 5px;
75
+ background-color: var(--cell-border-dark);
76
+ }
77
+
78
+ .cell {
79
+ width: var(--cell-size);
80
+ height: var(--cell-size);
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ font-weight: bold;
85
+ font-size: 1.2rem;
86
+ background-color: var(--cell-bg);
87
+ border-top: 3px solid var(--cell-border-light);
88
+ border-left: 3px solid var(--cell-border-light);
89
+ border-right: 3px solid var(--cell-border-dark);
90
+ border-bottom: 3px solid var(--cell-border-dark);
91
+ cursor: pointer;
92
+ user-select: none;
93
+ transition: all 0.1s ease;
94
+ }
95
+
96
+ .cell.revealed {
97
+ background-color: var(--cell-revealed);
98
+ border: 1px solid var(--cell-border-dark);
99
+ }
100
+
101
+ .cell.flagged::after {
102
+ content: '🚩';
103
+ font-size: 0.8em;
104
+ }
105
+
106
+ .cell.mine::after {
107
+ content: '💣';
108
+ }
109
+
110
+ .cell.mine.revealed {
111
+ background-color: #ffcccc;
112
+ }
113
+
114
+ .cell:hover:not(.revealed):not(.flagged) {
115
+ background-color: #d8d8d8;
116
+ }
117
+
118
+ .number-1 { color: blue; }
119
+ .number-2 { color: green; }
120
+ .number-3 { color: red; }
121
+ .number-4 { color: darkblue; }
122
+ .number-5 { color: brown; }
123
+ .number-6 { color: teal; }
124
+ .number-7 { color: black; }
125
+ .number-8 { color: gray; }
126
+
127
+ .controls {
128
+ margin-top: 10px;
129
+ }
130
+
131
+ button {
132
+ background-color: var(--primary-color);
133
+ color: white;
134
+ border: none;
135
+ padding: 10px 20px;
136
+ border-radius: 5px;
137
+ cursor: pointer;
138
+ font-size: 1rem;
139
+ font-weight: bold;
140
+ transition: background-color 0.2s;
141
+ }
142
+
143
+ button:hover {
144
+ background-color: var(--button-hover);
145
+ }
146
+
147
+ .message {
148
+ margin-top: 15px;
149
+ min-height: 24px;
150
+ font-weight: bold;
151
+ color: var(--primary-color);
152
+ }
153
+
154
+ @media (max-width: 500px) {
155
+ :root {
156
+ --cell-size: 30px;
157
+ }
158
+ h1 {
159
+ font-size: 1.8rem;
160
+ }
161
+ }
162
+ </style>
163
+ </head>
164
+ <body>
165
+ <div class="game-container">
166
+ <h1>Minesweeper</h1>
167
+
168
+ <div class="game-info">
169
+ <div class="counter">💣 <span id="mines-count">10</span></div>
170
+ <div class="timer">⏱ <span id="time">0</span>s</div>
171
+ </div>
172
+
173
+ <div class="board" id="board"></div>
174
+
175
+ <div class="controls">
176
+ <button id="reset-btn">New Game</button>
177
+ </div>
178
+
179
+ <div class="message" id="message"></div>
180
+ </div>
181
+
182
+ <script>
183
+ document.addEventListener('DOMContentLoaded', () => {
184
+ const SIZE = 9;
185
+ const MINES_COUNT = 10;
186
+
187
+ const board = document.getElementById('board');
188
+ const minesCountElement = document.getElementById('mines-count');
189
+ const timerElement = document.getElementById('time');
190
+ const resetBtn = document.getElementById('reset-btn');
191
+ const messageElement = document.getElementById('message');
192
+
193
+ let cells = [];
194
+ let mines = [];
195
+ let revealed = 0;
196
+ let flagged = 0;
197
+ let gameOver = false;
198
+ let firstClick = true;
199
+ let timer;
200
+ let seconds = 0;
201
+
202
+ function initGame() {
203
+ // Reset game state
204
+ board.innerHTML = '';
205
+ cells = [];
206
+ mines = [];
207
+ revealed = 0;
208
+ flagged = 0;
209
+ gameOver = false;
210
+ firstClick = true;
211
+ clearInterval(timer);
212
+ seconds = 0;
213
+ timerElement.textContent = '0';
214
+ minesCountElement.textContent = MINES_COUNT;
215
+ messageElement.textContent = '';
216
+
217
+ // Create cells
218
+ for (let row = 0; row < SIZE; row++) {
219
+ cells[row] = [];
220
+ for (let col = 0; col < SIZE; col++) {
221
+ const cell = document.createElement('div');
222
+ cell.className = 'cell';
223
+ cell.dataset.row = row;
224
+ cell.dataset.col = col;
225
+
226
+ cell.addEventListener('click', () => handleCellClick(row, col));
227
+ cell.addEventListener('contextmenu', (e) => {
228
+ e.preventDefault();
229
+ handleRightClick(row, col);
230
+ });
231
+
232
+ board.appendChild(cell);
233
+ cells[row][col] = {
234
+ element: cell,
235
+ mine: false,
236
+ revealed: false,
237
+ flagged: false,
238
+ neighborMines: 0
239
+ };
240
+ }
241
+ }
242
+ }
243
+
244
+ function startTimer() {
245
+ clearInterval(timer);
246
+ timer = setInterval(() => {
247
+ seconds++;
248
+ timerElement.textContent = seconds;
249
+ }, 1000);
250
+ }
251
+
252
+ function placeMines(firstRow, firstCol) {
253
+ let minesPlaced = 0;
254
+
255
+ while (minesPlaced < MINES_COUNT) {
256
+ const row = Math.floor(Math.random() * SIZE);
257
+ const col = Math.floor(Math.random() * SIZE);
258
+
259
+ // Don't place mine on first click cell or its neighbors
260
+ const isFirstClickOrAdjacent =
261
+ (row === firstRow && col === firstCol) ||
262
+ (Math.abs(row - firstRow) <= 1 && Math.abs(col - firstCol) <= 1);
263
+
264
+ if (!cells[row][col].mine && !isFirstClickOrAdjacent) {
265
+ cells[row][col].mine = true;
266
+ mines.push({row, col});
267
+ minesPlaced++;
268
+ }
269
+ }
270
+
271
+ // Calculate neighbor mines for each cell
272
+ for (let row = 0; row < SIZE; row++) {
273
+ for (let col = 0; col < SIZE; col++) {
274
+ if (!cells[row][col].mine) {
275
+ cells[row][col].neighborMines = countNeighborMines(row, col);
276
+ }
277
+ }
278
+ }
279
+ }
280
+
281
+ function countNeighborMines(row, col) {
282
+ let count = 0;
283
+
284
+ for (let r = Math.max(0, row - 1); r <= Math.min(SIZE - 1, row + 1); r++) {
285
+ for (let c = Math.max(0, col - 1); c <= Math.min(SIZE - 1, col + 1); c++) {
286
+ if (cells[r][c].mine) {
287
+ count++;
288
+ }
289
+ }
290
+ }
291
+
292
+ return count;
293
+ }
294
+
295
+ function handleCellClick(row, col) {
296
+ if (gameOver || cells[row][col].flagged || cells[row][col].revealed) {
297
+ return;
298
+ }
299
+
300
+ if (firstClick) {
301
+ firstClick = false;
302
+ placeMines(row, col);
303
+ startTimer();
304
+ }
305
+
306
+ revealCell(row, col);
307
+
308
+ if (cells[row][col].mine) {
309
+ gameOver = true;
310
+ revealAllMines();
311
+ clearInterval(timer);
312
+ messageElement.textContent = 'Game Over! You hit a mine.';
313
+ } else if (revealed === SIZE * SIZE - MINES_COUNT) {
314
+ gameOver = true;
315
+ flagAllMines();
316
+ clearInterval(timer);
317
+ messageElement.textContent = 'Congratulations! You won!';
318
+ }
319
+ }
320
+
321
+ function revealCell(row, col) {
322
+ if (row < 0 || row >= SIZE || col < 0 || col >= SIZE ||
323
+ cells[row][col].revealed || cells[row][col].flagged) {
324
+ return;
325
+ }
326
+
327
+ cells[row][col].revealed = true;
328
+ cells[row][col].element.classList.add('revealed');
329
+ revealed++;
330
+
331
+ if (cells[row][col].neighborMines > 0) {
332
+ cells[row][col].element.classList.add(`number-${cells[row][col].neighborMines}`);
333
+ cells[row][col].element.textContent = cells[row][col].neighborMines;
334
+ } else {
335
+ // Reveal all adjacent cells if this is an empty cell
336
+ for (let r = row - 1; r <= row + 1; r++) {
337
+ for (let c = col - 1; c <= col + 1; c++) {
338
+ if (r === row && c === col) continue;
339
+ revealCell(r, c);
340
+ }
341
+ }
342
+ }
343
+ }
344
+
345
+ function handleRightClick(row, col) {
346
+ if (gameOver || cells[row][col].revealed) {
347
+ return;
348
+ }
349
+
350
+ if (cells[row][col].flagged) {
351
+ cells[row][col].flagged = false;
352
+ cells[row][col].element.classList.remove('flagged');
353
+ flagged--;
354
+ } else {
355
+ cells[row][col].flagged = true;
356
+ cells[row][col].element.classList.add('flagged');
357
+ flagged++;
358
+ }
359
+
360
+ minesCountElement.textContent = MINES_COUNT - flagged;
361
+
362
+ return false;
363
+ }
364
+
365
+ function revealAllMines() {
366
+ mines.forEach(mine => {
367
+ const cell = cells[mine.row][mine.col];
368
+ if (!cell.flagged) {
369
+ cell.revealed = true;
370
+ cell.element.classList.add('revealed', 'mine');
371
+ }
372
+ });
373
+ }
374
+
375
+ function flagAllMines() {
376
+ mines.forEach(mine => {
377
+ const cell = cells[mine.row][mine.col];
378
+ if (!cell.flagged) {
379
+ cell.flagged = true;
380
+ cell.element.classList.add('flagged');
381
+ }
382
+ });
383
+ }
384
+
385
+ resetBtn.addEventListener('click', initGame);
386
+
387
+ // Start the game
388
+ initGame();
389
+ });
390
+ </script>
391
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
392
+ </html>