Controls

Mouse

  • Left click to place attackers
  • Right click to place defenders

Keyboard

  • G: next click places the goalkeeper
  • S: select shooter (nearest attacker to cursor)
  • A: toggle shot angle visualization
  • R: reset the pitch

Touch Devices

A toolbar appears at the bottom of the screen:

  • ATK (red): tap the field to place attackers
  • DEF (blue): tap the field to place defenders
  • GK (gray): tap the field to place the goalkeeper
  • SEL (yellow): tap near an attacker to select as shooter
  • ANG: toggle shot angle visualization
  • UNDO: undo the last placement
  • RST: reset the pitch

Step-by-Step Workflow

  1. Place attackers on the pitch by clicking or tapping in attacker mode.
  2. Place defenders using right-click (desktop) or by switching to DEF mode (mobile).
  3. Place the goalkeeper by pressing G (desktop) or switching to GK mode (mobile).
  4. Select the shooter by pressing S near an attacker (desktop) or switching to SEL mode and tapping near an attacker (mobile).
  5. Choose shot details such as technique (Normal, Volley, etc.) and body part (Left Foot, Right Foot, Head, Other).
  6. Click "Calculate xG" to see results from multiple models.

Import Real Shots

Use the import panel to paste a JSON shot definition or fetch real shots from the database. After importing, you can edit the player positions on the pitch.