2.0 KiB

Raw Blame History

Context: Match & UI

1. 모듈별 상세 역할

매치 로직 (`src/game/match/`)

matchSetup.js: 매치 초기화, 팀 구성, 스폰 위치 계산을 담당합니다.
arenaMatchRuntime.js: 스폰 클러스터 계산 및 팀 크기 동기화 등 매치 진행 중 헬퍼 기능을 제공합니다.

UI 컴포넌트 (`src/ui/`)

matchForm.js: 설정 폼 제어 및 localStorage 설정 유지.
arenaScoreboard.js: 좌측 HUD 레일의 팀 badge 업데이트 및 관전 시점 전환.
arenaKillLog.js: 좌측 하단 킬로그 표시 및 관리.
battleDeathNotice.js: 상단 사망 통계 공지 UI.
victoryCelebration.js: 승리/무승부 축하 연출 (광선, 컨페티, 오디오).

2. 주요 로직 구현 세부 사항

매치 설정 및 스폰 배치

완전 랜덤 배치: 전장 전체 스폰 슬롯을 무작위로 섞어 배치합니다.
스타팅 지점 배치: 참가자 수에 맞춰 전장을 구역으로 나눈 뒤, 참가자별 구역 배정을 매치마다 섞고 구역 내 무작위 위치에 스폰합니다.
설정 유지: 닉네임, 인원, 배치 모드는 localStorage에 저장되어 재접속 시 복원됩니다.

전투 화면 레이아웃 (HUD)

팀 Badge: 좌측 HUD 레일에 배치되며, 클릭 시 해당 팀의 생존 유닛 중 무작위 1명으로 시점을 고정합니다.
킬로그: 처치자와 피처치자를 좌우로 배치하고, 피처치자 아이콘에 빨간 X를 겹쳐 사망 관계를 명확히 표시합니다.
승리 연출: 승리 시 Web Audio 기반 팡파르와 CSS 애니메이션(광선, 컨페티)을 결합해 화려하게 연출합니다. 무승부는 더 차분한 톤을 사용합니다.

3. UI 개발 규칙

DOM 접근 최소화: 성능 최적화를 위해 필요한 시점에만 최소한으로 DOM을 업데이트합니다.
반응형 상태: #app의 클래스(match-live, options-open, drawer-collapsed, match-paused)를 통해 전반적인 UI 상태를 제어합니다.