For fantasy sports leagues, this webapp recreates the excitement of a draft lottery where balls are assigned to teams and spun in a hopper for selection of draft order.
- MVP:
- select number of teams, assign number of lottery balls to each team, jumble as an array of balls.
- pull the "winning" balls in inverse order, from last to first, to raise the anticipation
- some type of "refresh guard" to persist state when a bunch of names are typed and/or revealed and whoops, refresh, lost it all.
- must work via deploy to GitHub Pages (no server-side capabilities)
- stretch goals: "floor" and "ceiling" for teams (this team can pick no worse than 4th, etc.); improved color & font theming; suspense music W/ MUTE DEFAULT of course; improved media breakpoints
- super-stretch goal: 2D or (god-tier) 3D visualization of actual balls in the hopper
Simply open your browser to https://rudil24.github.io/draftballs/. This webapp is 100% client-side Javascript with React components, running in GitHub Pages.
- [ x ] 1. install the React + vite packages to local
- [ x ] 2. commit & push shell/demo then follow PedroTech's youtube instructions to make sure it will run on GitHub Pages
- [ x ] 3. spike/POC to see if I can get a simple form with state memory to not go blank on reload/refresh. https://rudil24.github.io/persistpoc/
- [ x ] 4. build MVP. task breakdown:
- [ x ] ask for settings: numTeams and numBalls per team
- [ x ] render form and get array of teamName[] with submit/clear
- [ x ] on submit, build hopper array & logic so we get "true" elements spawned, jumbled, being picked at random, and then removed from the hopper before the next pull. many of the existing draft tools just do blob percentages (oh you have 10 of the 50 balls? then any Math(random) from 0.0 to 0.2 is yours.) that ain't it.
- [ x ] progressive disclosure of the balls picked, in inverse order (or user choice of order?)
- [ x ] 5. Test local (self), DEPLOY as v0.1 to GH Pages
- [ x ] 6. Improve analytics (as user enters teamBalls, auto-update % of total balls.)
- 7. NOT NOW. Also look at installing probability column(s) on reveal. Probability of being picked when they did, and probability of NOT being picked UNTIL they did (not a statistician will probably need AI here to help). SHELVED FOR NOW, look/feel more important, overall % is good enough from previous step.
- [ x ] 8. Improve UI/UX with color/typography/theming/responsive design improvements
- YES - single sans-serif font (poppins?)
- YES - light mode in pick side too
- NO - glow in dark from https://mui.com/material-ui/getting-started/templates/marketing-page/
- YES - my improved light/dark ball color palette
- YES - no gray balls (we'll use gray when we pull them before reveal)
- [ x ] 9. DEPLOY v0.5, test with actual users
| 24-aug-2025 | SUMMARY: i got in over my head with having Gemini 2.5 apply Material Theme, i didn't know enough to fix stuff in this short of time. I learned a lot about Material though, and will look to use it when it makes sense. It probably didn't for this project, and I threw it in there on a whim thinking the AI would bail me out, in fact, i ended up having to bail it out a bit, with my limited knowledge. But i have a working v0.5 and i'll return to refactor when I'm a little less rusty. For now: THAT'S A WRAP! |
| 22-aug-2025 | Stood up first React version, i really like the quick single page app capabilities with useEffect, will need to tap into even more i can do there |
| 21-aug-2025 | React single page app is much easier to envision now. Needed to ask AI on some of the useState / useEffect |
| 20-aug-2025 | OK got a rudimentary (get it) version going in indexOG.html. i need to make it tighter/compartmentalized with the teams update button (it just appends stuff to the form rn.) but the refresh happy path works. i'll look to compartmentalize as i move it to react, and fix its absolute ugliness in the display. but the MATH and hopper functionality IS THERE! |
| 18-aug-2025 | i blocked myself by probably trying to do too much in React, too soon. i got into vaporlock on hooks and props, which slowed me from getting to the functional blocks of what the code had to do. Tomorrow, i'm going to spin up an oldschool pure javascript/html version (no styling) and see if that can help get me unstuck on parsing out the React components the right way. |
| 17-aug-2025 | enjoying excalidraw.com for simple mockups, love how clean the interface is. (too bad i built such a busy mock in it.) |
| 16-aug-2025 | useState and useEffect coming in clutch for the refresh guard proof of concept. just needed to get confident that GHPages or Vite wouldn't do something weird. glad i did that first. Onward! |
| 15-aug-2025 | just starting, pumped that the Vite+React publish (of just shell project) to GH Pages works so well |
This project built inside the React = Vite template that provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.