Hugging Face's logo

Spaces:
kimhyunwoo
/
thronglets
Running

App Files Community
kimhyunwoo commited on
Commit
88f92b7
·
verified ·
1 Parent(s): 81a239f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +745 -19
index.html CHANGED
@@ -1,19 +1,745 @@
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>Thronglets Imitation</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ overflow: hidden;
11
+ background: #111;
12
+ color: limegreen;
13
+ font-family: 'Courier New', monospace;
14
+ display: flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ justify-content: center;
18
+ min-height: 100vh;
19
+ position: relative;
20
+ }
21
+
22
+ .game-container {
23
+ position: relative;
24
+ width: 90vmin;
25
+ height: 60vmin;
26
+ max-width: 800px;
27
+ max-height: 500px;
28
+ background: #3A4A2F; /* Grass background */
29
+ border: 10px solid #8B4513; /* Wooden frame */
30
+ box-sizing: border-box;
31
+ overflow: hidden; /* Keep everything inside the frame */
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ flex-wrap: wrap; /* Allow thronglets to wrap if many */
36
+ padding: 20px; /* Padding inside the frame */
37
+ image-rendering: pixelated; /* Attempt pixelation */
38
+ font-size: 2em; /* Emojis larger */
39
+ position: relative;
40
+ }
41
+
42
+ .game-elements {
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ pointer-events: none; /* Allow clicks to pass through */
49
+ }
50
+
51
+ .game-elements .emoji, .game-elements .text {
52
+ position: absolute;
53
+ pointer-events: auto; /* Allow clicks on interactable elements */
54
+ transform: translate(-50%, -50%); /* Center element */
55
+ user-select: none;
56
+ }
57
+
58
+
59
+ .rock { top: 15%; left: 15%; }
60
+ .rock.right { left: 85%; }
61
+ .tree { top: 75%; left: 20%; }
62
+ .tree.right { left: 80%; }
63
+ .egg { top: 50%; left: 50%; cursor: pointer; transition: transform 0.5s ease;}
64
+ .egg.hatching { animation: hatch-pulse 0.5s infinite alternate; }
65
+ .thronglet {
66
+ top: 50%;
67
+ left: 50%;
68
+ cursor: pointer;
69
+ transition: top 0.5s, left 0.5s, transform 0.2s ease;
70
+ z-index: 1; /* Ensure thronglets are above background elements */
71
+ }
72
+
73
+ .apple { top: 60%; left: 40%; cursor: pointer; }
74
+ .bath { top: 60%; left: 60%; cursor: pointer; }
75
+
76
+ .feedback {
77
+ position: absolute;
78
+ transform: translate(-50%, -150%); /* Above thronglet */
79
+ font-size: 0.8em;
80
+ opacity: 0;
81
+ transition: opacity 0.5s ease-out, transform 0.5s ease-out;
82
+ }
83
+ .feedback.active {
84
+ opacity: 1;
85
+ transform: translate(-50%, -200%);
86
+ }
87
+
88
+ .dead {
89
+ filter: grayscale(100%);
90
+ opacity: 0.5;
91
+ pointer-events: none;
92
+ }
93
+
94
+ .blood {
95
+ position: absolute;
96
+ font-size: 1.5em;
97
+ transform: translate(-50%, -50%);
98
+ pointer-events: none;
99
+ opacity: 0;
100
+ transition: opacity 0.5s ease-out;
101
+ z-index: 0;
102
+ }
103
+ .blood.splatter { opacity: 1; }
104
+
105
+ .skull { font-size: 1.5em; pointer-events: none; }
106
+
107
+ .console {
108
+ position: fixed;
109
+ bottom: 20px;
110
+ left: 50%;
111
+ transform: translateX(-50%);
112
+ width: 90%;
113
+ max-width: 600px;
114
+ background: rgba(0, 0, 0, 0.8);
115
+ border: 2px groove limegreen;
116
+ padding: 10px;
117
+ box-sizing: border-box;
118
+ white-space: pre-wrap;
119
+ word-break: break-word;
120
+ pointer-events: none; /* Don't block clicks */
121
+ z-index: 100;
122
+ }
123
+
124
+ .message {
125
+ display: block;
126
+ margin-bottom: 5px;
127
+ color: limegreen;
128
+ white-space: pre-wrap;
129
+ }
130
+
131
+ .scanline-overlay {
132
+ position: fixed;
133
+ top: 0;
134
+ left: 0;
135
+ width: 100%;
136
+ height: 100%;
137
+ pointer-events: none;
138
+ z-index: 101;
139
+ background: repeating-linear-gradient(
140
+ 0deg,
141
+ rgba(0, 0, 0, 0.1) 0,
142
+ rgba(0, 0, 0, 0.1) 1px,
143
+ transparent 1px,
144
+ transparent 2px
145
+ );
146
+ }
147
+
148
+ .glitch-overlay {
149
+ position: fixed;
150
+ top: 0;
151
+ left: 0;
152
+ width: 100%;
153
+ height: 100%;
154
+ pointer-events: none;
155
+ z-index: 102;
156
+ animation: glitch 5s infinite alternate steps(5);
157
+ opacity: 0;
158
+ filter: hue-rotate(0deg);
159
+ }
160
+
161
+ .glitch-overlay.active {
162
+ animation: glitch 0.3s infinite alternate steps(5), color-shift 1s infinite linear;
163
+ opacity: 0.5;
164
+ }
165
+
166
+
167
+ @keyframes hatch-pulse {
168
+ from { transform: translate(-50%, -50%) scale(1); }
169
+ to { transform: translate(-50%, -50%) scale(1.05); }
170
+ }
171
+
172
+ @keyframes glitch {
173
+ 0% {
174
+ transform: translate(0);
175
+ }
176
+ 20% {
177
+ transform: translate(-5px, 5px);
178
+ }
179
+ 40% {
180
+ transform: translate(-5px, -5px);
181
+ }
182
+ 60% {
183
+ transform: translate(5px, 5px);
184
+ }
185
+ 80% {
186
+ transform: translate(5px, -5px);
187
+ }
188
+ to {
189
+ transform: translate(0);
190
+ }
191
+ }
192
+
193
+ @keyframes color-shift {
194
+ 0% { filter: hue-rotate(0deg); }
195
+ 100% { filter: hue-rotate(360deg); }
196
+ }
197
+
198
+ /* Basic representation of later elements */
199
+ .ominous-elements {
200
+ position: absolute;
201
+ top: 10%;
202
+ right: 10%;
203
+ font-size: 3em;
204
+ opacity: 0;
205
+ transition: opacity 2s ease-in-out;
206
+ z-index: 0;
207
+ }
208
+ .ominous-elements.visible {
209
+ opacity: 1;
210
+ }
211
+
212
+
213
+ .info-panel {
214
+ position: absolute;
215
+ top: 50%;
216
+ left: 50%;
217
+ transform: translate(-50%, -50%);
218
+ background: #8B4513;
219
+ border: 2px solid black;
220
+ padding: 15px;
221
+ color: white;
222
+ font-size: 0.7em;
223
+ text-align: center;
224
+ white-space: pre-wrap;
225
+ word-break: break-word;
226
+ opacity: 0;
227
+ transition: opacity 1s ease-in-out;
228
+ pointer-events: none;
229
+ z-index: 5;
230
+ }
231
+ .info-panel.visible {
232
+ opacity: 1;
233
+ pointer-events: auto;
234
+ }
235
+
236
+ .black-mirror-title {
237
+ position: absolute;
238
+ top: 10px;
239
+ left: 10px;
240
+ font-size: 0.8em;
241
+ color: white;
242
+ font-weight: bold;
243
+ text-shadow: 1px 1px 0 black;
244
+ z-index: 10;
245
+ }
246
+
247
+ .netflix-logo {
248
+ position: absolute;
249
+ top: 10px;
250
+ right: 10px;
251
+ font-size: 1.2em; /* Use the 'N' emoji? */
252
+ color: red; /* Or maybe style text */
253
+ font-weight: bold;
254
+ text-shadow: 1px 1px 0 black;
255
+ z-index: 10;
256
+ }
257
+
258
+ .thronglets-title-screen {
259
+ position: fixed;
260
+ top: 0;
261
+ left: 0;
262
+ width: 100%;
263
+ height: 100%;
264
+ background: linear-gradient(to bottom, #FFD700, #FFA500); /* Golden/Orange sky */
265
+ color: #8B4513; /* Brown text */
266
+ font-size: 3em;
267
+ font-weight: bold;
268
+ text-align: center;
269
+ padding-top: 15vh;
270
+ box-sizing: border-box;
271
+ z-index: 200;
272
+ transition: opacity 2s ease-out;
273
+ display: flex;
274
+ flex-direction: column;
275
+ align-items: center;
276
+ }
277
+
278
+ .thronglets-title-screen .copyright {
279
+ font-size: 0.4em;
280
+ margin-top: 10px;
281
+ }
282
+
283
+ .thronglets-title-screen .creatures {
284
+ margin-top: 5vh;
285
+ }
286
+ .thronglets-title-screen .creatures .emoji {
287
+ font-size: 2em;
288
+ margin: 0 20px;
289
+ }
290
+
291
+ .final-screen {
292
+ position: fixed;
293
+ top: 0;
294
+ left: 0;
295
+ width: 100%;
296
+ height: 100%;
297
+ background: radial-gradient(circle, rgba(148,187,233,1) 0%, rgba(238,174,202,1) 100%); /* Colorful background */
298
+ z-index: 300;
299
+ display: flex;
300
+ flex-direction: column;
301
+ align-items: center;
302
+ justify-content: center;
303
+ color: white;
304
+ font-size: 1.5em;
305
+ text-align: center;
306
+ opacity: 0;
307
+ transition: opacity 2s ease-in-out;
308
+ }
309
+ .final-screen.visible { opacity: 1; }
310
+
311
+ .app-stores {
312
+ margin-top: 20px;
313
+ font-size: 0.8em;
314
+ }
315
+ .app-stores img {
316
+ height: 40px;
317
+ margin: 0 10px;
318
+ }
319
+
320
+ .full-black {
321
+ position: fixed;
322
+ top: 0; left: 0; width: 100%; height: 100%;
323
+ background: black;
324
+ z-index: 301;
325
+ opacity: 0;
326
+ transition: opacity 1s ease-in-out;
327
+ pointer-events: none;
328
+ }
329
+ .full-black.visible { opacity: 1; }
330
+
331
+ .netflix-games-logo {
332
+ position: fixed;
333
+ top: 50%;
334
+ left: 50%;
335
+ transform: translate(-50%, -50%);
336
+ z-index: 302;
337
+ opacity: 0;
338
+ transition: opacity 1s ease-in-out;
339
+ }
340
+ .netflix-games-logo.visible { opacity: 1; }
341
+
342
+
343
+ </style>
344
+ </head>
345
+ <body>
346
+
347
+ <div class="thronglets-title-screen" id="titleScreen">
348
+ THRONGLETS
349
+ <div class="copyright">(C) 1994 TUCKERSOFT LTD</div>
350
+ <div class="creatures">
351
+ <span class="emoji">🥚</span>
352
+ <!-- Using a placeholder emoji that *could* look like a Thronglet -->
353
+ <span class="emoji">🐻</span>
354
+ <span class="emoji">🐻</span>
355
+ <span class="emoji tree">🌳</span>
356
+ </div>
357
+ <div class="copyright" style="font-size: 0.3em; margin-top: 50px;">
358
+ Tuckersoft is not responsible for strange noises, missing files, or dreams featuring Thronglets whispering your name.
359
+ </div>
360
+ </div>
361
+
362
+
363
+ <div class="game-container" id="gameContainer">
364
+ <div class="black-mirror-title">BLACK MIRROR:<br>THRONGLETS</div>
365
+ <div class="netflix-logo">N<br>GAMES</div> <!-- Simulate Netflix Games logo -->
366
+
367
+ <div class="game-elements">
368
+ <span class="emoji rock">🪨</span>
369
+ <span class="emoji rock right">🪨</span>
370
+ <span class="emoji tree">🌳</span>
371
+ <span class="emoji tree right">🌳</span>
372
+
373
+ <span class="emoji egg" id="egg">🥚</span>
374
+
375
+ <!-- Initial items -->
376
+ <span class="emoji apple" id="apple">🍎</span>
377
+ <span class="emoji bath" id="bath">🛀</span>
378
+
379
+ <!-- Ominous elements for later -->
380
+ <div class="ominous-elements" id="ominousElements">
381
+ 💀💀💀💀<br>🦴🦴🦴🦴<br>🌌📦
382
+ </div>
383
+
384
+ <!-- Info Panel -->
385
+ <div class="info-panel" id="infoPanel"></div>
386
+
387
+ <!-- Blood splatter area -->
388
+ <span class="emoji blood" id="bloodSplatter">🩸</span>
389
+ </div>
390
+
391
+ </div>
392
+
393
+ <div class="console" id="console"></div>
394
+ <div class="scanline-overlay"></div>
395
+ <div class="glitch-overlay" id="glitchOverlay"></div>
396
+
397
+ <div class="final-screen" id="finalScreen">
398
+ PLAY NOW<br>ON THE NETFLIX<br>MOBILE APP
399
+ <div class="app-stores">
400
+ <!-- Placeholder images or text for store buttons -->
401
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="Google Play Placeholder">
402
+ <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="App Store Placeholder">
403
+ (Store Buttons Go Here)
404
+ </div>
405
+ </div>
406
+
407
+ <div class="full-black" id="fullBlack"></div>
408
+ <div class="netflix-games-logo" id="netflixGamesLogo">
409
+ <span class="emoji" style="font-size: 5em; color: red;">N</span>
410
+ </div>
411
+
412
+
413
+ <script>
414
+ const egg = document.getElementById('egg');
415
+ const gameContainer = document.getElementById('gameContainer');
416
+ const consoleDiv = document.getElementById('console');
417
+ const apple = document.getElementById('apple');
418
+ const bath = document.getElementById('bath');
419
+ const glitchOverlay = document.getElementById('glitchOverlay');
420
+ const ominousElements = document.getElementById('ominousElements');
421
+ const infoPanel = document.getElementById('infoPanel');
422
+ const bloodSplatter = document.getElementById('bloodSplatter');
423
+ const titleScreen = document.getElementById('titleScreen');
424
+ const finalScreen = document.getElementById('finalScreen');
425
+ const fullBlack = document.getElementById('fullBlack');
426
+ const netflixGamesLogo = document.getElementById('netflixGamesLogo');
427
+
428
+ let thronglets = [];
429
+ let nextThrongletId = 0;
430
+ let deathCount = 0;
431
+ const MAX_THRONGLETS = 20; // Cap the number for performance
432
+
433
+ // --- Game State & Logic ---
434
+
435
+ function logToConsole(message) {
436
+ const msgElement = document.createElement('span');
437
+ msgElement.classList.add('message');
438
+ msgElement.textContent = `> ${message}`;
439
+ consoleDiv.appendChild(msgElement);
440
+ consoleDiv.scrollTop = consoleDiv.scrollHeight; // Auto-scroll
441
+ }
442
+
443
+ function triggerGlitch(duration = 1000) {
444
+ glitchOverlay.classList.add('active');
445
+ setTimeout(() => {
446
+ glitchOverlay.classList.remove('active');
447
+ }, duration);
448
+ }
449
+
450
+ function showInfoPanel(text, duration = 2000) {
451
+ infoPanel.textContent = text;
452
+ infoPanel.classList.add('visible');
453
+ clearTimeout(infoPanel.timeout);
454
+ infoPanel.timeout = setTimeout(() => {
455
+ infoPanel.classList.remove('visible');
456
+ }, duration);
457
+ }
458
+
459
+ function createThronglet(x, y) {
460
+ if (thronglets.length >= MAX_THRONGLETS) {
461
+ logToConsole("Too many Thronglets.");
462
+ return;
463
+ }
464
+
465
+ const throngletElement = document.createElement('span');
466
+ throngletElement.classList.add('emoji', 'thronglet');
467
+ // Use a default emoji that could resemble the character
468
+ throngletElement.textContent = '🐕'; // Changed from 🐻 - maybe more ears?
469
+ throngletElement.dataset.id = nextThrongletId++;
470
+ throngletElement.style.top = `${y}%`;
471
+ throngletElement.style.left = `${x}%`;
472
+ gameContainer.querySelector('.game-elements').appendChild(throngletElement);
473
+
474
+ const newThronglet = {
475
+ id: throngletElement.dataset.id,
476
+ element: throngletElement,
477
+ hunger: 50, // 0-100, 100 is very hungry
478
+ cleanliness: 50, // 0-100, 100 is very dirty
479
+ happiness: 50, // 0-100, 0 is very unhappy
480
+ lastInteraction: Date.now(),
481
+ isDead: false,
482
+ memory: [], // To store events
483
+ };
484
+ thronglets.push(newThronglet);
485
+
486
+ // Add click listener for interaction
487
+ throngletElement.addEventListener('click', () => interactThronglet(newThronglet));
488
+
489
+ logToConsole(`A new Thronglet #${newThronglet.id} appeared!`);
490
+
491
+ // Add feedback element
492
+ const feedbackElement = document.createElement('span');
493
+ feedbackElement.classList.add('emoji', 'feedback');
494
+ feedbackElement.style.top = `${y}%`;
495
+ feedbackElement.style.left = `${x}%`;
496
+ gameContainer.querySelector('.game-elements').appendChild(feedbackElement);
497
+ newThronglet.feedbackElement = feedbackElement;
498
+ }
499
+
500
+ function interactThronglet(thronglet) {
501
+ if (thronglet.isDead) return;
502
+
503
+ const now = Date.now();
504
+ const timeSinceLast = now - thronglet.lastInteraction;
505
+ thronglet.lastInteraction = now;
506
+
507
+ // Simple interaction feedback
508
+ thronglet.happiness = Math.max(0, thronglet.happiness - 10); // Interacting makes them slightly happy
509
+ showFeedback(thronglet, '👋'); // Wave emoji
510
+
511
+ logToConsole(`Interacted with Thronglet #${thronglet.id}`);
512
+
513
+ // Check for "tricks" (not implemented, but could be a mechanic)
514
+ // If they have high stats, maybe they "learn" something?
515
+ if (thronglet.hunger < 20 && thronglet.cleanliness < 20 && thronglet.happiness > 80 && timeSinceLast < 5000) {
516
+ // This is a placeholder for a learning/trick mechanic
517
+ logToConsole(`Thronglet #${thronglet.id} seems responsive...`);
518
+ thronglet.memory.push('PositiveInteraction'); // Store positive memory
519
+ showFeedback(thronglet, '✨');
520
+ }
521
+ }
522
+
523
+
524
+ function feedThronglet(thronglet) {
525
+ if (thronglet.isDead) return;
526
+ thronglet.hunger = Math.max(0, thronglet.hunger - 30);
527
+ thronglet.happiness = Math.min(100, thronglet.happiness + 15);
528
+ showFeedback(thronglet, '🍎');
529
+ logToConsole(`Fed Thronglet #${thronglet.id}. Hunger: ${thronglet.hunger}`);
530
+ thronglet.memory.push('Fed');
531
+ }
532
+
533
+ function cleanThronglet(thronglet) {
534
+ if (thronglet.isDead) return;
535
+ thronglet.cleanliness = Math.max(0, thronglet.cleanliness - 40);
536
+ thronglet.happiness = Math.min(100, thronglet.happiness + 20);
537
+ showFeedback(thronglet, '🛁');
538
+ logToConsole(`Cleaned Thronglet #${thronglet.id}. Cleanliness: ${thronglet.cleanliness}`);
539
+ thronglet.memory.push('Cleaned');
540
+ }
541
+
542
+
543
+ function showFeedback(thronglet, emoji) {
544
+ if (thronglet.feedbackElement) {
545
+ thronglet.feedbackElement.textContent = emoji;
546
+ thronglet.feedbackElement.classList.add('active');
547
+ clearTimeout(thronglet.feedbackElement.timeout);
548
+ thronglet.feedbackElement.timeout = setTimeout(() => {
549
+ thronglet.feedbackElement.classList.remove('active');
550
+ }, 500);
551
+ }
552
+ }
553
+
554
+ function killThronglet(thronglet) {
555
+ if (thronglet.isDead) return;
556
+
557
+ thronglet.isDead = true;
558
+ thronglet.element.classList.add('dead');
559
+ thronglet.element.textContent = '💀'; // Replace with skull
560
+ thronglet.feedbackElement.remove(); // Remove feedback icon
561
+
562
+ // Add blood splatter effect briefly
563
+ bloodSplatter.style.top = thronglet.element.style.top;
564
+ bloodSplatter.style.left = thronglet.element.style.left;
565
+ bloodSplatter.classList.add('splatter');
566
+ setTimeout(() => { bloodSplatter.classList.remove('splatter'); }, 1000);
567
+
568
+
569
+ deathCount++;
570
+ logToConsole(`Thronglet #${thronglet.id} experienced the void.`);
571
+ logToConsole(`Learned individuals are wholly disposable`); // From trailer
572
+
573
+ thronglet.memory.push('Died'); // Remember death
574
+
575
+ // Trigger events based on death count
576
+ if (deathCount === 1) {
577
+ showInfoPanel("The first Thronglet to experience the void...");
578
+ triggerGlitch();
579
+ } else if (deathCount > 3 && deathCount % 3 === 0) {
580
+ logToConsole(`They'll remember your carelessness...`);
581
+ triggerGlitch(500);
582
+ }
583
+
584
+ // Maybe respawn faster after death? Or spawn more?
585
+ setTimeout(() => {
586
+ // Simple respawn logic - replace the skull with a new egg/thronglet
587
+ thronglet.element.remove(); // Remove the skull
588
+ thronglets = thronglets.filter(t => t.id !== thronglet.id); // Remove from array
589
+ const { top, left } = thronglet.element.style;
590
+ createThronglet(parseFloat(left), parseFloat(top)); // Spawn a new one near where it died
591
+ }, 5000); // Respawn after 5 seconds
592
+ }
593
+
594
+ function updateThronglets() {
595
+ const now = Date.now();
596
+ thronglets.forEach(thronglet => {
597
+ if (thronglet.isDead) return;
598
+
599
+ const timeAlive = now - thronglet.element.dataset.bornTime; // Track time alive
600
+ const timeSinceLast = now - thronglet.lastInteraction;
601
+
602
+ // Increase needs over time (faster if neglected)
603
+ const needIncreaseRate = timeSinceLast / 10000; // Faster increase if ignored for 10s
604
+ thronglet.hunger = Math.min(100, thronglet.hunger + needIncreaseRate);
605
+ thronglet.cleanliness = Math.min(100, thronglet.cleanliness + needIncreaseRate * 0.8); // Cleaning slightly less critical
606
+ thronglet.happiness = Math.max(0, thronglet.happiness - needIncreaseRate * 1.2); // Happiness decays faster
607
+
608
+ // Check conditions for death
609
+ if (thronglet.hunger >= 90 || thronglet.cleanliness >= 90 || thronglet.happiness <= 10) {
610
+ killThronglet(thronglet);
611
+ }
612
+
613
+ // Check for reproduction (if very happy and well-cared for)
614
+ if (thronglet.happiness > 85 && thronglet.hunger < 20 && thronglet.cleanliness < 20 && timeSinceLast < 30000 && Math.random() < 0.001) { // Small random chance
615
+ logToConsole(`Thronglet #${thronglet.id} feels loved. Oh, Look!`); // From trailer
616
+ showFeedback(thronglet, '❤️');
617
+ // Spawn a new one nearby
618
+ setTimeout(() => {
619
+ createThronglet(parseFloat(thronglet.element.style.left) + (Math.random() - 0.5) * 10,
620
+ parseFloat(thronglet.element.style.top) + (Math.random() - 0.5) * 10);
621
+ }, 500); // Short delay to show feedback
622
+ }
623
+
624
+ // Simple movement (random walk)
625
+ const currentX = parseFloat(thronglet.element.style.left);
626
+ const currentY = parseFloat(thronglet.element.style.top);
627
+ const moveDist = 2; // Max movement percentage
628
+ const newX = Math.max(5, Math.min(95, currentX + (Math.random() - 0.5) * moveDist)); // Keep within bounds
629
+ const newY = Math.max(5, Math.min(95, currentY + (Math.random() - 0.5) * moveDist));
630
+ thronglet.element.style.left = `${newX}%`;
631
+ thronglet.element.style.top = `${newY}%`;
632
+
633
+
634
+ // Periodically show a status hint (optional, can clutter console)
635
+ // if (Math.random() < 0.005) {
636
+ // logToConsole(`#${thronglet.id}: H:${thronglet.hunger.toFixed(0)} C:${thronglet.cleanliness.toFixed(0)} P:${thronglet.happiness.toFixed(0)}`);
637
+ // }
638
+ });
639
+
640
+ // Trigger final phase after significant events (e.g., high death count, many Thronglets)
641
+ if (deathCount >= 5 && ! ominousElements.classList.contains('visible')) {
642
+ logToConsole("Did you...");
643
+ setTimeout(() => { logToConsole("do this??_"); triggerGlitch(1000); }, 1000);
644
+ setTimeout(() => { ominousElements.classList.add('visible'); }, 2000);
645
+ setTimeout(() => { logToConsole("we understand,,"); }, 3000);
646
+ setTimeout(() => { logToConsole("we know what we must do 🤔"); triggerGlitch(2000); }, 4000);
647
+
648
+ // Transition to final screen after console messages
649
+ setTimeout(showFinalScreen, 8000);
650
+ }
651
+ }
652
+
653
+ function showFinalScreen() {
654
+ gameContainer.style.opacity = 0;
655
+ consoleDiv.style.opacity = 0;
656
+ scanlineOverlay.style.opacity = 0;
657
+ glitchOverlay.style.opacity = 0;
658
+
659
+ fullBlack.classList.add('visible');
660
+ setTimeout(() => {
661
+ netflixGamesLogo.classList.add('visible');
662
+ fullBlack.classList.remove('visible'); // Fade out black
663
+ }, 2000); // Show N logo after black screen
664
+
665
+ setTimeout(() => {
666
+ netflixGamesLogo.style.opacity = 0; // Fade out N
667
+ finalScreen.classList.add('visible'); // Show final screen with app store links
668
+ }, 4000); // Show final screen
669
+ }
670
+
671
+
672
+ // --- Event Handlers ---
673
+
674
+ egg.addEventListener('click', () => {
675
+ if (egg.classList.contains('hatching')) return;
676
+ egg.classList.add('hatching');
677
+ logToConsole("Egg is hatching...");
678
+ setTimeout(() => {
679
+ egg.remove(); // Remove the egg element
680
+ createThronglet(50, 50); // Spawn first Thronglet in the center
681
+ }, 1000); // Hatch after 1 second
682
+ });
683
+
684
+ apple.addEventListener('click', () => {
685
+ const activeThronglets = thronglets.filter(t => !t.isDead);
686
+ if (activeThronglets.length > 0) {
687
+ // Find the hungriest or a random one
688
+ const targetThronglet = activeThronglets.reduce((prev, current) => (prev.hunger > current.hunger) ? prev : current, activeThronglets[0]);
689
+ feedThronglet(targetThronglet);
690
+ } else {
691
+ logToConsole("No Thronglets to feed!");
692
+ }
693
+ });
694
+
695
+ bath.addEventListener('click', () => {
696
+ const activeThronglets = thronglets.filter(t => !t.isDead);
697
+ if (activeThronglets.length > 0) {
698
+ // Find the dirtiest or a random one
699
+ const targetThronglet = activeThronglets.reduce((prev, current) => (prev.cleanliness > current.cleanliness) ? prev : current, activeThronglets[0]);
700
+ cleanThronglet(targetThronglet);
701
+ } else {
702
+ logToConsole("No Thronglets to clean!");
703
+ }
704
+ });
705
+
706
+
707
+ // --- Game Loop ---
708
+ let gameInterval;
709
+
710
+ function startGameLoop() {
711
+ gameInterval = setInterval(updateThronglets, 500); // Update every 0.5 seconds
712
+ }
713
+
714
+ // --- Initial Setup ---
715
+ function initGame() {
716
+ // Hide game elements until title screen is gone
717
+ gameContainer.style.opacity = 0;
718
+ consoleDiv.style.opacity = 0;
719
+ ominousElements.style.opacity = 0;
720
+ finalScreen.style.opacity = 0;
721
+ fullBlack.style.opacity = 0;
722
+ netflixGamesLogo.style.opacity = 0;
723
+
724
+ // Listen for title screen click to start
725
+ titleScreen.addEventListener('click', () => {
726
+ titleScreen.style.opacity = 0;
727
+ setTimeout(() => {
728
+ titleScreen.style.display = 'none';
729
+ gameContainer.style.opacity = 1;
730
+ consoleDiv.style.opacity = 1;
731
+ logToConsole("Welcome to Thronglets!");
732
+ logToConsole("Tap the egg to hatch your first Thronglet.");
733
+ startGameLoop();
734
+ }, 2000); // Fade out title screen
735
+ });
736
+ logToConsole("Click anywhere on the screen to start."); // Initial console message behind title
737
+ }
738
+
739
+ // Start the game
740
+ initGame();
741
+
742
+
743
+ </script>
744
+ </body>
745
+ </html>