Derbyboard is an interactive web application that enables recording of roller derby strategies through your browser, with optional audio capture.
The main goal is to make it as easy as possible sharing roller derby tactics and game situations, making it an effective tool for coaches, players, officials and teams to talk about the game.
✨ Track Visualization & interractions
- Regulation-size roller derby track
- Dynamic pack and engagement zone indicators
- Status-based player coloring system
- Multitouch support (select multiple players)
🎮 Board state
- Save and load board state
- Reset board state
🎥 Recording Capabilities
- High-quality video capture
- Optional audio commentary
- Direct browser recording
- Download in .webm format
- Capture the board as an image
🚀 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 [email protected] ) 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
- Svelte + Flowbite for the UI
I have written very few lines of code in this project, on purpose. It is a trial to see how far I can 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 even 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.