Fruit Box

숫자 합계를 맞추는 타이머 기반 게임입니다. 주어진 시간 내에 게임 보드에서 사각형 영역을 선택하여 목표 합계에 도달하세요.

🎮 주요 기능

싱글플레이 게임

• 타이머 기반 게임플레이: 60초 내에 최대한 많은 점수 획득
• 드래그 선택: 마우스로 게임 보드의 영역을 자유롭게 선택
• 동적 보드 생성: 게임마다 새로운 보드가 생성됨
• 개인 최고 기록: 로그인 시 개인 최고 기록 저장 및 추적
• 파티클 이펙트: 성공 선택에 대한 시각적 피드백
• 점수 팝업: 선택한 영역의 점수를 시각적으로 표시

멀티플레이 게임

• 실시간 대전: 다른 플레이어와 동시에 게임 플레이
• 게임 로비: 플레이어 매칭 및 게임 설정
• 카운트다운: 게임 시작 전 준비 시간
• 멀티플레이어 스코어보드: 실시간 순위 표시

계정 관리

• Supabase 인증: 이메일 기반 회원가입 및 로그인
• 프로필 관리: 사용자 프로필 정보 관리
• 점수 리더보드: 전체 플레이어 순위 조회

🛠️ 기술 스택

프런트엔드

• React 18.3: UI 라이브러리
• TypeScript 5.5: 타입 안전성
• Vite 5.3: 빌드 도구
• Tailwind CSS 3.4: 스타일링

상태 관리

• Zustand 4.5: 경량 상태 관리
• 세 가지 주요 스토어:
  • gameStore: 싱글플레이 게임 상태
  • authStore: 사용자 인증 및 프로필 상태
  • multiStore: 멀티플레이 게임 상태

백엔드

• Supabase: 인증, 실시간 데이터베이스, 스토리지

📦 프로젝트 구조

src/
├── components/          # React 컴포넌트
│   ├── GameBoard.tsx   # 싱글플레이 게임 보드
│   ├── MultiGame.tsx   # 멀티플레이 게임 인터페이스
│   ├── Header.tsx      # 헤더 및 네비게이션
│   ├── AuthModal.tsx   # 로그인/회원가입 모달
│   └── ...            # 기타 UI 컴포넌트
├── hooks/              # 커스텀 React 훅
│   └── useDragSelect.ts # 드래그 선택 로직
├── store/              # Zustand 스토어
│   ├── gameStore.ts   # 싱글플레이 게임 상태
│   ├── authStore.ts   # 인증 상태
│   └── multiStore.ts  # 멀티플레이 상태
├── utils/              # 유틸리티 함수
│   ├── gameLogic.ts   # 게임 로직 (합계 계산, 영역 검증)
│   └── boardGenerator.ts # 게임 보드 생성
├── lib/               # 라이브러리
│   └── supabase.ts    # Supabase 클라이언트 설정
├── types/             # TypeScript 타입 정의
│   └── game.ts        # 게임 관련 타입
└── App.tsx            # 메인 애플리케이션

🚀 시작하기

설치

1. 저장소를 클론합니다:

git clone <repository-url>
cd AppleGame

2. 의존성을 설치합니다:

npm install

3. Supabase 설정:
   • Supabase 프로젝트 생성
   • .env.local 파일에 Supabase URL과 API 키 추가

개발 서버 실행

npm run dev

개발 서버는 http://localhost:5173에서 실행됩니다.

빌드

프로덕션 빌드를 생성합니다:

npm run build

빌드된 파일은 dist/ 디렉토리에 생성됩니다.

미리보기

빌드된 버전을 미리 봅니다:

npm run preview

🎯 게임 플레이

싱글플레이 모드

1. 게임 시작 버튼을 누르면 게임이 시작됩니다
2. 게임 보드에서 마우스로 영역을 드래그하여 선택합니다
3. 선택한 영역의 합계가 목표 합계(100)에 도달하면 점수를 획득합니다
4. 60초 내에 최대한 많은 점수를 모으세요
5. 게임 종료 후 점수가 개인 최고 기록보다 높으면 저장됩니다

멀티플레이 모드

1. 로비에서 다른 플레이어와 매칭됩니다
2. 카운트다운 후 동시에 게임이 시작됩니다
3. 실시간으로 다른 플레이어와 점수를 경쟁합니다
4. 게임 종료 후 최종 순위를 확인합니다

📊 주요 게임 메커니즘

점수 계산

• 선택한 영역의 합계가 정확히 목표값(100)을 만족하면 점수 획득
• 연속된 성공(콤보)은 더 많은 파티클 효과와 함께 보상

파티클 시스템

• Normal: 일반 선택 (3개 미만)
• Combo: 4개 이상의 셀 선택
• Big: 특별한 성과에 대한 특수 이펙트

🤖 AI 솔버

강화학습(MaskablePPO) 기반 AI 에이전트가 게임을 자동으로 플레이합니다.

AI 데모 서버 실행

# 프로젝트 루트에서 실행

# 환경변수로 모델 지정
AI_MODEL_PATH=ai_solver/models/<run>/best/best_model.zip \
  .venv/bin/uvicorn ai_solver.server:app --reload --port 8000

# Swagger API 문서: http://localhost:8000/docs

학습

# 정식 훈련 (5M steps)
.venv/bin/python -m ai_solver.train --tag reward_v2

# TensorBoard 모니터링 (별도 터미널)
.venv/bin/tensorboard --logdir ai_solver/runs --port 6006
# → http://localhost:6006

자세한 내용은 ai_solver/README.md 참고

🔧 설정 파일

• vite.config.ts: Vite 빌드 설정
• tailwind.config.js: Tailwind CSS 설정
• tsconfig.json: TypeScript 설정
• postcss.config.js: PostCSS 설정

📝 라이선스

[라이선스 정보 추가]

👨‍💻 개발자

[개발자 정보 추가]

---

주의: 이 프로젝트는 개발 중입니다. 기능과 사용법이 변경될 수 있습니다.