年会抽奖被迫营业,写了个转盘轮子,最后失控了

查看 2|回复 0
作者:Fechin   
人事小姐姐是我的饭搭子,跟我说年会要搞抽奖,问我有没有好用的在线转盘。
我随手发了几个链接给她,结果她一个个试完来吐槽:
  • Wheel of Names:不能同时转多个轮子,她想一边抽人一边抽奖品
  • 某国产转盘:广告太多,界面丑,领导看了要皱眉
  • 随机数生成器:太干了,没有仪式感

    总之就是不体面,我说行吧,周末我给你写一个。
    结果这一写,失控了。
    刚开始想的很简单,就一个 Canvas 画个轮子,Math.random 选个结果。但写着写着开始较真:
    [ol]
  • Math.random 不够随机。查了下发现如果要"公平抽奖",应该用
    crypto.getRandomValues(),这是密码学安全的随机数生成器。既然都做了,那就做对。
  • 她要同时抽人+抽奖品。那就支持多轮盘吧,最多 6 个同时转。转完自动记录中奖历史。
  • 中奖了的不能重复中。加了淘汰模式,中一个自动移除。
  • 另外还加了绿幕模式,一键全屏纯绿底。
  • 做了短链,方便分享或者保存自己定制好的转盘,用 Cloudflare Worker 写了个
    API ,转盘配置存起来生成短链,发个链接别人就能用。
    [/ol]
    做完发现功能有点多了:
  • 多转盘同时旋转
  • 权重设置(买 5 张票的人权重设 5 )
  • 淘汰模式
  • 倒计时模式( 3 、2 、1 开始!)
  • OBS 绿幕
  • 导入导出 JSON
  • 8 种语言
  • 本地自动保存

    UI 也花了点心思,年会现场投屏效果挺好。暗色模式是青绿色系,亮色是橙粉系,看着挺舒
    服的。
    技术栈是 Next.js + React + TailwindCSS ,整了个 monorepo 用 Turborepo 管理,状态用 Nuqs 存 URL
    参数方便分享。分享功能单独拆了个 Cloudflare Worker ,响应挺快的。
    地址:gospinwheel.com
    对了,快过年了,除了年会抽奖,其实过年聚会也能用:
  • 真心话大冒险:一个轮子选人,一个轮子选"真心话/大冒险",再来一个轮子选具体问题或任务
  • 谁洗碗:吃完年夜饭,全家人名字往里一扔,转
  • 今晚吃啥:火锅/烧烤/日料/随便,选择困难症救星
  • 该谁发红包了:下一个谁发?转盘决定,公平公正
  • 喝酒游戏:转到谁谁喝,配合淘汰模式,喝过的自动移除,雨露均沾

    反正我过年准备拿这个整活了,投屏到电视上效果应该不错。
    有什么建议欢迎提,毕竟本来只是帮人事做个小工具...
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部