-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
986 lines (890 loc) · 41.8 KB
/
Copy pathindex.html
File metadata and controls
986 lines (890 loc) · 41.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Make a Cake with Me! - Naeun Kim (v2)</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendard-dynamic-subset.min.css" />
<style>
:root{
--bg:#fef6f8; /* pastel background */
--cake:#ffe6e6; /* pastel pink cake */
--icing:#fff9fc; /* light pink icing */
--plate:#f0f7ff; /* light blue plate */
--accent:#ffb5c9; /* soft pink accent */
--candle-colors: #ffd6e6, #c9f4ff, #ffecd6, #e8ffd6, #e5d6ff, #ffd6d6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
background: radial-gradient(1200px 600px at 50% 80%, #ffeef5 0%, #e9f5ff 60%, #fff6e9 100%);
color:#6a5d7b;
font-family: 'Pretendard Variable', Pretendard, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
overflow:hidden;
}
#hud{
position:fixed; left:16px; top:62px; padding:16px 18px; border-radius:16px;
background:rgba(255,255,255,0.82); backdrop-filter: blur(10px);
line-height:1.6; font-size:14px; max-width: 420px; color:#6a5d7b;
border:1px solid rgba(255,181,201,0.5); box-shadow:0 12px 30px rgba(122,90,120,0.15);
z-index:55;
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#hud.hidden{ opacity:0; transform: translateY(-6px); visibility:hidden; }
#hud strong{ font-size:15px; color:#c04b78; }
#hud .row{ display:flex; gap:8px; margin-top:7px; }
#hud .row .k{ flex:0 0 auto; }
#hud kbd{
background:#fff; border:1px solid #ffb5c9; color:#c04b78; font-weight:700;
padding:1px 7px; border-radius:7px; font-size:12px; box-shadow:0 1px 0 rgba(192,75,120,0.15);
}
#hud .mini{ font-size:12px; color:#a98fb0; margin-top:10px; }
#hud .fruit-keys{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(255,181,201,0.6); font-size:13px; line-height:1.9; }
#hud-toggle{
position:fixed; left:16px; top:16px; width:38px; height:38px; border-radius:12px;
background:rgba(255,255,255,0.85); border:1px solid rgba(255,181,201,0.6); color:#c04b78;
display:grid; place-items:center; cursor:pointer; font-weight:800; font-size:18px; user-select:none;
z-index:60; box-shadow:0 6px 16px rgba(122,90,120,0.18);
transition: transform .15s ease; backdrop-filter: blur(6px);
}
#hud-toggle:hover{ transform: scale(1.08); }
#stage{position:relative; width:100%; height:100%;}
/* Empty roof section removed */
/* Plate */
.plate{ position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
width: 56vw; height: 2.6vw; min-height:18px; background: var(--plate);
border-radius: 80px; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.35));
}
/* Cake body */
.cake{ position:absolute; left:50%; bottom:7.5%;
transform: translate(-50%, var(--cakeY, 0));
width: 48vw; max-width: 900px; min-width: 360px; height: 24vw; min-height: 240px;
background: linear-gradient(180deg, #ffeee8 0%, #ffe7de 30%, var(--cake) 100%);
border-radius: 24px; overflow:visible;
box-shadow:
inset 0 -20px 0 #ffb5c9,
inset 0 -40px 0 rgba(255, 181, 201, 0.6),
0 40px 80px rgba(0,0,0,0.15);
opacity: 1;
transition: transform .7s cubic-bezier(.25,.8,.25,1), opacity .6s ease;
will-change: transform, opacity;
}
/* Shell icing border at bottom */
.cake::after{
content:""; position:absolute; left:0; right:0; bottom:-8px; height: 32px;
background: linear-gradient(90deg, #ffb5c9 0%, #ffc9d4 25%, #ffb5c9 50%, #ffc9d4 75%, #ffb5c9 100%);
border-radius: 0 0 24px 24px;
background-image:
repeating-linear-gradient(90deg,
transparent 0px,
transparent 8px,
rgba(255,255,255,0.3) 8px,
rgba(255,255,255,0.3) 12px,
transparent 12px,
transparent 20px
),
radial-gradient(ellipse 15px 8px at 8% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(ellipse 12px 6px at 20% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(ellipse 18px 9px at 35% 45%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(ellipse 14px 7px at 50% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(ellipse 16px 8px at 65% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(ellipse 13px 6px at 80% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
radial-gradient(ellipse 15px 8px at 92% 45%, rgba(255,255,255,0.4) 0%, transparent 100%);
box-shadow:
inset 0 3px 0 rgba(255,255,255,0.2),
inset 0 -3px 0 rgba(255,181,201,0.4),
0 4px 8px rgba(0,0,0,0.1);
z-index: 2;
}
/* Cream waves on top */
.cake::before{
content:""; position:absolute; left:0; right:0; top:-8px; height: 24px;
background: linear-gradient(90deg, #fff9fc 0%, #ffeef5 50%, #fff9fc 100%);
border-radius: 50px;
background-image:
radial-gradient(ellipse 20px 8px at 15% 50%, rgba(255,255,255,0.8) 0%, transparent 70%),
radial-gradient(ellipse 25px 10px at 35% 50%, rgba(255,255,255,0.6) 0%, transparent 70%),
radial-gradient(ellipse 18px 7px at 55% 50%, rgba(255,255,255,0.8) 0%, transparent 70%),
radial-gradient(ellipse 22px 9px at 75% 50%, rgba(255,255,255,0.7) 0%, transparent 70%),
radial-gradient(ellipse 20px 8px at 90% 50%, rgba(255,255,255,0.8) 0%, transparent 70%);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
z-index: 1;
}
/* Candles */
.candle{
position:absolute;
bottom: calc(24vw + 15px);
width: 5px;
height: 180px; /* 더 길게 */
border-radius: 2.5px;
background:
repeating-linear-gradient(
45deg,
#fff 0px, #fff 6px,
transparent 6px, transparent 12px
),
linear-gradient(to bottom, var(--accent), #ffffff);
user-select:none;
transform-origin: bottom center;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.candle.lit {
filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.5));
}
.candle.lit::after {
content: "";
position: absolute;
top: -18px;
left: 50%;
width: 16px;
height: 20px;
transform: translateX(-50%);
background: radial-gradient(circle at center, #fff7c9 20%, #ffed4a 45%, transparent 70%);
border-radius: 50%;
animation: flicker 1s ease-in-out infinite alternate;
box-shadow:
0 0 15px 5px rgba(255, 237, 74, 0.4),
0 0 30px 15px rgba(255, 186, 66, 0.2);
}
@keyframes flicker {
0% { transform: translateX(-50%) scale(1); opacity: 0.9; }
100% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}
/* Falling bits (letters / toppings) — sizes increased 200% */
/* Doubled the font-sizes so letters and fruit emojis appear 200% larger */
.bit{ position:absolute; top:-40px; font-weight:700; font-size: clamp(32px, 3.2vw, 56px); user-select:none; }
.bit.letter{ color:#fff; text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 18px rgba(255,174,213,0.35);}
.bit.topping{ filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); font-size: clamp(40px, 3.6vw, 68px);}
.bit.giant{ font-size: clamp(128px, 14vw, 240px); }
/* Sprinkles doubled in pixel size for visual balance */
.sprinkle{ width:16px; height:16px; border-radius:50%; position:absolute; top:-10px; }
@keyframes fall { to { transform: translateY(var(--fallY, 86vh)); opacity: 1; } }
@keyframes eat { to { transform: translateX(120vw) rotate(8deg); opacity:0 } }
.falling{ animation: fall linear var(--dur,3.2s); }
.eaten{ animation: eat 900ms ease-in forwards; }
/* Room lighting when candles on - 더 어둡고 극적인 효과 */
.warm{
background: radial-gradient(1200px 600px at 50% 65%, #2a1a0d 0%, #1b1d29 40%, #2d1933 70%, #1a1a24 90%, var(--bg) 100%);
transition: background 0.5s cubic-bezier(.4,0,.2,1);
}
/* Guest hand */
.hand{ position:absolute; right:-20vw; top:40%; font-size: clamp(42px, 6vw, 100px); filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));}
/* Footer + Buttons */
#footer{ position:fixed; right:16px; bottom:14px; opacity:0.85; font-size:12px; color:#b7bfd8; }
.pill{
position:fixed; right:16px; bottom:46px; padding:10px 12px; border-radius:999px; cursor:pointer;
background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); user-select:none;
backdrop-filter: blur(6px); transition: transform .12s ease; font-size:13px; color:#e7eaf6;
}
.pill:active{ transform: translateY(1px); }
/* 완성 사진 버튼 — accent 강조 */
#photoBtn{
bottom: 46px;
background: linear-gradient(180deg, #ffb5c9, #ff89aa);
border: 1px solid rgba(255,255,255,0.5);
color:#fff; font-weight:800; box-shadow: 0 6px 18px rgba(255,137,170,0.4);
}
/* ===== Polaroid ending ===== */
.polaroid-overlay{
position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
background:rgba(24,14,32,0); backdrop-filter:blur(0px);
transition:background .5s ease, backdrop-filter .5s ease;
}
.polaroid-overlay.show{ background:rgba(24,14,32,0.55); backdrop-filter:blur(4px); }
.polaroid{
position:relative; background:#fffef9;
padding:18px 18px 64px; border-radius:6px;
box-shadow:0 30px 70px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);
opacity:0; will-change:transform, opacity;
transition:transform .8s cubic-bezier(.18,.9,.28,1.25), opacity .45s ease;
}
.polaroid .photo{
position:relative; overflow:hidden; border-radius:2px; background:#ffeef5;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.polaroid-caption{
position:absolute; left:0; right:0; bottom:18px; text-align:center;
font-family:'Snell Roundhand','Segoe Script','Apple Chancery',cursive; color:#6a5d7b;
}
.polaroid-caption .t{ font-size:24px; font-weight:700; }
.polaroid-caption .d{ font-size:12px; opacity:.55; margin-top:3px; letter-spacing:.06em; font-family: ui-sans-serif, system-ui; }
.polaroid-actions{
position:fixed; left:50%; bottom:6vh; transform:translateX(-50%);
display:flex; gap:12px; z-index:10001; opacity:0;
transition:opacity .4s ease .45s;
}
.polaroid-actions.show{ opacity:1; }
.polaroid-actions button{
padding:11px 18px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:700;
border:1px solid rgba(255,255,255,0.5); color:#6a5d7b;
background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
box-shadow:0 6px 18px rgba(0,0,0,0.2); transition:transform .12s ease;
}
.polaroid-actions button:active{ transform:translateY(1px); }
.polaroid-actions button:disabled{ opacity:.6; cursor:default; }
/* camera flash */
.flash{ position:fixed; inset:0; background:#fff; z-index:10002; opacity:0; pointer-events:none; }
.flash.go{ animation:flash .5s ease-out forwards; }
@keyframes flash{ 0%{opacity:0} 12%{opacity:.9} 100%{opacity:0} }
/* celebration sparkles */
.pop{ position:fixed; z-index:10001; pointer-events:none; font-size:30px;
animation:pop 1s ease-out forwards; }
@keyframes pop{
0%{ transform:scale(0) rotate(0deg); opacity:0 }
30%{ transform:scale(1.2) rotate(18deg); opacity:1 }
100%{ transform:scale(.8) translateY(-34px) rotate(-8deg); opacity:0 }
}
/* 촛불 끌 때 연기 */
.smoke{
position:absolute; width:11px; height:11px; border-radius:50%;
background: radial-gradient(circle, rgba(150,150,160,0.55) 0%, rgba(150,150,160,0) 70%);
transform: translate(-50%,0); pointer-events:none; z-index:50;
animation: smoke 1.5s ease-out forwards;
}
@keyframes smoke{
0% { opacity:0; transform: translate(-50%, 0) scale(0.5); }
20% { opacity:0.85; }
100% { opacity:0; transform: translate(calc(-50% + var(--sx, 0px)), -78px) scale(2.8); }
}
/* ===== 과적 뭉개짐(mess) ===== */
/* 케이크가 무게에 눌려 흐물흐물 짜부된 모양 (lumpy border-radius) */
.cake.messy{
border-radius: 30px 22px 64px 52px / 26px 20px 92px 70px;
box-shadow:
inset 0 -22px 0 #ffb5c9,
inset 0 -44px 0 rgba(255,181,201,0.55),
0 30px 60px rgba(0,0,0,0.18);
filter: saturate(1.03);
}
@keyframes quake{
0%,100%{ transform:translate(0,0) }
15%{ transform:translate(-5px,2px) } 30%{ transform:translate(5px,-2px) }
45%{ transform:translate(-4px,2px) } 60%{ transform:translate(4px,-1px) }
80%{ transform:translate(-2px,1px) }
}
.quake{ animation: quake .45s ease; }
</style>
</head>
<body>
<div id="hud-toggle" title="도움말 다시 보기">?</div>
<div id="hud">
<div><strong>🎂 Make a Cake with Me! — Naeun Kim</strong></div>
<div class="row"><span class="k"><kbd>글자</kbd></span><span>케이크 위에 층층이 쌓여요</span></div>
<div class="row"><span class="k"><kbd>숫자</kbd></span><span>알록달록 스프링클</span></div>
<div class="row"><span class="k"><kbd>과일 키</kbd></span><span>아래 목록 참고 (영문·한글 초성 모두 OK)</span></div>
<div class="row"><span class="k"><kbd>특수문자</kbd></span><span>길쭉한 초 꽂기</span></div>
<div class="row"><span class="k"><kbd>Space</kbd></span><span>촛불 켜기 / 끄기</span></div>
<div class="row"><span class="k"><kbd>Enter</kbd></span><span>완성! 폴라로이드로 남기고 저장 📸</span></div>
<div class="fruit-keys">
🍓 <kbd>S</kbd><kbd>ㄸ</kbd> · 🍎 <kbd>A</kbd><kbd>ㅅ</kbd> · 🫐 <kbd>B</kbd><kbd>ㅂ</kbd> · 🍒 <kbd>C</kbd><kbd>ㅊ</kbd> · 🍇 <kbd>G</kbd><kbd>ㅍ</kbd><br>
🥭 <kbd>M</kbd><kbd>ㅁ</kbd> · 🥝 <kbd>K</kbd><kbd>ㅋ</kbd> · 🍑 <kbd>P</kbd> · 🍊 <kbd>O</kbd><kbd>ㅇ</kbd> · 🍋 <kbd>L</kbd><kbd>ㄹ</kbd>
</div>
<div class="mini">언제든 왼쪽 위 <strong>?</strong> 아이콘을 누르면 이 안내가 다시 열려요</div>
</div>
<div id="stage">
<div class="roof" aria-hidden="true"></div>
<div class="plate"></div>
<div id="cake" class="cake" aria-label="cake"></div>
</div>
<button id="photoBtn" class="pill" title="완성! 폴라로이드로 남기기">📸 완성! 사진</button>
<div id="happyBirthday" style="display:none;position:absolute;top:10vw;left:50%;transform:translateX(-50%);font-size:3vw;font-weight:bold;color:#ff69b4;text-shadow:0 2px 8px #fff,0 0 20px #ff69b4;z-index:999;">Happy Birthday!</div>
<div id="footer">type to play • made for ID202 prototyping</div>
<script>
// === Fruit count & label logic ===
const fruitCounts = {};
const fruitName = {
'🍋': {en:'Lemon', ko:'레몬'}, '🍓': {en:'Strawberry', ko:'딸기'},
'🫐': {en:'Blueberry', ko:'블루베리'}, '🍎': {en:'Apple', ko:'사과'},
'🍒': {en:'Cherry', ko:'체리'}, '🍇': {en:'Grape', ko:'포도'},
'🥭': {en:'Mango', ko:'망고'}, '🥝': {en:'Kiwi', ko:'키위'},
'🍑': {en:'Peach', ko:'복숭아'}, '🍊': {en:'Orange', ko:'오렌지'},
'🍉': {en:'Watermelon', ko:'수박'}
};
function noteFruit(emoji){ fruitCounts[emoji]=(fruitCounts[emoji]||0)+1; }
function topFruits(){
const entries = Object.entries(fruitCounts);
if (!entries.length) return [];
const max = Math.max(...entries.map(([,c])=>c));
return entries.filter(([,c])=>c===max).map(([e])=>e);
}
function labelForBox(lang='ko'){
const tops = topFruits();
if (tops.length === 0) return {title: (lang==='ko'?'하우스 케이크':'House Cake'), sub:''};
if (tops.length === 1){
const n = fruitName[tops[0]]?.[lang] || tops[0];
return {title: (lang==='ko'? `${n} 케이크!` : `${n} Cake!`),
sub: (lang==='ko'?'오늘의 픽':'most-picked fruit today')};
}
if (tops.length === 2){
const a=fruitName[tops[0]]?.[lang]||tops[0], b=fruitName[tops[1]]?.[lang]||tops[1];
return {title: (lang==='ko'? `${a}·${b} 듀엣` : `${a} & ${b} Duet Cake`),
sub: (lang==='ko'?'두 가지가 나란히':'a lovely two-fruit duet')};
}
// 3개 이상
return {title: (lang==='ko'?'프룻 믹스 케이크':'Fruit Medley Cake'),
sub: (lang==='ko'?'여러 과일의 하모니':'a harmony of fruits')};
}
// ===== Audio — tiny synth & candle pad =====
const AudioCtx = window.AudioContext || window.webkitAudioContext;
let audioContext = null;
function getAudioContext(){ if(!audioContext) audioContext = new AudioCtx(); return audioContext; }
function noteForKey(key){
const scale = [261.63, 293.66, 329.63, 392.00, 440.00]; // C D E G A
const index = (key.toUpperCase().charCodeAt(0) + 7) % scale.length;
return scale[index] * (1 + ((key.charCodeAt(0)%5)-2)*0.01);
}
function blip(key){
const ac = getAudioContext();
const osc = ac.createOscillator();
const gain = ac.createGain();
osc.type = 'triangle';
osc.frequency.value = noteForKey(key);
gain.gain.value = 0.001;
osc.connect(gain).connect(ac.destination);
const now = ac.currentTime;
gain.gain.linearRampToValueAtTime(0.12, now + 0.01);
gain.gain.exponentialRampToValueAtTime(0.0008, now + 0.22);
osc.start();
osc.stop(now + 0.25);
}
let candleOsc = null, candleGain = null;
function candleOn(){
const ac = getAudioContext();
candleOsc = ac.createOscillator();
candleGain = ac.createGain();
candleOsc.type = 'sine';
candleOsc.frequency.value = 196;
candleGain.gain.value = 0.0001;
candleOsc.connect(candleGain).connect(ac.destination);
const now = ac.currentTime;
candleGain.gain.linearRampToValueAtTime(0.06, now + 0.6);
candleOsc.start();
// Happy Birthday! 노출: 실제 케이크에 초가 있을 때만 표시
setTimeout(()=>{
if(document.querySelector('.candle')){
document.getElementById('happyBirthday').style.display = 'block';
}
}, 100);
}
function candleOff(){
if(!candleGain || !candleOsc) return;
const ac = getAudioContext();
const now = ac.currentTime;
candleGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.2);
candleOsc.stop(now + 0.25);
candleGain = null; candleOsc = null;
// Happy Birthday! 숨김
document.getElementById('happyBirthday').style.display = 'none';
}
// ===== Scene =====
const stage = document.getElementById('stage');
let cake = document.getElementById('cake');
const hud = document.getElementById('hud');
const hudToggle = document.getElementById('hud-toggle');
let candlesLit = false;
const randomBetween = (min,max)=> Math.random()*(max-min)+min;
function cakeRect(){ return cake.getBoundingClientRect(); }
function getRandomXOnCake() {
const cr = cakeRect();
return cr.left + (cr.width * 0.15) + Math.random() * (cr.width * 0.7);
}
// Candle specific functions
function placeCandleOnCake(candle) {
const cr = cakeRect();
const colors = getComputedStyle(document.documentElement)
.getPropertyValue('--candle-colors').split(',');
const color = colors[Math.floor(Math.random() * colors.length)].trim();
candle.style.background = `linear-gradient(to bottom, ${color}, #ffffff)`;
const x = cr.left + (cr.width * (Math.random() * 0.6 + 0.2));
candle.style.left = x + 'px';
candle.style.transform = `rotate(${randomBetween(-2, 2)}deg)`;
candle.classList.remove('falling');
}
// initialize after layout
window.addEventListener('load', ()=> {});
window.addEventListener('resize', ()=> {});
// ===== Candles =====
function placeCandles(){
[...document.querySelectorAll('.candle')].forEach(c=>c.remove());
const cr = cakeRect();
const count = 5;
for(let i=0;i<count;i++){
const c = document.createElement('div');
c.className = 'candle';
c.innerHTML = '';
const x = (cr.left + (cr.width*(0.15 + i*(0.7/(count-1))))) - 14;
c.style.left = x + 'px';
stage.appendChild(c);
}
}
// 촛불을 끌 때 심지에서 연기가 스르륵 피어오름
function puffSmoke(candle){
const cr = candle.getBoundingClientRect();
const stageRect = stage.getBoundingClientRect();
const x = cr.left + cr.width/2 - stageRect.left;
const y = cr.top - stageRect.top - 4; // 심지 끝(불꽃 자리) 근처
for(let i=0;i<3;i++){
const s = document.createElement('div');
s.className = 'smoke';
s.style.left = x + 'px';
s.style.top = y + 'px';
s.style.setProperty('--sx', randomBetween(-16, 16).toFixed(0) + 'px');
s.style.animationDelay = (i * 0.12).toFixed(2) + 's';
stage.appendChild(s);
s.addEventListener('animationend', ()=> s.remove());
}
}
function toggleCandles(){
candlesLit = !candlesLit;
if(candlesLit){
placeCandles();
document.body.classList.add('warm');
candleOn();
} else {
document.body.classList.remove('warm');
candleOff();
[...document.querySelectorAll('.candle')].forEach(c=>c.remove());
}
}
// ===== 과적 뭉개짐(mess) =====
let messy = false;
const MESS_LIMIT = 140; // .bit(토핑+글자)이 이만큼 쌓이면 케이크가 무너짐
const SQUASH_X = 1.05, SQUASH_Y = 0.86; // 짜부 정도
// 한 조각을 케이크 표면 근처로 낮게 뭉치듯 흘려보냄 (무너지는 연출)
function slumpEl(el, pileBase){
const rot = randomBetween(-42, 42);
const dx = randomBetween(-16, 16);
el.style.transition = 'top .55s cubic-bezier(.34,1.25,.64,1), transform .55s ease';
el.style.top = (pileBase - randomBetween(0, 40)) + 'px';
el.style.transform = `translateX(${dx}px) rotate(${rot}deg)`;
el.dataset.landRot = rot; // 폴라로이드 재고정 시 유지
}
// 케이크 표면 top(stage 기준) — messy면 짜부된 실제 표면
function surfaceTopNow(){
const cr = cakeRect();
return (cr.top + 20) - stage.getBoundingClientRect().top;
}
function collapseCake(){
if(messy) return;
messy = true;
// 짜부 전 좌표로 무너질 기준선 계산 (transform 적용 전이 정확)
const cr = cakeRect();
const surfaceTop = (cr.top + 20) - stage.getBoundingClientRect().top;
const pileBase = surfaceTop + cr.height * (1 - SQUASH_Y);
// 케이크 짜부 + 흔들림
cake.classList.add('messy');
cake.style.transformOrigin = 'bottom center';
cake.style.transition = 'transform .5s cubic-bezier(.34,1.5,.55,1)';
cake.style.transform = `translate(-50%, 0) scaleX(${SQUASH_X}) scaleY(${SQUASH_Y})`;
// 이미 놓인 토핑/스프링클 와르르
document.querySelectorAll('.bit:not(.falling), .sprinkle:not(.falling)')
.forEach(el => slumpEl(el, pileBase));
stage.classList.add('quake');
setTimeout(()=> stage.classList.remove('quake'), 480);
}
// ===== Spawn helpers =====
function spawnBit({ text, className, emoji, color, fromRoof=false, giant=false, group=false, node=null }){
const bit = node || document.createElement('div');
bit.className = 'bit falling ' + (className||'');
if(giant) bit.classList.add('giant');
bit.style.setProperty('--dur', (randomBetween(2.0, 3.6)).toFixed(2)+'s');
if(emoji){
bit.textContent = emoji;
if(className==='topping') noteFruit(emoji);
}
else if(text){ bit.textContent = text; }
if(color){ bit.style.color = color; }
bit.style.opacity = 0.96;
// 먼저 stage에 붙여 실제 폭(offsetWidth)을 잰다
stage.appendChild(bit);
// ===== 케이크 가로 범위 안에서만 생성 — 이모지 실제 폭까지 고려해 통째로 케이크 안에 =====
const stageRect = stage.getBoundingClientRect();
const cr = cakeRect();
const bitW = bit.offsetWidth || 40;
const margin = 10;
let minX = (cr.left - stageRect.left) + margin;
let maxX = (cr.right - stageRect.left) - bitW - margin;
if(maxX < minX){ // 이모지가 케이크보다 넓으면 중앙 정렬
minX = maxX = ((cr.left + cr.right) / 2 - stageRect.left) - bitW / 2;
}
const startX = randomBetween(minX, maxX);
bit.style.left = startX + 'px';
// ===== 착지 위치를 생성 시점에 한 번 확정 (떨어진 그 자리에 그대로 멈춤) =====
let bitHeight = bit.offsetHeight || 40;
if(bit.classList.contains('giant')) bitHeight = 120;
else if(bit.classList.contains('topping')) bitHeight = 68;
const surfaceTop = (cr.top + 20) - stageRect.top; // stage 기준 케이크 표면 top
const myCenterX = stageRect.left + startX + (bitW / 2); // viewport 기준 중앙 X
// 같은 열(X)에 있는 조각 수 — 낙하 중인 것도 포함해 자리를 미리 확보(겹침 방지)
const stackCount = Array.from(document.querySelectorAll('.bit')).filter(b => {
if(b === bit) return false;
const bx = b.getBoundingClientRect().left + b.offsetWidth / 2;
return Math.abs(bx - myCenterX) < 24;
}).length;
// 한 층마다 60%씩 겹쳐 위로 쌓임
const restingTop = surfaceTop - stackCount * (bitHeight * 0.6);
bit.dataset.restingTop = restingTop;
// 시작 지점(top:-40)에서 restingTop까지 정확히 떨어지도록 --fallY 설정
const startTopPx = parseFloat(getComputedStyle(bit).top) || -40;
bit.style.setProperty('--fallY', `${restingTop - startTopPx}px`);
// 착지 회전 / z-index (위에 쌓인 것일수록 앞)
bit.dataset.landRot = randomBetween(-12, 12);
bit.style.zIndex = 100 + stackCount;
bit.addEventListener('animationend', ()=> {
// 떨어진 그 자리에 그대로 고정 — 재계산으로 인한 점프 없음
bit.style.top = bit.dataset.restingTop + 'px';
bit.style.transform = `rotate(${bit.dataset.landRot}deg)`;
bit.style.animation = 'none';
bit.classList.remove('falling');
// 이미 뭉개진 케이크면 새로 놓인 조각도 흐트러뜨림
if(messy) slumpEl(bit, surfaceTopNow());
});
// 과적 시 케이크 무너뜨리기 (토핑+글자 기준)
if(!messy && document.querySelectorAll('.bit').length >= MESS_LIMIT){
collapseCake();
}
// Optional group cascade (3 quick neighbors)
if(group){
for(let i=0;i<3;i++){
setTimeout(()=>{
spawnBit({ text, className, emoji, color, fromRoof:true });
}, 120 + i*80);
}
}
}
// 파스텔톤 색상 팔레트 - 스프링클과 글자에 공통으로 사용
const pastelPalette = ['#ff7a99','#ffd166','#8be9fd','#c2ff8f','#b197fc','#ffb5c9','#c9f4ff','#ffecd6'];
function sprinkle(){
const s = document.createElement('div');
s.className = 'sprinkle falling';
s.style.background = pastelPalette[Math.floor(randomBetween(0, pastelPalette.length))];
s.style.setProperty('--dur', (randomBetween(1.6, 2.6)).toFixed(2)+'s');
stage.appendChild(s);
// 케이크 가로 범위 안에서만 (스프링클 폭 고려)
const stageRect = stage.getBoundingClientRect();
const cr = cakeRect();
const sw = s.offsetWidth || 16;
const margin = 10;
const minX = (cr.left - stageRect.left) + margin;
const maxX = (cr.right - stageRect.left) - sw - margin;
const startX = randomBetween(minX, maxX);
s.style.left = startX + 'px';
// 착지 위치를 생성 시점에 확정 (떨어진 그 자리에 그대로 멈춤)
const surfaceTop = (cr.top + 20) - stageRect.top;
const myCenterX = stageRect.left + startX + (sw / 2);
const stackCount = Array.from(document.querySelectorAll('.sprinkle')).filter(b => {
if(b === s) return false;
const bx = b.getBoundingClientRect().left + b.offsetWidth / 2;
return Math.abs(bx - myCenterX) < 18;
}).length;
const restingTop = surfaceTop - stackCount * (s.offsetHeight * 0.6);
s.dataset.restingTop = restingTop;
const startTopPx = parseFloat(getComputedStyle(s).top) || -10;
s.style.setProperty('--fallY', `${restingTop - startTopPx}px`);
s.dataset.landRot = randomBetween(-15, 15);
s.style.zIndex = 100 + stackCount;
s.addEventListener('animationend', ()=> {
s.style.top = s.dataset.restingTop + 'px';
s.style.transform = `rotate(${s.dataset.landRot}deg)`;
s.style.animation = 'none';
s.classList.remove('falling');
if(messy) slumpEl(s, surfaceTopNow());
});
}
// ===== Polaroid ending (완성 사진) =====
// 새 케이크를 stage에 부드럽게 등장시키고 전역 cake 참조를 갱신
function createFreshCake(){
const newCake = document.createElement('div');
newCake.id = 'cake';
newCake.className = 'cake';
newCake.setAttribute('aria-label', 'cake');
newCake.style.opacity = '0';
newCake.style.transition = 'none';
newCake.style.transform = 'translate(-50%, -40vh)';
newCake.style.left = '50%';
newCake.style.bottom = '7.5%';
newCake.style.position = 'absolute';
stage.appendChild(newCake);
requestAnimationFrame(()=> setTimeout(()=>{
newCake.style.transition = 'transform .7s cubic-bezier(.25,.8,.25,1), opacity .8s';
newCake.style.transform = 'translate(-50%, 0)';
newCake.style.opacity = '1';
setTimeout(()=>{ newCake.style.transition = ''; }, 900);
}, 60));
cake = newCake;
messy = false; // 새 케이크는 멀쩡한 상태로
Object.keys(fruitCounts).forEach(key => delete fruitCounts[key]);
}
// html2canvas 지연 로드 (저장 눌렀을 때만)
let html2canvasPromise = null;
function loadHtml2Canvas(){
if(window.html2canvas) return Promise.resolve();
if(html2canvasPromise) return html2canvasPromise;
html2canvasPromise = new Promise((res, rej)=>{
const s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
s.onload = ()=> res();
s.onerror = ()=> rej(new Error('html2canvas load failed'));
document.head.appendChild(s);
});
return html2canvasPromise;
}
function capturePolaroid(){
if(document.querySelector('.polaroid-overlay')) return; // 중복 방지
// 뭉개진 케이크면 측정 동안 짜부를 잠시 원복(자연 크기로 배치 후 프레임에서 재적용)
const isMessy = cake.classList.contains('messy');
if(isMessy) cake.style.transform = 'translate(-50%, 0)';
const cakeRectNow = cake.getBoundingClientRect();
const plate = document.querySelector('.plate');
const plateRect = plate.getBoundingClientRect();
const deco = [...document.querySelectorAll('.bit,.sprinkle,.candle')];
// 케이크 + 접시 + 토핑을 감싸는 합집합 바운딩 박스
let minL = Math.min(cakeRectNow.left, plateRect.left);
let minT = cakeRectNow.top;
let maxR = Math.max(cakeRectNow.right, plateRect.right);
let maxB = Math.max(cakeRectNow.bottom, plateRect.bottom);
deco.forEach(n=>{
const r = n.getBoundingClientRect();
minL = Math.min(minL, r.left); minT = Math.min(minT, r.top);
maxR = Math.max(maxR, r.right); maxB = Math.max(maxB, r.bottom);
});
const padSide = 44, padTop = 64, padBottom = 28; // padTop: 초 불꽃 여유
const originX = minL - padSide;
const originY = minT - padTop;
const photoW = (maxR - minL) + padSide*2;
const photoH = (maxB - minT) + padTop + padBottom;
// 카메라 플래시 "찰칵"
const flash = document.createElement('div');
flash.className = 'flash go';
document.body.appendChild(flash);
setTimeout(()=> flash.remove(), 600);
// 오버레이 + 폴라로이드 프레임
const overlay = document.createElement('div'); overlay.className = 'polaroid-overlay';
const polaroid = document.createElement('div'); polaroid.className = 'polaroid';
const photo = document.createElement('div'); photo.className = 'photo';
photo.style.width = photoW + 'px';
photo.style.height = photoH + 'px';
photo.style.background = document.body.classList.contains('warm')
? 'radial-gradient(120% 120% at 50% 30%, #3a2418 0%, #241c2e 45%, #33203a 75%, #1e1e28 100%)'
: 'radial-gradient(120% 120% at 50% 20%, #ffeef5 0%, #eaf3ff 55%, #fff4e6 100%)';
polaroid.appendChild(photo);
// 접시는 복제(원본은 씬에 남겨둠), 케이크·토핑은 실제로 이동
const plateClone = plate.cloneNode(true);
Object.assign(plateClone.style, {
position:'absolute', left:(plateRect.left - originX)+'px', top:(plateRect.top - originY)+'px',
bottom:'auto', transform:'none'
});
photo.appendChild(plateClone);
cake.style.position = 'absolute';
cake.style.left = (cakeRectNow.left - originX) + 'px';
cake.style.top = (cakeRectNow.top - originY) + 'px';
cake.style.bottom = 'auto';
cake.style.transformOrigin = 'bottom center';
cake.style.transform = isMessy ? `scaleX(${SQUASH_X}) scaleY(${SQUASH_Y})` : 'none';
photo.appendChild(cake);
deco.forEach(n=>{
const r = n.getBoundingClientRect();
n.style.position = 'absolute';
n.style.left = (r.left - originX) + 'px';
n.style.top = (r.top - originY) + 'px';
photo.appendChild(n);
});
// 캡션 (뭉개졌으면 전용 문구, 아니면 과일 기반 타이틀)
const title = isMessy ? '와장창 케이크 💥' : labelForBox('ko').title;
const subtxt = isMessy ? '너무 사랑해서 그만…' : 'made with love';
const d = new Date();
const dateStr = `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
const cap = document.createElement('div'); cap.className = 'polaroid-caption';
cap.innerHTML = `<div class="t">${title}</div><div class="d">${dateStr} · ${subtxt}</div>`;
polaroid.appendChild(cap);
overlay.appendChild(polaroid);
document.body.appendChild(overlay);
// 화면에 맞게 스케일 계산 (기울임 포함)
const polW = photoW + 36;
const polH = photoH + 18 + 64;
const fit = Math.min(1, (window.innerWidth*0.9)/polW, (window.innerHeight*0.82)/polH);
polaroid.style.transform = `translateY(-40px) rotate(-8deg) scale(${(0.7*fit).toFixed(3)})`;
// 액션 버튼
const actions = document.createElement('div'); actions.className = 'polaroid-actions';
const saveBtn = document.createElement('button'); saveBtn.textContent = '💾 이미지 저장';
const againBtn = document.createElement('button'); againBtn.textContent = '🎂 다시 만들기';
actions.appendChild(saveBtn); actions.appendChild(againBtn);
document.body.appendChild(actions);
// 등장 애니메이션
requestAnimationFrame(()=>{
overlay.classList.add('show');
polaroid.style.opacity = '1';
polaroid.style.transform = `translateY(0) rotate(-4deg) scale(${fit.toFixed(3)})`;
actions.classList.add('show');
});
// 반짝이 파티클
const cx = window.innerWidth/2, cy = window.innerHeight/2;
['✨','🎉','✨','💛','✨','🎊'].forEach((em, i)=>{
setTimeout(()=>{
const p = document.createElement('div'); p.className = 'pop'; p.textContent = em;
const ang = (i/6)*Math.PI*2, rad = 150 + Math.random()*80;
p.style.left = (cx + Math.cos(ang)*rad) + 'px';
p.style.top = (cy + Math.sin(ang)*rad) + 'px';
document.body.appendChild(p);
setTimeout(()=> p.remove(), 1000);
}, 200 + i*90);
});
// 저장
saveBtn.addEventListener('click', async ()=>{
saveBtn.disabled = true;
const label = saveBtn.textContent;
saveBtn.textContent = '저장 중…';
try{
await loadHtml2Canvas();
const canvas = await html2canvas(polaroid, { backgroundColor:null, scale:2, useCORS:true });
const a = document.createElement('a');
a.download = `cake_${dateStr.replace(/\./g,'')}.png`;
a.href = canvas.toDataURL('image/png');
a.click();
saveBtn.textContent = '✅ 저장됨!';
setTimeout(()=>{ saveBtn.textContent = label; saveBtn.disabled = false; }, 1600);
}catch(err){
saveBtn.textContent = '⚠️ 저장 실패 (오프라인?)';
setTimeout(()=>{ saveBtn.textContent = label; saveBtn.disabled = false; }, 2400);
}
});
// 닫기 + 새 케이크
function closePolaroid(){
overlay.classList.remove('show');
actions.classList.remove('show');
polaroid.style.opacity = '0';
polaroid.style.transform = `translateY(30px) rotate(-4deg) scale(${(0.85*fit).toFixed(3)})`;
setTimeout(()=>{ overlay.remove(); actions.remove(); }, 500);
document.body.classList.remove('warm');
candleOff();
candlesLit = false;
createFreshCake();
}
againBtn.addEventListener('click', closePolaroid);
overlay.__close = closePolaroid; // Escape에서 접근
}
// ===== Input handling + playful surprises =====
const toppingMap = { 's':'🍓','a':'🍎','b':'🫐','c':'🍒','g':'🍇','m':'🥭','k':'🥝','p':'🍑','o':'🍊','l':'🍋' };
// 한글 초성 → 과일 (ㄹ=레몬, ㅅ=사과, ㄸ=딸기 …). 완성형 음절은 초성을 뽑아 매핑.
const hangulToppingMap = {
'ㄹ':'🍋','ㄸ':'🍓','ㅅ':'🍎','ㅆ':'🍎','ㅂ':'🫐','ㅃ':'🫐',
'ㅊ':'🍒','ㅍ':'🍇','ㅁ':'🥭','ㅋ':'🥝','ㅇ':'🍊'
};
const CHOSEONG = ['ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ'];
function hangulChoseong(ch){
if(!ch || ch.length !== 1) return null;
const code = ch.charCodeAt(0);
if(code >= 0xAC00 && code <= 0xD7A3) return CHOSEONG[Math.floor((code - 0xAC00) / 588)]; // 완성형
if(hangulToppingMap[ch] !== undefined) return ch; // 단독 자모(호환 자모)
return null;
}
function handleKeyDown(e){
// 폴라로이드가 떠 있는 동안엔 입력을 막고 Escape로만 닫기
const overlay = document.querySelector('.polaroid-overlay');
if(overlay){
if(e.key === 'Escape' && overlay.__close) overlay.__close();
return;
}
// Enter → 완성 사진(폴라로이드)
if(e.key === 'Enter'){
e.preventDefault();
capturePolaroid();
return;
}
if(audioContext && audioContext.state === 'suspended') audioContext.resume();
if(e.key === '?' || (e.shiftKey && e.key === '/')){ hud.classList.toggle('hidden'); return; }
// Space toggles candle lights (끄는 순간엔 연기 피어오름)
if(e.key === ' '){
e.preventDefault();
document.querySelectorAll('.candle').forEach(c => {
const wasLit = c.classList.contains('lit');
c.classList.toggle('lit');
if(wasLit) puffSmoke(c);
});
return;
}
// Special characters create candles (long stick candle)
if(/^[\[\]\\;'\/,`~!@#$%^&*()_+{}|:\"<>?]$/.test(e.key)){
const candle = document.createElement('div');
candle.className = 'candle';
// 착지 위치 계산
const cr = cakeRect();
// 케이크 가로 범위 내에서만 랜덤 X좌표
const cakeLeft = cr.left;
const cakeRight = cr.right;
const candleWidth = 5; // .candle CSS width
const startX = randomBetween(cakeLeft, cakeRight - candleWidth);
candle.style.left = startX + 'px';
// 캔들 높이 고려해서 아랫부분이 케이크 표면에 닿게 보정
const candleHeight = 140; // .candle CSS height
const surfaceY = cr.top + 20;
const targetY_vp = surfaceY - candleHeight;
const stageTop = stage.getBoundingClientRect().top;
const finalTop = (targetY_vp - stageTop);
candle.style.top = `${finalTop}px`;
candle.style.opacity = 0.96;
// 색상 다양화: 파스텔 팔레트에서 랜덤
const pastelPalette = ['#ff7a99','#ffd166','#8be9fd','#c2ff8f','#b197fc','#ffb5c9','#c9f4ff','#ffecd6'];
const pastelColor = pastelPalette[Math.floor(Math.random() * pastelPalette.length)];
candle.style.background = `linear-gradient(to bottom, ${pastelColor}, #ffffff)`;
// z-index
candle.style.zIndex = Math.floor(Math.random() * 100);
stage.appendChild(candle);
blip(e.key);
return;
}
// Numbers → sprinkles
if(/[0-9]/.test(e.key)){ sprinkle(); blip(e.key); return; }
const keyLower = e.key.toLowerCase();
// Fruits via explicit hotkeys only
if(toppingMap[keyLower]){
const emo = toppingMap[keyLower];
spawnBit({ emoji: emo, className:'topping', fromRoof: Math.random()<0.5 });
blip(keyLower);
return;
}
// 한글 초성 → 과일 (ㄹ→🍋 등). 완성형 음절/단독 자모 모두 처리
const cho = hangulChoseong(e.key);
if(cho && hangulToppingMap[cho]){
spawnBit({ emoji: hangulToppingMap[cho], className:'topping', fromRoof: Math.random()<0.5 });
blip(e.key);
return;
}
// Letters and symbols → falling letters (sometimes with pastel colors)
if(e.key.length === 1){
// 20% 확률로 파스텔 색상 적용
const color = Math.random() < 0.2 ? pastelPalette[Math.floor(Math.random() * pastelPalette.length)] : null;
spawnBit({ text: e.key, className:'letter', fromRoof: Math.random()<0.6, color: color });
blip(e.key);
return;
}
// Backspace removes last landed element
if(e.key === 'Backspace'){
const bits = [...document.querySelectorAll('.bit')];
if(bits.length){
const last = bits[bits.length-1];
// 과일이면 카운트도 함께 줄여 캡션이 실제 케이크와 일치하게
if(last.classList.contains('topping')){
const emo = last.textContent;
if(fruitCounts[emo]){
fruitCounts[emo]--;
if(fruitCounts[emo] <= 0) delete fruitCounts[emo];
}
}
last.remove();
}
return;
}
}
// HUD 토글 (? 아이콘) — 클릭할 때마다 안내 열기/닫기, 처음엔 잠깐 보여준 뒤 접힘
hudToggle.addEventListener('click', ()=> hud.classList.toggle('hidden'));
setTimeout(()=> hud.classList.add('hidden'), 5200);
// Photo (완성) pill button
document.getElementById('photoBtn').addEventListener('click', capturePolaroid);
window.addEventListener('keydown', handleKeyDown);
// Reposition candles on resize
window.addEventListener('resize', ()=>{ if(candlesLit) placeCandles(); });
</script>
</body>
</html>