3.1 KiB
배치 분석 채보 시각화
PlayableChart.svelte는 점수 결과와 별도로 static/data/chart-visuals/의 레인·너비·플릭·롱노트 정보를 지연 로드한다. 계산기의 노트 목록과 점수 공식을 바꾸지 않는다. 그래프와 채보는 score-timeline.ts의 누적 합산·시각 검색·숫자 표시를 공유한다.
데이터 갱신
- 저장소 지침에 따라
npm run data:sync의 전체 보고서를 검토하고 사용자에게 설명한다. - 점수 채보 수집이 필요하면 기존 수집 절차를 완료한다.
npm run data:collect-chart-visuals를 실행한다. 검토한 게임 DB 스냅샷을 검증하고 로컬의 공식 게임 SUS 자산을 읽는다.- 원본 SUS의 SHA-256과 노트 시각이 점수 채보와 같을 때만 추출한다. 일치하지 않으면 중단하며, 같은 게임 SUS로 점수 채보와 시각화를 먼저 다시 생성한다.
현재 12개 레인, 탭·플릭 방향·크리티컬 표시, 롱노트 앵커·숨은 베지어 제어점을 보존한다. 자동 중간 점수 판정을 탭으로 그리지 않는다. 세로축은 실제 초 단위로, 게임의 스크롤 속도 변화를 재현하지 않는다.
채보 탐색
채보는 6초 단위 열을 왼쪽에서 오른쪽으로 이어 표시하며 각 열은 아래에서 위로 읽는다. 열 경계의 노트는 다음 열에 한 번만 표시하고, 곡 마지막 시각은 마지막 열에 포함한다. 롱노트 곡선을 먼저 샘플링한 뒤 각 열에서 잘라 표시해 연결을 보존한다. 확대·축소는 가로 화면 중심과 세로 중심 시각을 유지한다.
시각화 JSON의 measures는 같은 해시의 SUS에서 추출한 마디 번호와 시작 시각이다. #000은 #0으로 표시하며 빈 마디도 생략하지 않는다. MEASURE_COUNT, 지속되는 마디 길이 지시문, 마디 중간 BPM 변경과 WAVEOFFSET을 반영한다. 왼쪽 번호와 밝은 가로선, 열 머리의 마디 범위, 선택 시각의 마디 표시가 이 정보를 공유한다. 6초 단위 열 번호를 마디 번호로 사용하지 않는다. 이전 JSON에 마디 정보가 없으면 초 눈금만 표시한다.
전체 탐색 막대는 수동·자동 판정을 포함한 점수 채보의 노트 분포, 스페셜 적용 구간과 현재 가로 화면 범위를 보여 준다. 클릭·드래그, 시각 슬라이더, 5초 이동, 이전·다음 스페셜과 키보드로 선택 시각을 바꾸고 해당 열로 이동한다. 선택 시각과 누적 점수는 채보 위 고정 영역에 남는다. chart-navigation.ts는 반응형 좌표와 열 경계를 담당한다.
가로로 구간을 이어 보는 표시 방식은 holodori-scores를 참고했다. Python 렌더러나 이미지 자산을 포함하지 않으며, 기존 공식 SUS 기반 JSON과 브라우저 SVG를 사용한다.
Pages 빌드에서는 점수 채보만 번들에 포함하고 시각화 JSON은 data/chart-visuals/에 남겨 개별 요청으로 제공한다. finalize-pages-build.mjs에서 이 디렉터리를 제거하지 않아야 한다.