playuniare.sori.studio/docs/map.md

화면 및 파일 구조

현재 화면

/

• 파일: 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장으로 지정한다.
• 공개 중인 카드 장수를 표시한다.

예정 디렉터리 구조

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 단위 화면