Dev.to · 3 min read

How I keep a browser spin wheel fair (and drop it into a stream overlay)

How I keep a browser spin wheel fair (and drop it into a stream overlay)

People use spin wheels to pick a student, a raffle winner, or a giveaway name, and they can usually tell when the result doesn’t feel fair. I built SpinWheelNames as a free browser wheel for that, with no sign-up, after getting tired of tools that hide how the winner is chosen. The important part happens before the animation looks pretty. When you hit Spin, the wheel turns a random number of extra turns: between 5 and 10 on a computer, and fewer on phones so the animation stays smooth. That number comes from the browser’s crypto.getRandomValues, the same Web Crypto API browsers use for encryption keys, not Math.random. Wherever the wheel stops, the entry under the pointer wins. Because the random extra movement always spans a whole number of turns, every stopping angle is equally likely, so each slice gets a chance equal to its size. With no weights set, every slice is the same size. If you add weights, the slice grows with the weight, and the chance of winning matches the share of the wheel it covers. I didn’t want that to be a claim you have to take on trust. The fairness test runs the same winner-picking code 100,000 times in your browser, counts how often each of 10 entries wins, and checks those counts with a chi-squared test. Nothing is precomputed: every visit runs a fresh test. On a fair wheel each name should win about 10,000 times. A few hundred either way is normal. A p-value above 0.05 means there’s no evidence of bias; below 0.05 can happen about 1 time in 20 even on a fair wheel, so the honest check is to run it again. A biased wheel fails every time. The site is SvelteKit with the wheel drawn on an HTML5 canvas. Names you type stay in the browser unless you choose to save or share a wheel. For streamers, screen-sharing a browser tab also shares the address bar, menus, and page chrome. The stream overlay is a separate URL that draws only the wheel on a transparent 1920×1080 canvas. You paste it into a Browser source, set the size to 1920×1080, and spin from Interact (or press Space). The overlay itself doesn’t add branding on stream. To keep the draw in the streamer’s hands, viewers can’t trigger a spin from chat; you collect names with your usual bot, paste them in, then spin live. If you want to try it, the homepage is the fastest start, and there’s a classroom-focused page too. I’d love feedback on the fairness write-up especially. I’m Luke, and I built this. An assistant helped me draft this post.

This is a summary aggregated from Dev.to. Read the complete article on the original site:

Read full article at Dev.to

More Cybersecurity News