I Put a Magnetic Tactics Board on a Screen

Amazon sells magnetic tactics boards and the little player pieces that go with them. I wanted that same setup on a screen. Move the players. Move the ball. Talk through the position.

Board mode is manual. Move the players and ball where you want them; moving the ball by itself doesn’t pull the others around. If you want to show the team reacting, Flow steps through a passing sequence and adjusts the team’s shape with the ball.

Scenarios start with a situation: build from the goalkeeper, press, keep the ball, defend a wide attack. A Formation is the starting arrangement; team shape changes as the ball moves. A role card explains what a selected player should do and why. Pin the role and it stays highlighted as you move through the scenario.

I started by framing it as a kid-friendly learning app. Then I looked at the search results: the other tactics boards were speaking to coaches. That was the person I needed to build for. The coach places the pieces and talks through what a player should do; the team is who the coach is thinking about. I changed the product language to match.

I split the soccer rules from the board drawing. The TypeScript engine is shared by the web app and Expo app; each renders its own board. The web board was already working, and I didn’t want to rewrite it just to share UI. The iOS app uses SwiftUI and has a Swift implementation of the same rules. That’s extra work to keep the two engines in sync.

The web board is live at Soccer Board. I’m working on bringing the native iOS app up to feature parity.