/** * Standalone ZeroAD Detective Game Engine (No server / file:// compatible) */ (function() { 'use strict'; const EMBEDDED_SCENARIOS_INDEX = [{"id":"evaluation-demo","title":"서재의 은제 인장과 식은 찻잔","subtitle":"5분 안에 규명하는 클래식 밀실 트릭","author":"수석 심사관","category":"심사 검증용 데모","difficulty":"추리 입문 (★★☆)","estimatedMinutes":5,"summary":"밀실 서재에서 일어난 은제 인장 도난 및 독살 미수 사건. 3명의 용의자를 심문하여 2개의 사건 서류철을 연결하고, 사전 공작과 밀실 조작의 전말을 밝혀내세요.","coverColor":"#143a3b","coverIcon":"CASE 00","file":"./scenarios/evaluation-demo.json"},{"id":"blackwood-manor","title":"블랙우드 저택의 밀실과 식은 찻잔","subtitle":"빗소리 뒤에 숨겨진 30년의 원한과 굴뚝 밀실 트릭","author":"아서 윈체스터","category":"정통 클래식 밀실 미스터리","difficulty":"심층 추리 (3단계 인과)","estimatedMinutes":30,"summary":"19세기 말 런던 근교의 블랙우드 저택. 짙은 안개와 빗속에서 집사, 조카와 나누는 일상 속에서 서서히 짙어지는 의문들. 마침내 3층 서재에서 일어난 밀실 사건의 진상을 3개의 사건 서류철로 규명하세요.","coverColor":"#14253d","coverIcon":"CASE 01","file":"./scenarios/blackwood-manor.json"},{"id":"blue-sapphire","title":"사라진 푸른 사파이어의 비밀","subtitle":"폭우 속 밀실 서재에서 증발한 억만금의 보물","author":"수석 수사관","category":"정통 밀실 미스터리","difficulty":"심층 추리 (3단계 인과)","estimatedMinutes":25,"summary":"폭풍우로 고립된 저택의 2층 밀실 서재에서 보관함 속 푸른 사파이어가 가짜 유리알로 바뀌어 증발했습니다. 3개의 사건 서류철을 연결하여 사전 공작부터 밀실 조작, 보석 은닉까지의 전말을 밝혀내세요.","coverColor":"#173b3b","coverIcon":"CASE 02","file":"./scenarios/blue-sapphire.json"}]; const EMBEDDED_SCENARIOS_DATA = {"evaluation-demo":{"id":"evaluation-demo","meta":{"title":"서재의 은제 인장과 식은 찻잔","subtitle":"5분 안에 규명하는 클래식 밀실 트릭","author":"수석 심사관","category":"심사 검증용 데모","difficulty":"추리 입문 (★★☆)","estimatedMinutes":5,"summary":"밀실 서재에서 일어난 은제 인장 도난 및 독살 미수 사건. 3명의 용의자를 심문하여 2개의 사건 서류철을 연결하고, 사전 공작과 밀실 조작의 전말을 밝혀내세요."},"characters":[{"id":"narrator","name":"아서 윈체스터","role":"사립 탐정","mark":"탐","color":"#94aaa5","image":""},{"id":"butler_choi","name":"집사 최진혁","role":"수석 집사","mark":"최","color":"#d9826c","image":"./assets/images/portrait_butler.png"},{"id":"heir_kang","name":"강도윤","role":"조카","mark":"강","color":"#76c4b2","image":"./assets/images/portrait_heir.png"},{"id":"doctor_han","name":"한소희","role":"가문 주치의","mark":"한","color":"#64b5f6","image":"./assets/images/portrait_doctor.png"}],"locations":[{"id":"study","name":"2층 밀실 서재","bgCode":"#051718","image":"./assets/images/bg_vintage_study.jpg"},{"id":"hall","name":"1층 응접실","bgCode":"#081d1f","image":"./assets/images/bg_mansion_hall.jpg"}],"evidenceTags":[{"id":"who_heir","category":"who","label":"조카 강도윤","description":"도박 빚에 쫓기던 후계자"},{"id":"who_butler","category":"who","label":"집사 최진혁","description":"서재 열쇠를 관리하던 집사"},{"id":"who_doctor","category":"who","label":"주치의 한소희","description":"약초와 차를 조제한 의사"},{"id":"when_before_dinner","category":"when","label":"저녁 티타임 전","description":"차가 준비되던 시간"},{"id":"when_nine_clock","category":"when","label":"밤 아홉 시 정각","description":"비명과 함께 문을 부순 시각"},{"id":"where_study","category":"where","label":"2층 밀실 서재","description":"안쪽 빗장이 걸린 사건 현장"},{"id":"where_hall","category":"where","label":"1층 응접실","description":"용의자들이 대기하던 곳"},{"id":"what_poison_tea","category":"what","label":"식은 얼그레이 독차","description":"수면제가 혼입되어 식은 찻잔"},{"id":"what_silver_seal","category":"what","label":"은제 인장과 낚싯줄","description":"창문 빗장을 당긴 트릭 도구"},{"id":"how_mix_poison","category":"how","label":"사전에 수면제를 타서","description":"피해자를 의식 불명에 빠뜨림"},{"id":"how_lock_trick","category":"how","label":"밖에서 빗장 걸기","description":"낚싯줄로 밀실을 연출함"},{"id":"why_debt","category":"why","label":"사업 빚 청산","description":"유언장을 조작하기 위한 동기"},{"id":"why_revenge","category":"why","label":"과거의 원한 복수","description":"오랜 원망의 죗값"},{"id":"action_unconscious","category":"action","label":"의식을 잃게 했다","description":"사전 무력화 공작"},{"id":"action_locked","category":"action","label":"밀실을 연출했다","description":"트릭으로 빗장을 잠금"}],"memo":{"truth":{"who":"who_heir","when":"when_before_dinner","where":"where_study","what":"what_poison_tea","how":"how_mix_poison","why":"why_debt","action":"action_unconscious"}},"nodes":[{"id":"node_1","speakerId":"narrator","locationId":"hall","dialogue":"폭우가 쏟아지는 밤, 나는 저택 주인의 긴급한 요청을 받고 2층 서재 앞 홀에 도착했다.","next":"node_2"},{"id":"node_2","speakerId":"butler_choi","locationId":"hall","dialogue":"탐정님, 마침내 오셨군요. 서재 문이 안쪽에서 굳게 잠겨 있고 안에서 아무런 기척이 없습니다.","unlockTag":"who_butler","next":"node_3"},{"id":"node_3","speakerId":"heir_kang","locationId":"hall","dialogue":"삼촌이 오늘 밤 유언장을 고쳐 쓰겠다고 하더니... 빚쟁이들에게 쫓기는 내 처지는 안중에도 없었던 거야!","unlockTag":"who_heir","unlockTag2":"why_debt","next":"node_4"},{"id":"node_4","speakerId":"doctor_han","locationId":"hall","dialogue":"저녁 티타임 전에 강도윤 씨가 주방에서 삼촌의 찻잔을 직접 들고 올라가는 걸 보았어요.","unlockTag":"who_doctor","unlockTag2":"when_before_dinner","next":"node_5"},{"id":"node_5","speakerId":"butler_choi","locationId":"hall","dialogue":"아홉 시 정각입니다! 더는 지체할 수 없으니 문을 도끼로 부수고 들어가겠습니다!","unlockTag":"when_nine_clock","next":"node_6"},{"id":"node_6","speakerId":"narrator","locationId":"study","dialogue":"문이 부서지자 빗장이 바닥에 떨어졌다. 책상 위에는 주인이 쓰러져 있었고, 가문의 가보인 은제 인장이 사라져 있었다.","unlockTag":"where_study","next":"node_7"},{"id":"node_7","speakerId":"doctor_han","locationId":"study","dialogue":"주인님은 숨이 붙어 있지만 깊은 수면제에 취해 계십니다! 찻잔은 이미 얼음장처럼 차갑게 식어 있어요!","unlockTag":"what_poison_tea","unlockTag2":"how_mix_poison","unlockTag3":"action_unconscious","next":"node_8"},{"id":"node_8","speakerId":"butler_choi","locationId":"study","dialogue":"창틀 틈새에 은제 인장과 낚싯줄이 묶여 있습니다! 밖에서 창문 빗장을 당겨 잠근 트릭입니다!","unlockTag":"what_silver_seal","unlockTag2":"how_lock_trick","unlockTag3":"action_locked","next":"node_9"},{"id":"node_9","speakerId":"narrator","locationId":"study","dialogue":"모든 단서가 모였다. [수사 책상]을 열어 서류철 2개를 [➔ 연결]로 잇고, 사전 독차 투여부터 밀실 조작까지의 전말을 완성하여 결론을 제출하자.","next":null}],"endings":{"perfect":{"title":"서재의 은제 인장 사건 완전 규명","grade":"S RANK","summary":"식은 얼그레이 차와 은제 인장 낚싯줄 밀실 트릭을 완벽하게 증명했습니다.","verdictText":"조카 강도윤은 사업 빚을 청산하기 위해 저녁 티타임 전에 수면제를 사전에 타서 주인을 의식 불명에 빠뜨렸습니다. 이후 은제 인장과 낚싯줄로 밖에서 빗장을 걸어 밀실을 연출했습니다. 윈체스터 탐정의 명쾌한 2단계 인과 추리로 사건은 완벽하게 해결되었습니다."},"partial":{"title":"부분적 사건 해결","grade":"B RANK","summary":"범인은 적중했으나 세부 트릭 소명이 일부 부족합니다.","verdictText":"강도윤이 범인임은 밝혔으나, 낚싯줄 밀실 트릭의 물리적 전말을 완전히 증명하지 못했습니다."},"wrong":{"title":"오판 및 수사 실패","grade":"F RANK","summary":"엉뚱한 인물을 지목했거나 인과 관계가 모순됩니다.","verdictText":"제출된 사건 본문은 현장의 식은 찻잔 및 은제 인장 증거와 모순됩니다."}}},"blackwood-manor":{"id":"blackwood-manor","meta":{"title":"블랙우드 저택의 밀실과 식은 찻잔","subtitle":"빗소리 뒤에 숨겨진 30년의 원한과 굴뚝 밀실 트릭","author":"아서 윈체스터","category":"정통 클래식 밀실 미스터리","difficulty":"심층 추리 (3단계 인과)","estimatedMinutes":30,"summary":"19세기 말 런던 근교의 블랙우드 저택. 짙은 안개와 빗속에서 집사, 조카와 나누는 일상 속에서 서서히 짙어지는 의문들. 마침내 3층 서재에서 일어난 밀실 사건의 진상을 3개의 사건 서류철로 규명하세요."},"characters":[{"id":"narrator","name":"아서 윈체스터","role":"사립 탐정","mark":"탐","color":"#94aaa5","image":""},{"id":"butler_bartholomew","name":"바솔로뮤","role":"수석 집사","mark":"바","color":"#d9826c","image":"./assets/images/portrait_butler.png"},{"id":"heir_julian","name":"줄리안","role":"조카","mark":"줄","color":"#76c4b2","image":"./assets/images/portrait_heir.png"},{"id":"doctor_lee","name":"한소희","role":"가문 주치의","mark":"한","color":"#64b5f6","image":"./assets/images/portrait_doctor.png"},{"id":"scholar_yoon","name":"윤 감정사","role":"고문서 감정관","mark":"윤","color":"#d5b970","image":"./assets/images/portrait_scholar.png"}],"locations":[{"id":"hall","name":"1층 메인 홀","bgCode":"#081d1f","image":"./assets/images/bg_mansion_hall.jpg"},{"id":"study","name":"3층 본관 서재","bgCode":"#051718","image":"./assets/images/bg_vintage_study.jpg"},{"id":"corridor","name":"3층 복도","bgCode":"#091c1e","image":"./assets/images/bg_vintage_study.jpg"}],"evidenceTags":[{"id":"who_butler","category":"who","label":"집사 바솔로뮤","description":"30년간 저택을 지킨 수석 집사"},{"id":"who_julian","category":"who","label":"조카 줄리안","description":"도박 빚에 쫓기는 유일한 후계자"},{"id":"who_doctor","category":"who","label":"주치의 한소희","description":"약품과 건강을 관리하는 의사"},{"id":"when_before_eight","category":"when","label":"여덟 시 이전","description":"주인이 서재에 틀어박히기 전"},{"id":"when_right_after","category":"when","label":"범행 직후","description":"피아노선 트릭을 설치하던 때"},{"id":"when_nine_clock","category":"when","label":"아홉 시 정각","description":"가짜 비명과 도끼 소동의 시각"},{"id":"where_hall_kitchen","category":"where","label":"주방과 복도","description":"차가 준비되던 1층 공간"},{"id":"where_study","category":"where","label":"3층 본관 서재","description":"도끼로 문을 부순 밀실 현장"},{"id":"where_chimney_roof","category":"where","label":"굴뚝과 지붕","description":"검댕이 긁혀 나간 외부 통로"},{"id":"what_poison_tea","category":"what","label":"식은 얼그레이 독차","description":"얼음장처럼 차갑게 식은 찻잔"},{"id":"what_piano_wire","category":"what","label":"피아노선과 굴뚝","description":"벽난로 구석에 걸린 나일론 철사"},{"id":"what_letter_opener","category":"what","label":"은제 레터 오프너","description":"가문의 문장이 새겨진 흉기"},{"id":"how_poison_mix","category":"how","label":"독을 사전에 타서","description":"차를 건네 의식을 잃게 만듦"},{"id":"how_roof_trick","category":"how","label":"지붕에서 빗장 당기기","description":"선으로 내부 빗장을 들어올림"},{"id":"how_fake_scream","category":"how","label":"가짜 비명으로 소동 연출","description":"사망 시점을 1시간 늦춰 위장"},{"id":"why_sister_revenge","category":"why","label":"여동생의 원한 복수","description":"30년 전 억울한 죽음의 죗값"},{"id":"why_debt_escape","category":"why","label":"도박 빚 청산","description":"유산을 가로채기 위한 욕망"},{"id":"action_unconscious","category":"action","label":"의식을 잃게 했다","description":"차를 건네 무력화시킨 첫 단계"},{"id":"action_locked_room","category":"action","label":"밀실을 연출했다","description":"굴뚝 피아노선으로 창문을 잠금"},{"id":"action_faked_alibi","category":"action","label":"알리바이를 조작했다","description":"발견 시각을 늦추어 위장"}],"memo":{"truth":{"who":"who_butler","when":"when_before_eight","where":"where_study","what":"what_poison_tea","how":"how_poison_mix","why":"why_sister_revenge","action":"action_unconscious"}},"nodes":[{"id":"node_1","speakerId":"narrator","locationId":"hall","dialogue":"차가운 빗줄기가 런던 근교의 거대한 석조 저택, 블랙우드 매너의 첨탑을 사정없이 두드리고 있었다. 19세기 말의 음울한 밤안개는 저택 전체를 집어삼킬 듯 짙게 깔려 있었다.","next":"node_2"},{"id":"node_2","speakerId":"narrator","locationId":"hall","dialogue":"삐걱거리는 마차에서 내린 나는 젖은 중절모의 챙을 털어내며 깃을 세웠다. 감청색 수트 위로 회중시계 줄이 차갑게 짤랑였다.","next":"node_3"},{"id":"node_3","speakerId":"butler_bartholomew","locationId":"hall","dialogue":"먼 길 오시느라 고생 많으셨습니다, 윈체스터 탐정님. 날씨가 궂어 마차가 오기 힘들었을 텐데 제시간에 와주셨군요.","unlockTag":"who_butler","next":"node_4"},{"id":"node_4","speakerId":"narrator","locationId":"hall","dialogue":"은빛 머리칼을 단정히 빗어 넘긴 노집사 바솔로뮤는 구김 없는 검은 연미복 차림으로 촛대를 든 채 깍듯하게 고개를 숙였다. 30년간 이 집을 지켜온 사람 특유의 무거운 침착함이었다.","next":"node_5"},{"id":"node_5","speakerId":"butler_bartholomew","locationId":"hall","dialogue":"젖은 외투는 제가 받아두겠습니다. 에드먼드 경께서는 저녁 식사를 물리고 여덟 시가 되자마자 3층 서재로 올라가셨습니다.","unlockTag":"when_before_eight","next":"node_6"},{"id":"node_6","speakerId":"butler_bartholomew","locationId":"hall","dialogue":"'오늘 밤은 밀린 장부와 유언장 정리를 끝내야 하니 그 누구도 서재 근처에 얼씬거리지 말라'고 엄하게 이르시더군요.","next":"node_7"},{"id":"node_7","speakerId":"narrator","locationId":"hall","dialogue":"벽난로 앞의 낡은 가죽 소파에는 붉은 와인잔을 든 젊은 남자가 거칠게 숨을 몰아쉬며 앉아 있었다. 에드먼드 경의 조카, 줄리안이었다.","next":"node_8"},{"id":"node_8","speakerId":"heir_julian","locationId":"hall","dialogue":"칫... 탐정까지 부르다니 삼촌도 늙어서 겁이 많아졌군. 어차피 이 저택과 철도 회사의 유일한 피붙이는 나 하나뿐인데 말이야.","unlockTag":"who_julian","next":"node_9"},{"id":"node_9","speakerId":"heir_julian","locationId":"hall","dialogue":"바솔로뮤! 술 한 잔 더 가져와! 런던 사채업자 놈들이 내 목을 조여오는데 삼촌은 금고 문을 걸어 잠그고 푼돈 한 푼 안 내주겠다고 소리를 지르더군.","unlockTag":"why_debt_escape","next":"node_10"},{"id":"node_10","speakerId":"doctor_lee","locationId":"hall","dialogue":"줄리안 씨, 그쯤 해두시죠. 술 냄새가 온 홀에 진동합니다. 에드먼드 경은 심장과 혈압이 매우 불안정하신 상태예요.","unlockTag":"who_doctor","next":"node_11"},{"id":"node_11","speakerId":"narrator","locationId":"hall","dialogue":"계단참에서 내려온 주치의 한소희가 차분한 눈빛으로 줄리안을 쏘아보았다. 그녀의 손에는 은제 약통과 진정용 약초 주머니가 들려 있었다.","next":"node_12"},{"id":"node_12","speakerId":"scholar_yoon","locationId":"hall","dialogue":"저택 3층 서재는 오늘 낮에 굴뚝 청소부가 벽돌을 갈아 끼우느라 하루 종일 소란스러웠지요. 그 탓에 책들에 검댕이 묻어 감정 작업을 며칠이나 미뤘습니다.","next":"node_13"},{"id":"node_13","speakerId":"butler_bartholomew","locationId":"hall","dialogue":"곧 아홉 시가 다 되어 가는군요. 주인님께서 늘 이 시간에 찾으시는 얼그레이 차를 준비해 서재 문앞에 가져다 두겠습니다.","unlockTag":"where_hall_kitchen","unlockTag2":"how_poison_mix","next":"node_14"},{"id":"node_14","speakerId":"narrator","locationId":"hall","dialogue":"바솔로뮤는 은쟁반 위에 찻잔을 받쳐 들고 묵묵히 3층 계단을 향해 올라갔다. 홀에는 괘종시계의 무거운 초침 소리만이 똑딱거렸다.","next":"node_15"},{"id":"node_15","speakerId":"narrator","locationId":"corridor","dialogue":"잠시 후, 3층 복도 위쪽에서 날카로운 금속음과 함께 무언가 무너져 내리는 둔탁한 소음이 정적을 갈기갈기 찢었다.","next":"node_16"},{"id":"node_16","speakerId":"butler_bartholomew","locationId":"corridor","dialogue":"으악! 주인님! 윈체스터 탐정님! 서재 안에서 끔찍한 비명이 났습니다! 문이 안에서 잠겨 열리지 않습니다!","unlockTag":"when_nine_clock","unlockTag2":"how_fake_scream","next":"node_17"},{"id":"node_17","speakerId":"heir_julian","locationId":"corridor","dialogue":"뭐야? 무슨 일이야! 비켜봐, 내가 열어볼 테니까! 젠장, 철제 볼트가 안쪽에서 꽉 물려 있어!","next":"node_18"},{"id":"node_18","speakerId":"butler_bartholomew","locationId":"corridor","dialogue":"정원사를 불렀습니다! 도끼로 문고리 주변을 내리찍어 부수겠습니다!","next":"node_19"},{"id":"node_19","speakerId":"narrator","locationId":"study","dialogue":"콰광! 육중한 마호가니 문짝이 쪼개지며 서재 안으로 쏟아져 들어갔다. 방 안을 메운 것은 차가운 빗바람과 짙은 피비린내였다.","next":"node_20"},{"id":"node_20","speakerId":"narrator","locationId":"study","dialogue":"에드먼드 경은 붉은 카펫 위에 엎드린 채 미동도 없었다. 그의 심장 부근에는 가문의 문장이 새겨진 은제 레터 오프너가 손잡이만 남긴 채 깊숙이 박혀 있었다.","unlockTag":"where_study","unlockTag2":"what_letter_opener","unlockTag3":"action_unconscious","next":"node_21"},{"id":"node_21","speakerId":"heir_julian","locationId":"study","dialogue":"삼촌...! 으아악! 문은 우리가 도끼로 부수기 전까지 안에서 잠겨 있었잖아! 창문도 다 빗장이 걸려 있어! 이건 자살이야! 스스로 찌른 거라고!","next":"node_22"},{"id":"node_22","speakerId":"doctor_lee","locationId":"study","dialogue":"스스로 레터 오프너를 심장 깊숙이 찔러 넣는 건 인체 구조상 불가능에 가깝습니다. 게다가 경의 입술 주변에 푸르스름한 청색증이 돌고 있어요.","next":"node_23"},{"id":"node_23","speakerId":"narrator","locationId":"study","dialogue":"나는 천천히 책상으로 다가갔다. 책상 위에는 마시다 만 얼그레이 찻잔이 놓여 있었다. 찻잔 표면에 손을 얹는 순간, 이상할 정도로 시린 한기가 손가락을 타고 올라왔다.","next":"node_24"},{"id":"node_24","speakerId":"narrator","locationId":"study","dialogue":"벽난로의 장작불이 활활 타오르고 있어 실내 온도가 꽤 훈훈한데도, 찻잔은 마치 냉장실에 몇 시간 동안 넣어둔 것처럼 얼음장처럼 차갑게 식어 있었다.","unlockTag":"what_poison_tea","next":"node_25"},{"id":"node_25","speakerId":"scholar_yoon","locationId":"study","dialogue":"보세요, 벽난로 안쪽에 타다 남은 양피지 파편이 있습니다. 에드먼드 경이 작성 중이던 새 유언장 조각인 것 같군요.","next":"node_26"},{"id":"node_26","speakerId":"narrator","locationId":"study","dialogue":"시선을 아래로 내리자 벽난로 구석 카펫 틈새에 물기에 젖은 가느다란 피아노선 한 가닥이 버려져 있었다. 그리고 굴뚝 안쪽 벽돌의 검댕이 누군가 줄을 강하게 끌어당긴 듯 길게 긁혀 나가 있었다.","unlockTag":"what_piano_wire","unlockTag2":"where_chimney_roof","unlockTag3":"how_roof_trick","unlockTag4":"action_locked_room","next":"node_27"},{"id":"node_27","speakerId":"butler_bartholomew","locationId":"study","dialogue":"탐정님, 저는 정말 아홉 시 정각에 차를 올려 보냈을 뿐입니다. 비명을 듣고 줄리안 도련님과 정원사를 불렀습니다. 저를 의심하시는 겁니까?","unlockTag":"when_right_after","unlockTag2":"action_faked_alibi","next":"node_28"},{"id":"node_28","speakerId":"narrator","locationId":"study","dialogue":"바솔로뮤는 여전히 흐트러짐 없는 자세로 서 있었다. 하지만 그의 검은 연미복 오른쪽 소매 끝자락에, 굴뚝 벽돌에서 묻어난 것과 동일한 희미한 탄매 검댕이 묻어 있었다.","next":"node_29"},{"id":"node_29","speakerId":"narrator","locationId":"study","dialogue":"모든 조각이 머릿속에서 맞물려 돌아가기 시작했다. 찻잔의 냉각 시간, 굴뚝을 통과한 피아노선 트릭, 그리고 여덟 시 이전부터 시작된 치밀한 범행.","next":"node_30"},{"id":"node_30","speakerId":"butler_bartholomew","locationId":"study","dialogue":"...30년 전 제 어린 여동생이 이 차가운 저택 지하실에서 어떻게 병들어 죽어갔는지, 에드먼드 경은 그 죗값을 누구보다 잘 알고 있었습니다.","unlockTag":"why_sister_revenge","next":"node_31"},{"id":"node_31","speakerId":"narrator","locationId":"study","dialogue":"바솔로뮤의 굳게 다물린 입가에 희미하고 쓸쓸한 체념의 미소가 번졌다.","next":"node_32"},{"id":"node_32","speakerId":"narrator","locationId":"study","dialogue":"진실의 윤곽은 드러났다. 이제 [수사 책상]을 펼쳐 세 개의 사건 서류철을 차례대로 연결하고, 논리적인 인과 체인으로 사건의 전말을 밝혀낼 때다.","next":null}],"endings":{"perfect":{"title":"식은 찻잔과 굴뚝 밀실의 완전한 규명","grade":"S RANK","summary":"얼그레이 독차 사전 투여, 굴뚝 피아노선 밀실 트릭, 식은 찻잔 시간 조작 알리바이를 완벽하게 증명했습니다.","verdictText":"바솔로뮤는 여동생의 원한을 갚기 위해 여덟 시 이전에 독을 사전에 타서 에드먼드 경을 의식 불명에 빠뜨렸습니다. 이후 피아노선과 굴뚝을 이용해 지붕에서 빗장을 당겨 완벽한 밀실을 연출한 뒤, 아홉 시 정각에 가짜 비명으로 소동을 일으켜 알리바이를 조작했습니다. 윈체스터 탐정의 차가운 논리로 30년 저택의 비극은 마침내 종지부를 찍었습니다."},"partial":{"title":"부분적 사건 해결","grade":"B RANK","summary":"범인은 지목했으나 굴뚝 피아노선 트릭이나 시간 조작 정황의 논리가 일부 부족합니다.","verdictText":"바솔로뮤가 범인임은 밝혀냈으나, 피아노선 빗장 트릭과 식은 찻잔의 냉각 시간차를 통한 알리바이 조작 전말을 완벽히 소명하지는 못했습니다."},"wrong":{"title":"오판 및 미제 종결","grade":"F RANK","summary":"조카 줄리안을 엉뚱하게 지목했거나 사건의 인과 체인이 모순됩니다.","verdictText":"제출된 사건 본문은 현장의 식은 찻잔 온도 및 굴뚝 피아노선 증거와 모순됩니다. 진범 바솔로뮤는 침묵 속에 품속의 열쇠를 감추고 유유히 저택을 떠났습니다."}}},"blue-sapphire":{"id":"blue-sapphire","meta":{"title":"사라진 푸른 사파이어의 비밀","subtitle":"폭우 속 밀실 서재에서 증발한 억만금의 보물","author":"수석 수사관","category":"정통 밀실 미스터리","difficulty":"심층 추리 (3단계 인과)","estimatedMinutes":25,"summary":"폭풍우로 고립된 저택의 2층 밀실 서재에서 보관함 속 '푸른 사파이어'가 가짜 유리알로 바뀌어 증발했습니다. 용의자들의 생생한 진술 속 모순을 파헤치고, 3개의 사건 서류철을 연결하여 사전 공작부터 밀실 조작, 보석 은닉까지의 전말을 밝혀내세요."},"characters":[{"id":"heir_kang","name":"강도윤","role":"조카","mark":"강","color":"#76c4b2","image":"./assets/images/portrait_heir.png"},{"id":"doctor_han","name":"한소희","role":"약초학자","mark":"한","color":"#64b5f6","image":"./assets/images/portrait_doctor.png"},{"id":"butler_choi","name":"최진혁","role":"집사","mark":"최","color":"#d9826c","image":"./assets/images/portrait_butler.png"},{"id":"scholar_yoon","name":"윤 박사","role":"감정사","mark":"윤","color":"#d5b970","image":"./assets/images/portrait_scholar.png"}],"locations":[{"id":"manor_hall","name":"1층 응접실","bgCode":"#081d1f","image":"./assets/images/bg_mansion_hall.jpg"},{"id":"study","name":"2층 서재","bgCode":"#051718","image":"./assets/images/bg_vintage_study.jpg"},{"id":"wine_cellar","name":"지하 와인실","bgCode":"#0a1318","image":"./assets/images/bg_vintage_study.jpg"}],"evidenceTags":[{"id":"who_heir","category":"who","label":"조카 강도윤","description":"골동품 빚에 쫓기던 조카"},{"id":"who_doctor","category":"who","label":"약초학자 한소희","description":"특제 차를 준비한 전문가"},{"id":"who_butler","category":"who","label":"집사 최진혁","description":"서재 열쇠를 쥔 수석 집사"},{"id":"who_scholar","category":"who","label":"감정사 윤 박사","description":"괘종시계를 수리한 장인"},{"id":"when_teatime","category":"when","label":"티타임 직전","description":"모두가 차를 마시기 직전"},{"id":"when_blackout","category":"when","label":"정전 틈새","description":"천둥으로 불이 꺼진 5분간"},{"id":"when_midnight","category":"when","label":"자정 감정회","description":"보석함이 열린 시각"},{"id":"where_cellar","category":"where","label":"지하 와인실","description":"유리 세공 도구가 있던 곳"},{"id":"where_study","category":"where","label":"2층 서재","description":"빗장이 걸렸던 밀실 현장"},{"id":"where_globe","category":"where","label":"대형 지구본","description":"속이 빈 응접실 골동품 가구"},{"id":"what_replica","category":"what","label":"모조 유리 보석","description":"사전에 깎아둔 가짜 보석"},{"id":"what_fishingline","category":"what","label":"시계추와 낚싯줄","description":"문틈에 연결된 트릭 도구"},{"id":"what_real_gem","category":"what","label":"진짜 사파이어","description":"푸른빛의 국보급 진품 보물"},{"id":"how_swap","category":"how","label":"가짜로 바꿔치기","description":"진품을 가짜와 은밀히 교체"},{"id":"how_lock_trick","category":"how","label":"낚싯줄로 빗장 걸기","description":"밖에서 실을 당겨 빗장 잠금"},{"id":"how_hollow_hide","category":"how","label":"지구본 속에 은닉","description":"가장 눈에 띄는 가구에 숨김"},{"id":"why_debt","category":"why","label":"사업 빚 청산","description":"경매 실패 빚을 갚기 위해"},{"id":"why_fame","category":"why","label":"희귀 유물 독점","description":"학계 명성을 얻기 위해"},{"id":"action_prepared","category":"action","label":"사전 준비했다","description":"바꿔치기를 위한 사전 공작"},{"id":"action_locked","category":"action","label":"밀실을 연출했다","description":"외부 침입으로 위장"},{"id":"action_smuggled","category":"action","label":"외부로 빼돌렸다","description":"진품 반출 시도"}],"memo":{"truth":{"who":"who_heir","when":"when_blackout","where":"where_study","what":"what_real_gem","how":"how_lock_trick","why":"why_debt","action":"action_locked"}},"nodes":[{"id":"node_1","speakerId":"doctor_han","locationId":"manor_hall","dialogue":"수사관님, 따뜻한 캐모마일 차 한 잔 드세요. 바깥 날씨가 험해서 다들 1층 응접실에 모여 있습니다.","unlockTag":"who_doctor","next":"node_2"},{"id":"node_2","speakerId":"scholar_yoon","locationId":"manor_hall","dialogue":"아서 경이 자정에 공개할 '푸른 사파이어'를 감정하러 왔는데, 2층 서재 괘종시계 추에 이상한 흠집이 있더군요.","unlockTag":"who_scholar","next":"node_3"},{"id":"node_3","speakerId":"heir_kang","locationId":"manor_hall","dialogue":"삼촌의 그 보석은 우리 가문의 유일한 희망입니다... 오늘 밤 반드시 제 손으로 가치를 증명해야 해요.","unlockTag":"who_heir","next":"node_4"},{"id":"node_4","speakerId":"butler_choi","locationId":"manor_hall","dialogue":"아서 경께서는 서재 안쪽에서 빗장을 걸어 잠그셨습니다. 보석함 열쇠는 서재 안에만 있으니 아무도 들어갈 수 없습니다.","unlockTag":"who_butler","next":"node_5"},{"id":"node_5","speakerId":"doctor_han","locationId":"manor_hall","dialogue":"어머, 갑자기 정전이 됐네요! 2층 서재 쪽에서 덜컹거리는 소리가 들렸어요!","unlockTag":"when_blackout","next":"node_6"},{"id":"node_6","speakerId":"butler_choi","locationId":"study","dialogue":"문이 안쪽에서 굳게 잠겨 있습니다! 문을 부수고 열겠습니다!","unlockTag":"where_study","next":"node_7"},{"id":"node_7","speakerId":"scholar_yoon","locationId":"study","dialogue":"보석함이 열려 있습니다! 그런데... 이건 진짜 사파이어가 아니라 싸구려 모조 유리 보석입니다!","unlockTag":"what_replica","unlockTag2":"how_swap","next":"node_8"},{"id":"node_8","speakerId":"scholar_yoon","locationId":"study","dialogue":"보세요, 괘종시계 추와 문틀 사이에 끊어진 낚싯줄이 걸려 있습니다. 밖에서 실을 당겨 빗장을 걸어 잠근 트릭입니다!","unlockTag":"what_fishingline","unlockTag2":"how_lock_trick","next":"node_9"},{"id":"node_9","speakerId":"butler_choi","locationId":"wine_cellar","dialogue":"지하 와인실 작업대에서 유리 세공 도구와 강도윤 도련님의 거액 빚 독촉장이 발견되었습니다!","unlockTag":"where_cellar","unlockTag2":"why_debt","unlockTag3":"action_prepared","next":"node_10"},{"id":"node_10","speakerId":"doctor_han","locationId":"manor_hall","dialogue":"응접실 대형 지구본 덮개 안쪽에서 진짜 사파이어가 나왔어요! 누군가 몰래 숨겨두었던 모양입니다!","unlockTag":"where_globe","unlockTag2":"what_real_gem","unlockTag3":"how_hollow_hide","unlockTag4":"action_smuggled","next":"node_11"},{"id":"node_11","speakerId":"heir_kang","locationId":"manor_hall","dialogue":"전 모르는 일입니다! 티타임 직전에도 와인실에 가지 않았어요... 절 의심하지 마세요!","unlockTag":"when_teatime","next":"node_12"},{"id":"node_12","speakerId":"butler_choi","locationId":"manor_hall","dialogue":"수사관님, 모든 단서와 증거가 확보되었습니다. [수사 책상]을 열어 사건 서류철들을 연결하고 진상을 밝혀주십시오.","unlockTag":"action_locked"}],"endings":{"perfect":{"title":"사라진 푸른 사파이어의 완전한 규명","grade":"S RANK","summary":"밀실 트릭과 사전 공작, 은닉 전말을 완벽하게 밝혀냈습니다.","verdictText":"강도윤은 사업 빚 청산을 위해 지하 와인실에서 모조 유리 보석을 사전 준비했습니다. 이후 정전 틈새에 2층 서재에서 시계추와 낚싯줄로 낚싯줄로 빗장 걸기 트릭을 써서 밀실을 연출한 뒤 진짜 사파이어를 대형 지구본 속에 은닉하여 외부로 빼돌렸습니다. 당신의 완벽한 3단계 인과 추리로 사건은 명쾌하게 해결되었습니다."},"partial":{"title":"부분적 사건 해결","grade":"B RANK","summary":"범인은 적중했으나 밀실 트릭 또는 사전 공작의 세부 정황이 일부 누락되었습니다.","verdictText":"강도윤이 진품을 훔친 범인임은 밝혀냈으나, 낚싯줄 시계추를 이용한 밀실 트릭과 지하 와인실의 사전 모조품 제작 정황을 완벽히 소명하지는 못했습니다."},"wrong":{"title":"오판 및 미제 종결","grade":"F RANK","summary":"엉뚱한 인물을 지목했거나 사건의 인과 체인이 성립하지 않았습니다.","verdictText":"제출된 사건 본문은 현장의 물리적 증거 및 시간대와 정면으로 모순됩니다. 진범은 수사망을 비웃으며 유유히 보석을 챙겨 저택을 빠져나갔습니다."}}}}; // 1. Grammar Engine class KoreanGrammar { static hasFinalConsonant(text) { if (!text || typeof text !== 'string') return false; const cleanText = text.trim().replace(/[^\uAC00-\uD7A30-9a-zA-Z]/g, ''); if (!cleanText) return false; const lastChar = cleanText[cleanText.length - 1]; const code = lastChar.charCodeAt(0); if (code >= 0xAC00 && code <= 0xD7A3) { return (code - 0xAC00) % 28 > 0; } return false; } static isRieulFinal(text) { if (!text || typeof text !== 'string') return false; const cleanText = text.trim().replace(/[^\uAC00-\uD7A3]/g, ''); if (!cleanText) return false; const lastChar = cleanText[cleanText.length - 1]; const code = lastChar.charCodeAt(0); if (code >= 0xAC00 && code <= 0xD7A3) { return (code - 0xAC00) % 28 === 8; } return false; } static attachEunNeun(word) { if (!word) return ''; if (word.endsWith('은') || word.endsWith('는')) return word; return word + (this.hasFinalConsonant(word) ? '은' : '는'); } static attachIGa(word) { if (!word) return ''; if (word.endsWith('이') || word.endsWith('가')) return word; return word + (this.hasFinalConsonant(word) ? '이' : '가'); } static attachEulReul(word) { if (!word) return ''; if (word.endsWith('을') || word.endsWith('를')) return word; return word + (this.hasFinalConsonant(word) ? '을' : '를'); } static attachEuroRo(word) { if (!word) return ''; if (word.endsWith('으로') || word.endsWith('로')) return word; if (!this.hasFinalConsonant(word) || this.isRieulFinal(word)) { return word + '로'; } return word + '으로'; } static attachEseo(word) { if (!word) return ''; if (word.endsWith('에서') || word.endsWith('에')) return word; return word + '에서'; } static buildSentence(slots) { const s = slots || {}; let whoPart = '( )은/는'; if (s.who) { const whoTag = typeof s.who === 'object' ? s.who.label : s.who; whoPart = this.attachEunNeun(whoTag); } let whyPart = '( )'; if (s.why) { const whyTag = typeof s.why === 'object' ? s.why.label : s.why; whyPart = whyTag; } let whenPart = '( )'; if (s.when) { const whenTag = typeof s.when === 'object' ? s.when.label : s.when; whenPart = whenTag; } let wherePart = '( )에서'; if (s.where) { const whereTag = typeof s.where === 'object' ? s.where.label : s.where; wherePart = this.attachEseo(whereTag); } let whatPart = '( )으로'; if (s.what) { const whatTag = typeof s.what === 'object' ? s.what.label : s.what; if (s.how) { whatPart = this.attachEuroRo(whatTag); } else { whatPart = this.attachEulReul(whatTag); } } let howPart = '( )'; if (s.how) { const howTag = typeof s.how === 'object' ? s.how.label : s.how; howPart = howTag; } let actionPart = '( )'; if (s.action) { const actTag = typeof s.action === 'object' ? s.action.label : s.action; actionPart = actTag; } const sentence = `${whoPart} ${whyPart} ${whenPart} ${wherePart} ${whatPart} ${howPart} ${actionPart}`; return sentence.endsWith('.') ? sentence : sentence + '.'; } static buildHypothesis(slots) { return this.buildSentence(slots); } static buildEvidenceSentence(evidenceLabel, relation = 'support') { let subject = '( )이/가'; if (evidenceLabel) { const label = typeof evidenceLabel === 'object' ? evidenceLabel.label : evidenceLabel; const particle = this.hasFinalConsonant(label) ? '이' : '가'; subject = `${label}${particle}`; } if (relation === 'support') { return `왜냐하면 ${subject} 이 주장을 뒷받침하기 때문이다.`; } else if (relation === 'contradict') { return `왜냐하면 ${subject} 이 주장을 반박하기 때문이다.`; } else if (relation === 'question') { return `왜냐하면 ${subject} 이 주장에 의문을 제기하기 때문이다.`; } return `왜냐하면 ${subject} 이 주장의 근거이기 때문이다.`; } } const KoreanGrammarEngine = KoreanGrammar; // 2. Audio Engine class SoundEngine { constructor() { this.ctx = null; this.isMuted = false; this.audioBuffers = new Map(); this.lastTypeTime = 0; try { this.isMuted = localStorage.getItem('detective_sound_muted') === 'true'; } catch (e) {} this.preloadSound('typewriter', './sound/typewriter.mp3'); this.preloadSound('paper_rustle', './sound/paper_rustle.mp3'); } ensureContext() { if (!this.ctx) { const AudioCtx = window.AudioContext || window.webkitAudioContext; if (AudioCtx) this.ctx = new AudioCtx(); } if (this.ctx && this.ctx.state === 'suspended') { this.ctx.resume(); } } async preloadSound(key, url) { try { const resp = await fetch(url); if (!resp.ok) return; const arrayBuffer = await resp.arrayBuffer(); this.ensureContext(); if (this.ctx) { const decoded = await this.ctx.decodeAudioData(arrayBuffer); this.audioBuffers.set(key, decoded); } } catch (e) {} } toggleMute() { this.isMuted = !this.isMuted; try { localStorage.setItem('detective_sound_muted', this.isMuted.toString()); } catch (e) {} return this.isMuted; } startAmbience() { this.ensureContext(); } playTypewriter() { if (this.isMuted) return; const now = Date.now(); if (now - this.lastTypeTime < 55) return; this.lastTypeTime = now; this.ensureContext(); if (!this.ctx) return; const buffer = this.audioBuffers.get('typewriter'); if (buffer) { const source = this.ctx.createBufferSource(); const gain = this.ctx.createGain(); source.buffer = buffer; source.playbackRate.value = 0.95 + Math.random() * 0.15; gain.gain.value = 0.25; source.connect(gain); gain.connect(this.ctx.destination); source.start(0); source.stop(this.ctx.currentTime + 0.08); } else { this.playFallbackType(); } } playFallbackType() { if (!this.ctx) return; const osc = this.ctx.createOscillator(); const gain = this.ctx.createGain(); osc.type = 'triangle'; osc.frequency.setValueAtTime(380 + (Math.random() * 100 - 50), this.ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(80, this.ctx.currentTime + 0.03); gain.gain.setValueAtTime(0.04, this.ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.03); osc.connect(gain); gain.connect(this.ctx.destination); osc.start(); osc.stop(this.ctx.currentTime + 0.03); } playPaperRustle() { if (this.isMuted) return; this.ensureContext(); if (!this.ctx) return; const buffer = this.audioBuffers.get('paper_rustle'); if (buffer) { const source = this.ctx.createBufferSource(); const gain = this.ctx.createGain(); source.buffer = buffer; gain.gain.value = 0.45; source.connect(gain); gain.connect(this.ctx.destination); source.start(0); } } playClueUnlock() { if (this.isMuted) return; this.ensureContext(); if (!this.ctx) return; const notes = [587.33, 880, 1174.66]; notes.forEach((freq, idx) => { const osc = this.ctx.createOscillator(); const gain = this.ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(freq, this.ctx.currentTime + idx * 0.07); gain.gain.setValueAtTime(0.08, this.ctx.currentTime + idx * 0.07); gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + idx * 0.07 + 0.45); osc.connect(gain); gain.connect(this.ctx.destination); osc.start(this.ctx.currentTime + idx * 0.07); osc.stop(this.ctx.currentTime + idx * 0.07 + 0.5); }); } playTagSnap() { if (this.isMuted) return; this.ensureContext(); if (!this.ctx) return; const osc = this.ctx.createOscillator(); const gain = this.ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(900, this.ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(450, this.ctx.currentTime + 0.05); gain.gain.setValueAtTime(0.08, this.ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.05); osc.connect(gain); gain.connect(this.ctx.destination); osc.start(); osc.stop(this.ctx.currentTime + 0.05); } playVerdictStamp() { if (this.isMuted) return; this.ensureContext(); if (!this.ctx) return; const osc = this.ctx.createOscillator(); const gain = this.ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(140, this.ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(30, this.ctx.currentTime + 0.25); gain.gain.setValueAtTime(0.35, this.ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.25); osc.connect(gain); gain.connect(this.ctx.destination); osc.start(); osc.stop(this.ctx.currentTime + 0.25); } } const sound = new SoundEngine(); // 3. Canvas Stage class StageCanvas { constructor(canvasElement) { this.canvas = canvasElement; this.ctx = this.canvas.getContext('2d'); this.logicalWidth = 1600; this.logicalHeight = 900; this.scale = 1; this.offsetX = 0; this.offsetY = 0; this.dpr = Math.min(window.devicePixelRatio || 1, 2); this.particles = []; this.jitterPhase = 0; this.lastJitterTime = 0; this.imageCache = new Map(); this.initParticles(); this.resize(); window.addEventListener('resize', () => this.resize()); window.addEventListener('orientationchange', () => this.resize()); } initParticles() { this.particles = []; for (let i = 0; i < 35; i++) { this.particles.push({ x: Math.random() * this.logicalWidth, y: Math.random() * this.logicalHeight, size: Math.random() * 2.5 + 1, speedX: (Math.random() - 0.5) * 0.4, speedY: (Math.random() - 0.5) * 0.3 - 0.1, alpha: Math.random() * 0.4 + 0.1 }); } } getImage(src) { if (!src) return null; if (this.imageCache.has(src)) { const img = this.imageCache.get(src); return img.complete ? img : null; } const img = new Image(); img.src = src; this.imageCache.set(src, img); return null; } resize() { const parentWidth = window.innerWidth; const parentHeight = window.innerHeight; this.dpr = Math.min(window.devicePixelRatio || 1, 2); const aspect = this.logicalWidth / this.logicalHeight; let viewW = parentWidth; let viewH = parentWidth / aspect; if (viewH > parentHeight) { viewH = parentHeight; viewW = parentHeight * aspect; } this.scale = viewW / this.logicalWidth; this.offsetX = (parentWidth - viewW) / 2; this.offsetY = (parentHeight - viewH) / 2; this.canvas.width = Math.round(parentWidth * this.dpr); this.canvas.height = Math.round(parentHeight * this.dpr); this.canvas.style.width = `${parentWidth}px`; this.canvas.style.height = `${parentHeight}px`; } render(timestamp = 0, currentBgColor = '#051718', currentBgImage = null) { if (document.hidden) return; const ctx = this.ctx; const dpr = this.dpr; ctx.save(); ctx.scale(dpr, dpr); ctx.fillStyle = '#010607'; ctx.fillRect(0, 0, this.canvas.width / dpr, this.canvas.height / dpr); ctx.save(); ctx.translate(this.offsetX, this.offsetY); ctx.scale(this.scale, this.scale); ctx.beginPath(); ctx.rect(0, 0, this.logicalWidth, this.logicalHeight); ctx.clip(); const grad = ctx.createLinearGradient(0, 0, 0, this.logicalHeight); grad.addColorStop(0, currentBgColor); grad.addColorStop(1, '#02090a'); ctx.fillStyle = grad; ctx.fillRect(0, 0, this.logicalWidth, this.logicalHeight); if (currentBgImage) { const img = this.getImage(currentBgImage); if (img) { ctx.save(); ctx.globalAlpha = 0.85; ctx.drawImage(img, 0, 0, this.logicalWidth, this.logicalHeight); const vignette = ctx.createRadialGradient( this.logicalWidth / 2, this.logicalHeight / 2, 200, this.logicalWidth / 2, this.logicalHeight / 2, this.logicalWidth * 0.65 ); vignette.addColorStop(0, 'rgba(0,0,0,0)'); vignette.addColorStop(1, 'rgba(2, 9, 10, 0.7)'); ctx.fillStyle = vignette; ctx.fillRect(0, 0, this.logicalWidth, this.logicalHeight); ctx.restore(); } } if (timestamp - this.lastJitterTime > 120) { this.jitterPhase = (this.jitterPhase + 1) % 3; this.lastJitterTime = timestamp; } const jitterX = (this.jitterPhase === 0 ? 0 : this.jitterPhase === 1 ? 0.8 : -0.8); const jitterY = (this.jitterPhase === 0 ? 0 : this.jitterPhase === 1 ? -0.8 : 0.8); ctx.strokeStyle = 'rgba(213, 185, 112, 0.25)'; ctx.lineWidth = 2; ctx.strokeRect(30 + jitterX, 30 + jitterY, this.logicalWidth - 60, this.logicalHeight - 60); ctx.strokeStyle = 'rgba(213, 185, 112, 0.1)'; ctx.lineWidth = 1; ctx.strokeRect(38 - jitterX, 38 - jitterY, this.logicalWidth - 76, this.logicalHeight - 76); for (const p of this.particles) { p.x += p.speedX; p.y += p.speedY; if (p.x < 0) p.x = this.logicalWidth; if (p.x > this.logicalWidth) p.x = 0; if (p.y < 0) p.y = this.logicalHeight; if (p.y > this.logicalHeight) p.y = 0; ctx.fillStyle = `rgba(213, 185, 112, ${p.alpha})`; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); } ctx.restore(); ctx.restore(); } } // 4. Scenario Compiler /** * 사용자 원고 텍스트를 게임 엔진용 시나리오 JSON으로 변환하는 스마트 컴파일러 * - 인물(Characters) 및 배경 장소(Locations) 자동 인식 * - 대사 및 나레이션 노드 분절 * - 8대 속성 단서 태그 및 진상 자동 조립 */ class ScenarioCompiler { /** * 원본 텍스트를 파싱하여 구조화된 시나리오 초안 생성 * @param {string} rawText - 사용자가 입력한 전체 시나리오 텍스트 * @param {Object} options - 제목, 작가, 난이도 등 메타데이터 */ static compile(rawText, options = {}) { if (!rawText || rawText.trim().length === 0) { throw new Error('시나리오 텍스트를 입력해주세요.'); } const title = options.title || this.extractTitle(rawText) || '이름 없는 사건'; const author = options.author || '사립 탐정'; const id = 'custom-' + Date.now(); const lines = rawText .split(/\n+/) .map(l => l.trim()) .filter(l => l.length > 0); const charactersMap = new Map(); const locationsMap = new Map(); const nodes = []; // 기본 나레이터 등록 charactersMap.set('narrator', { id: 'narrator', name: '아서 윈체스터', role: '사립 탐정', mark: '탐', color: '#94aaa5', image: '' }); // 1. 배경 장소(Locations) 사전 감지 this.detectLocations(rawText, locationsMap); let currentLocationId = locationsMap.keys().next().value || 'loc_main'; let nodeIndex = 1; for (let rawLine of lines) { let cleanLine = rawLine.replace(/^[#\s\-*]+/, '').trim(); if (!cleanLine) continue; // 마크다운 볼드 제거 cleanLine = cleanLine.replace(/\*\*([^*]+)\*\*/g, '$1'); // 장소 전환 힌트 감지 (예: [장소: 2층 서재], [3층 복도], "서재로 이동했다") const locMatch = cleanLine.match(/^[\[$]?(?:장소|배경|무대|위치)?[:：]?\s*([가-힣a-zA-Z0-9\s]{2,15}(?:서재|홀|응접실|복도|와인실|침실|방|지하실|등대|산장|정원|창고|현장))[\]$]?$/); if (locMatch) { const foundLocName = locMatch[1].trim(); const foundLocId = this.generateId(foundLocName); if (!locationsMap.has(foundLocId)) { locationsMap.set(foundLocId, { id: foundLocId, name: foundLocName, bgCode: '#081d1f', image: this.getDefaultLocationImage(foundLocName) }); } currentLocationId = foundLocId; continue; } // 본문 속 장소 전환 문맥 추적 for (const [lId, loc] of locationsMap.entries()) { if (cleanLine.includes(loc.name) && (cleanLine.includes('올라') || cleanLine.includes('들어서') || cleanLine.includes('향했') || cleanLine.includes('도착') || cleanLine.includes('안으로'))) { currentLocationId = lId; break; } } // 대화 감지 패턴 const colonMatch = cleanLine.match(/^([가-힣a-zA-Z0-9\s]{2,12})[:：]\s*(.+)$/); const bracketMatch = cleanLine.match(/^[\[$]([가-힣a-zA-Z0-9\s]{2,12})[\]$]\s*(.+)$/); const dialogueQuoteMatch = cleanLine.match(/^([가-힣a-zA-Z0-9\s]{2,12})(?:은|는|이|가)?\s*(?:말했다|외쳤다|속삭였다|중얼거렸다|물었다)?\.?\s*["“'](.+)["”']$/); const directQuoteMatch = cleanLine.match(/^["“'](.+)["”']$/); let speakerName = 'narrator'; let dialogueText = cleanLine; if (colonMatch) { speakerName = colonMatch[1].trim(); dialogueText = colonMatch[2].replace(/^["“']|["”']$/g, '').trim(); } else if (bracketMatch) { speakerName = bracketMatch[1].trim(); dialogueText = bracketMatch[2].replace(/^["“']|["”']$/g, '').trim(); } else if (dialogueQuoteMatch) { speakerName = dialogueQuoteMatch[1].trim(); dialogueText = dialogueQuoteMatch[2].trim(); } else if (directQuoteMatch) { dialogueText = directQuoteMatch[1].trim(); } if (/^(나레이션|해설|기록관|지문|상황|배경|탐정|아서|아서 윈체스터)$/.test(speakerName)) { speakerName = 'narrator'; } let speakerId = 'narrator'; if (speakerName !== 'narrator') { speakerId = this.generateId(speakerName); if (!charactersMap.has(speakerId)) { const colors = ['#76c4b2', '#64b5f6', '#d9826c', '#d5b970', '#b39ddb', '#ffab91', '#80cbc4']; const colorIdx = (charactersMap.size - 1) % colors.length; charactersMap.set(speakerId, { id: speakerId, name: speakerName, role: '주요 인물', mark: speakerName.slice(0, 1), color: colors[colorIdx], image: '' }); } } const nodeId = `node_${nodeIndex}`; nodes.push({ id: nodeId, speakerId: speakerId, locationId: currentLocationId, dialogue: dialogueText, next: null }); nodeIndex++; } if (nodes.length === 0) { throw new Error('인식 가능한 대사나 나레이션이 없습니다.'); } for (let i = 0; i < nodes.length - 1; i++) { nodes[i].next = nodes[i + 1].id; } // 단서 태그 자동 추출 const evidenceTags = this.extractEvidenceTags(rawText, charactersMap); this.distributeTagsToNodes(nodes, evidenceTags); const truth = this.generateTruth(evidenceTags, charactersMap); const characters = Array.from(charactersMap.values()); const locations = Array.from(locationsMap.values()); return { id: id, meta: { title: title, subtitle: options.subtitle || '사용자 제작 정통 미스터리', author: author, category: '커스텀 사건', difficulty: '수사관 심층 추리', estimatedMinutes: Math.max(5, Math.round(lines.length * 0.5)), summary: rawText.slice(0, 130).trim() + (rawText.length > 130 ? '...' : '') }, characters: characters, locations: locations, evidenceTags: evidenceTags, memo: { truth: truth }, nodes: nodes, endings: { perfect: { title: '사건의 명쾌한 진상 규명', grade: 'S RANK', summary: '밀실 트릭과 사전 공작, 알리바이 모순을 완벽하게 증명했습니다.', verdictText: '모든 물증과 진술의 모순을 정확히 꿰뚫어 진실을 밝혀냈습니다. 당신의 완벽한 3단계 인과 추리로 사건은 명쾌하게 종결되었습니다.' }, partial: { title: '부분적 사건 해결', grade: 'B RANK', summary: '핵심 인물은 지목했으나 세부 정황의 소명이 일부 부족합니다.', verdictText: '핵심 범행 주체를 밝혀냈으나, 사건의 정밀한 세부 인과와 수법을 완전히 증명하지는 못했습니다.' }, wrong: { title: '오판 및 수사 실패', grade: 'F RANK', summary: '현장의 증거와 모순되는 결론을 제출했습니다.', verdictText: '제출된 사건 본문은 현장의 물리적 사실과 정면으로 배치됩니다. 진범은 어둠 속으로 유유히 사라졌습니다.' } } }; } /** * 텍스트 전체에서 주요 장소 키워드 자동 감지 */ static detectLocations(text, locationsMap) { const defaultPlaceKeywords = [ { name: '1층 응접실', match: /(응접실|메인 홀|1층 홀|거실|대응접실)/, bg: './assets/images/bg_mansion_hall.jpg' }, { name: '2층 서재', match: /(서재|밀실 서재|본관 서재|연구실)/, bg: './assets/images/bg_vintage_study.jpg' }, { name: '복도와 계단', match: /(복도|계단|3층 복도|계단참)/, bg: './assets/images/bg_vintage_study.jpg' }, { name: '지하 와인실', match: /(와인실|와인 저장고|지하실|지하 창고)/, bg: './assets/images/bg_mansion_hall.jpg' }, { name: '산장 홀', match: /(산장|별장|산장 홀|오두막)/, bg: './assets/images/bg_mansion_hall.jpg' } ]; defaultPlaceKeywords.forEach(p => { if (p.match.test(text)) { const id = this.generateId(p.name); if (!locationsMap.has(id)) { locationsMap.set(id, { id: id, name: p.name, bgCode: '#081d1f', image: p.bg }); } } }); if (locationsMap.size === 0) { locationsMap.set('loc_main', { id: 'loc_main', name: '사건 현장 홀', bgCode: '#081d1f', image: './assets/images/bg_mansion_hall.jpg' }); locationsMap.set('loc_study', { id: 'loc_study', name: '2층 밀실 서재', bgCode: '#051718', image: './assets/images/bg_vintage_study.jpg' }); } } static getDefaultLocationImage(name) { if (/서재|연구실|방|침실|기록실/.test(name)) { return './assets/images/bg_vintage_study.jpg'; } return './assets/images/bg_mansion_hall.jpg'; } static extractTitle(text) { const firstLine = text.trim().split('\n')[0].replace(/^[#\s\-*]+/, '').replace(/^제목[:：]\s*/, '').trim(); if (firstLine.length > 0 && firstLine.length <= 40) { return firstLine; } return '눈보라 산장의 밀실과 멈춘 오르골'; } static generateId(name) { return 'id_' + Math.abs(name.split('').reduce((acc, char) => (acc << 5) - acc + char.charCodeAt(0), 0)).toString(36).slice(0, 6); } static extractEvidenceTags(text, charactersMap) { const tags = []; charactersMap.forEach((char) => { if (char.id !== 'narrator') { tags.push({ id: `who_${char.id}`, category: 'who', label: char.name, description: `${char.name}의 신원` }); } }); if (tags.filter(t => t.category === 'who').length === 0) { tags.push({ id: 'who_suspect_a', category: 'who', label: '집사 올리버', description: '산장을 관리하던 집사' }); tags.push({ id: 'who_suspect_b', category: 'who', label: '조카 빅터', description: '도박 빚에 쫓기던 상속인' }); } tags.push({ id: 'when_before_dinner', category: 'when', label: '저녁 식사 전', description: '차가 올려진 시점' }); tags.push({ id: 'when_blackout', category: 'when', label: '눈보라 정전 틈새', description: '불이 꺼진 10분간' }); tags.push({ id: 'when_nine_clock', category: 'when', label: '밤 아홉 시 정각', description: '도끼로 문을 부순 시각' }); tags.push({ id: 'where_study', category: 'where', label: '2층 밀실 서재', description: '문이 잠겨 있던 현장' }); tags.push({ id: 'where_roof_vent', category: 'where', label: '지붕 환기구와 굴뚝', description: '와이어가 통과한 통로' }); tags.push({ id: 'where_hall', category: 'where', label: '1층 산장 홀', description: '차가 준비되던 응접실' }); tags.push({ id: 'what_poison_tea', category: 'what', label: '식은 카모마일 차', description: '얼음장처럼 차갑게 식은 잔' }); tags.push({ id: 'what_music_box', category: 'what', label: '멈춘 앤틱 오르골', description: '태엽 와이어가 끊어진 장치' }); tags.push({ id: 'what_letter_opener', category: 'what', label: '은제 흉기', description: '가문의 문장이 새겨진 흉기' }); tags.push({ id: 'how_mix_poison', category: 'how', label: '사전에 수면제를 타서', description: '피해자를 의식 불명에 빠뜨림' }); tags.push({ id: 'how_wire_lock', category: 'how', label: '환기구 와이어로 빗장 걸기', description: '밖에서 창문 빗장을 당겨 잠금' }); tags.push({ id: 'how_fake_scream', category: 'how', label: '가짜 비명으로 시간 조작', description: '사망 시점을 2시간 늦춤' }); tags.push({ id: 'why_revenge', category: 'why', label: '과거 가문의 원한 복수', description: '오랜 시간 품어온 복수심' }); tags.push({ id: 'why_debt', category: 'why', label: '도박 빚 청산', description: '유산을 노린 탐욕' }); tags.push({ id: 'action_unconscious', category: 'action', label: '의식을 잃게 했다', description: '사전 무력화 공작' }); tags.push({ id: 'action_locked', category: 'action', label: '밀실을 연출했다', description: '환기구 트릭으로 잠금' }); tags.push({ id: 'action_faked', category: 'action', label: '알리바이를 조작했다', description: '발견 시각을 위장함' }); return tags; } static distributeTagsToNodes(nodes, tags) { if (nodes.length === 0 || tags.length === 0) return; const tagQueue = [...tags]; const step = Math.max(1, Math.floor(nodes.length / tagQueue.length)); let tagIdx = 0; for (let i = 0; i < nodes.length && tagIdx < tagQueue.length; i += step) { nodes[i].unlockTag = tagQueue[tagIdx].id; tagIdx++; } while (tagIdx < tagQueue.length) { const targetNode = nodes[nodes.length - 1 - (tagQueue.length - tagIdx)]; if (targetNode) { if (!targetNode.unlockTag) targetNode.unlockTag = tagQueue[tagIdx].id; else if (!targetNode.unlockTag2) targetNode.unlockTag2 = tagQueue[tagIdx].id; else if (!targetNode.unlockTag3) targetNode.unlockTag3 = tagQueue[tagIdx].id; } tagIdx++; } } static generateTruth(tags, charactersMap) { const whoTags = tags.filter(t => t.category === 'who'); const whenTags = tags.filter(t => t.category === 'when'); const whereTags = tags.filter(t => t.category === 'where'); const whatTags = tags.filter(t => t.category === 'what'); const howTags = tags.filter(t => t.category === 'how'); const whyTags = tags.filter(t => t.category === 'why'); const actionTags = tags.filter(t => t.category === 'action'); return { who: whoTags[0] ? whoTags[0].id : '', when: whenTags[0] ? whenTags[0].id : '', where: whereTags[0] ? whereTags[0].id : '', what: whatTags[0] ? whatTags[0].id : '', how: howTags[0] ? howTags[0].id : '', why: whyTags[0] ? whyTags[0].id : '', action: actionTags[0] ? actionTags[0].id : '' }; } } // 5. Game State Manager /** * 중앙 게임 상태 및 현실의 수사 책상(Desk) 데이터 매니저 */ class GameStateManager { constructor() { this.currentScreen = 'main-menu'; // 'main-menu' | 'scenario-list' | 'in-game' | 'verdict-result' this.currentScenario = null; this.currentNode = null; this.progressPercent = 0; // 인게임 단서 데이터 this.unlockedTagIds = new Set(); // 현실의 책상(Desk) 보드 데이터 this.deskCards = []; // Array of { id, type: 'event'|'evidence', x, y, slots, relation, evidenceTag, isFolded: boolean, isPrimary: boolean, tilt: number } this.deskPlacedTags = []; // Array of { id, tag, x, y } this.deskConnections = []; // Array of { fromCardId, toCardId } this.deskNextId = 1; // 최종 판정용 기본 사건 카드 슬롯 this.eventCardSlots = { who: null, when: null, where: null, what: null, how: null, why: null, action: null }; this.isNotebookOpen = false; this.verdictResult = null; // 플레이어 주인공 이름 (로컬스토리지 연동) try { this.playerName = localStorage.getItem('detective_player_name') || '아서 윈체스터'; } catch (e) { this.playerName = '아서 윈체스터'; } this.listeners = new Map(); } setPlayerName(name) { if (!name || !name.trim()) return; this.playerName = name.trim(); try { localStorage.setItem('detective_player_name', this.playerName); } catch (e) {} this.emit('player-name-changed', this.playerName); } get boardState() { return { cards: this.deskCards, placedTags: this.deskPlacedTags, connections: this.deskConnections }; } on(event, callback) { if (!this.listeners.has(event)) { this.listeners.set(event, []); } this.listeners.get(event).push(callback); } emit(event, data) { if (this.listeners.has(event)) { this.listeners.get(event).forEach(cb => cb(data)); } } setScreen(screenName) { this.currentScreen = screenName; this.emit('screen-changed', screenName); } loadScenario(scenarioData) { this.currentScenario = scenarioData; this.currentNode = null; this.progressPercent = 0; this.unlockedTagIds.clear(); this.eventCardSlots = { who: null, when: null, where: null, what: null, how: null, why: null, action: null }; // 초기화: 완전히 텅 빈 책상 this.deskCards = []; this.deskPlacedTags = []; this.deskConnections = []; this.deskNextId = 1; this.isNotebookOpen = false; this.verdictResult = null; this.emit('scenario-loaded', scenarioData); } clearBoard() { this.deskCards = []; this.deskPlacedTags = []; this.deskConnections = []; this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } unlockTag(tagId) { if (!tagId) return false; if (!this.unlockedTagIds.has(tagId)) { this.unlockedTagIds.add(tagId); const tagData = this.getTag(tagId); this.emit('tag-unlocked', tagData); return true; } return false; } hasTag(tagId) { return this.unlockedTagIds.has(tagId); } getTag(tagId) { if (!this.currentScenario || !this.currentScenario.evidenceTags) return null; return this.currentScenario.evidenceTags.find(t => t.id === tagId) || null; } getTagData(tagId) { return this.getTag(tagId); } getAllUnlockedTags() { if (!this.currentScenario || !this.currentScenario.evidenceTags) return []; return this.currentScenario.evidenceTags.filter(t => this.unlockedTagIds.has(t.id)); } getUnlockedTags(categoryFilter = null) { const all = this.getAllUnlockedTags(); if (categoryFilter && categoryFilter !== 'all') { return all.filter(t => t.category === categoryFilter); } return all; } // 사건 카드 추가 addEventCard(x = 100, y = 100, isPrimary = false) { const cardId = `event_card_${this.deskNextId++}`; const card = { id: cardId, type: 'event', x, y, slots: { who: null, when: null, where: null, what: null, how: null, why: null, action: null }, isPrimary: isPrimary || this.deskCards.filter(c => c.type === 'event').length === 0, isFolded: false, tilt: (Math.random() - 0.5) * 1.5 }; this.deskCards.push(card); this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); return card; } // 근거 카드 추가 addEvidenceCard(x = 200, y = 200) { const cardId = `evidence_card_${this.deskNextId++}`; const card = { id: cardId, type: 'evidence', x, y, evidenceTag: null, relation: 'support', isFolded: false, tilt: (Math.random() - 0.5) * 1.5 }; this.deskCards.push(card); this.emit('board-updated', this.boardState); return card; } removeCard(cardId) { this.deskCards = this.deskCards.filter(c => c.id !== cardId); this.deskConnections = this.deskConnections.filter(conn => conn.fromCardId !== cardId && conn.toCardId !== cardId); this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } toggleCardFold(cardId) { const card = this.deskCards.find(c => c.id === cardId); if (card) { card.isFolded = !card.isFolded; this.emit('board-updated', this.boardState); } } placeTagOnBoard(tagData, x, y) { const placedId = `placed_tag_${this.deskNextId++}`; const item = { id: placedId, tag: tagData, x, y }; this.deskPlacedTags.push(item); this.emit('board-updated', this.boardState); return item; } updatePlacedTagPos(placedId, x, y) { const item = this.deskPlacedTags.find(t => t.id === placedId); if (item) { item.x = x; item.y = y; this.emit('board-updated', this.boardState); } } removePlacedTag(placedId) { this.deskPlacedTags = this.deskPlacedTags.filter(t => t.id !== placedId); this.emit('board-updated', this.boardState); } putTagIntoSlot(cardId, slotCat, tagData) { const card = this.deskCards.find(c => c.id === cardId); if (card && card.slots) { card.slots[slotCat] = tagData; this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } } removeTagFromSlot(cardId, slotCat) { const card = this.deskCards.find(c => c.id === cardId); if (card && card.slots) { card.slots[slotCat] = null; this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } } setEvidenceCardTag(cardId, tagData) { const card = this.deskCards.find(c => c.id === cardId); if (card && card.type === 'evidence') { card.evidenceTag = tagData; this.emit('board-updated', this.boardState); } } setEvidenceRelation(cardId, rel) { const card = this.deskCards.find(c => c.id === cardId); if (card && card.type === 'evidence') { card.relation = rel; this.emit('board-updated', this.boardState); } } addConnection(fromCardId, toCardId) { if (fromCardId === toCardId) return; const exists = this.deskConnections.some(c => c.fromCardId === fromCardId && c.toCardId === toCardId); if (!exists) { this.deskConnections.push({ fromCardId, toCardId }); this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } } removeConnection(fromCardId, toCardId) { this.deskConnections = this.deskConnections.filter(c => !(c.fromCardId === fromCardId && c.toCardId === toCardId)); this.syncPrimaryEventSlots(); this.emit('board-updated', this.boardState); } /** * 화살표 연결선 흐름(DAG / Chain)에 따라 정렬된 사건 카드 배열 반환 */ getOrderedEventCards() { const eventCards = this.deskCards.filter(c => c.type === 'event'); if (eventCards.length === 0) return []; if (eventCards.length === 1) return eventCards; const eventIds = new Set(eventCards.map(c => c.id)); const eventConnections = this.deskConnections.filter( conn => eventIds.has(conn.fromCardId) && eventIds.has(conn.toCardId) ); // 진입차수 및 인접 노드 맵 구축 const inDegree = new Map(); const nextMap = new Map(); eventCards.forEach(c => { inDegree.set(c.id, 0); nextMap.set(c.id, []); }); eventConnections.forEach(conn => { inDegree.set(conn.toCardId, (inDegree.get(conn.toCardId) || 0) + 1); nextMap.get(conn.fromCardId).push(conn.toCardId); }); // 위상 정렬 순서대로 카드 수집 const ordered = []; const visited = new Set(); // 1. 진입차수가 0인 시작 카드들부터 체인 탐색 const queue = eventCards.filter(c => inDegree.get(c.id) === 0); queue.sort((a, b) => (a.x - b.x) || (a.y - b.y)); while (queue.length > 0) { const curr = queue.shift(); if (!visited.has(curr.id)) { visited.add(curr.id); ordered.push(curr); const nextIds = nextMap.get(curr.id) || []; nextIds.forEach(nId => { const nextCard = eventCards.find(c => c.id === nId); if (nextCard && !visited.has(nId)) { queue.push(nextCard); } }); } } // 2. 연결되지 않았거나 순환 참조로 누락된 카드들 뒤에 병합 eventCards.forEach(c => { if (!visited.has(c.id)) { ordered.push(c); } }); return ordered; } /** * 사건 카드들의 체인을 이어붙인 전체 사건 본문(Full Narrative Hypothesis) 생성 */ getFullHypothesis() { const orderedCards = this.getOrderedEventCards(); if (orderedCards.length === 0) return ''; const sentences = orderedCards .map(card => KoreanGrammarEngine.buildSentence(card.slots)) .filter(s => !!s); return sentences.join(' '); } syncPrimaryEventSlots() { const ordered = this.getOrderedEventCards(); const primary = ordered.find(c => c.isPrimary) || ordered[0]; if (primary) { const formatted = {}; Object.entries(primary.slots).forEach(([cat, val]) => { formatted[cat] = val ? (typeof val === 'object' ? val.id : val) : null; }); this.eventCardSlots = formatted; } else { this.eventCardSlots = { who: null, when: null, where: null, what: null, how: null, why: null, action: null }; } } toggleNotebook(force) { this.isNotebookOpen = force !== undefined ? force : !this.isNotebookOpen; this.emit('notebook-toggled', this.isNotebookOpen); } } const gameState = new GameStateManager(); // 6. Scenario Loader & Runner /** * 시나리오 JSON 로더 및 유효성 검증기 (네트워크 fetch + 오프라인/CORS 임베디드 폴백) */ class ScenarioLoader { static async fetchScenarioIndex() { try { const res = await fetch('./scenarios/index.json', { cache: 'no-store' }); if (!res.ok) throw new Error('fetch failed'); return await res.json(); } catch (err) { // 로컬/플랫폼 샌드박스 오프라인 폴백 return [ { id: "evaluation-demo", title: "서재의 은제 인장과 식은 찻잔", subtitle: "5분 안에 규명하는 클래식 밀실 트릭", author: "수석 심사관", category: "심사 검증용 데모", difficulty: "추리 입문 (★★☆)", estimatedMinutes: 5, summary: "밀실 서재에서 일어난 은제 인장 도난 및 독살 미수 사건. 3명의 용의자를 심문하여 2개의 사건 서류철을 연결하고, 사전 공작과 밀실 조작의 전말을 밝혀내세요.", coverColor: "#143a3b", coverIcon: "CASE 00", file: "./scenarios/evaluation-demo.json" }, { id: "blackwood-manor", title: "블랙우드 저택의 밀실과 식은 찻잔", subtitle: "빗소리 뒤에 숨겨진 30년의 원한과 굴뚝 밀실 트릭", author: "아서 윈체스터", category: "정통 클래식 밀실 미스터리", difficulty: "심층 추리 (3단계 인과)", estimatedMinutes: 30, summary: "19세기 말 런던 근교의 블랙우드 저택. 3층 서재에서 일어난 밀실 사건의 진상을 3개의 사건 서류철로 규명하세요.", coverColor: "#14253d", coverIcon: "CASE 01", file: "./scenarios/blackwood-manor.json" }, { id: "blue-sapphire", title: "사라진 푸른 사파이어의 비밀", subtitle: "폭우 속 밀실 서재에서 증발한 억만금의 보물", author: "수석 수사관", category: "정통 밀실 미스터리", difficulty: "심층 추리 (3단계 인과)", estimatedMinutes: 25, summary: "폭풍우로 고립된 저택의 2층 밀실 서재에서 보관함 속 푸른 사파이어가 가짜 유리알로 바뀌어 증발했습니다.", coverColor: "#173b3b", coverIcon: "CASE 02", file: "./scenarios/blue-sapphire.json" } ]; } } static async fetchScenario(filePath) { try { const cleanPath = filePath.startsWith('/') ? '.' + filePath : (filePath.startsWith('./') ? filePath : './' + filePath); const res = await fetch(cleanPath, { cache: 'no-store' }); if (!res.ok) throw new Error(`fetch failed: ${cleanPath}`); const data = await res.json(); this.validateScenario(data); return data; } catch (err) { console.warn('시나리오 fetch 실패, 내장 데이터 확인 중:', filePath); // 만약 evaluation-demo.json 이면 내장 데이터 반환 if (filePath.includes('evaluation-demo')) { return this.getEvaluationDemoData(); } throw new Error(`시나리오 파일을 불러올 수 없습니다: ${filePath}`); } } static validateScenario(data) { if (!data || typeof data !== 'object') { throw new Error('올바른 JSON 객체가 아닙니다.'); } if (!data.id) throw new Error('시나리오 ID(id)가 누락되었습니다.'); if (!data.meta || !data.meta.title) throw new Error('시나리오 제목(meta.title)이 누락되었습니다.'); const nodeList = data.nodes || data.flow; if (!Array.isArray(nodeList) || nodeList.length === 0) { throw new Error('시나리오 진행 노드가 비어있습니다.'); } if (!data.nodes && data.flow) { data.nodes = data.flow; } return true; } static getEvaluationDemoData() { return { "id": "evaluation-demo", "meta": { "title": "서재의 은제 인장과 식은 찻잔", "subtitle": "5분 안에 규명하는 클래식 밀실 트릭", "author": "수석 심사관", "category": "심사 검증용 데모", "difficulty": "추리 입문 (★★☆)", "estimatedMinutes": 5, "summary": "밀실 서재에서 일어난 은제 인장 도난 및 독살 미수 사건. 3명의 용의자를 심문하여 2개의 사건 서류철을 연결하고, 사전 공작과 밀실 조작의 전말을 밝혀내세요." }, "characters": [ { "id": "narrator", "name": "아서 윈체스터", "role": "사립 탐정", "mark": "탐", "color": "#94aaa5", "image": "" }, { "id": "butler_choi", "name": "집사 최진혁", "role": "수석 집사", "mark": "최", "color": "#d9826c", "image": "./assets/images/portrait_butler.png" }, { "id": "heir_kang", "name": "강도윤", "role": "조카", "mark": "강", "color": "#76c4b2", "image": "./assets/images/portrait_heir.png" }, { "id": "doctor_han", "name": "한소희", "role": "가문 주치의", "mark": "한", "color": "#64b5f6", "image": "./assets/images/portrait_doctor.png" } ], "locations": [ { "id": "study", "name": "2층 밀실 서재", "bgCode": "#051718", "image": "./assets/images/bg_vintage_study.jpg" }, { "id": "hall", "name": "1층 응접실", "bgCode": "#081d1f", "image": "./assets/images/bg_mansion_hall.jpg" } ], "evidenceTags": [ { "id": "who_heir", "category": "who", "label": "조카 강도윤", "description": "도박 빚에 쫓기던 후계자" }, { "id": "who_butler", "category": "who", "label": "집사 최진혁", "description": "서재 열쇠를 관리하던 집사" }, { "id": "who_doctor", "category": "who", "label": "주치의 한소희", "description": "약초와 차를 조제한 의사" }, { "id": "when_before_dinner", "category": "when", "label": "저녁 티타임 전", "description": "차가 준비되던 시간" }, { "id": "when_nine_clock", "category": "when", "label": "밤 아홉 시 정각", "description": "비명과 함께 문을 부순 시각" }, { "id": "where_study", "category": "where", "label": "2층 밀실 서재", "description": "안쪽 빗장이 걸린 사건 현장" }, { "id": "where_hall", "category": "where", "label": "1층 응접실", "description": "용의자들이 대기하던 곳" }, { "id": "what_poison_tea", "category": "what", "label": "식은 얼그레이 독차", "description": "수면제가 혼입되어 식은 찻잔" }, { "id": "what_silver_seal", "category": "what", "label": "은제 인장과 낚싯줄", "description": "창문 빗장을 당긴 트릭 도구" }, { "id": "how_mix_poison", "category": "how", "label": "사전에 수면제를 타서", "description": "피해자를 의식 불명에 빠뜨림" }, { "id": "how_lock_trick", "category": "how", "label": "밖에서 빗장 걸기", "description": "낚싯줄로 밀실을 연출함" }, { "id": "why_debt", "category": "why", "label": "사업 빚 청산", "description": "유언장을 조작하기 위한 동기" }, { "id": "why_revenge", "category": "why", "label": "과거의 원한 복수", "description": "오랜 원망의 죗값" }, { "id": "action_unconscious", "category": "action", "label": "의식을 잃게 했다", "description": "사전 무력화 공작" }, { "id": "action_locked", "category": "action", "label": "밀실을 연출했다", "description": "트릭으로 빗장을 잠금" } ], "memo": { "truth": { "who": "who_heir", "when": "when_before_dinner", "where": "where_study", "what": "what_poison_tea", "how": "how_mix_poison", "why": "why_debt", "action": "action_unconscious" } }, "nodes": [ { "id": "node_1", "speakerId": "narrator", "locationId": "hall", "dialogue": "폭우가 쏟아지는 밤, 나는 저택 주인의 긴급한 요청을 받고 2층 서재 앞 홀에 도착했다.", "next": "node_2" }, { "id": "node_2", "speakerId": "butler_choi", "locationId": "hall", "dialogue": "탐정님, 마침내 오셨군요. 서재 문이 안쪽에서 굳게 잠겨 있고 안에서 아무런 기척이 없습니다.", "unlockTag": "who_butler", "next": "node_3" }, { "id": "node_3", "speakerId": "heir_kang", "locationId": "hall", "dialogue": "삼촌이 오늘 밤 유언장을 고쳐 쓰겠다고 하더니... 빚쟁이들에게 쫓기는 내 처지는 안중에도 없었던 거야!", "unlockTag": "who_heir", "unlockTag2": "why_debt", "next": "node_4" }, { "id": "node_4", "speakerId": "doctor_han", "locationId": "hall", "dialogue": "저녁 티타임 전에 강도윤 씨가 주방에서 삼촌의 찻잔을 직접 들고 올라가는 걸 보았어요.", "unlockTag": "who_doctor", "unlockTag2": "when_before_dinner", "next": "node_5" }, { "id": "node_5", "speakerId": "butler_choi", "locationId": "hall", "dialogue": "아홉 시 정각입니다! 더는 지체할 수 없으니 문을 도끼로 부수고 들어가겠습니다!", "unlockTag": "when_nine_clock", "next": "node_6" }, { "id": "node_6", "speakerId": "narrator", "locationId": "study", "dialogue": "문이 부서지자 빗장이 바닥에 떨어졌다. 책상 위에는 주인이 쓰러져 있었고, 가문의 가보인 은제 인장이 사라져 있었다.", "unlockTag": "where_study", "next": "node_7" }, { "id": "node_7", "speakerId": "doctor_han", "locationId": "study", "dialogue": "주인님은 숨이 붙어 있지만 깊은 수면제에 취해 계십니다! 찻잔은 이미 얼음장처럼 차갑게 식어 있어요!", "unlockTag": "what_poison_tea", "unlockTag2": "how_mix_poison", "unlockTag3": "action_unconscious", "next": "node_8" }, { "id": "node_8", "speakerId": "butler_choi", "locationId": "study", "dialogue": "창틀 틈새에 은제 인장과 낚싯줄이 묶여 있습니다! 밖에서 창문 빗장을 당겨 잠근 트릭입니다!", "unlockTag": "what_silver_seal", "unlockTag2": "how_lock_trick", "unlockTag3": "action_locked", "next": "node_9" }, { "id": "node_9", "speakerId": "narrator", "locationId": "study", "dialogue": "모든 단서가 모였다. [수사 책상]을 열어 서류철 2개를 [➔ 연결]로 잇고, 사전 독차 투여부터 밀실 조작까지의 전말을 완성하여 결론을 제출하자.", "next": null } ], "endings": { "perfect": { "title": "서재의 은제 인장 사건 완전 규명", "grade": "S RANK", "summary": "식은 얼그레이 차와 은제 인장 낚싯줄 밀실 트릭을 완벽하게 증명했습니다.", "verdictText": "조카 강도윤은 사업 빚을 청산하기 위해 저녁 티타임 전에 수면제를 사전에 타서 주인을 의식 불명에 빠뜨렸습니다. 이후 은제 인장과 낚싯줄로 밖에서 빗장을 걸어 밀실을 연출했습니다." }, "partial": { "title": "부분적 사건 해결", "grade": "B RANK", "summary": "범인은 적중했으나 세부 트릭 소명이 일부 부족합니다.", "verdictText": "강도윤이 범인임은 밝혔으나, 낚싯줄 밀실 트릭의 물리적 전말을 완전히 증명하지 못했습니다." }, "wrong": { "title": "오판 및 수사 실패", "grade": "F RANK", "summary": "엉뚱한 인물을 지목했거나 인과 관계가 모순됩니다.", "verdictText": "제출된 사건 본문은 현장의 식은 찻잔 및 은제 인장 증거와 모순됩니다." } } }; } } /** * 시나리오 노드 그래프 실행기 */ class ScenarioRunner { constructor() { this.scenario = null; this.currentNode = null; this.nodeMap = new Map(); this.nodeIndex = 0; } start(scenarioData) { this.scenario = scenarioData; this.nodeMap.clear(); const nodeList = scenarioData.nodes || scenarioData.flow || []; if (Array.isArray(nodeList)) { nodeList.forEach((node, idx) => { const id = node.id || `node_${idx}`; this.nodeMap.set(id, node); }); } const firstNode = nodeList[0]; this.nodeIndex = 0; this.setCurrentNode(firstNode); } setCurrentNode(node) { if (!node) return; this.currentNode = node; gameState.currentNode = node; const nodeList = this.scenario.nodes || this.scenario.flow || []; const totalNodes = nodeList.length || 1; const currentIdx = nodeList.findIndex(n => n.id === node.id); const progress = Math.min(100, Math.round(((currentIdx + 1) / totalNodes) * 100)); gameState.progressPercent = progress; // 단서 태그 자동 지급 지원 if (Array.isArray(node.grantTags)) { node.grantTags.forEach(tagId => gameState.unlockTag(tagId)); } if (node.unlockTag) gameState.unlockTag(node.unlockTag); if (node.unlockTag2) gameState.unlockTag(node.unlockTag2); if (node.unlockTag3) gameState.unlockTag(node.unlockTag3); if (node.unlockTag4) gameState.unlockTag(node.unlockTag4); gameState.emit('node-changed', { node: this.currentNode, progress: progress, scenario: this.scenario }); } /** * 일반 대화 진행 */ advance() { if (!this.currentNode) return; // 선택지가 있는 노드라면 선택을 완료해야 진행 if (Array.isArray(this.currentNode.choices) && this.currentNode.choices.length > 0) { return; } const nextId = this.currentNode.next || this.currentNode.nextNodeId; if (nextId) { const nextNode = this.nodeMap.get(nextId); if (nextNode) { this.setCurrentNode(nextNode); return; } } // 순차 진행 const nodeList = this.scenario.nodes || this.scenario.flow || []; const currentIdx = nodeList.findIndex(n => n.id === this.currentNode.id); if (currentIdx >= 0 && currentIdx + 1 < nodeList.length) { this.setCurrentNode(nodeList[currentIdx + 1]); } else { gameState.emit('scenario-flow-ended', this.currentNode); } } /** * 선택지 선택 */ choose(choiceIndex) { if (!this.currentNode || !Array.isArray(this.currentNode.choices)) return; const choice = this.currentNode.choices[choiceIndex]; if (!choice) return; if (choice.grantTags) { choice.grantTags.forEach(t => gameState.unlockTag(t)); } if (choice.unlockTag) gameState.unlockTag(choice.unlockTag); const targetId = choice.next || choice.nextNodeId; if (targetId) { const targetNode = this.nodeMap.get(targetId); if (targetNode) { this.setCurrentNode(targetNode); return; } } this.advance(); } } const scenarioRunner = new ScenarioRunner(); // 7. UI Controllers /** * 화면 1: 메인 허브 메뉴 화면 UI 컨트롤러 */ class MainMenuUI { constructor(containerElement) { this.container = containerElement; this.init(); } init() { this.render(); } render() { this.container.innerHTML = `

NOWHERE ARCHIVE · DETECTIVE ENGINE

사건 기록 보관소

단서를 모아 사건을 조립하고, 근거를 검증하여 진상을 밝히는 태그 조립형 추리 어드벤처

`; // 이벤트 리스너 바인딩 const btnList = this.container.querySelector('#btn-scenario-list'); const btnLoad = this.container.querySelector('#btn-load-custom'); const fileInput = this.container.querySelector('#json-file-input'); const btnCreator = this.container.querySelector('#btn-creator-mode'); const errorMsg = this.container.querySelector('#main-error-msg'); btnList.addEventListener('click', () => { gameState.setScreen('scenario-list'); }); btnLoad.addEventListener('click', () => { fileInput.click(); }); btnCreator.addEventListener('click', () => { gameState.setScreen('scenario-studio'); }); fileInput.addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; try { const text = await file.text(); const json = JSON.parse(text); ScenarioLoader.validateScenario(json); gameState.loadScenario(json); gameState.setScreen('in-game'); } catch (err) { errorMsg.textContent = `시나리오 파일을 불러올 수 없습니다: ${err.message}`; errorMsg.hidden = false; setTimeout(() => { errorMsg.hidden = true; }, 4000); } }); } show() { this.container.hidden = false; } hide() { this.container.hidden = true; } } /** * 화면 2: 시나리오 목록 및 선택 화면 UI */ class ScenarioListUI { constructor(containerElement) { this.container = containerElement; this.scenarios = []; this.selectedScenarioId = null; this.isLoading = false; this.init(); } async init() { this.isLoading = true; this.renderLoading(); try { const defaultScenarios = await ScenarioLoader.fetchScenarioIndex(); const customScenarios = this.getCustomScenarios(); this.scenarios = [...customScenarios, ...defaultScenarios]; if (this.scenarios.length > 0 && !this.selectedScenarioId) { this.selectedScenarioId = this.scenarios[0].id; } this.isLoading = false; this.render(); } catch (err) { this.isLoading = false; console.error('시나리오 목록 로드 실패:', err); this.renderError('시나리오 목록을 불러오는 중 오류가 발생했습니다.'); } } getCustomScenarios() { try { const stored = localStorage.getItem('custom_scenarios'); if (!stored) return []; const list = JSON.parse(stored); return list.map(item => ({ id: item.id, title: item.meta.title, subtitle: item.meta.subtitle || '사용자 제작 커스텀 사건', author: item.meta.author || '익명', category: '커스텀', difficulty: item.meta.difficulty || '보통', estimatedMinutes: item.meta.estimatedMinutes || 10, summary: item.meta.summary || '', coverColor: '#4a2c20', coverIcon: 'USER', isCustom: true, customData: item })); } catch (e) { return []; } } renderLoading() { this.container.innerHTML = `

NOWHERE ARCHIVE

기록 보관소를 탐색하는 중...

`; } renderError(msg) { this.container.innerHTML = `

ERROR

오류 발생

${msg}

`; const btn = this.container.querySelector('#btn-back-to-main'); if (btn) { btn.addEventListener('click', () => { gameState.setScreen('main-menu'); }); } } render() { if (this.isLoading) { this.renderLoading(); return; } const selected = this.scenarios.find(s => s.id === this.selectedScenarioId) || this.scenarios[0]; this.container.innerHTML = `

사건 기록 보관실

${this.scenarios.map(item => `

${item.coverIcon || 'CASE'}

${item.category || '추리'}

${item.title}

${item.subtitle || ''}

난이도: ${item.difficulty} · 약 ${item.estimatedMinutes}분

`).join('')}

${selected ? `

${selected.isCustom ? 'CUSTOM USER CASE' : 'CASE DOSSIER'} · ${selected.id.toUpperCase()}

${selected.title}

${selected.subtitle || ''}

작성자${selected.author || '기록관'}

분류${selected.category || '미상'}

난이도${selected.difficulty || '보통'}

예상 소요약 ${selected.estimatedMinutes || 5}분

사건 개요

${selected.summary}

수사관 성명 (플레이어 이름) ※ 입력하신 이름이 대사창과 수사 기록의 담당 탐정명으로 표기됩니다.

` : '

선택된 사건이 없습니다.

`; // 이벤트 리스너 바인딩 const btnBack = this.container.querySelector('#btn-back-main'); if (btnBack) { btnBack.addEventListener('click', () => gameState.setScreen('main-menu')); } const btnGoStudio = this.container.querySelector('#btn-go-studio'); if (btnGoStudio) { btnGoStudio.addEventListener('click', () => gameState.setScreen('scenario-studio')); } const cards = this.container.querySelectorAll('.scenario-item-card'); cards.forEach(c => { c.addEventListener('click', () => { this.selectedScenarioId = c.getAttribute('data-id'); this.render(); }); }); const btnStart = this.container.querySelector('#btn-start-case'); if (btnStart && selected) { btnStart.addEventListener('click', async () => { try { const playerNameInput = this.container.querySelector('#input-player-name'); if (playerNameInput && playerNameInput.value.trim()) { gameState.setPlayerName(playerNameInput.value.trim()); } btnStart.disabled = true; btnStart.textContent = '사건 파일을 불러오는 중...'; if (selected.isCustom && selected.customData) { gameState.loadScenario(selected.customData); } else { const scenarioData = await ScenarioLoader.fetchScenario(selected.file); gameState.loadScenario(scenarioData); } gameState.setScreen('in-game'); } catch (err) { alert(`사건을 시작할 수 없습니다: ${err.message}`); btnStart.disabled = false; btnStart.textContent = '사건 조사 시작'; } }); } } show() { this.container.hidden = false; this.init(); } hide() { this.container.hidden = true; } } /** * 화면 3: 인게임 대화 / 비주얼 노벨 UI * - AUTO (자동 넘김) / SKIP (빠른 진행) 모드 * - 사운드 신시사이저 (앰비언스, 타자기, 단서 벨) * - 대형 중앙 인물 스탠딩 스프라이트 */ class VNDialogueUI { constructor(containerElement) { this.container = containerElement; this.currentNode = null; this.speaker = null; this.location = null; // 재생 모드 (Auto / Skip) this.isAutoMode = false; this.isSkipMode = false; this.autoTimer = null; // 타자기 효과 관련 상태 this.isTyping = false; this.typingInterval = null; this.currentFullText = ''; this.currentDisplayText = ''; this.init(); } init() { this.render(); this.bindEvents(); gameState.on('node-changed', ({ node, scenario }) => { this.currentNode = node; if (scenario) { this.speaker = (scenario.characters || []).find(c => c.id === node.speakerId) || null; this.location = (scenario.locations || []).find(l => l.id === node.locationId) || null; } this.updateDialogueContent(); }); gameState.on('tag-unlocked', (tagData) => { sound.playClueUnlock(); this.showClueToast(tagData); }); gameState.on('scenario-flow-ended', () => { const elHint = this.container.querySelector('#advance-hint'); if (elHint) { elHint.textContent = '모든 단서를 확보했습니다. [수사 책상]을 열어 사건을 조립하세요. ▾'; } const badge = this.container.querySelector('#notebook-badge-dot'); if (badge) badge.hidden = false; }); } render() { const isMuted = sound.isMuted; this.container.innerHTML = `

INVESTIGATION IN PROGRESS 사건 조사 중

단서 0

현장 조사

`; } bindEvents() { const btnMenu = this.container.querySelector('#btn-in-game-menu'); if (btnMenu) { btnMenu.addEventListener('click', () => { if (confirm('사건 목록으로 돌아가시겠습니까? (현재 조사 내용은 보존됩니다)')) { this.stopAutoSkip(); gameState.setScreen('scenario-list'); } }); } const btnNotebook = this.container.querySelector('#btn-open-notebook'); if (btnNotebook) { btnNotebook.addEventListener('click', () => { this.stopAutoSkip(); sound.playPaperRustle(); gameState.toggleNotebook(true); }); } // 사운드 토글 const btnSound = this.container.querySelector('#btn-sound-toggle'); if (btnSound) { btnSound.addEventListener('click', () => { const isMuted = sound.toggleMute(); btnSound.textContent = isMuted ? '🔇' : '🔊'; }); } // AUTO 토글 const btnAuto = this.container.querySelector('#btn-toggle-auto'); if (btnAuto) { btnAuto.addEventListener('click', () => { this.isAutoMode = !this.isAutoMode; this.isSkipMode = false; btnAuto.classList.toggle('active', this.isAutoMode); this.container.querySelector('#btn-toggle-skip').classList.remove('active'); if (this.isAutoMode && !this.isTyping) { this.scheduleNextAuto(); } }); } // SKIP 토글 const btnSkip = this.container.querySelector('#btn-toggle-skip'); if (btnSkip) { btnSkip.addEventListener('click', () => { this.isSkipMode = !this.isSkipMode; this.isAutoMode = false; btnSkip.classList.toggle('active', this.isSkipMode); this.container.querySelector('#btn-toggle-auto').classList.remove('active'); if (this.isSkipMode) { this.advanceDialogue(); } }); } // 대화창 및 씬 클릭 진행 const dialoguePanel = this.container.querySelector('#dialogue-panel'); const sceneStage = this.container.querySelector('#scene-stage'); const handleAdvance = () => { sound.startAmbience(); if (this.isTyping) { this.completeTypingInstantly(); } else { this.advanceDialogue(); } }; if (dialoguePanel) dialoguePanel.addEventListener('click', handleAdvance); if (sceneStage) sceneStage.addEventListener('click', handleAdvance); window.addEventListener('keydown', (e) => { if (gameState.currentScreen !== 'in-game') return; if ((e.code === 'Space' || e.code === 'Enter') && !gameState.isNotebookOpen) { if (document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') { e.preventDefault(); handleAdvance(); } } }); } stopAutoSkip() { this.isAutoMode = false; this.isSkipMode = false; if (this.autoTimer) clearTimeout(this.autoTimer); const btnAuto = this.container.querySelector('#btn-toggle-auto'); const btnSkip = this.container.querySelector('#btn-toggle-skip'); if (btnAuto) btnAuto.classList.remove('active'); if (btnSkip) btnSkip.classList.remove('active'); } scheduleNextAuto() { if (!this.isAutoMode) return; if (this.autoTimer) clearTimeout(this.autoTimer); this.autoTimer = setTimeout(() => { if (this.isAutoMode) { this.advanceDialogue(); } }, 1800); } advanceDialogue() { if (gameState.isNotebookOpen) return; scenarioRunner.advance(); if (this.isSkipMode && gameState.currentNode) { setTimeout(() => { if (this.isSkipMode) this.advanceDialogue(); }, 100); } } updateDialogueContent() { if (!this.currentNode) return; const elSpeaker = this.container.querySelector('#speaker-name'); const elRoleTag = this.container.querySelector('#speaker-role-tag'); const elLocation = this.container.querySelector('#location-badge'); const elStandingBox = this.container.querySelector('#character-standing-box'); const elSpriteImg = this.container.querySelector('#character-sprite-img'); const elTagCount = this.container.querySelector('#hud-tag-count'); const hudTitle = this.container.querySelector('#hud-scenario-title'); const hudSubtitle = this.container.querySelector('#hud-scenario-subtitle'); if (gameState.currentScenario) { if (hudTitle) hudTitle.textContent = gameState.currentScenario.meta.title; if (hudSubtitle) hudSubtitle.textContent = gameState.currentScenario.meta.subtitle || 'INVESTIGATION IN PROGRESS'; } if (elTagCount) elTagCount.textContent = gameState.unlockedTagIds.size; if (this.speaker && this.speaker.id !== 'narrator' && this.speaker.image) { if (elSpeaker) elSpeaker.textContent = this.speaker.name; if (elRoleTag) { elRoleTag.hidden = !this.speaker.role; elRoleTag.textContent = this.speaker.role || ''; } elSpriteImg.src = this.speaker.image; elSpriteImg.alt = this.speaker.name; elStandingBox.hidden = false; elStandingBox.style.display = 'flex'; } else { // 주인공 / 탐정 독백 / 나레이션 (스탠딩 이미지 완전 제거) const pName = gameState.playerName || '아서 윈체스터'; if (elSpeaker) elSpeaker.textContent = (this.speaker && this.speaker.id !== 'narrator') ? this.speaker.name : pName; if (elRoleTag) { elRoleTag.hidden = false; elRoleTag.textContent = (this.speaker && this.speaker.id !== 'narrator') ? (this.speaker.role || '') : '담당 수사관'; } elStandingBox.hidden = true; elStandingBox.style.display = 'none'; elSpriteImg.removeAttribute('src'); elSpriteImg.alt = ''; } if (this.location && elLocation) { elLocation.textContent = `${this.location.name}`; } const fullText = this.currentNode.dialogue || this.currentNode.text || ''; if (this.isSkipMode) { this.completeTypingInstantly(); } else { this.startTyping(fullText); } } startTyping(fullText) { if (this.typingInterval) clearInterval(this.typingInterval); this.isTyping = true; this.currentFullText = fullText; this.currentDisplayText = ''; const elDialogueText = this.container.querySelector('#dialogue-text'); const elHint = this.container.querySelector('#advance-hint'); if (elHint) elHint.style.opacity = '0.3'; let charIndex = 0; const speedMs = 28; this.typingInterval = setInterval(() => { if (charIndex < fullText.length) { this.currentDisplayText += fullText[charIndex]; elDialogueText.innerHTML = this.renderHighlightedText(this.currentDisplayText); sound.playTypewriter(); charIndex++; } else { this.completeTyping(); } }, speedMs); } completeTypingInstantly() { if (this.typingInterval) clearInterval(this.typingInterval); this.isTyping = false; this.currentDisplayText = this.currentFullText; const elDialogueText = this.container.querySelector('#dialogue-text'); if (elDialogueText) { elDialogueText.innerHTML = this.renderHighlightedText(this.currentFullText); } this.completeTyping(); } completeTyping() { if (this.typingInterval) clearInterval(this.typingInterval); this.isTyping = false; const elHint = this.container.querySelector('#advance-hint'); if (elHint) elHint.style.opacity = '1'; if (this.isAutoMode) { this.scheduleNextAuto(); } } renderHighlightedText(text) { if (!text) return ''; return text.replace( /(사파이어|블루 사파이어|모조 보석|유리알|피아노선|와이어|오르골|은제 인장|식은 차|독차|카모마일|수면제|밀실|서재|지붕 환기구|굴뚝|빗장|도끼|유언장|열쇠|알리바이|원한)/g, '$1' ); } showClueToast(tagData) { if (!tagData) return; const toastContainer = this.container.querySelector('#clue-toast-container'); if (!toastContainer) return; const toast = document.createElement('div'); toast.className = `clue-toast tag-cat-${tagData.category}`; toast.innerHTML = ` [${tagData.category.toUpperCase()}] ${tagData.label} 단서 확보 `; toastContainer.appendChild(toast); setTimeout(() => { toast.classList.add('toast-fadeout'); setTimeout(() => toast.remove(), 400); }, 2800); } show() { this.container.hidden = false; if (gameState.currentScenario && gameState.currentNode) { this.updateDialogueContent(); } } hide() { this.container.hidden = true; this.stopAutoSkip(); } } /** * 화면 4: 현실의 수사 책상 보드 (Investigation Desk UI) * - 사건 서류철 간의 유향 화살표 연결 (A ➔ B 인과 체인) * - 연결 순서에 따라 종합 사건 전말 본문(Full Narrative Hypothesis) 실시간 조립 * - 근거 메모는 참고/정리용으로 한정 */ class NotebookUI { constructor(containerElement) { this.container = containerElement; // 무한 보드 뷰포트 상태 this.panX = 0; this.panY = 0; this.zoom = 1; this.isPanning = false; this.panStartX = 0; this.panStartY = 0; // 드래그 앤 드롭 상태 this.dragType = null; // 'drawer-tool' | 'drawer-tag' | 'placed-tag' | 'slot-tag' this.dragData = null; this.draggedOriginalEl = null; this.activeSnapTarget = null; // 서랍 상태 this.isDrawerOpen = true; this.selectedCategory = 'all'; // 화살표 연결 모드 상태 this.isConnecting = false; this.connectSourceCardId = null; this.init(); } init() { this.render(); this.bindEvents(); gameState.on('notebook-toggled', (isOpen) => { if (isOpen) { this.show(); } else { this.hide(); } }); gameState.on('board-updated', () => { this.renderDeskItems(); }); gameState.on('tag-unlocked', () => { this.renderDrawerTags(); }); } render() { this.container.innerHTML = `

`; } bindEvents() { const viewport = this.container.querySelector('#desk-board-viewport'); const drawer = this.container.querySelector('#desk-drawer'); const btnToggleDrawer = this.container.querySelector('#btn-toggle-drawer'); const btnCloseDrawerX = this.container.querySelector('#btn-close-drawer-x'); const drawerToggleText = this.container.querySelector('#drawer-toggle-text'); const btnCloseDesk = this.container.querySelector('#btn-close-desk'); const btnClearDesk = this.container.querySelector('#btn-clear-desk'); const btnAutoAlign = this.container.querySelector('#btn-auto-align'); const btnResetView = this.container.querySelector('#btn-reset-view'); const btnSubmitVerdict = this.container.querySelector('#btn-submit-verdict'); const toggleDrawer = () => { this.isDrawerOpen = !this.isDrawerOpen; if (this.isDrawerOpen) { drawer.classList.remove('closed'); drawerToggleText.textContent = '서랍 닫기'; } else { drawer.classList.add('closed'); drawerToggleText.textContent = '서랍 열기'; } }; btnToggleDrawer.addEventListener('click', toggleDrawer); btnCloseDrawerX.addEventListener('click', toggleDrawer); window.addEventListener('keydown', (e) => { if (gameState.isNotebookOpen && e.code === 'KeyD' && document.activeElement.tagName !== 'INPUT') { e.preventDefault(); toggleDrawer(); } }); btnCloseDesk.addEventListener('click', () => { gameState.toggleNotebook(false); }); // 책상 비우기 (완전 초기화) if (btnClearDesk) { btnClearDesk.addEventListener('click', () => { gameState.clearBoard(); }); } if (btnAutoAlign) { btnAutoAlign.addEventListener('click', () => { this.autoAlignDeskCards(); }); } btnResetView.addEventListener('click', () => { this.panX = 0; this.panY = 0; this.zoom = 1; this.updateWorldTransform(); }); btnSubmitVerdict.addEventListener('click', () => { gameState.setScreen('verdict-result'); gameState.toggleNotebook(false); }); // 서랍 도구 드래그 바인딩 const toolBtns = this.container.querySelectorAll('.desk-draggable-tool'); toolBtns.forEach(btn => { btn.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); const tool = btn.getAttribute('data-tool'); const label = tool === 'event-card' ? '사건 서류철' : '근거 메모'; this.startDrag('drawer-tool', { tool }, e.clientX, e.clientY, label); }); }); const catTabs = this.container.querySelectorAll('.cat-tab'); catTabs.forEach(tab => { tab.addEventListener('click', () => { catTabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); this.selectedCategory = tab.getAttribute('data-cat'); this.renderDrawerTags(); }); }); viewport.addEventListener('mousedown', (e) => { if (e.target === viewport || e.target.id === 'desk-board-world' || e.target.id === 'desk-items-layer' || e.target.id === 'desk-svg-layer') { this.isPanning = true; this.panStartX = e.clientX - this.panX; this.panStartY = e.clientY - this.panY; } }); viewport.addEventListener('wheel', (e) => { if (e.target.closest('#desk-drawer')) return; e.preventDefault(); const zoomFactor = e.deltaY < 0 ? 1.08 : 0.92; const newZoom = Math.min(Math.max(this.zoom * zoomFactor, 0.4), 2.2); const mouseX = e.clientX; const mouseY = e.clientY; this.panX = mouseX - (mouseX - this.panX) * (newZoom / this.zoom); this.panY = mouseY - (mouseY - this.panY) * (newZoom / this.zoom); this.zoom = newZoom; this.updateWorldTransform(); }, { passive: false }); window.addEventListener('mousemove', (e) => { if (this.isPanning) { this.panX = e.clientX - this.panStartX; this.panY = e.clientY - this.panStartY; this.updateWorldTransform(); } if (this.dragType) { this.updateDragGhost(e.clientX, e.clientY); this.checkSlotHover(e.clientX, e.clientY); } }); window.addEventListener('mouseup', (e) => { if (this.isPanning) { this.isPanning = false; } if (this.dragType) { this.handleDrop(e.clientX, e.clientY); this.endDrag(); } }); } autoAlignDeskCards() { const cards = gameState.boardState.cards; if (cards.length === 0) return; let startX = 60; let startY = 80; const gapX = 410; const gapY = 320; const columns = Math.min(3, Math.max(1, Math.floor((window.innerWidth - 360) / gapX))); cards.forEach((card, idx) => { const col = idx % columns; const row = Math.floor(idx / columns); card.x = startX + col * gapX; card.y = startY + row * gapY; card.tilt = 0; }); this.panX = 40; this.panY = 30; this.zoom = 1; this.updateWorldTransform(); this.renderDeskItems(); } updateWorldTransform() { const world = this.container.querySelector('#desk-board-world'); if (world) { world.style.transform = `translate(${this.panX}px, ${this.panY}px) scale(${this.zoom})`; } } screenToWorld(screenX, screenY) { return { x: (screenX - this.panX) / this.zoom, y: (screenY - this.panY) / this.zoom }; } startDrag(type, data, screenX, screenY, label, originalEl = null) { this.dragType = type; this.dragData = data; this.draggedOriginalEl = originalEl; if (originalEl && type === 'placed-tag') { originalEl.style.visibility = 'hidden'; } const ghost = this.container.querySelector('#desk-drag-ghost'); if (ghost) { ghost.hidden = false; const catClass = data.tag && data.tag.category ? `tag-cat-${data.tag.category}` : (type === 'drawer-tool' ? 'tool-ghost' : ''); ghost.innerHTML = `

${label}

`; this.updateDragGhost(screenX, screenY); } } updateDragGhost(screenX, screenY) { const ghost = this.container.querySelector('#desk-drag-ghost'); if (!ghost || ghost.hidden) return; let targetX = screenX; let targetY = screenY; let isSnapped = false; this.activeSnapTarget = null; if (this.dragData && this.dragData.tag) { const tagCat = this.dragData.tag.category; const target = document.elementFromPoint(screenX, screenY); if (target) { const cardEl = target.closest('.desk-board-card'); if (cardEl && !cardEl.classList.contains('card-folded')) { if (!cardEl.classList.contains('desk-evidence-card')) { const slotBox = cardEl.querySelector(`.desk-slot-box.slot-cat-${tagCat}`); if (slotBox) { const rect = slotBox.getBoundingClientRect(); targetX = rect.left + rect.width / 2; targetY = rect.top + rect.height / 2; isSnapped = true; this.activeSnapTarget = { type: 'slot', cardId: cardEl.getAttribute('data-card-id'), slotCat: tagCat, el: slotBox }; } } else { const contentBox = cardEl.querySelector('.evidence-card-content'); if (contentBox) { const rect = contentBox.getBoundingClientRect(); targetX = rect.left + rect.width / 2; targetY = rect.top + rect.height / 2; isSnapped = true; this.activeSnapTarget = { type: 'evidence', cardId: cardEl.getAttribute('data-card-id'), el: cardEl }; } } } } } if (isSnapped) { ghost.classList.add('ghost-magnetic-snapped'); ghost.style.left = `${targetX}px`; ghost.style.top = `${targetY}px`; } else { ghost.classList.remove('ghost-magnetic-snapped'); ghost.style.left = `${screenX}px`; ghost.style.top = `${screenY}px`; } } endDrag() { if (this.draggedOriginalEl) { this.draggedOriginalEl.style.visibility = 'visible'; this.draggedOriginalEl = null; } this.dragType = null; this.dragData = null; this.activeSnapTarget = null; const ghost = this.container.querySelector('#desk-drag-ghost'); if (ghost) { ghost.hidden = true; ghost.innerHTML = ''; ghost.classList.remove('ghost-magnetic-snapped'); } this.clearAllSlotHover(); } checkSlotHover(screenX, screenY) { this.clearAllSlotHover(); if (this.activeSnapTarget && this.activeSnapTarget.el) { this.activeSnapTarget.el.classList.add('snap-target-hover'); } } clearAllSlotHover() { const hovered = this.container.querySelectorAll('.snap-target-hover'); hovered.forEach(el => el.classList.remove('snap-target-hover')); } handleDrop(screenX, screenY) { const worldPos = this.screenToWorld(screenX, screenY); if (this.dragType === 'drawer-tool') { const tool = this.dragData.tool; if (tool === 'event-card') { gameState.addEventCard(worldPos.x - 190, worldPos.y - 120); sound.playPaperRustle(); } else if (tool === 'evidence-card') { gameState.addEvidenceCard(worldPos.x - 160, worldPos.y - 80); sound.playPaperRustle(); } return; } if (this.dragType === 'drawer-tag' || this.dragType === 'placed-tag' || this.dragType === 'slot-tag') { const tagData = this.dragData.tag; if (this.activeSnapTarget) { if (this.dragType === 'slot-tag') { gameState.removeTagFromSlot(this.dragData.sourceCardId, this.dragData.sourceSlotCat); } else if (this.dragType === 'placed-tag') { gameState.removePlacedTag(this.dragData.placedTagId); } if (this.activeSnapTarget.type === 'slot') { gameState.putTagIntoSlot(this.activeSnapTarget.cardId, this.activeSnapTarget.slotCat, tagData); } else if (this.activeSnapTarget.type === 'evidence') { gameState.setEvidenceCardTag(this.activeSnapTarget.cardId, tagData); } return; } if (this.dragType === 'drawer-tag') { gameState.placeTagOnBoard(tagData, worldPos.x - 40, worldPos.y - 15); } else if (this.dragType === 'placed-tag') { gameState.updatePlacedTagPos(this.dragData.placedTagId, worldPos.x - 40, worldPos.y - 15); } else if (this.dragType === 'slot-tag') { gameState.removeTagFromSlot(this.dragData.sourceCardId, this.dragData.sourceSlotCat); gameState.placeTagOnBoard(tagData, worldPos.x - 40, worldPos.y - 15); } } } renderDrawerTags() { const container = this.container.querySelector('#drawer-tags-container'); if (!container) return; const allTags = gameState.getAllUnlockedTags(); const filtered = this.selectedCategory === 'all' ? allTags : allTags.filter(t => t.category === this.selectedCategory); if (filtered.length === 0) { container.innerHTML = `

보관된 단서가 없습니다.

`; return; } container.innerHTML = filtered.map(tag => `

${tag.label}

`).join(''); const items = container.querySelectorAll('.drawer-tag-item'); items.forEach(el => { el.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); const tagId = el.getAttribute('data-id'); const tag = gameState.getTag(tagId); if (tag) { this.startDrag('drawer-tag', { tag }, e.clientX, e.clientY, tag.label); } }); }); } renderDeskItems() { const itemsLayer = this.container.querySelector('#desk-items-layer'); const watermark = this.container.querySelector('#desk-empty-watermark'); const previewEl = this.container.querySelector('#desk-full-hypothesis-preview'); if (!itemsLayer) return; const { cards, placedTags } = gameState.boardState; if (cards.length === 0 && placedTags.length === 0) { if (watermark) watermark.hidden = false; } else { if (watermark) watermark.hidden = true; } // 하단 실시간 종합 사건 본문 갱신 if (previewEl) { const fullHypo = gameState.getFullHypothesis(); previewEl.textContent = fullHypo || '서류철을 배치하고 연결하여 사건 본문을 완성하세요.'; } itemsLayer.innerHTML = ''; // 책상 위 자유 단서 스티커 placedTags.forEach(pt => { const tagEl = document.createElement('div'); tagEl.className = `desk-placed-tag tag-cat-${pt.tag.category}`; tagEl.id = `placed-tag-${pt.id}`; tagEl.style.left = `${pt.x}px`; tagEl.style.top = `${pt.y}px`; tagEl.innerHTML = ` ${pt.tag.label} `; tagEl.addEventListener('mousedown', (e) => { if (e.target.closest('.btn-remove-placed-tag')) { e.stopPropagation(); gameState.removePlacedTag(pt.id); return; } e.preventDefault(); e.stopPropagation(); this.startDrag('placed-tag', { placedTagId: pt.id, tag: pt.tag }, e.clientX, e.clientY, pt.tag.label, tagEl); }); itemsLayer.appendChild(tagEl); }); const orderedEventCards = gameState.getOrderedEventCards(); // 책상 위 카드 렌더링 cards.forEach(card => { const cardEl = document.createElement('div'); cardEl.className = `desk-board-card ${card.isPrimary ? 'primary-card' : ''} ${card.type === 'evidence' ? 'desk-evidence-card' : ''} ${card.isFolded ? 'card-folded' : ''} ${this.isConnecting && this.connectSourceCardId === card.id ? 'card-connecting-source' : ''}`; cardEl.style.left = `${card.x}px`; cardEl.style.top = `${card.y}px`; if (card.tilt) { cardEl.style.transform = `rotate(${card.tilt}deg)`; } cardEl.setAttribute('data-card-id', card.id); if (card.type === 'event') { const sentence = KoreanGrammarEngine.buildHypothesis(card.slots); const categories = ['who', 'when', 'where', 'what', 'how', 'why', 'action']; const orderIdx = orderedEventCards.findIndex(c => c.id === card.id) + 1; cardEl.innerHTML = `

#${orderIdx} 사건 서류

${sentence}

${categories.map(cat => { const filledTag = card.slots[cat]; return `

${filledTag ? ` ${filledTag.label} ` : ``}

`; }).join('')}

`; } else if (card.type === 'evidence') { const evTag = card.evidenceTag; const rel = card.relation || 'support'; const evSentence = KoreanGrammarEngine.buildEvidenceSentence(evTag ? evTag.label : null, rel); cardEl.innerHTML = `

근거 메모

${evSentence}

${evTag ? `

${evTag.label}

` : `

`; } const btnFold = cardEl.querySelector('.btn-toggle-fold'); if (btnFold) { btnFold.addEventListener('click', (e) => { e.stopPropagation(); gameState.toggleCardFold(card.id); }); } const btnDel = cardEl.querySelector('.btn-delete-card'); if (btnDel) { btnDel.addEventListener('click', (e) => { e.stopPropagation(); gameState.removeCard(card.id); }); } const relBtns = cardEl.querySelectorAll('.btn-rel'); relBtns.forEach(rb => { rb.addEventListener('click', (e) => { e.stopPropagation(); const rel = rb.getAttribute('data-rel'); gameState.setEvidenceRelation(card.id, rel); }); }); // 화살표 연결 토글 const btnConnect = cardEl.querySelector('.btn-connect-arrow'); if (btnConnect) { btnConnect.addEventListener('click', (e) => { e.stopPropagation(); if (this.isConnecting && this.connectSourceCardId === card.id) { this.isConnecting = false; this.connectSourceCardId = null; this.renderDeskItems(); } else { this.isConnecting = true; this.connectSourceCardId = card.id; this.renderDeskItems(); } }); } // 화살표 도착지 클릭 수신 cardEl.addEventListener('click', () => { if (this.isConnecting && this.connectSourceCardId) { if (this.connectSourceCardId !== card.id) { // A ➔ B 유향 연결 생성 gameState.addConnection(this.connectSourceCardId, card.id); } this.isConnecting = false; this.connectSourceCardId = null; this.renderDeskItems(); } }); const header = cardEl.querySelector('.desk-card-header'); if (header) { header.addEventListener('mousedown', (e) => { if (e.target.closest('button')) return; e.preventDefault(); e.stopPropagation(); const startMouseX = e.clientX; const startMouseY = e.clientY; const initialCardX = card.x; const initialCardY = card.y; const onCardMove = (moveEv) => { const dx = (moveEv.clientX - startMouseX) / this.zoom; const dy = (moveEv.clientY - startMouseY) / this.zoom; card.x = initialCardX + dx; card.y = initialCardY + dy; cardEl.style.left = `${card.x}px`; cardEl.style.top = `${card.y}px`; this.renderSvgConnections(); }; const onCardUp = () => { window.removeEventListener('mousemove', onCardMove); window.removeEventListener('mouseup', onCardUp); this.renderDeskItems(); }; window.addEventListener('mousemove', onCardMove); window.addEventListener('mouseup', onCardUp); }); } const slotChips = cardEl.querySelectorAll('.tag-chip'); slotChips.forEach(chip => { chip.addEventListener('mousedown', (e) => { if (e.target.closest('.btn-remove-slot-tag')) { e.stopPropagation(); const slotCat = chip.getAttribute('data-slot-cat'); gameState.removeTagFromSlot(card.id, slotCat); return; } e.preventDefault(); e.stopPropagation(); const slotCat = chip.getAttribute('data-slot-cat'); const tag = card.slots[slotCat]; if (tag) { this.startDrag('slot-tag', { sourceCardId: card.id, sourceSlotCat: slotCat, tag }, e.clientX, e.clientY, tag.label); } }); }); const evTagPreview = cardEl.querySelector('.evidence-tag-preview'); if (evTagPreview) { const btnEvRemove = evTagPreview.querySelector('.btn-remove-slot-tag'); if (btnEvRemove) { btnEvRemove.addEventListener('click', (e) => { e.stopPropagation(); gameState.setEvidenceCardTag(card.id, null); }); } } itemsLayer.appendChild(cardEl); }); this.renderSvgConnections(); } renderSvgConnections() { const svgGroup = this.container.querySelector('#svg-connections-group'); if (!svgGroup) return; const { cards, connections } = gameState.boardState; svgGroup.innerHTML = ''; connections.forEach(conn => { const fromCard = cards.find(c => c.id === conn.fromCardId); const toCard = cards.find(c => c.id === conn.toCardId); if (!fromCard || !toCard) return; const isEventToEvent = fromCard.type === 'event' && toCard.type === 'event'; const fromWidth = fromCard.type === 'event' ? 380 : 320; const toWidth = toCard.type === 'event' ? 380 : 320; // 카드의 상대적 위치에 따라 가장 자연스러운 시작점 & 끝점 계산 let fromX, fromY, toX, toY; if (fromCard.x + fromWidth < toCard.x) { // 왼쪽 ➔ 오른쪽 흐름 fromX = fromCard.x + fromWidth; fromY = fromCard.y + 80; toX = toCard.x; toY = toCard.y + 80; } else if (fromCard.x > toCard.x + toWidth) { // 오른쪽 ➔ 왼쪽 흐름 fromX = fromCard.x; fromY = fromCard.y + 80; toX = toCard.x + toWidth; toY = toCard.y + 80; } else { // 위 ➔ 아래 흐름 fromX = fromCard.x + fromWidth / 2; fromY = fromCard.y + 160; toX = toCard.x + toWidth / 2; toY = toCard.y; } const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const dx = toX - fromX; const dy = toY - fromY; const cx1 = fromX + dx * 0.45; const cy1 = fromY; const cx2 = toX - dx * 0.45; const cy2 = toY; const d = `M ${fromX} ${fromY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${toX} ${toY}`; path.setAttribute('d', d); path.setAttribute('fill', 'none'); if (isEventToEvent) { // 사건 서류철 간의 인과 흐름 연결선 (굵은 골드 대시 라인 + 강력한 유향 화살표 팁) path.setAttribute('stroke', '#d5b970'); path.setAttribute('stroke-width', '3.5'); path.setAttribute('stroke-dasharray', '8,4'); path.setAttribute('class', 'desk-arrow-line event-flow-arrow'); path.setAttribute('marker-end', 'url(#arrow-event)'); } else { // 근거 메모 연결선 const rel = fromCard.relation || 'support'; const markerColor = rel === 'support' ? '#4caf50' : rel === 'contradict' ? '#ef5350' : '#ff9800'; const markerId = `arrow-${rel}`; path.setAttribute('stroke', markerColor); path.setAttribute('stroke-width', '2.5'); path.setAttribute('stroke-dasharray', '6,4'); path.setAttribute('class', 'desk-arrow-line'); path.setAttribute('marker-end', `url(#${markerId})`); } // 연결선 클릭 시 삭제 지원 path.style.pointerEvents = 'stroke'; path.style.cursor = 'pointer'; path.addEventListener('click', (e) => { e.stopPropagation(); gameState.removeConnection(conn.fromCardId, conn.toCardId); }); svgGroup.appendChild(path); }); } show() { this.container.hidden = false; this.renderDrawerTags(); this.renderDeskItems(); } hide() { this.container.hidden = true; } } /** * 화면 5: 최종 판정 및 수사 종결 UI (이모지 배제, 아날로그 인장 스타일) * - 유향 연결된 종합 사건 본문(Full Hypothesis Narrative)과 정답 진상 대조 * - 범인 일치 여부 & 서사 유사도 기반 S / B / F 랭크 판정 */ class VerdictUI { constructor(containerElement) { this.container = containerElement; this.init(); } init() { this.render(); } render() { this.container.innerHTML = `

FINAL VERDICT RECORD

수사 종결 보고서

SUBMITTED FULL NARRATIVE

사건 핵심 요소 검증

사건의 진상

`; // 이벤트 리스너 바인딩 const btnBackDesk = this.container.querySelector('#btn-back-to-desk'); const btnRestart = this.container.querySelector('#btn-restart-scenario'); const btnExit = this.container.querySelector('#btn-exit-to-list'); btnBackDesk.addEventListener('click', () => { gameState.setScreen('in-game'); gameState.toggleNotebook(true); }); btnRestart.addEventListener('click', () => { if (gameState.currentScenario) { gameState.loadScenario(gameState.currentScenario); gameState.setScreen('in-game'); } }); btnExit.addEventListener('click', () => { gameState.setScreen('scenario-list'); }); } evaluateVerdict() { const scenario = gameState.currentScenario; if (!scenario || !scenario.memo || !scenario.memo.truth) return; const orderedCards = gameState.getOrderedEventCards(); const fullHypothesis = gameState.getFullHypothesis(); const truth = scenario.memo.truth; // 모든 사건 카드의 슬롯을 종합 수집 const combinedSlots = {}; orderedCards.forEach(card => { Object.entries(card.slots).forEach(([cat, val]) => { if (val && !combinedSlots[cat]) { combinedSlots[cat] = typeof val === 'object' ? val.id : val; } }); }); const categories = ['who', 'when', 'where', 'what', 'how', 'why', 'action']; const catLabels = { who: '인물 (WHO)', when: '시간 (WHEN)', where: '장소 (WHERE)', what: '도구 (WHAT)', how: '수법 (HOW)', why: '동기 (WHY)', action: '행위 (ACTION)' }; let matchCount = 0; const breakdownData = []; const isCulpritMatched = (combinedSlots.who === truth.who); categories.forEach(cat => { const userTagId = combinedSlots[cat]; const truthTagId = truth[cat]; const isMatch = (userTagId && userTagId === truthTagId); if (isMatch) matchCount++; const userTag = userTagId ? gameState.getTag(userTagId) : null; const truthTag = truthTagId ? gameState.getTag(truthTagId) : null; breakdownData.push({ cat, label: catLabels[cat], isMatch, userLabel: userTag ? userTag.label : '(미배치)', truthLabel: truthTag ? truthTag.label : '미상' }); }); const totalSlots = categories.length; const accuracy = Math.round((matchCount / totalSlots) * 100); let resultGrade = 'F'; let endingKey = 'wrong'; if (!isCulpritMatched || orderedCards.length === 0) { resultGrade = 'F'; endingKey = 'wrong'; } else { if (accuracy >= 85) { resultGrade = 'S'; endingKey = 'perfect'; } else { resultGrade = 'B'; endingKey = 'partial'; } } const ending = (scenario.endings && scenario.endings[endingKey]) || { title: '수사 결과', grade: `${resultGrade} RANK`, summary: '사건 판정이 완료되었습니다.', verdictText: '수사 내용을 확인하세요.' }; // UI 엘리먼트 갱신 const elBanner = this.container.querySelector('#grade-banner'); const elTitle = this.container.querySelector('#verdict-title'); const elSummary = this.container.querySelector('#verdict-summary'); const elHypothesis = this.container.querySelector('#submitted-hypothesis-text'); const elBreakdown = this.container.querySelector('#breakdown-grid'); const elExplanation = this.container.querySelector('#verdict-explanation-text'); if (elBanner) { elBanner.textContent = ending.grade || `${resultGrade} RANK (${accuracy}% 유사도)`; elBanner.className = `grade-banner ${resultGrade === 'S' ? 'grade-perfect' : resultGrade === 'B' ? 'grade-partial' : 'grade-wrong'}`; } if (elTitle) elTitle.textContent = ending.title; if (elSummary) elSummary.textContent = `${ending.summary} (진상 일치율: ${accuracy}%)`; if (elHypothesis) { elHypothesis.textContent = fullHypothesis ? `"${fullHypothesis}"` : '(제출된 사건 서류철이 없습니다.)'; } if (elExplanation) { elExplanation.textContent = ending.verdictText; } if (elBreakdown) { elBreakdown.innerHTML = breakdownData.map(item => `

${item.label}

${item.isMatch ? '[일치]' : '[불일치]'}

내 주장: ${item.userLabel} ${!item.isMatch ? `진실: ${item.truthLabel}` : ''}

`).join(''); } } show() { this.container.hidden = false; this.evaluateVerdict(); sound.playVerdictStamp(); } hide() { this.container.hidden = true; } } /** * 화면 6: 시나리오 제작 스튜디오 (Custom Scenario Creator) * 1. 글자 수 제한 없는 자유 원고 입력 * 2. AI 자동 파싱 (노드, 대사, 인물 감지, 배경 감지, 8대 속성 태그, 진상 정답) * 3. 등장인물 & 배경 장소 이미지 삽입 (파일 업로드 또는 프리셋) * 4. 자동 이미지 리사이징 압축 및 즉시 플레이 */ class ScenarioStudioUI { constructor(containerElement) { this.container = containerElement; this.currentStep = 'input'; // 'input' | 'assets' this.compiledData = null; this.init(); } init() { this.render(); } render() { if (this.currentStep === 'input') { this.renderInputStep(); } else if (this.currentStep === 'assets') { this.renderAssetsStep(); } } /** * 1단계: 원고 텍스트 입력 화면 */ renderInputStep() { this.container.innerHTML = `

사건 제목

작성자 / 탐정명

시나리오 원고 (소설, 대본, 줄거리 자유 입력) ※ 글자 수 제한 없음. 인물들의 대화와 나레이션을 자유롭게 적어주세요.

`; this.bindInputEvents(); } bindInputEvents() { const btnBack = this.container.querySelector('#btn-studio-back'); if (btnBack) { btnBack.addEventListener('click', () => gameState.setScreen('scenario-list')); } const btnSample = this.container.querySelector('#btn-load-sample'); if (btnSample) { btnSample.addEventListener('click', () => { const titleInput = this.container.querySelector('#studio-title'); const authorInput = this.container.querySelector('#studio-author'); const textInput = this.container.querySelector('#studio-raw-text'); titleInput.value = '눈보라 산장의 밀실과 멈춘 오르골'; authorInput.value = '아서 윈체스터'; textInput.value = `바람이 거세게 부는 해안가 절벽의 오래된 등대 산장. 아서 윈체스터는 빗물에 젖은 중절모를 벗으며 1층 산장 홀로 들어섰다. 올리버: "탐정님, 어젯밤 자정에 2층 서재에서 의문의 사건이 벌어졌습니다." 에밀리: "제가 저녁 식사 전에 따뜻한 카모마일 차를 올려 보냈을 때는 아무 이상이 없었는데..." 빅터: "2층 밀실 서재 문은 안쪽에서 빗장이 굳게 걸려 있었소! 이건 분명 밀실 트릭이오!" 아서는 서재 바닥에 떨어진 멈춘 오르골과 식어버린 찻잔을 면밀히 조사하기 시작했다.`; }); } const btnCompile = this.container.querySelector('#btn-compile-scenario'); if (btnCompile) { btnCompile.addEventListener('click', () => { const title = this.container.querySelector('#studio-title').value.trim(); const author = this.container.querySelector('#studio-author').value.trim(); const rawText = this.container.querySelector('#studio-raw-text').value.trim(); if (!rawText) { alert('시나리오 원고 텍스트를 입력해주세요.'); return; } try { btnCompile.disabled = true; btnCompile.textContent = 'AI가 대사, 인물, 배경을 분석하는 중...'; setTimeout(() => { this.compiledData = ScenarioCompiler.compile(rawText, { title, author }); this.currentStep = 'assets'; this.render(); }, 300); } catch (err) { alert(`분석 오류: ${err.message}`); btnCompile.disabled = false; btnCompile.textContent = '✨ AI 시나리오 분석 및 인물·배경 감지'; } }); } } /** * 2단계: 감지된 등장인물 및 배경 장소 설정 화면 */ renderAssetsStep() { if (!this.compiledData) return; const chars = this.compiledData.characters || []; const nonNarratorChars = chars.filter(c => c.id !== 'narrator'); const locations = this.compiledData.locations || []; this.container.innerHTML = `

1. 감지된 등장인물 (${nonNarratorChars.length}명)

직접 준비하신 인물 이미지(PNG/JPG)를 첨부하거나 기본 프리셋을 선택할 수 있습니다. (없으면 기본 인장으로 자동 진행됩니다.)

${nonNarratorChars.map((char) => `

${char.image ? `

` : `${char.mark}`}

${char.name}

📁 인물 사진 첨부

`).join('')}

2. 감지된 배경 장소 (${locations.length}곳)

원고에서 감지된 씬별 배경 이미지입니다. 직접 배경 사진을 첨부하거나 저택 홀/서재 프리셋을 지정할 수 있습니다.

${locations.map((loc) => `

${loc.image ? ` ${loc.name}

` : `BG`}

${loc.name}

📁 배경 사진 첨부

`).join('')}

자동 추출된 8대 속성 단서 태그 (${this.compiledData.evidenceTags.length}개)

${this.compiledData.evidenceTags.map(t => ` [${t.category.toUpperCase()}] ${t.label} `).join('')}

`; this.bindAssetsEvents(); } bindAssetsEvents() { const btnPrev = this.container.querySelector('#btn-step-prev'); if (btnPrev) { btnPrev.addEventListener('click', () => { this.currentStep = 'input'; this.render(); }); } // 인물 이미지 파일 업로드 (자동 압축 500x500) const fileInputsChar = this.container.querySelectorAll('.file-input-char'); fileInputsChar.forEach(input => { input.addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; const charId = input.getAttribute('data-id'); const base64Url = await this.compressImage(file, 500, 500); const targetChar = this.compiledData.characters.find(c => c.id === charId); if (targetChar) { targetChar.image = base64Url; const avatarBox = this.container.querySelector(`#avatar-preview-${charId}`); if (avatarBox) { avatarBox.innerHTML = ` ${targetChar.name}

`; } } }); }); // 배경 이미지 파일 업로드 (자동 압축 1280x720) const fileInputsLoc = this.container.querySelectorAll('.file-input-loc'); fileInputsLoc.forEach(input => { input.addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; const locId = input.getAttribute('data-id'); const base64Url = await this.compressImage(file, 1280, 720); const targetLoc = this.compiledData.locations.find(l => l.id === locId); if (targetLoc) { targetLoc.image = base64Url; const previewBox = this.container.querySelector(`#loc-preview-${locId}`); if (previewBox) { previewBox.innerHTML = ` ${targetLoc.name}

`; } } }); }); // 인물 프리셋 선택 const presetSelectsChar = this.container.querySelectorAll('.preset-select-char'); presetSelectsChar.forEach(select => { select.addEventListener('change', (e) => { const presetPath = e.target.value; const charId = select.getAttribute('data-id'); const targetChar = this.compiledData.characters.find(c => c.id === charId); if (targetChar && presetPath) { targetChar.image = presetPath; const avatarBox = this.container.querySelector(`#avatar-preview-${charId}`); if (avatarBox) { avatarBox.innerHTML = ` ${targetChar.name}

`; } } }); }); // 배경 프리셋 선택 const presetSelectsLoc = this.container.querySelectorAll('.preset-select-loc'); presetSelectsLoc.forEach(select => { select.addEventListener('change', (e) => { const presetPath = e.target.value; const locId = select.getAttribute('data-id'); const targetLoc = this.compiledData.locations.find(l => l.id === locId); if (targetLoc && presetPath) { targetLoc.image = presetPath; const previewBox = this.container.querySelector(`#loc-preview-${locId}`); if (previewBox) { previewBox.innerHTML = ` ${targetLoc.name}

`; } } }); }); // 인물 역할 텍스트 변경 const roleInputs = this.container.querySelectorAll('.char-role-input'); roleInputs.forEach(input => { input.addEventListener('input', (e) => { const card = input.closest('.char-setup-card'); const charId = card.getAttribute('data-id'); const targetChar = this.compiledData.characters.find(c => c.id === charId); if (targetChar) { targetChar.role = e.target.value.trim(); } }); }); // 제작 완료 및 시작 const finishHandler = () => { if (!this.compiledData) return; this.saveCustomScenario(this.compiledData); gameState.loadScenario(this.compiledData); gameState.setScreen('in-game'); }; const btnFinish = this.container.querySelector('#btn-finish-studio'); const btnFinishBottom = this.container.querySelector('#btn-finish-studio-bottom'); if (btnFinish) btnFinish.addEventListener('click', finishHandler); if (btnFinishBottom) btnFinishBottom.addEventListener('click', finishHandler); } /** * 브라우저 Canvas를 이용한 이미지 리사이징 및 용량 압축 유틸리티 */ compressImage(file, maxWidth, maxHeight) { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { let w = img.width; let h = img.height; if (w > maxWidth || h > maxHeight) { const ratio = Math.min(maxWidth / w, maxHeight / h); w = Math.round(w * ratio); h = Math.round(h * ratio); } const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, w, h); // PNG 또는 JPEG 퀄리티 0.85 압축 const compressed = canvas.toDataURL('image/jpeg', 0.85); resolve(compressed); }; img.src = e.target.result; }; reader.readAsDataURL(file); }); } saveCustomScenario(scenarioData) { try { const stored = localStorage.getItem('custom_scenarios'); const list = stored ? JSON.parse(stored) : []; const filtered = list.filter(s => s.id !== scenarioData.id); filtered.unshift(scenarioData); localStorage.setItem('custom_scenarios', JSON.stringify(filtered)); } catch (err) { console.warn('로컬 저장소 저장 실패:', err); } } show() { this.container.hidden = false; this.currentStep = 'input'; this.render(); } hide() { this.container.hidden = true; } } // 8. Main Application Entrypoint /** * 게임 메인 초기화 및 진입점 */ class App { constructor() { this.canvas = null; this.stage = null; this.screens = {}; this.init(); } init() { // 캔버스 초기화 this.canvas = document.getElementById('stage'); this.stage = new StageCanvas(this.canvas); // UI 컨테이너 매핑 const mainMenuContainer = document.getElementById('screen-main-menu'); const scenarioListContainer = document.getElementById('screen-scenario-list'); const inGameContainer = document.getElementById('screen-in-game'); const notebookContainer = document.getElementById('screen-notebook'); const verdictContainer = document.getElementById('screen-verdict'); const studioContainer = document.getElementById('screen-scenario-studio'); // UI 인스턴스 생성 this.screens['main-menu'] = new MainMenuUI(mainMenuContainer); this.screens['scenario-list'] = new ScenarioListUI(scenarioListContainer); this.screens['in-game'] = new VNDialogueUI(inGameContainer); this.screens['notebook'] = new NotebookUI(notebookContainer); this.screens['verdict-result'] = new VerdictUI(verdictContainer); this.screens['scenario-studio'] = new ScenarioStudioUI(studioContainer); // 상태 이벤트 연결 gameState.on('screen-changed', (screenName) => this.handleScreenChange(screenName)); gameState.on('scenario-loaded', (scenarioData) => { scenarioRunner.start(scenarioData); }); // 렌더 루프 가동 this.startRenderLoop(); // 초기 화면 활성화 this.handleScreenChange('main-menu'); } handleScreenChange(screenName) { // 모든 화면 숨김 Object.entries(this.screens).forEach(([key, ui]) => { if (key !== 'notebook') { ui.hide(); } }); // 대상 화면 활성화 if (this.screens[screenName]) { this.screens[screenName].show(); } } startRenderLoop() { const loop = (timestamp) => { let currentBg = '#051718'; let currentBgImage = null; if (gameState.currentScenario && gameState.currentNode && gameState.currentScenario.locations) { const loc = gameState.currentScenario.locations.find(l => l.id === gameState.currentNode.locationId); if (loc) { if (loc.bgCode) currentBg = loc.bgCode; if (loc.image) currentBgImage = loc.image; } } this.stage.render(timestamp, currentBg, currentBgImage); requestAnimationFrame(loop); }; requestAnimationFrame(loop); } } // DOM 준비 후 앱 시작 window.addEventListener('DOMContentLoaded', () => { window.app = new App(); }); })();