🎡 Challenge Wheel

A Twitch channel points-powered spin wheel for your stream. When a viewer redeems a configured reward, the wheel spins live in OBS and lands on a random challenge for you to complete.

Live: dexteritycs.github.io/Challenge-Wheel/

---

Features

• Connects to Twitch via EventSub WebSocket — no polling, instant redemption triggers
• Configurable wheel segments — add, remove, and weight challenges however you like
• Reward name filter — only a specific channel points reward triggers the spin
• Config panel accessible via ?config=1 URL param or pressing C
• All credentials and settings stored in URL hash for SLOBS browser source compatibility
• Visual spin animation with landing indicator and challenge card reveal
• Manual spin shortcut (S) for testing without a redeem

---

Setup

1. Create a Twitch App

1. Go to dev.twitch.tv/console
2. Click Register Your Application
3. Set OAuth Redirect URL to: https://dexteritycs.github.io/Challenge-Wheel/
4. Copy your Client ID

2. Configure the Widget

1. Open https://dexteritycs.github.io/Challenge-Wheel/?config=1 in Chrome
2. Enter your Client ID and Twitch channel name
3. Click Connect with Twitch and authorize
4. In Reward name filter, type the exact name of your channel points reward (e.g. Spin the Wheel)
5. Add your wheel segments in the challenges list
6. Click Save & Apply — the status bar should show Connected · #yourchannel

3. Add to OBS / Streamlabs

1. Add a Browser Source
2. URL: https://dexteritycs.github.io/Challenge-Wheel/ (with the hash token appended after saving config)
3. Width: 800 | Height: 800
4. Check Refresh browser when scene becomes active

4. Create the Channel Points Reward

1. Twitch Dashboard → Viewer Rewards → Channel Points → Manage Rewards
2. Create a new reward with the same name you put in the Reward name filter field
3. Set your desired point cost and save

---

Keyboard Shortcuts

Key	Action
S	Manual spin (for testing)
C	Open config panel
Esc	Dismiss challenge card

---

Tech

• Vanilla HTML/CSS/JS — no dependencies
• Twitch EventSub WebSocket API for real-time redemption events
• Twitch OAuth Implicit Grant flow (token in URL hash for SLOBS)