-
Notifications
You must be signed in to change notification settings - Fork 1
/
4th_floor.html
1403 lines (1115 loc) · 71 KB
/
4th_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/4th_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>
<script src="script/loader.js"></script>
<title>4층 객실 :: 센티멘탈 호텔</title>
</head>
<body>
<div class="container">
<div id="fade-box" class="fade-box"></div>
<div id="room-bg" class="transparent-background"></div>
<div id="reset-bg" class="transparent-background"></div>
<div class="dialogue-box"></div>
<audio id="knocking">
<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>
<!-- 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__big-hyun" src="image/icon/arrow.png">
<img class="movingarrow movingarrow__elevator" src="image/icon/arrow.png">
</div>
<div class="4thfloor-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-2-1">
<h1 class="name"> </h1>
<p class="line top-line first-line">5층으로 올라가시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <a id="nextStage" href="5th_floor.html"><span class="clicker clicker-2-1">올라간다</span></a></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-2-2">더 둘러본다</span></p>
</div>
</div>
<div class="big-hyun">
<img class="gif gifhover big-hyun__gif" src="image/4th_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">오셨군요. 4층은 객실 층이에요. 실제 손님들이 투숙하고 있어요.</p>
<p class="line top-line second-line next-line">이제부터 긴장하시고 옷매무새를 단정히 해주세요. 손님들에게 직접 인사를 드릴 거예요.</p>
<p class="line bottom-line third-line two-toplines">- 손님들께 <span class="clicker clicker-0-1-1">인사를 드린다고요?</span></p>
</div>
<div class="dialogue-box2 dialogue-0-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">누가 어디에 지내고 있는지 반드시 알고 있어야 합니다.</p>
<p class="line bottom-line fourth-line three-toplines">- <span class="clicker clicker-0-2-1">아, 그렇군요.</span></p>
</div>
<div class="dialogue-box2 dialogue-0-3">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">게다가 최근 골치 아픈 문제가 하나 생겼어요.</p>
<p class="line top-line second-line next-line">저희 호텔은 금연구역이지만, 최근 4층에서 나는 담배 냄새 때문에 손님으로부터 항의가 들어왔어요.</p>
<p class="line top-line third-line next-line"><span class="player-name"></span> 씨는 손님들께 인사를 드리면서 담배 냄새에 관한 단서를 모아 주세요.</p>
<p class="line bottom-line fourth-line three-toplines">- 네, <span class="clicker clicker-0-3-1">알겠습니다!</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 bottom-line second-line one-topline"><span class="clicker clicker-0-4">(확인)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-1">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">모든 손님을 다 만나보고 오셨군요. 담배 냄새에 관한 단서는 많이 모으셨나요?</p>
<p class="line bottom-line second-line two-toplines">- 네! 손님들께 인사드리며 담배 냄새 관련 정보를 모았습니다.</p>
<p class="line bottom-line third-line next-line"> 제 머릿속엔 이미 <span class="clicker clicker-1-1">범인이 있습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-1-2">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">오! 좋아요. 호텔 내에서 담배를 피운 범인은 누구죠?</p>
<p class="line top-line second-line next-line">☛ <span class="clicker clicker-1-401">(401호) 처남 </span> “406호는 거짓을 말하고 있습니다.” </p>
<p class="line top-line third-line next-line">☛ <span class="clicker clicker-1-402">(402호) 루비 </span> “거짓말을 하는건 401호죠.”</p>
<p class="line top-line fourth-line next-line">☛ <span class="clicker clicker-1-404">(404호) 희미한 별 </span> “저는 누가 피우는지 잘 모르겠습니다. 저는 범인이 아닙니다.”</p>
<p class="line top-line fifth-line next-line">☛ <span class="clicker clicker-1-406">(406호) 라 & 민 </span> “401호와 402호 둘 중 한명이에요!”</p>
<p class="line top-line sixth-line next-line">☛ <span class="clicker clicker-1-407">(407호) 개발자 </span> “402호와 404호. 둘 중 한명이 범인이죠.”</p>
<p class="line bottom-line seventh-line six-toplines"><span class="clicker clicker-1-hint"> (힌트 보기)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-3">
<h1 class="name"> </h1>
<p class="line top-line first-line">4명의 말은 진실이다. 나머지 한 명은 거짓말을 하고 있다.</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 fourth-line three-toplines"><span class="clicker clicker-1-3">(돌아가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-401">
<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-1-wrong">(-10점)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-402">
<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-1-right">(+10점)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-404">
<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-1-wrong">(-10점)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-406">
<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-1-wrong">(-10점)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-407">
<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-1-wrong">(-10점)</span></p>
</div>
<div class="dialogue-box2 dialogue-1-wrong">
<h1 class="name">큰 현</h1>
<p class="line top-line first-line">아무래도 범인을 잘못 짚은 것 같네요.</p>
<p class="line top-line second-line next-line">제가 조금 더 알아볼 테니, <span class="player-name"></span> 씨는 먼저 5층으로 올라가 이 메모지에 적힌 대로 해 주세요.</p>
<p class="line bottom-line third-line two-toplines">네, <span class="clicker clicker-1-closew">알겠습니다.</span> (메모지를 얻었다.)</p>
</div>
<div class="dialogue-box2 dialogue-1-right">
<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"><span class="player-name"></span> 씨는 먼저 5층으로 올라가 이 메모지에 적힌 대로 해 주세요.</p>
<p class="line bottom-line fourth-line three-toplines"> 네, <span class="clicker clicker-1-closer">알겠습니다.</span> (메모지를 얻었다.)</p>
</div>
</div>
<div class="room-401">
<img class="gif gifhover door door__401 door401__1" src="image/4th_floor/401_1.png">
<img class="gif gifhover door door__401 door401__2" src="image/4th_floor/401_2.png">
<img class="room room401" src="image/4th_floor/부처님.jpg">
<img class="avatar avatar__401" src="image/4th_floor/부처님.png">
<div class="dialogue-box2 dialogue-401-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>401호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-401-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-401-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-401-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-401-2-1">인사드리러 왔습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-401-3">
<h1 class="name">처남</h1>
<p class="line top-line first-line">아! 안녕하십니까. 말씀 많이 들었습니다. 유능하신 분이 새로 들어왔다고 들었는데 <span class="player-name"></span> 씨였군요.</p>
<p class="line bottom-line second-line one-topline">- 아, 하하하! <span id="clicker-1-3" class="clicker clicker-401-3-1">과찬이십니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-401-4">
<h1 class="name">처남</h1>
<p class="line top-line first-line">아닙니다. 풍채가 훤칠하고 광(光)이 나는 것이 곧 손안에 천하(天下)를 품으실 상입니다.</p>
<p class="line bottom-line second-line one-topline">아... <span id="clicker-1-4" class="clicker clicker-401-4-1">가, 감사합니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-401-5">
<h1 class="name">처남</h1>
<p class="line top-line first-line">아, 제 소개가 늦었군요. 저는 <strong>부처님 닮은 남자</strong>, 줄여서 <strong>처남</strong>이라고 합니다.</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-401-5-1">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-401-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 id="clicker-1-5-2" class="clicker clicker-401-6-1">향 냄새가 나네요?</span></p>
</div>
<div class="dialogue-box2 dialogue-401-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 two-toplines">- 그렇군요... 아, 그나저나 요즘 4층에서 담배 냄새가 난다고 하던데... <span id="clicker-1-6" class="clicker clicker-401-7-1">혹시 아시는 거 있으세요?</span></p>
</div>
<div class="dialogue-box2 dialogue-401-8">
<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">제 미천한 생각으로는 <strong>406호의 두 여자분</strong>이 조금 의심이 갑니다.</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-401-8-1">그럼 앞으로도 잘 부탁드립니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-401-9">
<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-401-9-1">(방에서 나간다.)</span></p>
</div>
</div>
<div class="room-402">
<img class="gif gifhover door door__402 door402__1" src="image/4th_floor/402_1.png">
<img class="gif gifhover door door__402 door402__2" src="image/4th_floor/402_2.png">
<audio id="dog-barking">
<source src="sound/4th_floor/dog.mp3" type="audio/mpeg">
</audio>
<img class="room room402" src="image/4th_floor/루비방.jpg">
<img class="avatar avatar__402" src="image/4th_floor/루비.png">
<div class="dialogue-box2 dialogue-402-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>402호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-402-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-402-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-402-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 bottom-line third-line two-toplines">- 안녕하세요! 이번에 신입 직원으로 들어온 <span class="player-name"></span>입니다. <span class="clicker clicker-402-2">인사드리러 왔습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-402-3">
<h1 class="name">루비</h1>
<p class="line top-line first-line">아~~! 안녕하세요! 저는 <strong>루비</strong>라고 해요, 히히. 지배인과 오랫동안 함께한 친구죠.</p>
<p class="line top-line second-line next-line">제 방은 원래 6층에 있었는데, 제가 밤에 일하느라 낮에 자주 방을 비우다 보니 4층 방에서 살게 됐어요.</p>
<p class="line top-line third-line next-line">기지배, 친구 하나 이해 못해주고...</p>
<p class="line bottom-line fourth-line three-toplines">- <span class="clicker clicker-402-3">밤에 일하신다구요?</span></p>
</div>
<div class="dialogue-box2 dialogue-402-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 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-402-4">피곤하시겠네요.</span></p>
</div>
<div class="dialogue-box2 dialogue-402-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 bottom-line third-line two-toplines">- 그렇군요... 그나저나 요즘 4층에서 담배 냄새가 난다고 하던데... 혹시 <span class="clicker clicker-402-5">아시는 거 있으세요?</span></p>
</div>
<div class="dialogue-box2 dialogue-402-6">
<h1 class="name">루비</h1>
<p class="line top-line first-line">네! 저도 들었죠. 저도 담배를 피우긴 하지만, 호텔 안에서 피운 적은 진~~~~ 짜 없어요.</p>
<p class="line top-line second-line next-line">근데 아마 <strong>401호</strong>에 사는 <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 top-line fifth-line next-line">저번에는 대놓고 "당신이 피운 거 맞죠?!" 하고 물어봤는데...</p>
<p class="line bottom-line sixth-line five-toplines"><span class="clicker clicker-402-6">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-402-7">
<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 five-toplines">- 아닙니다. 저도 계속 조사하고 있으니 범인을 찾으면 알려드릴게요.</p>
<p class="line bottom-line sixth-line next-line"> 그럼, 앞으로 <span class="clicker clicker-402-7">잘 부탁드리겠습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-402-8">
<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-402-8">(방에서 나간다.)</span></p>
</div>
</div>
<div class="room-403">
<img class="gif gifhover door door__403 door403__1" src="image/4th_floor/403_1.png">
<img class="gif gifhover door door__403 door403__2" src="image/4th_floor/403_2.png">
<div class="dialogue-box2 dialogue-403-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>403호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-403-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-403-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-403-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">......</p>
<p class="line bottom-line fast-yes-line one-topline">- 빈 방인 것 같군. <span class="clicker clicker-403-2">(다른 방으로 가기)</span></p>
</div>
</div>
<div class="room-404">
<img class="gif gifhover door door__404 door404__1" src="image/4th_floor/404_1.png">
<img class="gif gifhover door door__404 door404__2" src="image/4th_floor/404_2.png">
<img class="room room404" src="image/4th_floor/희미한별.jpg">
<img class="avatar avatar__404" src="image/4th_floor/희미한별.png">
<div class="dialogue-box2 dialogue-404-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>404호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-404-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-404-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-404-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-404-2">인사드리러 왔습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-404-3">
<h1 class="name">희미한 별</h1>
<p class="line top-line first-line">아, 안녕하세요. 저는 <strong>희미한 별</strong>이라고 합니다.</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-404-3">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-404-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 four-toplines">- 아, 감사합니다. 혹시 필요한 게 있으시면 언제든지 말씀해 주세요.</p>
<p class="line bottom-line fifth-line next-line"> 그나저나 요즘 4층에서 담배 냄새가 난다고 하던데... 혹시 <span class="clicker clicker-404-4">아시는 거 있으세요?</span></p>
</div>
<div class="dialogue-box2 dialogue-404-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 bottom-line third-line two-toplines">그렇군요. 감사합니다. 그럼 앞으로 <span class="clicker clicker-404-5">잘 부탁드리겠습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-404-6">
<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-404-6">(방에서 나간다.)</span></p>
</div>
</div>
<div class="room-405">
<img class="gif gifhover door door__405 door405__1" src="image/4th_floor/405_1.png">
<img class="gif gifhover door door__405 door405__2" src="image/4th_floor/405_2.png">
<div class="dialogue-box2 dialogue-405-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>405호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-405-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-405-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-405-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">......</p>
<p class="line bottom-line fast-yes-line one-topline">- 빈 방인 것 같군. <span class="clicker clicker-405-2">(다른 방으로 가기)</span></p>
</div>
</div>
<div class="room-406">
<img class="gif gifhover door door__406 door406__1" src="image/4th_floor/406_1.png">
<img class="gif gifhover door door__406 door406__2" src="image/4th_floor/406_2.png">
<img class="room room406" src="image/4th_floor/라민.jpg">
<img class="avatar avatar__406" src="image/4th_floor/라민.png">
<div class="dialogue-box2 dialogue-406-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>406호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-406-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-406-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-406-2">
<h1 class="name"> </h1>
<p class="line top-line first-line">아무 반응이 없다. 어떻게 하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-406-2-1">다시 노크해 본다.</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-406-2-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-406-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 bottom-line four-toplines" style="animation: typing 1.5s 5s linear backwards;">- <span class="clicker clicker-406-3-1">다시 한번 두드려 본다.</span></p>
<p class="line bottom-line next-line" style="animation: typing 1.5s 5.3s linear backwards; ">- <span class="clicker clicker-406-3-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-406-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="player-name"></span>입니다. <span class="clicker clicker-406-4">인사드리러 왔습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-406-5">
<h1 class="name">라 & 민</h1>
<p class="line top-line first-line">라) 아앗! 안녕하세요! 저희는 현 언니 친구들이에요! 왼쪽이 <strong>라</strong></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 top-line fifth-line next-line">민) 맞아맞아. 아, 근데 요즘 현 언니 어딘가 달라보이지 않아요? <span class="player-name"></span> 씨가 보기엔 어때요?</p>
<p class="line bottom-line sixth-line five-toplines">- 음... 전 오늘이 첫 출근날이라서... 잘 모르겠네요. 요즘 지배인님께 <span class="clicker clicker-406-5">무슨 일 있나요?</span></p>
</div>
<div class="dialogue-box2 dialogue-406-6">
<h1 class="name">라 & 민</h1>
<p class="line top-line first-line">(둘이 서로 마주본다) 흐음… 히히히.</p>
<p class="line top-line second-line next-line">라) 저희가 볼 땐 <strong>404호 남자</strong>가 수상해요.</p>
<p class="line bottom-line third-line two-toplines">- 404호 남자요? <span class="clicker clicker-406-6">404호라면...</span></p>
</div>
<div class="dialogue-box2 dialogue-406-7">
<h1 class="name">라 & 민</h1>
<p class="line top-line first-line">라) 이름이... <strong>‘희미한 별’</strong>이였나?</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-406-7">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-406-8">
<h1 class="name">라 & 민</h1>
<p class="line top-line first-line">민) 그 남자 때문이 틀림없어요. 들리는 소문에 의하면 누가 밤에 현 언니가 그 남자 방으로 들어가는걸 </p>
<p class="line top-line second-line next-line"> 봤다는데~ 에~? 흐~으~음~? <span class="emoticon">( ͡° ͜ʖ ͡°)
</span></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-406-8">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-406-9">
<h1 class="name">라 & 민</h1>
<p class="line top-line first-line">라) 뭐래? 누가 뭐래도 내 영원한 사랑은 옆방 <strong>개발자 오빠</strong>야. 귀엽고, 잘생기고...</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">라) 404호보단 훨씬 낫거든! 어머, 내 정신 좀 봐. 앞에 <span class="player-name"></span> 씨를 놔두고 저희들끼리 떠들어 버렸네요.</p>
<p class="line top-line fifth-line next-line">민) 죄송해요. 저희가 좀 수다쟁이거든욧! 히히.</p>
<p class="line bottom-line sixth-line five-toplines">- 아... 하하, 괜찮습니다. 그나저나 요즘 4층에서 담배 냄새가 난다고 하던데... 혹시 <span class="clicker clicker-406-9">아시는 거 있으세요?</span></p>
</div>
<div class="dialogue-box2 dialogue-406-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">라) 으~~ 무개념이야 무개념~</p>
<p class="line top-line fourth-line next-line">민) 근데 <strong>401호랑 402호가 조금 수상하던데?</strong> <strong>401호 아저씨</strong>는 맨날 이상한 연기 피우고... </p>
<p class="line top-line fifth-line next-line">라) <strong>402호 언니</strong>는 딱 봐도 남의 눈치 안보고 막 피울 것 같아. 뭔가 센 언니같아 보이거든.</p>
<p class="line bottom-line sixth-line five-toplines"><span class="clicker clicker-406-10">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-406-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-406-11">잘 부탁드리겠습니다.</span></p>
</div>
<div class="dialogue-box2 dialogue-406-12">
<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-406-12">(방에서 나간다.)</span></p>
</div>
<div class="dialogue-box2 dialogue-406-13">
<h1 class="name"> </h1>
<p class="line top-line first-line">라) 민아, 오늘 뭐 시켜 먹을래?</p>
<p class="line top-line second-line">민) 음...... 취~ 킨~? <span class="emoticon">( ͡° ͜ʖ ͡°)</span></p>
<p class="line top-line third-line">라) 꺄악! 좋아! 까르르르....</p>
<p class="line bottom-line fourth-line three-toplines"><span class="clicker clicker-406-13">(확인)</span></p>
</div>
</div>
<div class="room-407">
<img class="gif gifhover door door__407 door407__1" src="image/4th_floor/407_1.png">
<img class="gif gifhover door door__407 door407__2" src="image/4th_floor/407_2.png">
<img class="room room__407d" src="image/4th_floor/개발자.jpg">
<img class="room room__407h" src="image/4th_floor/개발자2.jpg">
<img class="avatar avatar__d" src="image/4th_floor/개발자.png">
<img class="avatar avatar__h" src="image/1st_floor_lobby/작은현.png">
<div class="dialogue-box2 dialogue-407-1">
<h1 class="name"> </h1>
<p class="line top-line first-line"><strong>407호</strong>입니다. 노크하시겠습니까?</p>
<p class="line bottom-line fast-yes-line two-toplines">- <span class="clicker clicker-407-1-1">똑똑똑!</span></p>
<p class="line bottom-line fast-no-line next-line">- <span class="clicker clicker-407-1-2">그만둔다.</span></p>
</div>
<div class="dialogue-box2 dialogue-407-2">
<h1 class="name"> </h1>
<p class="line top-line first-line"><span class="player-name"></span> 씨죠? 들어오세요. 문 열려 있어요.</p>
<p class="line bottom-line second-line one-topline">- <span class="clicker clicker-407-2">(들어가기)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-3">
<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">저는 센티멘탈 호텔 웹 개발 업무를 맡고 있는 <strong>개발자</strong>라고 해요. 이렇게 만나게 돼서 반갑군요.</p>
<p class="line bottom-line third-line two-toplines"><span class="clicker clicker-407-3">(확인)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-4">
<h1 class="name ">개발자</h1>
<p class="line top-line first-line">사실 저는 여태껏 <span class="player-name"></span> 씨를 지켜보고 있었어요. 이 호텔에 들어오는 순간부터 일거수일투족을 말이죠.</p>
<p class="line bottom-line second-line one-topline">- 네...? 절 <span class="clicker clicker-407-4">지켜보고 있었다구요?</span></p>
</div>
<div class="dialogue-box2 dialogue-407-5">
<h1 class="name">개발자</h1>
<p class="line top-line first-line">맞아요. 전 <span class="player-name"></span> 씨가 1층 라운지에서 무슨 음료를 마셨는지까지 알고 있죠.</p>
<p class="line bottom-line second-line one-topline">- 제가 <span class="clicker clicker-407-5">무슨 음료를 마셨는데요?</span></p>
</div>
<div class="dialogue-box2 dialogue-407-6">
<h1 class="name">개발자</h1>
<p class="line top-line first-line"><span class="player-name"></span> 씨는 🍹애플 사이다, 🍵밀크티, ☕아메리카노, 🍸섹스 온 더 비치를 다 마셔보지 않았나요?</p>
<p class="line bottom-line second-line two-toplines">- (어떻게 알았지?) 하, 하지만 네개를 다 마시지 않으면 다음으로 진행이 안되던데요...?</p>
<p class="line bottom-line third-line next-line"><span class="clicker clicker-407-6">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-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">- 오... 그럼 개발자님, 마술 같은 것도 부릴 수 <span class="clicker clicker-407-7">있으신가요?</span></p>
</div>
<div class="dialogue-box2 dialogue-407-8">
<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">자 어디보자... 여길 이렇게 바꾸고 저길 저렇게 바꾸면...... 좋아! 히히. <span class="clicker clicker-407-8">소환...!</span></p>
</div>
<div class="dialogue-box2 dialogue-407-9">
<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-407-9">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-10">
<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-407-10">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-11">
<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-407-11">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-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 bottom-line third-line two-toplines"><span class="clicker clicker-407-12">(다음)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-13">
<h1 class="name">작은 현</h1>
<p class="line top-line first-line">야 너! 개발자면 다야? 너 이자식 내가... <span class="clicker clicker-407-13">(뿅)</span></p>
</div>
<div class="dialogue-box2 dialogue-407-14">
<h1 class="name">개발자</h1>
<p class="line top-line first-line">이정도면 충분히 보여 드렸죠? 헤헤.</p>
<p class="line top-line second-line next-line">그나저나 요즘 담배 냄새 때문에 호텔이 떠들썩하잖아요? <span class="player-name"></span> 씨는 그걸 조사하고 있고.</p>
<p class="line bottom-line third-line two-toplines">- 아 맞다. 개발자님은 뭐 <span class="clicker clicker-407-14">아시는 거 있으신가요?</span></p>
</div>
<div class="dialogue-box2 dialogue-407-15">
<h1 class="name">개발자</h1>
<p class="line top-line first-line">음... 저는 제 방에만 있어서 자세히는 모르지만...</p>
<p class="line top-line second-line next-line">뭔가 <strong>402호</strong> 아님 <strong>404호</strong> 둘 중 한명 같아요.</p>
<p class="line top-line third-line next-line">딱히 이유는 없고... 그냥 담배 피울것같이 생겨서...? 헤헤.</p>
<p class="line bottom-line fourth-line three-toplines">- <span class="clicker clicker-407-15">아... 그렇군요.</span></p>
</div>
<div class="dialogue-box2 dialogue-407-16">
<h1 class="name">개발자</h1>
<p class="line top-line first-line">그럼 저는 다시 개발 업무를 하러 가야겠네요. 꼭 교육 합격하시길 바랄게요!</p>
<p class="line bottom-line second-line two-toplines">아, 감사합니다. 그럼 앞으로 잘부탁드립니다!</p>
<p class="line bottom-line third-line next-line"><span class="clicker clicker-407-16">(방에서 나간다)</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 block = {display: 'block'};
let none = {display: 'none'};
let hasClicked401 = false;
let hasClicked402 = false;
let hasClicked404 = false;
let hasClicked406 = false;
let hasClicked407 = false;
let hasClickedBigHyun = false;
//sound
$('.door').click(function(){
$('#knocking')[0].play();
})
// start
//quick view
$('.dialogue-0-1, .dialogue-0-2, .dialogue-0-3, .dialogue-0-4').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.clicker-0-1-1').on('click', function() {
$('.dialogue-0-1, .dialogue-0-1 .line').hide();
$('.dialogue-0-2, .dialogue-0-2 .line').show();
})
$('.clicker-0-2-1').on('click', function() {
$('.dialogue-0-2, .dialogue-0-2 .line').hide();
$('.dialogue-0-3, .dialogue-0-3 .line').show();
})
//close
$('.clicker-0-3-1').on('click', function() {
$('.dialogue-0-3, .dialogue-0-3 .line, .dialogue-box, .big-hyun__avatar').hide();
})
// if not opened every door
$('.big-hyun__gif').on('click', function() {
if (hasClicked401 === true && hasClicked402 === true && hasClicked404 === true && hasClicked406 === true && hasClicked407 === true) {
$('.dialogue-1-1, .dialogue-1-1 .line, .dialogue-box, .big-hyun__avatar').show();
$('.movingarrow__big-hyun').hide();
}
else {
$('.dialogue-0-4, .dialogue-0-4 .line, .dialogue-box, .big-hyun__avatar').show();
}
})
//close
$('.clicker-0-4').on('click', function() {
$('.dialogue-0-4, .dialogue-0-4 .line, .dialogue-box, .big-hyun__avatar').hide();})
// QUIZ!!
//quick view
$('.dialogue-1-1, .dialogue-1-2, .dialogue-1-3, .dialogue-1-401, .dialogue-1-402, .dialogue-1-404, .dialogue-1-406, .dialogue-1-407, .dialogue-1-wrong, .dialogue-1-right').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.clicker-1-1').on('click', function() {
hasClickedBigHyun = true;
$('.dialogue-1-1, .dialogue-1-1 .line').hide();
$('.dialogue-1-2, .dialogue-1-2 .line').show();
})
//힌트 보기
$('.clicker-1-hint').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-3, .dialogue-1-3 .line').show();
})
//return
$('.clicker-1-3').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').show();
$('.dialogue-1-3, .dialogue-1-3 .line').hide();
})
//401
$('.clicker-1-401').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-401, .dialogue-1-401 .line, .avatar__401').show();
})
//402
$('.clicker-1-402').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-402, .dialogue-1-402 .line, .avatar__402').show();
})
//404
$('.clicker-1-404').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-404, .dialogue-1-404 .line, .avatar__404').show();
})
//406
$('.clicker-1-406').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-406, .dialogue-1-406 .line, .avatar__406').show();
})
//407
$('.clicker-1-407').on('click', function() {
$('.dialogue-1-2, .dialogue-1-2 .line, .big-hyun__avatar').hide();
$('.dialogue-1-407, .dialogue-1-407 .line, .avatar__d').show();
})
//wrong
$('.clicker-1-wrong').on('click', function() {
addScore(-10);
$('.dialogue-1-401, .dialogue-1-402, .dialogue-1-404, .dialogue-1-406, .dialogue-1-407, .avatar__401, .avatar__402, .avatar__404, .avatar__406, .avatar__d').hide();
$('.dialogue-1-wrong, .dialogue-1-wrong .line, .big-hyun__avatar').show();
})
//close
$('.clicker-1-closew').on('click', function() {
$('.dialogue-1-wrong, .dialogue-1-wrong .line, .dialogue-box, .big-hyun__gif, .big-hyun__avatar').hide();
$('.movingarrow__elevator').show();
})
//right
$('.clicker-1-right').on('click', function() {
addScore(10);
$('.dialogue-1-401, .dialogue-1-402, .dialogue-1-404, .dialogue-1-406, .dialogue-1-407, .avatar__401, .avatar__402, .avatar__404, .avatar__406, .avatar__d').hide();
$('.dialogue-1-right, .dialogue-1-right .line, .big-hyun__avatar').show();
})
//close
$('.clicker-1-closer').on('click', function() {
$('.dialogue-1-right, .dialogue-1-right .line, .dialogue-box, .big-hyun__gif, .big-hyun__avatar').hide();
$('.movingarrow__elevator').show();
})
// elevator
$('.button-off').on('click', function() {
$('#elevatorBellRing')[0].play();
$('.movingarrow__elevator').hide();
$('.button-on, .dialogue-2-1, .dialogue-2-1 .line, .alarm-on, .dialogue-box').show();
})
//quick view
$('.dialogue-2-1').click(function() {
$(event.currentTarget).children().removeClass('first-line fast-yes-line fast-no-line');})
// close
$('.clicker-2-2').click(function(){
$('.button-on, .dialogue-2-1, .dialogue-2-1 .line, .alarm-on, .dialogue-box').hide();
})
$('.clicker-2-1').click(function(){
event.preventDefault();
$('#fade-box').fadeIn(2000);
setTimeout(function() {window.location = $('#nextStage').attr('href');}, 2000);
})
// 401
//quick view
$('.dialogue-401-1, .dialogue-401-2, .dialogue-401-3, .dialogue-401-4, .dialogue-401-5, .dialogue-401-6, .dialogue-401-7, .dialogue-401-8, .dialogue-401-9').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.door401__1').on('mouseenter', function() {
$(event.currentTarget).hide();
$('.door401__2').show();
})
$('.door401__2').on('mouseleave', function() {
$(event.currentTarget).hide();
$('.door401__1').show();
})
$('.door__401').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
$('.dialogue-401-1, .dialogue-401-1 .line, .dialogue-box').show();
} else {}})
//close
$('.clicker-401-1-2').on('click', function() {
$('.dialogue-401-1, .dialogue-401-1 .line, .dialogue-box').hide();})
$('.clicker-401-1-1').on('click', function() {
$('.dialogue-401-1, .dialogue-401-1 .line').hide();
$('.dialogue-401-2, .dialogue-401-2 .line').show();
})
$('.clicker-401-2-1').on('click', function() {
$('.dialogue-401-2, .dialogue-401-2 .line').hide();
$('.dialogue-401-3, .dialogue-401-3 .line, #room-bg, .room401, .avatar__401').show();
})
$('.clicker-401-3-1').on('click', function() {
$('.dialogue-401-3, .dialogue-401-3 .line').hide();
$('.dialogue-401-4, .dialogue-401-4 .line').show();
})
$('.clicker-401-4-1').on('click', function() {
$('.dialogue-401-4, .dialogue-401-4 .line').hide();
$('.dialogue-401-5, .dialogue-401-5 .line').show();
})
$('.clicker-401-5-1').on('click', function() {
$('.dialogue-401-5, .dialogue-401-5 .line').hide();
$('.dialogue-401-6, .dialogue-401-6 .line').show();
})
$('.clicker-401-6-1').on('click', function() {
$('.dialogue-401-6, .dialogue-401-6 .line').hide();
$('.dialogue-401-7, .dialogue-401-7 .line').show();
})
$('.clicker-401-7-1').on('click', function() {
$('.dialogue-401-7, .dialogue-401-7 .line').hide();
$('.dialogue-401-8, .dialogue-401-8 .line').show();
})
$('.clicker-401-8-1').on('click', function() {
$('.dialogue-401-8, .dialogue-401-8 .line').hide();
$('.dialogue-401-9, .dialogue-401-9 .line').show();
})
//close
$('.clicker-401-9-1').on('click', function() {
$('.dialogue-401-9, .dialogue-box, #room-bg, .room401, .avatar__401').css(none);
hasClicked401 = true;
if (hasClicked401 === true && hasClicked402 === true && hasClicked404 === true && hasClicked406 === true && hasClicked407 === true) {
$('.movingarrow__big-hyun').show();
}
})
// 402
//quick view
$('.dialogue-402-1, .dialogue-402-2, .dialogue-402-3, .dialogue-402-4, .dialogue-402-5, .dialogue-402-6, .dialogue-402-7, .dialogue-402-8').click(function() {
$(event.currentTarget).children().css('animation', 'none');})
$('.door402__1').on('mouseenter', function() {
$(event.currentTarget).hide();
$('.door402__2').show();
})
$('.door402__2').on('mouseleave', function() {
$(event.currentTarget).hide();
$('.door402__1').show();
})
$('.door__402').on('click', function() {
if (document.querySelector('.dialogue-box').style.display === 'none') {
$('.dialogue-402-1, .dialogue-402-1 .line, .dialogue-box').show();
} else {}})
//close
$('.clicker-402-1-2').on('click', function() {
$('.dialogue-402-1, .dialogue-402-1 .line, .dialogue-box').hide();})
$('.clicker-402-1-1').on('click', function() {
$('#dog-barking')[0].play();
$('.dialogue-402-1, .dialogue-402-1 .line').hide();
$('.dialogue-402-2, .dialogue-402-2 .line').show();
})
$('.clicker-402-2').on('click', function() {
$('.dialogue-402-2, .dialogue-402-2 .line').hide();
$('.dialogue-402-3, .dialogue-402-3 .line, #room-bg, .room402, .avatar__402').show();