-
Notifications
You must be signed in to change notification settings - Fork 1
/
6th_floor.html
1121 lines (921 loc) · 61 KB
/
6th_floor.html
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
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/loader.css">
<link rel="stylesheet" type="text/css" href="./css/6th_floor.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+KR:400,700&display=swap&subset=korean" rel="stylesheet">
<script src="https://kit.fontawesome.com/296406b34b.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="script/jquery.ui.touch-punch.min.js"></script>
<script src="script/loader.js"></script>
<title>센티멘탈 호텔 ::: 6층 객실</title>
</head>
<body>
<div class="container">
<div id="fade-box" class="fade-box"></div>
<div id="reset-bg" class="transparent-background"></div>
<div id="room-bg" class="transparent-background"></div>
<div class="dialogue-box"></div>
<audio>
<source src="sound/knocking sound.mp3" type="audio/mpeg">
</audio>
<div class="reset">
<i class="fas fa-redo-alt icon reset-icon gifhover"></i>
<div class="dialogue-box-reset">
<h1 class="name"> </h1>
<p class="line top-line first-line">게임을 재시작하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines"><a id="reset" href="index.html"><span class="clicker clicker-reset-1">✔️ 예</span></a></p>
<p class="line bottom-line fast-no-line next-line"><span class="clicker clicker-reset-2">❌ 아니오</span></p>
</div>
</div>
<!-- preloader -->
<div class="preloader">
<div class="circle"></div>
<div class="chain__upwards">
<img class="chain chain-1" src="image/loader/chain.png">
<img class="chain chain-2" src="image/loader/chain.png">
</div>
<img class="elevator" src="image/loader/elevator.png">
</div>
<!-- items -->
<div class="items">
<div class="item map">
<img class="icon map-icon gifhover" src="image/icon/mapicon.png">
<div class="map-contents">
<div id="item-background" class="transparent-background"></div>
<img class="map-image" src="image/1st_floor_lobby/설명-맵.png">
<span class="close-x">✕</span>
</div>
</div>
<div class="item flower">
<img class="icon flower-icon gifhover" src="image/icon/안개꽃.png">
</div>
</div>
<!-- scores -->
<div class="scores">
<img class="scoreboard" src="image/icon/점수판.png">
<span class="score__text">점수</span>
<span class="score"></span>
</div>
<!-- arrows -->
<div class="arrows">
<img class="movingarrow movingarrow__602" src="image/icon/arrow.png">
<img class="movingarrow movingarrow__big-hyun" src="image/icon/arrow.png">
<img class="movingarrow movingarrow__elevator" src="image/icon/arrow.png">
</div>
<div class="big-hyun">
<img class="gif gifhover big-hyun__gif" src="image/6th_floor/큰현.gif">
<img class="avatar big-hyun__avatar" src="image/1st_floor_lobby/큰현.png">
<div class="dialogue-box2 dialogue-0-1">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">이제 6층이군요.</p>
<p class="line top-line second-line next-line">6층에 계신 분들은 이 호텔에서 가장 오래 지낸 중요한 분들입니다. </p>
<p class="line top-line third-line next-line">그래서 저희 호텔도 상당히 신경 써서 서비스를 제공하고 있죠.</p>
<p class="line top-line fourth-line next-line">이분들께 인사를 드리고 각 손님에 대해 자세히 파악해 주세요.</p>
<p class="line bottom-line fifth-line four-toplines">- 네, <span class="clicker clicker-0-1">알겠습니다!</span></p>
</div>
<div class="dialogue-box2 dialogue-0-2">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">아, 그리고 이 꽃을 <strong>603호</strong> 손님께 전해주세요. </p>
<p class="line top-line second-line next-line">603호 손님께는 정기적으로 꽃을 배달하고 있답니다.</p>
<p class="line top-line third-line next-line">(큰 현으로부터 안개꽃을 받았다.)</p>
<p class="line bottom-line fourth-line three-toplines"><span class="clicker clicker-0-2">(확인)</span></p>
</div>
<div class="dialogue-box2 dialogue-0-3">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">6층 손님들은 모두 만나 보셨나요?</p>
<p class="line bottom-line second-line one-topline">- 네, 하마터면 설립자님 방에 못 들어갈 뻔했는데, <span class="clicker clicker-0-3">선물 덕분에 들어갈 수 있었어요.</span></p>
</div>
<div class="dialogue-box2 dialogue-0-4">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">다행이네요. 그분은 저희 호텔의 특별 관리 대상입니다.</p>
<p class="line top-line second-line">성격이 까다롭기 때문에 항상 주의하셔야 할 거예요.</p>
<p class="line bottom-line third-line two-toplines">- 명심하겠습니다. 아, 그리고 두 분께서 <span class="clicker clicker-0-4">호텔과 지배인님에 대한 이야기도 많이 해주셨어요.</span></p>
</div>
<div class="dialogue-box2 dialogue-0-5">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">아... 하하하하. 내 얘기는 좀 하지 말라고 그렇게 말했는데... </p>
<p class="line top-line second-line next-line">그분들은 저랑 친해서 쓸데없는 말까지 한답니다 호호호호~ 그냥 다 잊어 주세요~</p>
<p class="line top-line third-line next-line">자자, 이제 교육도 슬슬 마무리되어 가네요. 그럼 마지막 층인 7층으로 가 볼까요?</p>
<p class="line bottom-line fourth-line three-toplines"><span class="clicker clicker-0-5">(확인)</span></p>
</div>
</div>
<div class="6thfloor-elevator">
<audio id="elevatorBellRing">
<source src="sound/Elevator Bell Ring.mp3" type="audio/mpeg">
</audio>
<img class="gif gifhover elevator__button button-off" src="image/common/객실_엘베버튼off.png">
<img class="gif gifhover elevator__button button-on" src="image/common/객실_엘베버튼on.png">
<img class="elevator__alarm alarm-off" src="image/common/객실_엘베알람off.png">
<img class="elevator__alarm alarm-on" src="image/common/객실_엘베알람on.png">
<div class="dialogue-box2 dialogue-1">
<h1 class="name"> </h1>
<p class="line top-line first-line">7층으로 올라가시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <a id="nextStage" href="7th_floor.html"><span class="clicker clicker-1-1">올라간다</span></a></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-1-2">더 둘러본다</span></p>
</div>
</div>
<div class="room-601">
<img class="gif gifhover door door__601 door601__1" src="image/6th_floor/601_1.png">
<img class="gif gifhover door door__601 door601__2" src="image/6th_floor/601_2.png">
<div class="dialogue-box2 dialogue-601-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>601호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-601-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-601-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-601-2">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">......</p>
<p class="line top-line second-line next-line">여기가 루비님이 있다가 쫓겨났다는 방이구나.</p>
<p class="line top-line third-line next-line">왠지 문틈 사이로 담배 냄새가 나는 것 같다...</p>
<p class="line bottom-line fourth-line three-toplines"><span class="clicker clicker-601-2">(닫기)</span></p>
</div>
</div>
<div class="room-602">
<img class="gif gifhover door door__602 door602__1" src="image/6th_floor/602_1.png">
<img class="gif gifhover door door__602 door602__2" src="image/6th_floor/602_2.png">
<img class="room room602" src="image/6th_floor/수효니방.jpg">
<img class="avatar avatar__602" src="image/6th_floor/수효니.png">
<img id="table" class="table" src="image/6th_floor/식탁.png">
<img id="pots" class="pots pots-before gif gifhover" src="image/6th_floor/요리-애니메이션.gif" draggable="true">
<img class="pots pots-after" src="image/6th_floor/요리끝.png">
<img class="plate-before" src="image/6th_floor/식사전.png">
<img class="plate-after" src="image/6th_floor/식사중.png">
<img class="plate-finish" src="image/6th_floor/식사후.png">
<img class="gif gifhover frame" src="image/6th_floor/액자.png">
<div id="dropspot" class="dropspot"></div>
<img class="illust illust1" src="image/6th_floor/1.jpg">
<img class="illust illust2" src="image/6th_floor/2.jpg">
<img class="illust illust3" src="image/6th_floor/3.jpg">
<img class="illust illust4" src="image/6th_floor/4.jpg">
<img class="illust illust5" src="image/6th_floor/5.jpg">
<div class="dialogue-box2 dialogue-602-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>602호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-602-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-602-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-602-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">들어와~</p>
<p class="line bottom-line second-line one-topline">- <span class="clicker clicker-602-2">안녕하세요! 이번에 새로 들어온 <span class="player-name"></span>...</span></p>
</div>
<div class="dialogue-box2 dialogue-602-3">
<h1 class="name"> </h1>
<p class="line top-line first-line">뭐해. 어서 들어오라고!</p>
<p class="line top-line second-line next-line">(화난 듯한 목소리다.)</p>
<p class="line bottom-line third-line two-toplines">- <span class="clicker clicker-602-3">(방으로 들어간다.)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-4">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">...에? 현이가 아니네?</p>
<p class="line top-line second-line next-line">...누구신가요?</p>
<p class="line top-line third-line next-line">(갑자기 목소리가 상냥해졌다.)</p>
<p class="line bottom-line fourth-line three-toplines">- 아, 안녕하세요! 이번에 신입 직원으로 들어온 <span class="player-name"></span>입니다. <span class="clicker clicker-602-4">인사드리러 왔습니다!</span></p>
</div>
<div class="dialogue-box2 dialogue-602-5">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">아~ 신입 분이셨구나. </p>
<p class="line top-line second-line next-line"> 저는 현이의 친구 <strong>국내파</strong>라고 해요. 호호호.</p>
<p class="line top-line third-line next-line">교육받느라 수고가 많으시네요.</p>
<p class="line top-line fourth-line next-line">아, 마침 잘 됐네. 밥 먹고 가세요!</p>
<p class="line bottom-line fifth-line four-toplines">- <span class="clicker clicker-602-5">밥.. 이요...?</span></p>
</div>
<div class="dialogue-box2 dialogue-602-6">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">제 취미이자 특기가 요리하기라서요. 히히. </p>
<p class="line top-line second-line next-line">현이도 항상 제가 해주는 밥을 먹고 간답니다. 한번 맛보면 빠져나올 수 없거든요. 크크크크크.</p>
<p class="line bottom-line third-line two-toplines">- 근데 교육 중에 먹어도 <span class="clicker clicker-602-6">괜찮을까요...?</span></p>
</div>
<div class="dialogue-box2 dialogue-602-7">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">아, 아~ 괜찮아요. 걱정하지 않으셔도 돼요.</p>
<p class="line top-line second-line next-line">현이는 이미 잘 알고 있거든요. 누구든지 제 방에 들어오면 밥을 먹고 간다는 걸... 흐흐흐.</p>
<p class="line top-line third-line next-line">그럼, 저기 부엌에서 냄비를 식탁으로 옮겨주시겠어요? </p>
<p class="line bottom-line fourth-line three-toplines">(냄비를 드래그하여 식탁에 놓자.)</p>
</div>
<div class="dialogue-box2 dialogue-602-8">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">(냠냠냠...)</p>
<p class="line top-line second-line">맛이 어때요?</p>
<p class="line bottom-line third-line four-toplines">☛ <span class="clicker clicker-602-8-1">맛있습니다.</span></p>
<p class="line bottom-line fourth-line next-line">☛ <span class="clicker clicker-602-8-2">와, 이거 식당 차리셔도 되겠는데요?</span></p>
<p class="line bottom-line fifth-line next-line">☛ <span class="clicker clicker-602-8-3">너무 맛있어서 먹다 말고 공중제비 최소 두 바퀴 이상 돌고 싶은 맛이네요.</span></p>
</div>
<div class="dialogue-box2 dialogue-602-9-1">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">에이, 그걸론 부족해요.</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-602-9-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-9-2">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">저는 식당 음식을 싫어하는데요? 맵고, 짜고, 자극적이거든요. </p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-602-9-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-9-3">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">까르르르르르! 좋아요, 좋아요. </p>
<p class="line top-line second-line next-line">그럼 잠시! 제 요리에 대해 설명하는 시간을 갖도록 하겠습니다~</p>
<p class="line top-line third-line next-line">이번 요리는 토마토 스파게티로, 핵심은 상큼한 tomato라고 할 수 있습니다.</p>
<p class="line top-line fourth-line next-line">Tomato는 맛도 맛이지만 건강에도 정말 좋은데요, 왜냐하면 tomato에 들어있는 Rutin은 Vitamin C와</p>
<p class="line top-line fifth-line next-line">함께 혈압을 낮추는 작용을 하구요, Carotinoid와 Lycopene성분은 항산화 물질이...</p>
<p class="line top-line sixth-line next-line">(대충 tomato가 몸에 좋다는 내용)</p>
<p class="line top-line seventh-line next-line"> </p>
<p class="line top-line eighth-line next-line"><span class="clicker clicker-602-9-3"><strong>...안듣고있죠!</strong></span></p>
</div>
<div class="dialogue-box2 dialogue-602-9-4">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">... 아, tomato가... 몸에 매우 좋다는 것을 말씀하신 중 아니셨나요? 하하하...</p>
<p class="line top-line second-line next-line"> 그나저나 tomato... 아니, <strong>국내파</strong>님은 <span class="clicker clicker-602-9-4">어떻게 해서 이 호텔에 들어오셨나요?</span></p>
</div>
<div class="dialogue-box2 dialogue-602-10">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">음... 처음 호텔에 온건 중학생 때였나? </p>
<p class="line top-line second-line next-line">서로 만화 보는 걸 좋아해서 같이 만화 이야기만 주구장창 했는데,</p>
<p class="line top-line third-line next-line">어느새 제가 센티멘탈 호텔 4층에 머물고 있더라고요.</p>
<p class="line bottom-line fourth-line three-toplines">- <span class="clicker clicker-602-10">처음엔 4층에서 지내셨다는 말씀이세요?</span></p>
</div>
<div class="dialogue-box2 dialogue-602-11">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">네, 그러다가 현이가 대학교 신입생 때 제가 현이에게 영어 과외를 해주게 되었어요. </p>
<p class="line top-line second-line next-line">보시다시피 제가 영어를 좀 잘하거든요. 후훗.</p>
<p class="line top-line third-line next-line">그런데 이 새ㄲ… 아니, 이 친구, 처음엔 제 말귀를 하나도 못 알아들었어요. 진짜 바보인 줄 알았다니까요?</p>
<p class="line top-line fourth-line next-line"> 그래서 좀 갈구면서 가르쳤는데, 가르치다 보니 바보가 아니라 그냥 남들보다 조금 느린 거더라구요.</p>
<p class="line top-line fifth-line next-line">이때부터 조금씩 현이라는 사람을 이해하기 시작했죠.</p>
<p class="line bottom-line sixth-line five-toplines">- <span class="clicker clicker-602-11">그렇군요... 저의 지배인님에 대한 첫인상은 똑 부러지고 철저해 보이셨는데...</span></p>
</div>
<div class="dialogue-box2 dialogue-602-12">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">겉으로는 그래 보이려고 노력하죠. 기지배, 아마 신입 사원 앞이라 더 그런 척할 거예요. </p>
<p class="line top-line second-line next-line">하지만 속은 완전히 어린아이예요. 모든 게 조금씩 어설프고, 둔하고, 자주 덜렁대요.</p>
<p class="line top-line third-line next-line">그치만 또 한편으론 감성적이고 사람들의 마음을 따뜻하게 잘 이해해줘요. </p>
<p class="line top-line fourth-line next-line">그래서 같이 있으면 왠지 모르게 편하달까...?</p>
<p class="line top-line fifth-line next-line">저는 현이랑 완전 반대거든요. 이성적이고, 계산적이고, 차가운 편이에요.</p>
<p class="line bottom-line sixth-line five-toplines">- <span class="clicker clicker-602-12">음... 서로가 서로의 부족한 부분을 메꿔주는 게 아닐까요?</span></p>
</div>
<div class="dialogue-box2 dialogue-602-13">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">맞아요. 저는 제 똑똑함을 주체할 수가 없어서 현이같이 덜렁대는 사람에게 주절주절 떠들어 대죠.</p>
<p class="line top-line second-line next-line">현이는 제가 이렇게 참견하는 걸 오히려 즐겨요. 똑똑한 사람이 조언해주는게 좋다나 뭐라나... </p>
<p class="line top-line third-line next-line">이렇게 말하고 보니 서로에게 필요한 존재네요. 호호호.</p>
<p class="line top-line fourth-line next-line">아 참, 오신 김에 옛날 호텔 모습도 보여 드릴게요. 이쪽으로 오세요.</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-602-13">(확인)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-14">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">이건 센티멘탈 호텔의 옛날 모습인가요?</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-602-14">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-15">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">네 맞아요. 옛날 호텔은 정말 최악이었어요.</p>
<p class="line top-line second-line next-line">건물도 촌스럽기 그지없었고, 운영도 완전 개판이었죠.</p>
<p class="line top-line third-line next-line">아니 글쎄, 숫자를 헷갈려서 다른 호실 키를 주질 않나, </p>
<p class="line top-line fourth-line next-line">토마토케첩을 고추장으로 착각해서 케첩 비빔밥을 먹은 적도 있고...</p>
<p class="line top-line fifth-line next-line">한번은 여름인데 히터를 틀어서 손님들을 통구이로 만들 뻔했던 적도 있었죠.</p>
<p class="line top-line sixth-line next-line">그때만 생각하면... 어휴!</p>
<p class="line bottom-line seventh-line six-toplines">- <span class="clicker clicker-602-15">많이 힘드셨겠습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-602-16">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">말도 마세요. 그래서 똑. 똑. 한. 제가 하나부터 열까지 전부 가르쳐 줬죠. </p>
<p class="line top-line second-line next-line">심지어 어떤 종류의 토마토가 제일 좋은 tomato인지도 가르쳤다니까요...!</p>
<p class="line top-line third-line next-line">지금의 호텔이 제 손으로 만들어졌다고 해도 과언이 아니에요.</p>
<p class="line top-line fourth-line next-line">그때만 생각하면... 어휴!</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-602-16">(지배인님은 국내파님의 도움을 많이 받은 것 같다.)</span></p>
</div>
<div class="dialogue-box2 dialogue-602-17">
<h1 class="name">국내파</h1>
<p class="line top-line first-line">그럼 이제 옆 방으로 가보세요. 옆 방에는 이 호텔을 설립하신 분이 계시거든요. </p>
<p class="line top-line second-line next-line">현이랑 매일 투닥투닥하는 사이긴 하지만, 그래도 이것저것 많이 배울 수 있을 꺼예요.</p>
<p class="line bottom-line third-line two-toplines">- 네, 그럼 앞으로 <span class="clicker clicker-602-17">잘 부탁드립니다!</span></p>
</div>
</div>
<div class="room-603">
<img class="gif gifhover door door__603 door603__1" src="image/6th_floor/603_1.png">
<img class="gif gifhover door door__603 door603__2" src="image/6th_floor/603_2.png">
<img class="room room603" src="image/6th_floor/정화방.jpg">
<img class="avatar avatar__603" src="image/6th_floor/정화.png">
<img class="flowerpot flowerpot-before" src="image/6th_floor/안개꽃전.png">
<img class="flowerpot flowerpot-after" src="image/6th_floor/안개꽃후.png">
<div id="dropspot2" class="dropspot2"></div>
<img id="table2" class="table" src="image/6th_floor/식탁.png">
<img class="gif gifhover tea" src="image/6th_floor/차-애니메이션.gif">
<img class="illust illust11" src="image/6th_floor/11.jpg">
<img class="illust illust12" src="image/6th_floor/12.jpg">
<img class="illust illust13" src="image/6th_floor/13.jpg">
<img class="illust illust14" src="image/6th_floor/14.jpg">
<img class="illust illust15" src="image/6th_floor/15.jpg">
<img class="illust illust16" src="image/6th_floor/16.jpg">
<img class="illust illust17" src="image/6th_floor/17.jpg">
<div class="dialogue-box2 dialogue-603-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>603호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-603-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-603-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-603-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">누구야?</p>
<p class="line bottom-line second-line one-topline">- 안녕하세요! 이번에 신입 직원으로 들어온 <span class="player-name"></span>입니다. <span class="clicker clicker-603-2">인사드리러 왔습니다!</span></p>
</div>
<div class="dialogue-box2 dialogue-603-3">
<h1 class="name"> </h1>
<p class="line top-line first-line">신입 사원? 아, 나한테 보내지 말라고 그렇게 말했건만.</p>
<p class="line top-line second-line">돌아가. 누가 새로 들어오건 관심 없으니까.</p>
<p class="line bottom-line second-line two-toplines">(돌아가라고 한다. 어떡하지...? 참, 지배님이 준 꽃이 있었지. <span class="clicker clicker-603-3">선물을 가져왔다고 해보자.</span>)</p>
</div>
<div class="dialogue-box2 dialogue-603-4">
<h1 class="name"><span class="player-name"></span></h1>
<p class="line top-line first-line">지배인님께서 부탁하신 선물을 가져왔습니다.</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-4">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-5">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">선물?... 일단 들어와 봐.</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-5">(방으로 들어간다)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-6">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">그래서, 그 선물이 뭔데.</p>
<p class="line bottom-line third-line one-topline">- 여기 있습니다. (큰 현에게 받은 안개꽃을 드래그하여 꽃바구니에 놓자.)</p>
</div>
<div class="dialogue-box2 dialogue-603-7">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">안개꽃이네... </p>
<p class="line top-line second-line next-line">이봐, 신입. 자네는 안개꽃의 매력이 뭐라고 생각해?</p>
<p class="line bottom-line third-line four-toplines">☛ <span class="clicker clicker-603-7-1">가격이 싼 게 매력 아닐까요?</span></p>
<p class="line bottom-line fourth-line next-line">☛ <span class="clicker clicker-603-7-2">안개꽃이니까 안개같이 은은한 모습이 매력 아닐까요?</span></p>
<p class="line bottom-line fifth-line next-line">☛ <span class="clicker clicker-603-7-3">마치 설립자님같이 아름다운 모습이 매력 아닐까요?</span></p>
</div>
<div class="dialogue-box2 dialogue-603-8-1">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">가격이 그 꽃의 매력을 결정하진 않지.</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-8-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-8-2">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">현이는 왜 이렇게 재미없는 직원을 뽑은 거야?</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-8-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-8-3">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">호호호. 너, 사회생활 좀 할 줄 안다?</p>
<p class="line top-line second-line next-line">안개꽃의 아름다움은 수수함이야.</p>
<p class="line top-line third-line next-line">눈에 띄게 화려한 모습은 없지만, 그만의 소소한 아름다움이 흘러나오거든.</p>
<p class="line top-line fourth-line next-line">... 어쩌면 나랑은 정 반대지. 나는 욕심쟁이거든. </p>
<p class="line top-line fifth-line next-line">그래서 현이가 나에게 이 꽃을 주는 걸 지도 몰라.</p>
<p class="line bottom-line sixth-line five-toplines">- <span class="clicker clicker-603-8-3">욕심쟁이... 시라구요?</span></p>
</div>
<div class="dialogue-box2 dialogue-603-9">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">그래, 욕심쟁이.</p>
<p class="line top-line second-line next-line">그래서 7층에서 쫓겨났어.</p>
<p class="line top-line third-line next-line">난 현이가 어렸을 때부터 현이를 못살게 굴었거든. 이거 해라, 저거 해라...</p>
<p class="line top-line fourth-line next-line">이젠 현이도 질린 거겠지.</p>
<p class="line bottom-line fifth-line four-toplines">- <span class="clicker clicker-603-9">원래는... 7층에 계셨었나요?</span></p>
</div>
<div class="dialogue-box2 dialogue-603-10">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">지금까지 쭉 그래왔지.</p>
<p class="line top-line second-line next-line">이 호텔에서 가장 비싸고 고급스러운 곳. 현이는 그 방을 스위트룸이라고 불러.</p>
<p class="line top-line third-line next-line"> 그 방에 들어가려면 현이가 지정한 단 한명의 VIP가 되어야 해. </p>
<p class="line top-line fourth-line next-line">지금까지는 내가 줄곧 센티멘탈 호텔의 VIP였지. </p>
<p class="line top-line fifth-line next-line">이 호텔의 설립자로써, 그리고 지배인의 조력자로써, 내가 당연히 VIP 아니겠어?</p>
<p class="line bottom-line sixth-line five-toplines">- <span class="clicker clicker-603-10">(어떻게 해서 쫒겨났는지 물어보고 싶지만 조금 부담스럽다...)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-11">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">어찌 됬건 선물까지 들고 왔으니... </p>
<p class="line top-line second-line next-line">차나 한 잔 마시고 가든가.</p>
<p class="line top-line third-line next-line">내가 주는 차 아무 때나 마실 수 있는 거 아니니까.</p>
<p class="line bottom-line fourth-line three-toplines">(<span class="clicker clicker-603-11">설립자가 식탁 위에 차를 준비했다.</span> 클릭하여 같이 차를 마시자.)</p>
</div>
<div class="dialogue-box2 dialogue-603-12">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">그나저나 <span class="player-name"></span> 씨라고 했나?</p>
<p class="line top-line second-line next-line"> 신입 직원 교육을 받으면서 호텔을 쭉 봤잖아. 호텔을 본 소감은 어때?</p>
<p class="line bottom-line third-line five-toplines">☛ <span class="clicker clicker-603-12-1">그냥 별 다를 거 없는 평범한 호텔 느낌입니다.</span></p>
<p class="line bottom-line fourth-line next-line">☛ <span class="clicker clicker-603-12-2">제가 지금까지 와본 호텔 중에 가장 고급스럽고 세련된 호텔입니다.<br>설립자님께선 훌륭한 안목을 가지고 계신 것 같습니다.</span></p>
<p class="line bottom-line fifth-line next-line">☛ <span class="clicker clicker-603-12-3">소감은 잘 모르겠는데, 호텔에 숨어있는 비밀을 알고 싶습니다. 도대체 비밀이 뭔가요?</span></p>
</div>
<div class="dialogue-box2 dialogue-603-13-1">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">그래? 그럼 여기 왜 취직했냐?</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-13-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-13-2">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">후후... 너 정말 대답을 잘 하네? </p>
<p class="line top-line second-line next-line">당연하지. 누가 지은 건데. </p>
<p class="line top-line third-line next-line">비록 6층으로 쫓겨난 신세지만, 그래도 난 이 호텔에 애정을 가지고 있어. </p>
<p class="line top-line fourth-line next-line">난 이 호텔에 평생을 바쳤으니까. </p>
<p class="line top-line fifth-line next-line">그나저나, 궁금하지 않아? 이 호텔이 어떻게 만들어졌는지.</p>
<p class="line bottom-line sixth-line five-toplines">- <span class="clicker clicker-603-13-2">네, 듣고 싶습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-603-13-3">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">비밀? 그런 쓸데없는데 관심을 갖지 말란 말이야.</p>
<p class="line bottom-line second-line one-topline"><span class="clicker clicker-603-13-1">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-14">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">... 23년 전이었나. </p>
<p class="line top-line second-line next-line">난 동업자 한 명과 자금을 모아 이 호텔을 지었어. </p>
<p class="line top-line third-line next-line">처음에는 작게 시작했지. 게스트하우스 정도 크기였어. </p>
<p class="line top-line fourth-line next-line">동업자와 난 이 자그마한 호텔의 첫 손님으로 들어왔지.</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-603-14">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-15">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">내가 지었는데 어떻게 내가 손님으로 들어오냐고? </p>
<p class="line top-line second-line next-line">이 호텔은 <strong>현이와 현이의 손님들을 위한 호텔</strong>이니까. </p>
<p class="line top-line third-line next-line">지어준 사람은 나와 동업자지만, 옛날도 그렇고 지금도 그렇고 운영은 오로지 현이의 몫이야.</p>
<p class="line top-line fourth-line next-line">나는 옆에서 돕고 조언을 해줄 순 있지만, 이 호텔에서 일어나는 모든 일은 결국 현이가 책임져야 하지.</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-603-15">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-16">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">처음에 난 내가 지은 호텔에 내가 묵는다는 게 너무 좋았어.</p>
<p class="line top-line second-line next-line">물론 처음에 호텔은 적자였기 때문에 운영비를 충당하기 위해서 몸이 좀 고생했지만.</p>
<p class="line top-line third-line next-line">그래도 이 조그맣고 아담한 호텔에서 지내는 하루하루가 너무 행복했어. </p>
<p class="line top-line fourth-line next-line">현이도 어렸을 때라 내 말을 고분고분 잘 들었고.</p>
<p class="line top-line fifth-line next-line">그런데... 시간이 지나면서 마음에 안 드는 게 하나씩 생기기 시작했어.</p>
<p class="line bottom-line sixth-line five-toplines"><span class="clicker clicker-603-16">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-17">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">난 센티멘탈 호텔이 럭셔리한 고급 호텔로 발전하길 원했어.</p>
<p class="line top-line second-line next-line">그래서 현이한테도 항상 그렇게 가르쳤지.</p>
<p class="line top-line third-line next-line">남들이 다 하는 것을 하고, 남들이 인정해 주는 것을 하라고.</p>
<p class="line top-line fourth-line next-line">그래야 나한테도 좋고, 현이에게도 좋고. 모두에게 좋은 거지.</p>
<p class="line bottom-line fifth-line four-toplines">- <span class="clicker clicker-603-17">지배인님은... 설립자님의 기대랑은 조금 달랐나요?</span></p>
</div>
<div class="dialogue-box2 dialogue-603-18">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">휴...... 말도 마.</p>
<p class="line top-line second-line next-line">유치한 피규어를 호텔 곳곳에 놓지를 않나, 비싸 보이지도 않는 이상한 만화 그림을 걸어놓지를 않나...</p>
<p class="line top-line third-line next-line">그리고 내가 손님들을 최대한 많이 모으라고 했더니 뭐라고 했는지 알아?</p>
<p class="line top-line fourth-line next-line">딱히 부르고 싶은 손님도 없고, 지금 있는 손님들에게 집중하고 싶다고 하더라.</p>
<p class="line top-line fifth-line next-line">나 참 기가 막혀서...</p>
<p class="line bottom-line sixth-line five-toplines"><span class="clicker clicker-603-18">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-18-1">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">난 호텔을 더 크게, 더 높게 만들라고 현이한테 귀에 딱지가 앉도록 얘기했어.</p>
<p class="line top-line second-line next-line">호텔 지배인이라면 이게 당연한 거 아니야?</p>
<p class="line top-line third-line next-line">그래야 더 많은 손님을 모으고 더 유명해지니까.</p>
<p class="line top-line fourth-line next-line">그래야 돈을 더 많이 벌고,</p>
<p class="line top-line fifth-line next-line">그래야 부자가 되고,</p>
<p class="line top-line sixth-line next-line">그래야 행복하니까.</p>
<p class="line bottom-line seventh-line six-toplines"><span class="clicker clicker-603-18-1">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-19">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">난 현이에게 배신감을 느꼈어.</p>
<p class="line top-line second-line next-line">내가 얼마나 고생해서 이 호텔을 지었는데, 현이는 내 말을 귀로 듣는 건지, 코로 듣는 건지...</p>
<p class="line top-line third-line next-line">현이는 설립자인 나에게 의지하면서도, 내가 하는 말을 잘 듣지 않아.</p>
<p class="line top-line fourth-line next-line">겉으로 보기에는 순해 보여도, 은근히 자기 고집에 센 아이지.</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-603-19">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-20">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">난 동업자에게 현이한테 제발 한마디 하라고 했지만, 별 관심도 없더라고. </p>
<p class="line top-line second-line next-line">이 호텔의 주인은 현이니까, 현이가 하고 싶은데로 하게 놔둬야 한다고.</p>
<p class="line top-line third-line next-line">오히려 나한테 으름장을 놓더라고? 내 참 기가 차서...</p>
<p class="line top-line fourth-line next-line">요즘엔 무슨 젊은 애들이나 듣는 아이돌인가 뭔가에 빠져서는... 어휴...</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-603-20">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-603-21">
<h1 class="name">설립자</h1>
<p class="line top-line first-line">됐어. 내가 할 말은 이게 다야. </p>
<p class="line top-line second-line next-line">이제 더 이상 말할 기분이 아니야. 그만 나가봐. </p>
<p class="line top-line third-line next-line">7층에 누가 들어올지는 모르겠지만, 아주 그냥 내 눈에 띄기만 해 봐.</p>
<p class="line top-line fourth-line next-line">나보다 VIP를 차지할 자격이 정말 있는지 샅샅이 조사해 줄 테니까.</p>
<p class="line bottom-line fifth-line four-toplines"><span class="clicker clicker-603-21">(방에서 나가자.)</span></p>
</div>
</div>
</div>
<script src="script/score.js"></script>
<script src="script/reset.js"></script>
<script src="script/playerName.js"></script>
<script src="script/item.js"></script>
<script>
function start () {
setTimeout(function() {$('.dialogue-0-1, .dialogue-0-1 .line, .dialogue-box, .big-hyun__avatar').show();}, 7000);
}
$('.fade-box').fadeOut(1000);
$('.preloader').show();
let hasClicked601 = false;
let hasClicked602 = false;
let hasClicked603 = false;
// drag functions
//602
$('#pots').draggable({
revert: true,
revertDuration: 500
});
$('#dropspot').droppable({
classes: {
"ui-droppable-hover": "dropspot-hover"
},
drop: function( event, ui ) {
if (document.querySelector('.dialogue-602-7').style.display === 'block'){
$('#pots').hide();
$('.plate-before').delay(1500).fadeOut(500);
$('.plate-after').fadeIn(1500);
$('.pots-after').show();
$('.dialogue-602-7, .dialogue-602-7 .line').hide();
$('.dialogue-602-8, .dialogue-602-8 .line').show();
}
}
});
//603
$('.flower-icon').draggable({
revert: true,
revertDuration: 500
});
$('#dropspot2').droppable({
classes: {
"ui-droppable-hover": "dropspot2-hover"
},
drop: function( event, ui ) {
if (document.querySelector('.dialogue-603-6').style.display === 'block'){
$('.flower-icon').hide();
$('.flowerpot-before').delay(1500).fadeOut(500);
$('.flowerpot-after').fadeIn(1500);
$('.dialogue-603-6, .dialogue-603-6 .line').hide();
$('.dialogue-603-7, .dialogue-603-7 .line').delay(1500).fadeIn(0);
}
}
});
// start
//quick view
$('.dialogue-0-1, .dialogue-0-2, .dialogue-0-3, .dialogue-0-4, .dialogue-0-5').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.clicker-0-1').on('click', function() {
$('.dialogue-0-1, .dialogue-0-1 .line').hide();
$('.dialogue-0-2, .dialogue-0-2 .line').show();
$('.flower-icon').delay(1000).fadeIn(2000);
})
//close
$('.clicker-0-2').on('click', function() {
$('.dialogue-0-2, .dialogue-0-2 .line, .dialogue-box, .big-hyun__avatar').hide();
})
$('.big-hyun__gif').click(function(){
if (hasClicked601 === true && hasClicked602 === true && hasClicked603 === true) {
$('.dialogue-0-3, .dialogue-0-3 .line, .big-hyun__avatar, .dialogue-box').show();
$('.movingarrow__big-hyun').show();
} else {}
})
$('.clicker-0-3').on('click', function() {
$('.dialogue-0-3, .dialogue-0-3 .line').hide();
$('.dialogue-0-4, .dialogue-0-4 .line').show();
})
$('.clicker-0-4').on('click', function() {
$('.dialogue-0-4, .dialogue-0-4 .line').hide();
$('.dialogue-0-5, .dialogue-0-5 .line').show();
})
//close
$('.clicker-0-5').click(function(){
$('.dialogue-0-5, .dialogue-0-5 .line, .big-hyun__avatar, .dialogue-box, .big-hyun__gif, .movingarrow__big-hyun').hide();
$('.movingarrow__elevator').show();
})
// elevator
//quick view
$('.dialogue-1').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.button-off').on('click', function() {
if (hasClicked601 === true && hasClicked602 === true && hasClicked603) {
$('.movingarrow__elevator').hide();
$('.button-on, .dialogue-1, .dialogue-1 .line, .alarm-on, .dialogue-box').show();
$('#elevatorBellRing')[0].play();
} else {}
})
// close
$('.clicker-1-2').click(function(){
$('.button-on, .dialogue-2-1, .dialogue-2-1 .line, .alarm-on, .dialogue-box').hide();
})
$('.clicker-1-1').click(function(){
event.preventDefault();
$('#fade-box').fadeIn(2000);
setTimeout(function() {window.location = $('#nextStage').attr('href');}, 2000);
})
//601
//quick view
$('.dialogue-601-1, .dialogue-601-2').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
//door open/close
$('.door601__1').on('mouseenter', function() {
$(event.currentTarget).hide();
$('.door601__2').show();
})
$('.door601__2').on('mouseleave', function() {
$(event.currentTarget).hide();
$('.door601__1').show();
})
//dialogue
$('.door__601').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
//sound
$('.door').click(function(){
$('audio')[0].play();
})
$('.dialogue-601-1, .dialogue-601-1 .line, .dialogue-box').show();
} else {}
})
//close
$('.clicker-601-1-2').on('click', function() {
$('.dialogue-601-1, .dialogue-601-1 .line, .dialogue-box').hide();
})
$('.clicker-601-1-1').on('click', function() {
$('.dialogue-601-1, .dialogue-601-1 .line').hide();
$('.dialogue-601-2, .dialogue-601-2 .line').show();
})
//close
$('.clicker-601-2').on('click', function() {
hasClicked601 = true;
$('.dialogue-601-2, .dialogue-box').hide();
if (hasClicked601 === true && hasClicked602 === true && hasClicked603 === true) {
$('.movingarrow__big-hyun').show();}
})
//602
//quick view
$('.dialogue-602-1, .dialogue-602-2, .dialogue-602-3, .dialogue-602-4, .dialogue-602-5, .dialogue-602-6, .dialogue-602-7, .dialogue-602-8, .dialogue-602-9-1, .dialogue-602-9-2, .dialogue-602-9-3, .dialogue-602-9-4, .dialogue-602-10, .dialogue-602-11, .dialogue-602-12, .dialogue-602-13, .dialogue-602-14, .dialogue-602-15, .dialogue-602-16, .dialogue-602-17').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
// door open/close
$('.door602__1').on('mouseenter', function() {
$(event.currentTarget).hide();
$('.door602__2').show();
})
$('.door602__2').on('mouseleave', function() {
$(event.currentTarget).hide();
$('.door602__1').show();
})
//start
$('.door__602').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
//sound
$('.door').click(function(){
$('audio')[0].play();
})
$('.dialogue-602-1, .dialogue-602-1 .line, .dialogue-box').show();
} else {}
})
//close
$('.clicker-602-1-2').on('click', function() {
$('.dialogue-602-1, .dialogue-602-1 .line, .dialogue-box').hide();})
$('.clicker-602-1-1').on('click', function() {
$('.dialogue-602-1, .dialogue-602-1 .line').hide();
$('.dialogue-602-2, .dialogue-602-2 .line').show();
})
$('.clicker-602-2').on('click', function() {
$('.dialogue-602-2, .dialogue-602-2 .line').hide();
$('.dialogue-602-3, .dialogue-602-3 .line').show();
})
$('.clicker-602-3').on('click', function() {
$('.dialogue-602-3, .dialogue-602-3 .line').hide();
$('.dialogue-602-4, .dialogue-602-4 .line, .frame, .pots-before, #dropspot, .plate-before, #table, .room602, .avatar__602').show();
})
$('.clicker-602-4').on('click', function() {
$('.dialogue-602-4, .dialogue-602-4 .line').hide();
$('.dialogue-602-5, .dialogue-602-5 .line').show();
})
$('.clicker-602-5').on('click', function() {
$('.dialogue-602-5, .dialogue-602-5 .line').hide();
$('.dialogue-602-6, .dialogue-602-6 .line').show();
})
$('.clicker-602-6').on('click', function() {
$('.dialogue-602-6, .dialogue-602-6 .line').hide();
$('.dialogue-602-7, .dialogue-602-7 .line').show();
})
$('.clicker-602-8-1').on('click', function() {
$('.dialogue-602-8, .dialogue-602-8 .line').hide();
$('.dialogue-602-9-1, .dialogue-602-9-1 .line').show();
})
//return
$('.clicker-602-9-1').on('click', function() {
$('.dialogue-602-9-1, .dialogue-602-9-1 .line, .dialogue-602-9-2, .dialogue-602-9-2 .line').hide();
$('.dialogue-602-8, .dialogue-602-8 .line').show();
})
$('.clicker-602-8-2').on('click', function() {
$('.dialogue-602-8, .dialogue-602-8 .line').hide();
$('.dialogue-602-9-2, .dialogue-602-9-2 .line').show();
})
$('.clicker-602-8-3').on('click', function() {
$('.dialogue-602-8, .dialogue-602-8 .line').hide();
$('.dialogue-602-9-3, .dialogue-602-9-3 .line').show();
})
$('.clicker-602-9-3').on('click', function() {
$('.dialogue-602-9-3, .dialogue-602-9-3 .line, .avatar__602').hide();
$('.dialogue-602-9-4, .dialogue-602-9-4 .line').show();
})
$('.clicker-602-9-4').on('click', function() {
$('.dialogue-602-9-4, .dialogue-602-9-4 .line').hide();
$('.dialogue-602-10, .dialogue-602-10 .line, .avatar__602, #room-bg, .illust1').show();
})
$('.clicker-602-10').on('click', function() {
$('.dialogue-602-10, .dialogue-602-10 .line, .illust1').hide();
$('.dialogue-602-11, .dialogue-602-11 .line, .illust2').show();
})
$('.clicker-602-11').on('click', function() {
$('.dialogue-602-11, .dialogue-602-11 .line, .illust2').hide();
$('.dialogue-602-12, .dialogue-602-12 .line, .illust3').show();
})
$('.clicker-602-12').on('click', function() {
$('.dialogue-602-12, .dialogue-602-12 .line').hide();
$('.dialogue-602-13, .dialogue-602-13 .line').show();
})
//close
$('.clicker-602-13').on('click', function() {
$('.dialogue-602-13, .dialogue-602-13 .line, .avatar__602, .dialogue-box, .illust3, #room-bg, .plate-after').hide();
$('.movingarrow__602, .plate-finish').show();
})
$('.frame').click(function(){
$('.dialogue-602-14, .dialogue-602-14 .line, .dialogue-box, #room-bg, .illust4, .avatar__602').show();
$('.movingarrow__602').hide();})
$('.clicker-602-14').on('click', function() {
$('.dialogue-602-14, .dialogue-602-14 .line').hide();
$('.dialogue-602-15, .dialogue-602-15 .line').show();
})
$('.clicker-602-15').on('click', function() {
$('.dialogue-602-15, .dialogue-602-15 .line, .illust4').hide();
$('.dialogue-602-16, .dialogue-602-16 .line, .illust5').show();
})
$('.clicker-602-16').on('click', function() {
$('.dialogue-602-16, .dialogue-602-16 .line, .illust5, #room-bg').hide();
$('.dialogue-602-17, .dialogue-602-17 .line').show();
})
//close
$('.clicker-602-17').on('click', function() {
hasClicked602 = true;
$('.dialogue-602-17, .dialogue-602-17 .line, .frame, .pots-before, #dropspot, .pots-after, .table, .plate-after, .plate-finish, .room602, .avatar__602, .dialogue-box').hide();
if (hasClicked601 === true && hasClicked602 === true && hasClicked603 === true) {
$('.movingarrow__big-hyun').show();}
})
//603
// quick view
$('.dialogue-603-1, .dialogue-603-2, .dialogue-603-3, .dialogue-603-4, .dialogue-603-5, .dialogue-603-6, .dialogue-603-7, .dialogue-603-8-1, .dialogue-603-8-2, .dialogue-603-8-3, .dialogue-603-9, .dialogue-603-10, .dialogue-603-11, .dialogue-603-12, .dialogue-603-13-1, .dialogue-603-13-2, .dialogue-603-13-3, .dialogue-603-14, .dialogue-603-15, .dialogue-603-16, .dialogue-603-17, .dialogue-603-18, .dialogue-603-18-1, .dialogue-603-19, .dialogue-603-20, .dialogue-603-21').click(function() {$(event.currentTarget).children().css('animation', 'none');})
// door open/close
$('.door603__1').on('mouseenter', function() {
$(event.currentTarget).hide();
$('.door603__2').show();
})
$('.door603__2').on('mouseleave', function() {
$(event.currentTarget).hide();
$('.door603__1').show();
})
// start
$('.door__603').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
//sound
$('.door').click(function(){
$('audio')[0].play();
})
$('.dialogue-603-1, .dialogue-603-1 .line, .dialogue-box').show();
} else {}
})
//close
$('.clicker-603-1-2').on('click', function() {
$('.dialogue-603-1, .dialogue-603-1 .line, .dialogue-box').hide();})
$('.clicker-603-1-1').on('click', function() {
$('.dialogue-603-1, .dialogue-603-1 .line').hide();
$('.dialogue-603-2, .dialogue-603-2 .line').show();
})
$('.clicker-603-2').on('click', function() {
$('.dialogue-603-2, .dialogue-603-2 .line').hide();
$('.dialogue-603-3, .dialogue-603-3 .line').show();
})
$('.clicker-603-3').on('click', function() {
$('.dialogue-603-3, .dialogue-603-3 .line').hide();
$('.dialogue-603-4, .dialogue-603-4 .line').show();
})
$('.clicker-603-4').on('click', function() {
$('.dialogue-603-4, .dialogue-603-4 .line').hide();
$('.dialogue-603-5, .dialogue-603-5 .line').show();
})
$('.clicker-603-5').on('click', function() {
$('.dialogue-603-5, .dialogue-603-5 .line').hide();
$('.dialogue-603-6, .dialogue-603-6 .line, .room603, .avatar__603, .flowerpot-before, .dropspot2, #table2').show();
$('.flower-icon').css('z-index', 13);
})
$('.clicker-603-6').on('click', function() {
$('.dialogue-603-6, .dialogue-603-6 .line').hide();
$('.dialogue-603-7, .dialogue-603-7 .line').show();
})
//QUIZ!!
//option 1
$('.clicker-603-7-1').on('click', function() {
$('.dialogue-603-7, .dialogue-603-7 .line').hide();
$('.dialogue-603-8-1, .dialogue-603-8-1 .line').show();
})
//option 2
$('.clicker-603-7-2').on('click', function() {
$('.dialogue-603-7, .dialogue-603-7 .line').hide();
$('.dialogue-603-8-2, .dialogue-603-8-2 .line').show();
})
//return