SHADOW★BOX CHALLENGE

웹캠 행동인식으로 플레이하는 1v1 온라인 쉐도우복싱 챌린지. TikTok 페이크아웃 룰 × 3D 로우폴리 카툰 셀셰이딩 × 팝아트·서브컬쳐 무드.

Stack

• Vite + React + TypeScript
• Three.js (+ @react-three/fiber, @react-three/drei) — 3D 아레나, 셀셰이더, 아웃라인
• @mediapipe/tasks-vision — 브라우저 네이티브 포즈·페이스 인식
• PartyKit — 2인 온라인 매칭 서버 (WebSocket)
• Zustand — 상태 관리
• Tailwind CSS — 팝아트 디자인 시스템 (핫핑크 / 애시드그린 / 머스터드 / 바이올렛 / 잉크)

Run locally

npm install

# 1) 게임 서버 (PartyKit) — port 1999
npm run party

# 2) 새 터미널에서 Vite 프런트 — port 5173
npm run dev

접속: http://localhost:5173

플레이 방법

1. 방 생성 → 상대에게 INVITE URL 복사해서 전달
2. 얼굴 사진 업로드 (원형 페더 마스크 + 캐릭터 페이스 플레이트에 자동 매핑)
3. 웹캠 연결 → MediaPipe가 포즈 감지
4. 라운드 교대로 공·수 전환:
   • 공격자 (POINTER): 손을 뻗어 위/아래/왼/오른 중 한 방향을 가리킴
   • 수비자 (DODGER): 공격자가 가리킨 쪽의 반대로 고개·상체를 피함
   • 같은 방향 = HIT. 공격자 3 HIT 선취 → K.O!

웹캠이 없어도 키보드 목업으로 룰 확인 가능: IJKL 포인팅 / WASD 회피.

Deploy

• 프런트: Cloudflare Pages / Vercel (Vite build)
• 서버: npx partykit deploy

디자인 문서

docs/ — 기획서 HTML (팝아트 스티커 스타일 GDD)