A browser-based lucky draw system for live prize events. It supports animated card reveals, reusable prize CSV lists, round-by-round winner tracking, history storage, keyboard shortcuts, and an optional remote controller.
https://splex7.github.io/lucky-number-draw/
- Modern event screen: Neon stage-style start screen and animated card draw experience.
- Prize setup panel:
- Simple mode for custom event title, draw range, and current prize CSV editor
- Draw ranges such as
1-500or1-442, 501-872 - Up to 2000 total numbers
- Prize CSV editor using
Prize Name, Draw CountorPrize Name, Draw Count, Image URL - Automatic
localStoragesaving for simple prize setup changes - Advanced CSV sets using
localStorage - Load, save, update, and delete up to 5 CSV presets
- Design & sound settings:
- Flip sound options using MP3 and generated HTML/Web Audio effects
- Optional remote controller entry point
- Round management:
- First-prize confirmation before starting, without revealing the first draw count
- Prize confirmation modal with optional prize image preview
- Dramatic draw count reveal that counts up from 0 after a short pause
- Edit count by clicking the draw count section only when needed
- Balanced card grid with up to 8 cards per row
- Extra card spacing so reveal shadows are not clipped
- Automatic duplicate prevention across rounds
- Results and history:
- Round-by-round results
- Number-sorted delivery list
- Copy results
- Local draw history with app-styled dialogs
- Controls:
- Enter: start flips or confirm modal/lightbox
- Up/Down: adjust flip speed
- Right Arrow: move to next round when available
- Clone the repository.
- Open
index.htmlin a modern browser. - No build step is required.
Optional remote control requires a firebaseConfig.js file based on firebaseConfig.sample.js.
- Click Prize to configure the title, draw range, and prize CSV.
- Keep the Prize panel in simple mode for one active CSV, or enable Advanced CSV sets for reusable lists.
- Click Settings to choose flip sounds or open the remote controller.
- Click Start Draw.
- Confirm the first prize in the app dialog.
- Review the round modal, optionally click the count to adjust it, then click Continue.
- Start card flips by pressing Enter or clicking an unrevealed card.
- Continue rounds with Next Round.
- End the game to view and copy results.
Each line must include a prize name and draw count. A third image URL column is optional:
Amazon Kindle Paperwhite,6
Apple iPad Pro 12.9-inch,1,https://example.com/ipad.jpgWhen an image URL is present, the round confirmation modal displays the image cropped to fit the prize photo area. When it is omitted, the image area is hidden.
라이브 경품 추첨 행사를 위한 브라우저 기반 추첨 시스템입니다. 카드 플립 애니메이션, 경품 CSV 저장/불러오기, 라운드별 결과 관리, 히스토리 저장, 키보드 단축키, 선택형 원격 컨트롤러를 제공합니다.
- Prize 설정 분리: 심플 모드는 이벤트 제목, 추첨 번호 범위, 현재 경품 CSV만 표시
- Advanced CSV sets: 토글을 켜면 최대 5개 CSV 세트를 생성, 수정, 삭제 가능
- Settings 분리: 디자인 상태, 플립 사운드, 원격 컨트롤러
- 로컬 저장: 심플 Prize 설정, CSV 세트, 추첨 히스토리를
localStorage에 저장 - 앱 내부 모달: 브라우저 기본
alert/confirm대신 일관된 확인/알림 UI 사용 - 라운드 시작 확인: 첫 경품명을 확인한 뒤 추첨 시작, 첫 수량은 시작 확인 모달에서 공개하지 않음
- 경품 이미지: CSV 3번째 컬럼에 이미지 URL을 넣으면 경품 모달에 이미지 표시
- 수량 연출: 경품 모달의 수량이 0에서 목표 개수까지 증가
- 수량 수정 모드: 수량 영역을 클릭할 때만 수정 입력 표시
- 균형 카드 배치: 한 줄 최대 8개, 10개면 5개/5개처럼 행별 카드 수를 최대한 균등하게 배치
- 카드 그림자 여백: 카드 공개 효과의 shadow가 잘리지 않도록 카드 영역 여백 확보
- Prize에서 제목, 번호 범위, 현재 CSV를 설정합니다. 변경 내용은 자동 저장됩니다.
- 여러 CSV를 재사용해야 할 때만 Advanced CSV sets를 켜고 최대 5개까지 저장합니다.
- Settings에서 사운드와 원격 컨트롤러를 설정합니다.
- Start Draw를 눌러 첫 경품 확인 후 추첨을 시작합니다.
- 경품 모달에서 수량을 확인하고 필요하면 수량 영역을 클릭해 수정한 뒤 Continue를 누릅니다.
- 카드를 클릭하거나 Enter를 눌러 번호를 공개합니다.
- 라운드가 끝나면 Next Round로 다음 경품을 진행합니다.
- 종료 후 결과를 확인하고 복사합니다.
- Vanilla JavaScript, HTML, and CSS
- Anime.js for card animation
- Canvas Confetti for celebration effects
- Firebase Realtime Database support for optional remote commands
- No bundler or build process required
This project is licensed under the MIT License. See LICENSE for details.