This is an interactive web application that enables real-time recording of roller derby strategies through your browser. Create dynamic track visualizations with player movements, pack formations while capturing video with optional audio commentary.
The main goal is to make it as easy as possible sharing roller derby plays, making it an effective tool for coaches, players, and teams to communicate tactics.
✨ Track Visualization
- Regulation-size roller derby track
- Dynamic pack and engagement zone indicators
- Status-based player coloring system
- Smooth player animations
🎥 Recording Capabilities
- High-quality video capture
- Optional audio commentary
- Direct browser recording
- Downloadable webm format
🚀 Strategic features
- Pre-configured set plays (starts, power jams, etc.)
- Keyboard shortcuts for player control
- Save & reload animation sequences
🎮 Interactive Elements
- Touch device support
- Custom shape drawing tools (arrows, circles)
- Embedded video titles
- Preview before download
- Webcam overlay integration
🎨 Branding
- Custom logo customization
- Custom video title
I will implement new features based on your feedback and usecases, please open an issue (or send an email to ruihildt@protonmail.com ) if you have any.
NURDS is great and I initially tried to record the track with it, but it turns out SVG animation doesn't work well for that usecase.
I have been tempted to call this project YARDS (Yet Another Roller Derby Simulator) in homage to NURDS.
Innovative 3D approach to track visualization.
- HTML Canvas
- MediaRecorder API for audio capture
I have written very few lines of code in this project, on purpose. It was a trial to see how far I could come by prompt engineering with LLMs.
While I'm an ok frontend developer, without LLM help, I would have probably never been able to get this far. I suck at geometry and had no previous experience in HTML canvas, animating game state or browser recording. I can't evern double check if everything is correct ¯\_(ツ)\_/¯.
If you have any suggestions on how to improve the code, I would love to hear them.
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
The license of this project is debatable, since what the license of content produced by LLM is still unclear, as there are multiple ongoing lawsuits.
Assuming that the code here is mine, I hereby license it under the AGPL license.