Inspiration
Coaches drill attacking patterns constantly — but the moment-to-moment decision that actually concedes a goal (where do I put my back line, right now, as this move develops) is almost never trained directly. It's usually only reviewed after the fact, on video, once the goal's already in. We wanted something that puts a coach in that decision seat before they know how the play ends.
What it does
LineBreak is a defensive-shape trainer for soccer coaches. It presents a hand-built attacking sequence, freezes play at key decision points, and asks the coach to position (and reposition) the back four before the move continues. When the play finishes, a rules-based engine checks whether any attacker or the ball ever got goal-side of the last two defenders — and explains exactly where and why the line broke, if it did. While positioning, live overlays show the current defensive-line height and the widest gap in the back four, so the tactical concept is visible in real time, not just explained after the fact. A running Coach Rating tracks pass/fail across all five scenarios.
How we built it
Vanilla HTML/CSS/JS with SVG for the pitch — no frameworks, no build step. It's a static site deployed straight to GitHub Pages via a GitHub Actions workflow. Three pieces: analyze.js is the geometry engine (defensive line = average depth of the two deepest defenders; gap detection between adjacent defenders; a frame-by-frame check for anyone stepping from onside to behind the line); scenarios.js holds five hand-authored attacking sequences of increasing difficulty; app.js handles SVG pointer-drag interactions, requestAnimationFrame-based animation between decision points, and the select → play → result game loop.
Challenges we ran into
- A nasty drag-and-drop bug: our first version re-rendered the entire SVG on every pointer move, which destroyed the element mid-drag and silently killed the browser's pointer capture — dragging died after one pixel. Fixed by mutating element attributes in place instead of tearing down the DOM.
- Hand-tuning scenario coordinates so both outcomes are genuinely reachable — a scenario has to be a real puzzle, not a foregone conclusion, without any physics or AI behind the attackers.
- Making the pass/fail explanation useful in both directions: not just "here's why it broke," but "here's how close it was" on a clean sheet.
Accomplishments that we're proud of
- The pivot: what started as a tool for reconstructing a conceded goal after the fact became a full game where the coach prevents it — and the exact same analysis engine powers both, unchanged.
- A teaching mechanic that shows the concept live: the defensive-line and gap overlays update as you drag, so "why did that break" is something you watch happen, not just read.
- Zero dependencies, deployed in minutes, free to host and run.
What we learned
- A subtle DOM lifecycle detail — rebuilding the DOM node you're actively dragging — can silently break a core interaction in a way that's easy to miss until you actually test the drag gesture end-to-end.
- Turning a passive "here's what went wrong" analysis tool into an active decision the user has to make, before seeing the outcome, made the same underlying logic far more compelling and useful to actually train with.
What's next for LineBreak
- A scenario editor so coaches can build and share their own plays — recreating the specific pattern their own team keeps conceding from, not just the five built-in ones.
- Graded scoring instead of pure pass/fail (how far behind the line, how big the gap).
- Deeper tactical modeling: offside timing, goalkeeper positioning, pressing triggers.
- Shareable results and touch polish for coaches using it pitchside on a tablet.
Log in or sign up for Devpost to join the conversation.