Fantasy Draft Dash

Turn fantasy draft order into a live, verified football spectacle! Complete with chaotic runners, instant replays, announcer moments, a dramatic Toilet Bowl, and a provably random finish.

Comment

Inspiration

Every fantasy football league needs a draft order, but most leagues handle it by clicking a randomizer and reading a list, names in a hat, traditions that start the first argument of the season, etc.

I wanted to turn that first moment into something people would actually gather around to watch and have fun with.

Fantasy Draft Dash turns draft-order selection into a fake live football broadcast. League members become runners in a stadium race filled with penalties, bad decisions, phone distractions, questionable officiating, mascots, instant replays, and general fantasy-football nonsense.

The goal was simple:

Make a room full of adults scream at a television over a completely random draft order and solve the first major problem every draft day faces, free and easily. When someone complains you have a way to verify it was random.

How it works

The commissioner adds 4 to 16 players, picks a league name, chooses a fictional broadcast network, sets the race length, and decides how much chaos to unleash.

Then you hit GO LIVE.

The race plays out like a televised football event, complete with live standings, announcer updates, action replays, crowd energy, changing momentum, and a late-game Toilet Bowl for the final two runners.

The important part is that the animation does not decide the draft order.

Before the race starts, the app creates a cryptographically strong random seed and uses a deterministic Fisher-Yates shuffle to lock the official order. The race animation is generated separately from that locked result. It creates suspense, but it cannot secretly change who picks first.

At the end, the app reveals the official draft board along with a verification seed so everyone can confirm the result.

Fair randomness first. Completely unnecessary football drama second.

How I built it

I built Fantasy Draft Dash as a browser-based app using React, TypeScript, Vinext, Vite, Tailwind CSS, Phaser 4, and OpenAI Sites.

The app has one shared game controller that handles the league setup, roster, branding, race configuration, locked state, persistence, standings, results, audio, fullscreen mode, and reset flow.

Phaser powers the animated race scene with runners, lanes, stadium visuals, weather effects, jumbotron moments, finish-line action, and the Toilet Bowl sequence. The rest of the interface handles setup, live standings, broadcast graphics, announcements, results, and verification.

As part of this project I added WebMCP tools so an agent can safely configure the league, manage the roster, read the visible race state, validate the setup, and retrieve official results after the race is complete. The agent controls use the same guarded controller as the visible app, so tool access cannot bypass the locked-race rules.

Challenges

The biggest challenge was balancing fairness and drama.

If the animation decided the winner, a visual bug could turn into a very real argument in the group chat. If the final order appeared immediately, the whole race would be pointless. Locking the result before kickoff solved both problems.

The next challenge was designing for a television instead of a laptop. The app needs to work with anywhere from 4 to 16 players while keeping the field, names, standings, broadcast graphics, replay window, and controls readable from across a room.

Timing was another big one. Early replay moments moved too quickly, so there was no time to react before the next thing happened. I slowed down the key action beats and gave tackles, phone distractions, sideline chaos, and other disasters more room to land.

Audio also took some tuning. Music, crowd noise, whistles, impacts, cheers, and event sounds all sound great individually. Played at once, they sound like a soundboard falling down the stairs. Separating the layers and adding volume controls made the whole broadcast feel much more intentional.

What I learned

I learned that random results feel more trustworthy when people can understand how they were created. Showing the seed and explaining the locked shuffle makes the result easier to trust than simply saying, “Don’t worry, it was random.”

I also learned that comedy is a systems problem. A funny event needs the right animation, camera framing, sound effect, announcement, text timing, and player name to arrive together. Treating race events as data-driven sequences made that much easier to tune.

Most importantly, designing for a group changed the product. Bigger type, stronger contrast, persistent standings, longer replays, fullscreen support, and fewer competing messages mattered more than adding another setting.

Put your league on the biggest screen you have, add everyone’s names, crank up the chaos, and let the draft order ruin somebody’s night.

Built With

  • browser-crypto-api
  • fisher-yates-shuffle
  • fullscreen-api
  • html5
  • localstorage
  • openai-sites
  • phaser-4
  • react
  • responsive-web-design
  • seeded-prng
  • tailwind-css
  • typescript
  • vinext
  • vite
  • web
  • webmcp
Share this project:

Updates

Submission history