@lucky-boy/lottery-grid

EN: High-density grid lottery presentation with animated cards and shared UI overlays.
CN: 支持高密度卡片展示的网格抽奖场景，并复用通用 UI 覆盖层。

Features · 特性

• EN: Configurable column count, spacing, and card layout for LED wall scenarios. / CN: 可配置列数、间距与卡片布局，适配大屏墙展示。
• EN: Built-in audio hooks (BGM & atmosphere) alongside remote user loading. / CN: 内置背景音乐与氛围音效，同时支持远程用户数据。
• EN: Shares control shortcuts and result modals with lottery-ui for consistency. / CN: 与 lottery-ui 共享快捷键和结果弹窗，保证体验一致。

Installation · 安装

pnpm add @lucky-boy/lottery-grid
# peer deps
pnpm add three react react-dom

Usage · 使用示例

import { LotteryGrid } from "@lucky-boy/lottery-grid";
import type { LotteryGridConfig, User } from "@lucky-boy/lottery-grid";

const users: User[] = Array.from({ length: 60 }, (_, index) => ({
  id: index + 1,
  name: `嘉宾 ${index + 1}`
}));

const overrides: Partial<LotteryGridConfig> = {
  gridColumns: 12,
  gridGapX: 24,
  backgroundImageUrl: "/assets/grid-bg.png"
};

export function GridDemo() {
  return <LotteryGrid users={users} {...overrides} />;
}

Configuration Highlights · 关键配置

| Field | Description | | ----- | ----------- | | gridColumns | EN: Number of columns to render. / CN: 网格列数。 | | gridGapX / gridGapY | EN: Horizontal & vertical spacing between cards. / CN: 卡片的水平与垂直间距。 | | bgmUrl / atmosphereUrl | EN: Optional audio tracks for background ambiance. / CN: 可选背景音乐与氛围音效。 | | autoStartNextRound | EN: Automatically trigger next round after showing results. / CN: 展示结果后自动开始下一轮。 |

Development · 本地开发

pnpm install
pnpm run build

License · 许可

MIT