人事小姐姐是我的饭搭子，跟我说年会要搞抽奖，问我有没有好用的在线转盘。
我随手发了几个链接给她，结果她一个个试完来吐槽：
- Wheel of Names：不能同时转多个轮子，她想一边抽人一边抽奖品
- 某国产转盘：广告太多，界面丑，领导看了要皱眉
- 随机数生成器：太干了，没有仪式感
总之就是不体面，我说行吧，周末我给你写一个。
结果这一写，失控了。
刚开始想的很简单，就一个 Canvas 画个轮子，Math.random 选个结果。但写着写着开始较真：
- Math.random 不够随机。查了下发现如果要"公平抽奖"，应该用 crypto.getRandomValues()，这是密码学安全的随机数生成器。既然都做了，那就做对。
- 她要同时抽人+抽奖品。那就支持多轮盘吧，最多 6 个同时转。转完自动记录中奖历史。
- 中奖了的不能重复中。加了淘汰模式，中一个自动移除。
- 另外还加了绿幕模式，一键全屏纯绿底。
- 做了短链，方便分享或者保存自己定制好的转盘，用 Cloudflare Worker 写了个 API ，转盘配置存起来生成短链，发个链接别人就能用。
做完发现功能有点多了：
- 多转盘同时旋转
- 权重设置（买 5 张票的人权重设 5 ）
- 淘汰模式
- 倒计时模式（ 3 、2 、1 开始！）
- OBS 绿幕
- 导入导出 JSON
- 8 种语言
- 本地自动保存
UI 也花了点心思，年会现场投屏效果挺好。暗色模式是青绿色系，亮色是橙粉系，看着挺舒 服的。
技术栈是 Next.js + React + TailwindCSS ，整了个 monorepo 用 Turborepo 管理，状态用 Nuqs 存 URL 参数方便分享。分享功能单独拆了个 Cloudflare Worker ，响应挺快的。
对了，快过年了，除了年会抽奖，其实过年聚会也能用：
- 真心话大冒险：一个轮子选人，一个轮子选"真心话/大冒险"，再来一个轮子选具体问题或任务
- 谁洗碗：吃完年夜饭，全家人名字往里一扔，转
- 今晚吃啥：火锅/烧烤/日料/随便，选择困难症救星
- 该谁发红包了：下一个谁发？转盘决定，公平公正
- 喝酒游戏：转到谁谁喝，配合淘汰模式，喝过的自动移除，雨露均沾
反正我过年准备拿这个整活了，投屏到电视上效果应该不错。
有什么建议欢迎提，毕竟本来只是帮人事做个小工具...
 |
101
lekai63 13 小时 36 分钟前 via iPhone
怎么失控了代码
让小姐姐来你这，手摸手教她怎么用 |
 |
102
since2021 12 小时 58 分钟前
很好奇，我啥也没输入点了下居然抽到我名字了
|
 |
103
duck2 12 小时 25 分钟前
巧了，这还真是个热门领域，目前驻场运维，甲方每月要开月例会，抽三个部门来汇报工作，我用 AI 写了一个，领导评价还行。PS：怎么贴图片回复啊
|
Select Language