138 lines
4.7 KiB
Markdown
138 lines
4.7 KiB
Markdown
# 화면 및 파일 구조
|
|
|
|
## 현재 화면
|
|
|
|
### `/`
|
|
|
|
- 파일: `src/views/LobbyView.vue`
|
|
- 역할: 비공개 게임 대기실
|
|
- 현재 기능:
|
|
- 방 생성과 6자리 초대 코드
|
|
- 방 코드 참가 입력
|
|
- 덱 결과 URL 등록
|
|
- 50장·동일 카드·트리거·AP 기본 검증
|
|
- Socket.IO 서버 연결 상태
|
|
- 서버 기반 방 생성·방 코드 참가
|
|
- 양쪽 플레이어의 좌석·덱 등록·준비 상태
|
|
- 양쪽 준비 완료 시 게임 화면 자동 이동
|
|
- 방 나가기
|
|
- 현재 방 종료 후 새 방 만들기
|
|
- 진행 중 게임 세션 발견 시 게임 화면 자동 복귀
|
|
- 유효한 덱으로 로컬 게임 테스트
|
|
|
|
### `/game`
|
|
|
|
- 파일: `src/views/GameView.vue`
|
|
- 주요 컴포넌트: `src/components/game-board/GameBoard.vue`
|
|
- 플레이 보드 자산: `src/assets/playboards/union-arena-standard.png`
|
|
- 역할: 실제 카드 조작 게임 화면
|
|
- 현재 기능:
|
|
- 헤더 없는 전체 화면 16:9 플레이 보드
|
|
- `F` 키 브라우저 전체화면 전환
|
|
- 카드 크기 기준 표시·숨김
|
|
- 실제 카드 이미지 한 장 표시
|
|
- 독립 카드 인스턴스 3장 겹침 표시
|
|
- 기존 덱 빌더 `series`·`cards` 쿼리 불러오기
|
|
- 불러온 덱을 내 덱 영역에 뒷면으로 쌓기
|
|
- 잘못된 덱 데이터 오류 안내
|
|
- 내 덱 1장 드로우와 셔플
|
|
- 온라인 서버 권위 셔플·드로우·여러 장 공개
|
|
- 덱 위 1~10장 공개
|
|
- 중앙 공개 영역 자동 정렬
|
|
- 플레이매트와 분리된 화면 하단 한 줄 손패 트레이
|
|
- 축소 손패 카드와 가로 스크롤
|
|
- 우클릭 메뉴의 손패·덱 위·덱 아래·무덤 이동
|
|
- 첫 손패 7장
|
|
- 로컬 선후공 선택과 1회 멀리건
|
|
- 온라인 서버 무작위 선후공 지정
|
|
- 라이프 7장 세팅
|
|
- 턴 시작 AP·드로우·일괄 언탭
|
|
- 현재 차례 강조와 서버 기반 턴 종료·교대
|
|
- 상대 공개 카드·덱·손패·라이프 장수 실시간 표시
|
|
- 상대 카드 반대편 좌표 표시와 조작 차단
|
|
- 새로고침·단기 연결 끊김의 같은 좌석 재접속
|
|
- 게임 화면의 방 나가기
|
|
- 상대가 방을 나가면 대기실 자동 복귀
|
|
- 카드별 자동 언탭 제외 잠금
|
|
- 마우스·터치 포인터 기반 자유 드래그
|
|
- 카드 더블클릭 탭·언탭
|
|
- 카드 우클릭 조작 메뉴
|
|
- 우클릭 메뉴의 앞면·뒷면 전환
|
|
- 선택 카드 레이어 순서 올리기
|
|
- 선택 카드 좌표·레이어·앞뒤·탭 상태 표시
|
|
- 좌우 플레이어 정보 패널
|
|
- 라이프, 덱·손패 장수, 연결 상태와 메모 자리
|
|
- 다음 변경: 카드 조작 이벤트별 세부 검증과 진행 중 표시
|
|
- 문서 제목과 기본 언어: `index.html`의 `Play Uniare`, 한국어
|
|
|
|
## 예정 화면
|
|
|
|
### `/`
|
|
|
|
- 로컬 연습 시작
|
|
- 방 만들기
|
|
- 방 참가
|
|
- 덱 쿼리 유효성 안내
|
|
|
|
### `/room/:roomCode`
|
|
|
|
- 상대 필드
|
|
- 공용 게임 보드
|
|
- 내 필드와 손패
|
|
- 덱·무덤·공개 영역
|
|
- 카드 조작 메뉴
|
|
- 연결 상태와 재접속 안내
|
|
|
|
## 카드 우클릭 메뉴
|
|
|
|
- 선택 카드 상태에 따라 `앞면으로`·`뒷면으로`, `탭`·`언탭` 문구를 바꾼다.
|
|
- 선택 카드를 가장 위 레이어로 올릴 수 있다.
|
|
- 선택 카드를 손패, 덱 위, 덱 아래, 무덤으로 이동할 수 있다.
|
|
- 화면 가장자리에서 메뉴가 잘리지 않도록 위치를 제한한다.
|
|
- 바깥 영역 클릭 또는 `Esc` 키로 닫는다.
|
|
|
|
## 덱 쿼리 처리
|
|
|
|
- 파일: `src/services/deckQuery.js`
|
|
- 쿼리가 있으면 카드 수량을 독립 인스턴스로 확장한다.
|
|
- 쿼리가 없으면 연습 카드 3장을 사용한다.
|
|
- 카드 이미지 주소는 `VITE_CARD_ASSET_BASE_URL`을 기준으로 만든다.
|
|
|
|
## 덱 조작 패널
|
|
|
|
- 플레이 보드의 내 덱 옆에 작은 반투명 패널로 표시한다.
|
|
- 현재 덱 장수를 표시한다.
|
|
- 덱이 비어 있으면 드로우를 비활성화한다.
|
|
- 덱이 2장 미만이면 셔플을 비활성화한다.
|
|
- 공개할 카드 수를 1~10장으로 지정한다.
|
|
- 공개 중인 카드 장수를 표시한다.
|
|
|
|
## 예정 디렉터리 구조
|
|
|
|
```text
|
|
src/
|
|
├── components/
|
|
│ ├── cards/
|
|
│ │ └── GameCard.vue
|
|
│ ├── game-board/
|
|
│ │ └── GameBoard.vue
|
|
│ └── room/
|
|
├── composables/
|
|
├── services/
|
|
├── stores/
|
|
├── router/
|
|
├── stores/
|
|
├── types/
|
|
├── utils/
|
|
└── views/
|
|
```
|
|
|
|
- `components`: 화면에서 재사용하는 UI
|
|
- `composables`: Vue 반응형 조합 로직
|
|
- `services`: 쿼리 파싱, API, Socket.IO 연결
|
|
- `stores`: Pinia 기반 게임·방·사용자 상태
|
|
- `router`: 대기실과 게임 화면 경로
|
|
- `types`: JSDoc 타입 정의
|
|
- `utils`: Vue에 의존하지 않는 순수 함수
|
|
- `views`: Router 단위 화면
|