learning-archive

경마게임

step1

웹 브라우저에서 실행되는 경마 게임을 만들기 위한 코드 작성계획을 세우세요.

요구사항:

• HTML, CSS, JavaScript 단일 파일 (index.html)
• 5마리의 말이 왼쪽에서 오른쪽으로 달림
• "경기 시작" 버튼 클릭 시 레이스 시작
• 각 말은 랜덤한 속도로 이동
• 결승선에 먼저 도착한 말이 우승
• 우승 시 alert로 결과 표시
• 말들의 이름을 각각 다르게 표시해주세요.

디자인:

• 트랙은 가로로 길게
• 각각의 말이 구별되도록 표시
• 심플하고 깔끔한 UI

step2

기존 경마 게임에 각 말의 스탯 시스템을 추가해주세요.

스탯 시스템:

• 각 말에 이름 부여 (예: Thunder, Lightning, Storm, Flash, Bolt)
• 3가지 스탯: 속도(Speed), 체력(Stamina), 운(Luck)
• 스탯은 1-10 범위, 말마다 다르게 설정
• 속도: 기본 이동 속도에 영향
• 체력: 후반부에도 속도 유지 능력
• 운: 랜덤 부스트 발생 확률
• 페이지를 리프레시 할 때마다 랜덤하게 스탯이 변경되게 해주세요.

UI 추가:

• UI를 더 예쁘게 만들어주세요
• 경기 시작 전 각 말의 이름과 스탯을 카드 형태로 표시
• 스탯은 막대그래프나 숫자로 시각화
• 경기 중에도 어떤 말인지 구분 가능하도록 이름 표시

어떻게 코드를 수정할지 코드 작성계획을 먼저 작성해주세요.

step3

실시간으로 순위가 변경되는 리더보드를 추가해주세요.

리더보드 기능:

• 화면 우측에 실시간 순위표 배치
• 현재 1위부터 5위까지 순위 표시
• 순위 변동 시 애니메이션으로 위치 전환 (부드럽게)
• 각 말의 현재 진행률(%) 표시
• 1위 말은 하이라이트 표시 (금색 배경 또는 왕관 아이콘)

추가 정보 표시:

• 선두와의 거리 차이
• 남은 거리(%)

위 태스크에 대한 코드 작성 계획을 만들어주세요.

step4

경기를 더 박력있고 역동적으로 만들어줘.

경기 중 이펙트:

• 말이 달릴 때 먼지 파티클 효과 (뒤에 작은 점들이 흩날림)
• 부스트 발동 시 불꽃/번개 이펙트 ⚡
• 추월 시 "Overtake!" 텍스트 팝업
• 결승선 근처에서 화면 살짝 흔들림 효과
• 배경음악 또는 효과음 추가 (선택적)

우승 이펙트:

• 화려한 confetti(색종이) 폭발 애니메이션
• 우승마 주변 반짝이는 별 이펙트 ✨
• "WINNER!" 텍스트가 크게 애니메이션되며 등장
• 우승마 정보(이름, 스탯)를 모달로 표시
• 승리 팡파레 효과음

카메라 효과:

• 선두 말에 약간 줌인되는 느낌
• 결승 직전 슬로우 모션 효과 (선택적)

위 내용에 대한 코드 작성 계획을 알려주세요.

step5

닉네임을 입력하고 말에 베팅할 수 있는 시스템을 추가해주세요.

베팅 시스템:

• 경기 시작 전 베팅 화면 표시
• 닉네임 입력 필드 (필수)
• 5마리 말 중 하나를 선택하여 베팅
• 여러 명이 베팅할 수 있도록 "베팅 추가" 버튼
• 베팅시에는 100포인트를 기본값으로 베팅하도록 설정
• 베팅 목록 표시: [닉네임] → [선택한 말 이름]

경기 후 결과:

• 베팅 결과 표시 화면
• 맞춘 사람: 🎉 "축하합니다!" + 초록색 하이라이트
• 틀린 사람: "아쉽네요" + 빨간색 표시
• 전체 베팅 현황과 결과를 테이블로 정리
• 5초 후 모든 이펙트 초기화

추가 기능:

• 가상 포인트 시스템 (각자 1000P 시작)
• 스탯 밸런스 시스템 : 말들의 스탯이 너무 치중되지 않도록 총 스탯 수가 20~27 사이가 되도록 하기
• 배당률 표시 (스탯이 낮은 말일수록 높은 배당)
• 연속 경기 가능 (포인트 누적)
• localStorage로 포인트 저장 (새로고침해도 유지)

위 내용에 대한 코드 작성 계획을 세워주세요.

cline rules

# Helix Agents 코드 스타일 가이드

## 1. 코드 작성 원칙

### 1.1 일반 원칙

- 가독성을 최우선으로 고려 (인간이 읽기 쉬운 코드)
- 함수/메서드는 최대 80라인 이내로 제한 (초과 시 리팩토링)
- Early return을 활용하여 중첩 depth 최소화

### 1.2 함수 설계

- Inner 함수는 필수적인 경우에만 사용
- Inner 함수 사용 시 반드시 이유를 문서화

### 1.3 타입 힌트

- Python 3.9+ 내장 타입 사용
- 타입 힌트는 명시적으로 작성 (Any 사용 지양)

## 2. 코드 수정 지침

### 2.1 수정 금지 사항

- **[!중요!]** .venv 내 라이브러리 코드 수정 절대 금지

### 2.2 테스트 코드 수정

- 테스트 파일 수정 시 기존 소스코드 수정 금지
- 소스코드 수정이 필요한 경우 **반드시** 사용자에게 허가 요청

## 3. 프로젝트 구조

### 3.1 파일 구조

- `__init__.py` 파일 생성 금지

워크플로우

# git 커밋 메시지 작성

현재 스테이지 영역에 올라가 있는 파일들에 대한 git 커밋메시지를 한국어로 작성해주세요.
헤더와 바디가 분리되어야 하며, What과 Why에 대한 내용이 필수적으로 있어야합니다.

다음의 포맷을 사용하여 PR 메시지를 작성해주세요.

### Issue No
- # <여기는 비워두세요>

---
### Description
<!-- 변경 사항에 대한 설명을 작성해주세요. -->

---
### Test Plan
<!-- 변경된 코드가 어떻게 검증되었는지 작성해주세요. -->
- [ ] 테스트 코드 포함 (예: 서비스 로직, 유틸 함수)
- [ ] 수동 테스트 / QA 검증

**테스트 방식:**
<!-- 단위 테스트 / 수동 검증 등 구체적으로 작성
예:
- 회원가입 성공/실패 케이스에 대한 단위 테스트 작성
- 인증 만료 토큰 처리 검증 포함
- 잘못된 요청 파라미터 시 400 응답 반환 확인 -->

---
### AI-Assisted Development
<!-- AI 활용 여부를 작성해세요. -->
*AI-Usage: yes*
*AI-Tool: Gemini, Cline*
*AI-Contribution:  %*