Hugging Face's logo

Spaces:
Sayan4033
/
the-numeric-puzzle
Running

App Files Community
Sayan4033 commited on
Commit
f6ba63f
·
verified ·
1 Parent(s): ee62d70

Creat a zig zag puzzle game app - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +503 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: The Numeric Puzzle
3
- emoji: 🏢
4
- colorFrom: blue
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: the-numeric-puzzle
3
+ emoji: 🐳
4
+ colorFrom: green
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,504 @@
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>ZigZag Puzzle</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @keyframes pulse {
12
+ 0%, 100% { transform: scale(1); }
13
+ 50% { transform: scale(1.05); }
14
+ }
15
+ .pulse-animation {
16
+ animation: pulse 1.5s infinite;
17
+ }
18
+ .tile {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .tile:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
+ }
25
+ #game-board {
26
+ perspective: 1000px;
27
+ }
28
+ .win-effect {
29
+ animation: confetti 3s ease-out;
30
+ }
31
+ @keyframes confetti {
32
+ 0% { transform: translateY(0) rotate(0deg); opacity: 1; }
33
+ 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gradient-to-br from-indigo-900 to-purple-800 min-h-screen font-sans text-white">
38
+ <div class="container mx-auto px-4 py-8">
39
+ <header class="text-center mb-8">
40
+ <h1 class="text-4xl md:text-5xl font-bold mb-2">ZigZag Puzzle</h1>
41
+ <p class="text-xl text-indigo-200">Slide the tiles to solve the puzzle!</p>
42
+ </header>
43
+
44
+ <div class="flex flex-col md:flex-row gap-8 items-center justify-center">
45
+ <div id="game-board" class="bg-white/10 backdrop-blur-md rounded-xl p-4 shadow-2xl">
46
+ <div class="grid grid-cols-4 gap-2" id="puzzle-container"></div>
47
+ </div>
48
+
49
+ <div class="bg-white/10 backdrop-blur-md rounded-xl p-6 shadow-2xl max-w-md w-full">
50
+ <div class="flex items-center justify-between mb-6">
51
+ <div>
52
+ <h2 class="text-2xl font-bold">Game Stats</h2>
53
+ <p class="text-indigo-200">Complete the puzzle!</p>
54
+ </div>
55
+ <div class="bg-indigo-600 rounded-full p-3">
56
+ <i data-feather="clock" class="w-6 h-6"></i>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="space-y-4">
61
+ <div class="flex justify-between items-center bg-white/5 rounded-lg p-4">
62
+ <div>
63
+ <p class="text-indigo-200">Moves</p>
64
+ <p class="text-2xl font-bold" id="move-counter">0</p>
65
+ </div>
66
+ <i data-feather="repeat" class="w-6 h-6 text-indigo-300"></i>
67
+ </div>
68
+
69
+ <div class="flex justify-between items-center bg-white/5 rounded-lg p-4">
70
+ <div>
71
+ <p class="text-indigo-200">Time</p>
72
+ <p class="text-2xl font-bold" id="time-counter">00:00</p>
73
+ </div>
74
+ <i data-feather="clock" class="w-6 h-6 text-indigo-300"></i>
75
+ </div>
76
+
77
+ <div class="flex justify-between items-center bg-white/5 rounded-lg p-4">
78
+ <div>
79
+ <p class="text-indigo-200">Difficulty</p>
80
+ <p class="text-2xl font-bold" id="difficulty">Easy</p>
81
+ </div>
82
+ <i data-feather="sliders" class="w-6 h-6 text-indigo-300"></i>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="mt-6 space-y-3">
87
+ <button id="shuffle-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
88
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
89
+ <span>Shuffle</span>
90
+ </button>
91
+ <button id="new-game-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
92
+ <i data-feather="plus-circle" class="w-5 h-5"></i>
93
+ <span>New Game</span>
94
+ </button>
95
+ <div class="grid grid-cols-2 gap-3">
96
+ <button id="hint-btn" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
97
+ <i data-feather="help-circle" class="w-5 h-5"></i>
98
+ <span>Hint</span>
99
+ </button>
100
+ <button id="solve-btn" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
101
+ <i data-feather="check-circle" class="w-5 h-5"></i>
102
+ <span>Solve</span>
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="mt-12 text-center">
110
+ <h2 class="text-2xl font-bold mb-4">How to Play</h2>
111
+ <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
112
+ <div class="bg-white/5 rounded-xl p-6">
113
+ <div class="bg-indigo-600 rounded-full w-12 h-12 flex items-center justify-center mb-4 mx-auto">
114
+ <i data-feather="move" class="w-6 h-6"></i>
115
+ </div>
116
+ <h3 class="text-xl font-semibold mb-2">Slide Tiles</h3>
117
+ <p class="text-indigo-200">Click or tap adjacent tiles to swap them with the empty space.</p>
118
+ </div>
119
+ <div class="bg-white/5 rounded-xl p-6">
120
+ <div class="bg-indigo-600 rounded-full w-12 h-12 flex items-center justify-center mb-4 mx-auto">
121
+ <i data-feather="target" class="w-6 h-6"></i>
122
+ </div>
123
+ <h3 class="text-xl font-semibold mb-2">Complete the Pattern</h3>
124
+ <p class="text-indigo-200">Arrange all tiles to form the correct zigzag pattern.</p>
125
+ </div>
126
+ <div class="bg-white/5 rounded-xl p-6">
127
+ <div class="bg-indigo-600 rounded-full w-12 h-12 flex items-center justify-center mb-4 mx-auto">
128
+ <i data-feather="award" class="w-6 h-6"></i>
129
+ </div>
130
+ <h3 class="text-xl font-semibold mb-2">Beat Your Score</h3>
131
+ <p class="text-indigo-200">Complete the puzzle in as few moves and as quickly as possible.</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div id="win-modal" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 hidden">
138
+ <div class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-2xl p-8 max-w-md w-full mx-4 text-center transform transition-all duration-500 scale-95 opacity-0">
139
+ <div class="bg-white/20 rounded-full w-20 h-20 flex items-center justify-center mb-6 mx-auto pulse-animation">
140
+ <i data-feather="award" class="w-10 h-10 text-white"></i>
141
+ </div>
142
+ <h2 class="text-3xl font-bold mb-2">Puzzle Solved!</h2>
143
+ <p class="text-indigo-100 mb-6">Congratulations on completing the puzzle!</p>
144
+
145
+ <div class="bg-white/10 rounded-xl p-4 mb-6">
146
+ <div class="grid grid-cols-2 gap-4">
147
+ <div>
148
+ <p class="text-indigo-200">Moves</p>
149
+ <p class="text-2xl font-bold" id="final-moves">0</p>
150
+ </div>
151
+ <div>
152
+ <p class="text-indigo-200">Time</p>
153
+ <p class="text-2xl font-bold" id="final-time">00:00</p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <button id="play-again-btn" class="w-full bg-white text-indigo-900 hover:bg-indigo-100 font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors">
159
+ <i data-feather="play" class="w-5 h-5"></i>
160
+ <span>Play Again</span>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <script>
166
+ document.addEventListener('DOMContentLoaded', function() {
167
+ feather.replace();
168
+
169
+ // Game state
170
+ const state = {
171
+ board: [],
172
+ size: 4,
173
+ emptyPos: { row: 3, col: 3 },
174
+ moves: 0,
175
+ time: 0,
176
+ timer: null,
177
+ isPlaying: false,
178
+ difficulty: 'easy'
179
+ };
180
+
181
+ // DOM elements
182
+ const puzzleContainer = document.getElementById('puzzle-container');
183
+ const moveCounter = document.getElementById('move-counter');
184
+ const timeCounter = document.getElementById('time-counter');
185
+ const difficultyDisplay = document.getElementById('difficulty');
186
+ const shuffleBtn = document.getElementById('shuffle-btn');
187
+ const newGameBtn = document.getElementById('new-game-btn');
188
+ const hintBtn = document.getElementById('hint-btn');
189
+ const solveBtn = document.getElementById('solve-btn');
190
+ const winModal = document.getElementById('win-modal');
191
+ const finalMoves = document.getElementById('final-moves');
192
+ const finalTime = document.getElementById('final-time');
193
+ const playAgainBtn = document.getElementById('play-again-btn');
194
+
195
+ // Initialize the game
196
+ function initGame() {
197
+ createBoard();
198
+ renderBoard();
199
+ setupEventListeners();
200
+ }
201
+
202
+ // Create the board
203
+ function createBoard() {
204
+ state.board = [];
205
+ let counter = 1;
206
+
207
+ for (let i = 0; i < state.size; i++) {
208
+ state.board[i] = [];
209
+ for (let j = 0; j < state.size; j++) {
210
+ if (i === state.size - 1 && j === state.size - 1) {
211
+ state.board[i][j] = 0; // Empty tile
212
+ } else {
213
+ state.board[i][j] = counter++;
214
+ }
215
+ }
216
+ }
217
+
218
+ // Set empty position
219
+ state.emptyPos = { row: state.size - 1, col: state.size - 1 };
220
+ state.moves = 0;
221
+ moveCounter.textContent = state.moves;
222
+
223
+ // Reset timer
224
+ clearInterval(state.timer);
225
+ state.time = 0;
226
+ updateTimeDisplay();
227
+ }
228
+
229
+ // Render the board
230
+ function renderBoard() {
231
+ puzzleContainer.innerHTML = '';
232
+ puzzleContainer.style.gridTemplateColumns = `repeat(${state.size}, 1fr)`;
233
+
234
+ for (let i = 0; i < state.size; i++) {
235
+ for (let j = 0; j < state.size; j++) {
236
+ const value = state.board[i][j];
237
+ const tile = document.createElement('div');
238
+
239
+ if (value === 0) {
240
+ tile.className = 'tile bg-transparent';
241
+ } else {
242
+ tile.className = `tile bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-xl md:text-2xl rounded-lg cursor-pointer hover:shadow-lg transition-all duration-200 h-16 md:h-20`;
243
+ tile.textContent = value;
244
+
245
+ // Zigzag pattern colors
246
+ if ((i + j) % 2 === 0) {
247
+ tile.classList.add('from-indigo-500', 'to-purple-600');
248
+ } else {
249
+ tile.classList.add('from-purple-500', 'to-indigo-600');
250
+ }
251
+
252
+ tile.dataset.row = i;
253
+ tile.dataset.col = j;
254
+ }
255
+
256
+ puzzleContainer.appendChild(tile);
257
+ }
258
+ }
259
+ }
260
+
261
+ // Shuffle the board
262
+ function shuffleBoard() {
263
+ let shuffleCount = 0;
264
+ const maxShuffles = 100;
265
+
266
+ const shuffleInterval = setInterval(() => {
267
+ if (shuffleCount >= maxShuffles) {
268
+ clearInterval(shuffleInterval);
269
+ state.isPlaying = true;
270
+ startTimer();
271
+ return;
272
+ }
273
+
274
+ const directions = [];
275
+ const { row, col } = state.emptyPos;
276
+
277
+ if (row > 0) directions.push('up');
278
+ if (row < state.size - 1) directions.push('down');
279
+ if (col > 0) directions.push('left');
280
+ if (col < state.size - 1) directions.push('right');
281
+
282
+ const randomDir = directions[Math.floor(Math.random() * directions.length)];
283
+ moveTile(randomDir, false);
284
+
285
+ shuffleCount++;
286
+ }, 50);
287
+ }
288
+
289
+ // Move tile
290
+ function moveTile(direction, countMove = true) {
291
+ const { row, col } = state.emptyPos;
292
+ let newRow = row;
293
+ let newCol = col;
294
+
295
+ switch (direction) {
296
+ case 'up':
297
+ if (row === 0) return false;
298
+ newRow = row - 1;
299
+ break;
300
+ case 'down':
301
+ if (row === state.size - 1) return false;
302
+ newRow = row + 1;
303
+ break;
304
+ case 'left':
305
+ if (col === 0) return false;
306
+ newCol = col - 1;
307
+ break;
308
+ case 'right':
309
+ if (col === state.size - 1) return false;
310
+ newCol = col + 1;
311
+ break;
312
+ default:
313
+ return false;
314
+ }
315
+
316
+ // Swap tiles
317
+ state.board[row][col] = state.board[newRow][newCol];
318
+ state.board[newRow][newCol] = 0;
319
+ state.emptyPos = { row: newRow, col: newCol };
320
+
321
+ if (countMove) {
322
+ state.moves++;
323
+ moveCounter.textContent = state.moves;
324
+ }
325
+
326
+ renderBoard();
327
+
328
+ // Check if puzzle is solved
329
+ if (isSolved()) {
330
+ clearInterval(state.timer);
331
+ showWinModal();
332
+ }
333
+
334
+ return true;
335
+ }
336
+
337
+ // Check if puzzle is solved
338
+ function isSolved() {
339
+ let counter = 1;
340
+ for (let i = 0; i < state.size; i++) {
341
+ for (let j = 0; j < state.size; j++) {
342
+ if (i === state.size - 1 && j === state.size - 1) {
343
+ if (state.board[i][j] !== 0) return false;
344
+ } else {
345
+ if (state.board[i][j] !== counter++) return false;
346
+ }
347
+ }
348
+ }
349
+ return true;
350
+ }
351
+
352
+ // Timer functions
353
+ function startTimer() {
354
+ clearInterval(state.timer);
355
+ state.time = 0;
356
+ updateTimeDisplay();
357
+
358
+ state.timer = setInterval(() => {
359
+ state.time++;
360
+ updateTimeDisplay();
361
+ }, 1000);
362
+ }
363
+
364
+ function updateTimeDisplay() {
365
+ const minutes = Math.floor(state.time / 60).toString().padStart(2, '0');
366
+ const seconds = (state.time % 60).toString().padStart(2, '0');
367
+ timeCounter.textContent = `${minutes}:${seconds}`;
368
+ }
369
+
370
+ // Show win modal
371
+ function showWinModal() {
372
+ finalMoves.textContent = state.moves;
373
+ finalTime.textContent = timeCounter.textContent;
374
+
375
+ const modalContent = winModal.querySelector('div');
376
+ modalContent.classList.remove('scale-95', 'opacity-0');
377
+ modalContent.classList.add('scale-100', 'opacity-100');
378
+
379
+ winModal.classList.remove('hidden');
380
+
381
+ // Add confetti effect
382
+ for (let i = 0; i < 50; i++) {
383
+ const confetti = document.createElement('div');
384
+ confetti.className = 'absolute w-2 h-2 rounded-full bg-yellow-400 win-effect';
385
+ confetti.style.left = `${Math.random() * 100}%`;
386
+ confetti.style.top = `${Math.random() * 100}%`;
387
+ confetti.style.animationDelay = `${Math.random() * 0.5}s`;
388
+ winModal.appendChild(confetti);
389
+
390
+ setTimeout(() => {
391
+ confetti.remove();
392
+ }, 3000);
393
+ }
394
+ }
395
+
396
+ // Setup event listeners
397
+ function setupEventListeners() {
398
+ // Tile click
399
+ puzzleContainer.addEventListener('click', (e) => {
400
+ if (!state.isPlaying) return;
401
+
402
+ const tile = e.target.closest('.tile');
403
+ if (!tile || tile.textContent === '') return;
404
+
405
+ const row = parseInt(tile.dataset.row);
406
+ const col = parseInt(tile.dataset.col);
407
+ const emptyRow = state.emptyPos.row;
408
+ const emptyCol = state.emptyPos.col;
409
+
410
+ // Check if tile is adjacent to empty space
411
+ if ((Math.abs(row - emptyRow) === 1 && col === emptyCol) ||
412
+ (Math.abs(col - emptyCol) === 1 && row === emptyRow)) {
413
+
414
+ // Determine direction
415
+ let direction;
416
+ if (row < emptyRow) direction = 'up';
417
+ else if (row > emptyRow) direction = 'down';
418
+ else if (col < emptyCol) direction = 'left';
419
+ else direction = 'right';
420
+
421
+ moveTile(direction);
422
+ }
423
+ });
424
+
425
+ // Keyboard controls
426
+ document.addEventListener('keydown', (e) => {
427
+ if (!state.isPlaying) return;
428
+
429
+ switch (e.key) {
430
+ case 'ArrowUp':
431
+ moveTile('down');
432
+ break;
433
+ case 'ArrowDown':
434
+ moveTile('up');
435
+ break;
436
+ case 'ArrowLeft':
437
+ moveTile('right');
438
+ break;
439
+ case 'ArrowRight':
440
+ moveTile('left');
441
+ break;
442
+ }
443
+ });
444
+
445
+ // Shuffle button
446
+ shuffleBtn.addEventListener('click', () => {
447
+ createBoard();
448
+ shuffleBoard();
449
+ });
450
+
451
+ // New game button
452
+ newGameBtn.addEventListener('click', () => {
453
+ createBoard();
454
+ shuffleBoard();
455
+ });
456
+
457
+ // Hint button
458
+ hintBtn.addEventListener('click', () => {
459
+ if (!state.isPlaying) return;
460
+
461
+ // Simple hint: highlight possible moves
462
+ const { row, col } = state.emptyPos;
463
+ const tiles = puzzleContainer.querySelectorAll('.tile');
464
+
465
+ tiles.forEach(tile => {
466
+ if (tile.textContent === '') return;
467
+
468
+ const tileRow = parseInt(tile.dataset.row);
469
+ const tileCol = parseInt(tile.dataset.col);
470
+
471
+ if ((Math.abs(tileRow - row) === 1 && tileCol === col) ||
472
+ (Math.abs(tileCol - col) === 1 && tileRow === row)) {
473
+
474
+ tile.classList.add('ring-4', 'ring-yellow-400');
475
+
476
+ setTimeout(() => {
477
+ tile.classList.remove('ring-4', 'ring-yellow-400');
478
+ }, 1000);
479
+ }
480
+ });
481
+ });
482
+
483
+ // Solve button
484
+ solveBtn.addEventListener('click', () => {
485
+ createBoard();
486
+ state.isPlaying = false;
487
+ clearInterval(state.timer);
488
+ });
489
+
490
+ // Play again button
491
+ playAgainBtn.addEventListener('click', () => {
492
+ winModal.classList.add('hidden');
493
+ createBoard();
494
+ shuffleBoard();
495
+ });
496
+ }
497
+
498
+ // Initialize the game
499
+ initGame();
500
+ });
501
+ </script>
502
+ <script>feather.replace();</script>
503
+ </body>
504
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Creat a zig zag puzzle game app