Rotations

I’d picked my daughter up from volleyball training and, as we sat having lunch together, she was trying to explain the 4-2 rotation system to me over. I was lost! And, to be fair, she was still only learning it and wasn’t sure exactly where all the other players moved. But I bet AI knows a lot about volleyball and can put something togther to help us visualise it!

Volleyball has six positions, six rotations: a team rotates one place clockwise when it wins a rally the other side served. Where everyone stands depends on the system the team runs (one setter or two, setting from the front row or the back). Once the serve is played, everyone runs from their assigned position to where they actually play from, which is why the position numbers alone never explain a rotation—and actually make it even more confusing.

This app draws all of that. Each rotation is shown at two moments: at the serve, where the overlap rule constrains the formation, and in play, where the setter goes to the net and the hitters go wide. The 4-2, 5-1 and 6-2 pages lay out all six rotations of a system at once; hover or tap a court to see the players run.

Or start a game. It keeps the score and a rally history, with undo and reset, and every “we won” or “they won” moves the team on to the right rotation. It’s designed to be read on a phone in a bright sports hall, so the buttons are big and the colours are loud.

How it was built

This is the first app deployed on melee, my own hosting platform for small, mostly idle Ruby web apps. The app itself is about 200 lines of Ruby plus views, CSS and a little JavaScript: seven routes, a Game durable object that holds the rallies, and a small library for the geometry of the court. Nothing on the rotation pages is stored; every position is worked out from the rotation number on each request.

It’s written in melee’s Sinatra-shaped Ruby dialect and is compiled to a native binary with Spinel for production.