Offside Lab

An interactive Elm/SVG board for examining an offside position at the moment a pass is played.

Run it

Install the local Node dependencies, then start the project:

npm install
npm start

Open the local URL shown by the server.

Useful commands:

npm run build  # Produce the deployable app in dist/
npm run dev    # Watch Elm source and refresh the browser
npm run clean  # Remove the generated elm.js

Use it

1. Drag a player marker to position it precisely. You can also select a player, then click a new pitch location.
2. Use the Coral/Blue player controls to add players, and Place ball to set the ball.
3. Choose Mark passer, then click the player playing the ball. Next choose Mark receiver and click the intended recipient. The dashed arrow shows the pass being assessed.
4. Set each goalkeeper if needed. The decision evaluates every non-passing teammate against the ball and second-last opponent.

Choose a ball outcome to model a post/bar rebound, goalkeeper save, referee touch, or a defender's deliberate play. For a non-direct outcome, use Place bounce point to show where the ball changed course.

Coral attacks to the right; Blue attacks to the left. Yellow rings denote an offside position; they only become an offside offence when that player is selected as the receiver (or otherwise interferes with play).