Hugging Face's logo

Spaces:
porkz
/
piggy-paradise
Running

App Files Community
porkz commited on
Commit
71fdc04
·
verified ·
1 Parent(s): 698d82f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +541 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Piggy Paradise
3
- emoji: 🌍
4
- colorFrom: purple
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: piggy-paradise
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: green
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,541 @@
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>Cute Piglets Game</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
+ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Comic Neue', cursive;
14
+ background-color: #FFF5F5;
15
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMTkyLDIwMywwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
16
+ }
17
+
18
+ .piglet {
19
+ transition: all 0.3s ease;
20
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
21
+ position: relative;
22
+ overflow: hidden;
23
+ }
24
+
25
+ .piglet::before {
26
+ content: '';
27
+ position: absolute;
28
+ top: 30%;
29
+ left: 30%;
30
+ width: 40%;
31
+ height: 40%;
32
+ background-color: rgba(255, 255, 255, 0.3);
33
+ border-radius: 50%;
34
+ transform: scale(0);
35
+ transition: transform 0.3s ease;
36
+ }
37
+
38
+ .piglet:hover::before {
39
+ transform: scale(1);
40
+ }
41
+
42
+ .piglet.hungry {
43
+ animation: pulse 1.5s infinite;
44
+ }
45
+
46
+ .piglet.fed {
47
+ transform: scale(1.05);
48
+ }
49
+
50
+ @keyframes pulse {
51
+ 0% { transform: scale(1); }
52
+ 50% { transform: scale(1.05); }
53
+ 100% { transform: scale(1); }
54
+ }
55
+
56
+ .progress-bar {
57
+ height: 8px;
58
+ border-radius: 4px;
59
+ background-color: #F3F4F6;
60
+ overflow: hidden;
61
+ }
62
+
63
+ .progress-fill {
64
+ height: 100%;
65
+ transition: width 0.5s ease;
66
+ }
67
+
68
+ .confetti {
69
+ position: absolute;
70
+ width: 10px;
71
+ height: 10px;
72
+ background-color: #F472B6;
73
+ opacity: 0;
74
+ }
75
+
76
+ @keyframes confetti-fall {
77
+ 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
78
+ 100% { transform: translateY(1000px) rotate(360deg); opacity: 0; }
79
+ }
80
+
81
+ .farm-bg {
82
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDApIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2ZmZjVmNSIvPjxwYXRoIGQ9Ik0gMCwwIEwgMCwxMDAgTCAxMDAsMTAwIEwgMTAwLDAgWiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDIxNCwxNjMsMTY3LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
83
+ border-radius: 20px;
84
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
85
+ }
86
+
87
+ .piglet-face {
88
+ position: relative;
89
+ width: 100%;
90
+ height: 100%;
91
+ display: flex;
92
+ flex-direction: column;
93
+ align-items: center;
94
+ justify-content: center;
95
+ }
96
+
97
+ .piglet-eyes {
98
+ display: flex;
99
+ gap: 20px;
100
+ margin-bottom: 10px;
101
+ }
102
+
103
+ .piglet-eye {
104
+ width: 20px;
105
+ height: 20px;
106
+ background-color: #333;
107
+ border-radius: 50%;
108
+ position: relative;
109
+ }
110
+
111
+ .piglet-eye::after {
112
+ content: '';
113
+ position: absolute;
114
+ width: 8px;
115
+ height: 8px;
116
+ background-color: white;
117
+ border-radius: 50%;
118
+ top: 4px;
119
+ left: 4px;
120
+ }
121
+
122
+ .piglet-nose {
123
+ width: 40px;
124
+ height: 30px;
125
+ background-color: #F472B6;
126
+ border-radius: 50%;
127
+ display: flex;
128
+ justify-content: center;
129
+ align-items: center;
130
+ }
131
+
132
+ .piglet-nostrils {
133
+ display: flex;
134
+ gap: 8px;
135
+ }
136
+
137
+ .piglet-nostril {
138
+ width: 8px;
139
+ height: 8px;
140
+ background-color: #333;
141
+ border-radius: 50%;
142
+ }
143
+
144
+ .piglet-mouth {
145
+ width: 30px;
146
+ height: 15px;
147
+ border-bottom: 3px solid #333;
148
+ border-radius: 0 0 20px 20px;
149
+ margin-top: 10px;
150
+ }
151
+
152
+ .piglet-mouth.happy {
153
+ border-bottom: 3px solid #333;
154
+ border-radius: 0 0 20px 20px;
155
+ transform: scaleY(0.7);
156
+ }
157
+
158
+ .piglet-mouth.sad {
159
+ border-top: 3px solid #333;
160
+ border-radius: 20px 20px 0 0;
161
+ border-bottom: none;
162
+ transform: scaleY(0.7);
163
+ }
164
+
165
+ .tooltip {
166
+ position: absolute;
167
+ bottom: -40px;
168
+ left: 50%;
169
+ transform: translateX(-50%);
170
+ background-color: #333;
171
+ color: white;
172
+ padding: 4px 8px;
173
+ border-radius: 4px;
174
+ font-size: 12px;
175
+ opacity: 0;
176
+ transition: opacity 0.3s ease;
177
+ pointer-events: none;
178
+ white-space: nowrap;
179
+ }
180
+
181
+ .piglet:hover .tooltip {
182
+ opacity: 1;
183
+ }
184
+ </style>
185
+ </head>
186
+ <body class="min-h-screen flex flex-col items-center justify-center p-4">
187
+ <div class="max-w-4xl w-full">
188
+ <div class="text-center mb-8">
189
+ <h1 class="text-5xl font-bold text-pink-600 mb-2">Piggy Paradise</h1>
190
+ <p class="text-xl text-pink-500">Feed all the hungry piglets before they get too cranky!</p>
191
+ </div>
192
+
193
+ <div class="farm-bg p-8 mb-8">
194
+ <div class="flex justify-between items-center mb-6">
195
+ <div class="flex items-center gap-4">
196
+ <div class="bg-pink-100 p-3 rounded-full">
197
+ <i class="fas fa-stopwatch text-pink-600 text-2xl"></i>
198
+ </div>
199
+ <div>
200
+ <p class="text-gray-600">Time played</p>
201
+ <p id="timer" class="text-2xl font-bold text-pink-600">00:00</p>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="flex items-center gap-4">
206
+ <div class="bg-pink-100 p-3 rounded-full">
207
+ <i class="fas fa-trophy text-pink-600 text-2xl"></i>
208
+ </div>
209
+ <div>
210
+ <p class="text-gray-600">Score</p>
211
+ <p id="score" class="text-2xl font-bold text-pink-600">0</p>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 piglets-grid mb-6"></div>
217
+
218
+ <div class="flex flex-col items-center game-status">
219
+ <div class="bg-pink-100 rounded-full px-6 py-3 mb-4 shadow-md">
220
+ <p id="status-message" class="text-pink-700 font-bold text-lg">Click on piglets to feed them!</p>
221
+ </div>
222
+ <button id="restart-btn" class="hidden bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
223
+ Play Again <i class="fas fa-redo ml-2"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="text-center text-gray-500">
229
+ <p>Made with <i class="fas fa-heart text-pink-500"></i> for pig lovers everywhere</p>
230
+ </div>
231
+ </div>
232
+
233
+ <script>
234
+ // Game elements
235
+ const pigletsGrid = document.querySelector('.piglets-grid');
236
+ const statusMessage = document.getElementById('status-message');
237
+ const timerElement = document.getElementById('timer');
238
+ const scoreElement = document.getElementById('score');
239
+ const restartBtn = document.getElementById('restart-btn');
240
+
241
+ // Game variables
242
+ let piglets = [];
243
+ let gameOver = false;
244
+ let score = 0;
245
+ let seconds = 0;
246
+ let timerInterval;
247
+ let hungryCount = 0;
248
+
249
+ // Initialize game
250
+ function initGame() {
251
+ // Reset game state
252
+ pigletsGrid.innerHTML = '';
253
+ piglets = [];
254
+ gameOver = false;
255
+ score = 0;
256
+ seconds = 0;
257
+ hungryCount = 0;
258
+ scoreElement.textContent = score;
259
+ timerElement.textContent = '00:00';
260
+ statusMessage.textContent = 'Click on piglets to feed them!';
261
+ restartBtn.classList.add('hidden');
262
+
263
+ // Clear existing timer
264
+ if (timerInterval) clearInterval(timerInterval);
265
+
266
+ // Start timer
267
+ timerInterval = setInterval(updateTimer, 1000);
268
+
269
+ // Create piglets
270
+ for (let i = 0; i < 8; i++) {
271
+ createPiglet(i);
272
+ }
273
+ }
274
+
275
+ // Create a piglet element
276
+ function createPiglet(index) {
277
+ const piglet = document.createElement('div');
278
+ piglet.classList.add('piglet', 'relative', 'rounded-full', 'bg-pink-300', 'cursor-pointer', 'overflow-hidden');
279
+ piglet.dataset.index = index;
280
+ piglet.dataset.hunger = Math.floor(Math.random() * 40 + 60); // Start between 60-100
281
+ piglet.dataset.lastFed = 0;
282
+
283
+ // Create piglet face
284
+ const pigletFace = document.createElement('div');
285
+ pigletFace.classList.add('piglet-face');
286
+
287
+ // Eyes
288
+ const eyes = document.createElement('div');
289
+ eyes.classList.add('piglet-eyes');
290
+
291
+ const leftEye = document.createElement('div');
292
+ leftEye.classList.add('piglet-eye');
293
+
294
+ const rightEye = document.createElement('div');
295
+ rightEye.classList.add('piglet-eye');
296
+
297
+ eyes.appendChild(leftEye);
298
+ eyes.appendChild(rightEye);
299
+
300
+ // Nose
301
+ const nose = document.createElement('div');
302
+ nose.classList.add('piglet-nose');
303
+
304
+ const nostrils = document.createElement('div');
305
+ nostrils.classList.add('piglet-nostrils');
306
+
307
+ const leftNostril = document.createElement('div');
308
+ leftNostril.classList.add('piglet-nostril');
309
+
310
+ const rightNostril = document.createElement('div');
311
+ rightNostril.classList.add('piglet-nostril');
312
+
313
+ nostrils.appendChild(leftNostril);
314
+ nostrils.appendChild(rightNostril);
315
+ nose.appendChild(nostrils);
316
+
317
+ // Mouth
318
+ const mouth = document.createElement('div');
319
+ mouth.classList.add('piglet-mouth', 'happy');
320
+
321
+ pigletFace.appendChild(eyes);
322
+ pigletFace.appendChild(nose);
323
+ pigletFace.appendChild(mouth);
324
+
325
+ // Progress bar
326
+ const progressContainer = document.createElement('div');
327
+ progressContainer.classList.add('progress-bar', 'w-4/5', 'mt-2', 'mx-auto');
328
+
329
+ const progressFill = document.createElement('div');
330
+ progressFill.classList.add('progress-fill', 'bg-pink-500');
331
+ progressFill.style.width = `${piglet.dataset.hunger}%`;
332
+
333
+ progressContainer.appendChild(progressFill);
334
+
335
+ // Tooltip
336
+ const tooltip = document.createElement('div');
337
+ tooltip.classList.add('tooltip');
338
+ tooltip.textContent = `Hunger: ${piglet.dataset.hunger}%`;
339
+
340
+ piglet.appendChild(pigletFace);
341
+ piglet.appendChild(progressContainer);
342
+ piglet.appendChild(tooltip);
343
+
344
+ pigletsGrid.appendChild(piglet);
345
+ piglets.push(piglet);
346
+ }
347
+
348
+ // Update timer
349
+ function updateTimer() {
350
+ if (!gameOver) {
351
+ seconds++;
352
+ const minutes = Math.floor(seconds / 60);
353
+ const remainingSeconds = seconds % 60;
354
+ timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
355
+ }
356
+ }
357
+
358
+ // Update piglet hunger levels
359
+ setInterval(() => {
360
+ if (!gameOver) {
361
+ hungryCount = 0;
362
+
363
+ piglets.forEach((piglet) => {
364
+ let hunger = parseInt(piglet.dataset.hunger);
365
+ hunger -= 1;
366
+ piglet.dataset.hunger = hunger;
367
+ piglet.dataset.lastFed = parseInt(piglet.dataset.lastFed) + 1;
368
+
369
+ // Update progress bar
370
+ const progressFill = piglet.querySelector('.progress-fill');
371
+ progressFill.style.width = `${hunger}%`;
372
+
373
+ // Update tooltip
374
+ const tooltip = piglet.querySelector('.tooltip');
375
+ tooltip.textContent = `Hunger: ${hunger}%`;
376
+
377
+ // Update appearance based on hunger
378
+ const mouth = piglet.querySelector('.piglet-mouth');
379
+
380
+ if (hunger <= 30) {
381
+ hungryCount++;
382
+ piglet.classList.add('hungry');
383
+ piglet.classList.remove('bg-pink-300', 'bg-green-200');
384
+ piglet.classList.add('bg-pink-500');
385
+ mouth.classList.remove('happy');
386
+ mouth.classList.add('sad');
387
+ progressFill.classList.remove('bg-pink-500', 'bg-green-400');
388
+ progressFill.classList.add('bg-red-500');
389
+ } else if (hunger >= 70) {
390
+ piglet.classList.remove('hungry', 'bg-pink-500');
391
+ piglet.classList.add('bg-pink-300');
392
+ mouth.classList.remove('sad');
393
+ mouth.classList.add('happy');
394
+ progressFill.classList.remove('bg-red-500', 'bg-green-400');
395
+ progressFill.classList.add('bg-pink-500');
396
+ }
397
+
398
+ // If recently fed
399
+ if (parseInt(piglet.dataset.lastFed) < 5 && hunger > 30) {
400
+ piglet.classList.remove('bg-pink-300', 'bg-pink-500');
401
+ piglet.classList.add('bg-green-200');
402
+ progressFill.classList.remove('bg-pink-500', 'bg-red-500');
403
+ progressFill.classList.add('bg-green-400');
404
+ }
405
+ });
406
+
407
+ checkGameStatus();
408
+ }
409
+ }, 1000);
410
+
411
+ // Feed piglet on click
412
+ pigletsGrid.addEventListener('click', (e) => {
413
+ let target = e.target;
414
+
415
+ // Find the piglet element (might have clicked on child elements)
416
+ while (target && !target.classList.contains('piglet') && target !== pigletsGrid) {
417
+ target = target.parentElement;
418
+ }
419
+
420
+ if (target.classList.contains('piglet') && !gameOver) {
421
+ const piglet = target;
422
+ let hunger = parseInt(piglet.dataset.hunger);
423
+
424
+ // Only feed if not already full
425
+ if (hunger < 100) {
426
+ hunger += 30;
427
+ if (hunger > 100) hunger = 100;
428
+ piglet.dataset.hunger = hunger;
429
+ piglet.dataset.lastFed = 0;
430
+
431
+ // Update progress bar
432
+ const progressFill = piglet.querySelector('.progress-fill');
433
+ progressFill.style.width = `${hunger}%`;
434
+ progressFill.classList.remove('bg-red-500');
435
+ progressFill.classList.add('bg-green-400');
436
+
437
+ // Update tooltip
438
+ const tooltip = piglet.querySelector('.tooltip');
439
+ tooltip.textContent = `Hunger: ${hunger}%`;
440
+
441
+ // Visual feedback
442
+ piglet.classList.remove('hungry', 'bg-pink-500');
443
+ piglet.classList.add('bg-green-200');
444
+
445
+ const mouth = piglet.querySelector('.piglet-mouth');
446
+ mouth.classList.remove('sad');
447
+ mouth.classList.add('happy');
448
+
449
+ // Add to score
450
+ score += 10;
451
+ scoreElement.textContent = score;
452
+
453
+ // Create feed effect
454
+ createFeedEffect(piglet);
455
+ }
456
+ }
457
+ });
458
+
459
+ // Create feed effect (hearts animation)
460
+ function createFeedEffect(piglet) {
461
+ for (let i = 0; i < 5; i++) {
462
+ const heart = document.createElement('div');
463
+ heart.innerHTML = '<i class="fas fa-heart text-pink-500"></i>';
464
+ heart.classList.add('absolute', 'text-xl', 'animate-bounce', 'opacity-70');
465
+ heart.style.left = `${Math.random() * 60 + 20}%`;
466
+ heart.style.top = `${Math.random() * 60 + 20}%`;
467
+ heart.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`;
468
+ heart.style.animationDelay = `${i * 0.1}s`;
469
+
470
+ piglet.appendChild(heart);
471
+
472
+ // Remove after animation
473
+ setTimeout(() => {
474
+ heart.remove();
475
+ }, 1000);
476
+ }
477
+ }
478
+
479
+ // Create confetti effect
480
+ function createConfetti() {
481
+ const container = document.querySelector('.farm-bg');
482
+
483
+ for (let i = 0; i < 100; i++) {
484
+ const confetti = document.createElement('div');
485
+ confetti.classList.add('confetti');
486
+ confetti.style.left = `${Math.random() * 100}%`;
487
+ confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 75%)`;
488
+ confetti.style.width = `${Math.random() * 10 + 5}px`;
489
+ confetti.style.height = `${Math.random() * 10 + 5}px`;
490
+ confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;
491
+ confetti.style.animationDelay = `${Math.random() * 0.5}s`;
492
+
493
+ container.appendChild(confetti);
494
+
495
+ // Remove after animation
496
+ setTimeout(() => {
497
+ confetti.remove();
498
+ }, 3000);
499
+ }
500
+ }
501
+
502
+ // Check game status
503
+ function checkGameStatus() {
504
+ const allFed = piglets.every((piglet) => parseInt(piglet.dataset.hunger) >= 70);
505
+
506
+ if (allFed) {
507
+ gameOver = true;
508
+ clearInterval(timerInterval);
509
+ statusMessage.textContent = 'Congratulations! All piglets are happy and fed!';
510
+ restartBtn.classList.remove('hidden');
511
+ createConfetti();
512
+
513
+ // Bonus points for time
514
+ const timeBonus = Math.max(0, 500 - seconds * 2);
515
+ score += timeBonus;
516
+ scoreElement.textContent = score;
517
+
518
+ if (timeBonus > 0) {
519
+ setTimeout(() => {
520
+ statusMessage.textContent = `Time bonus: +${timeBonus} points!`;
521
+ }, 2000);
522
+ }
523
+ } else {
524
+ if (hungryCount === 0) {
525
+ statusMessage.textContent = 'All piglets are content! Keep feeding them!';
526
+ } else if (hungryCount === 1) {
527
+ statusMessage.textContent = '1 piglet is hungry! Click to feed!';
528
+ } else {
529
+ statusMessage.textContent = `${hungryCount} piglets are hungry! Feed them!`;
530
+ }
531
+ }
532
+ }
533
+
534
+ // Restart game
535
+ restartBtn.addEventListener('click', initGame);
536
+
537
+ // Start the game
538
+ initGame();
539
+ </script>
540
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=porkz/piggy-paradise" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
541
+ </html>