Formation Creator

Simple customizable drag and drop sports formation and tactic creator using svg.

Basic Usage

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
    />
  );
};

This will create a basic field using the existing 7-a-side soccer templates for both fields and players. Players can be dragged and dropped into new spots on the field.

Callbacks

Use the onDrop callback executed when a player has been dropped into a new position to retrieve data on current positions of players. All players are passed back as the only argument.

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
      onDrop={(updatedPlayers) => {
        console.log(updatedPlayers);
      }}
    />
  );
};

Draw Mode

Use draw mode to allow users to dynamically add lines to the field, showing direction of runs to be made, etc.

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );
  const [lines, setLines] = useState([]);

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
      lines={lines}
      setLines={setLines}
      drawMode={{
        lineColor: "red",
        withMarker: true,
        onDrawEnd: (newLines) => {
          console.log(newLines);
        },
      }}
    />
  );
};

Draw Mode Props

| name | type | description | | ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | lineColor | string/hex | The color in which lines will be drawn. | | withMarker | boolean | Will an arrow marker show at the end of the line | | onDrawEnd | function | Callback function executed when the line has been completed (onMouseUp). The array of all user created lines are passed back as the only argument. |

Other Props

| name | type | description | | -------- | ------- | ------------------------------------------------------------------------------------- | | isLocked | boolean | If true all dragging and dropping of players or creation of lines will be disabled. |

Utility Functions

| name | input | output | description | | ------------- | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | flipFormation | players array | players array | Each formation provided only gives the attacking players. To display the defense on the other side of the field in a reversed formation input the existing players. The output will be a new array of players, each of which can be dragged and dropped independently. |

Custom Field Creation

You can use the available base fields from the json file, or create your own.

Field Props

| name | type | description | | --------------- | ---------- | ------------------------------------------------------------------------ | | id | string | Unique identifier for this field. Required if rendering multiple fields. | | width | number | Width of the whole field | | height | number | Height of the whole field | | backgroundColor | string/hex | Color of the field | | lineColor | string/hex | Color of the lines on the field | | lines | Line[] | All the lines to draw on the field |

Line Props

| name | type | description | | ------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | type | string (optional) | Leave blank for a straight line, use path to create a curved line. | | x1 | number | Starting x coordinate of the line, as a percentage. | | y1 | number | Starting y coordinate of the line, as a percentage. | | x2 | number | Ending x coordinate of the line, as a percentage. | | y2 | number | Ending y coordinate of the line, as a percentage. For path lines this is the radius of the curve. | | sweep | number | The direction of the sweep for curved path lines. 0 or 1 | | dashed | string | Dashing value for the line. Example: "5, 3" for 5 pixels of line followed by 3 pixels of blank space. Leave null for a solid line. |

Custom Player Creation

There are available preset formations available in the players json file, or you can create your own.

Player Props

| name | type | description | | --------------- | ---------- | -------------------------------------------------------------------------------------- | | name | string | Name of player to display. Display will default to using name. | | number | number | Number of player to display. By default this will only display if no name is provided. | | numberFirst | boolean | If true the player number will be the preferred display if it exists. | | x | number | Starting x coordinate of the player, as a percentage. | | y | number | Starting y coordinate of the player, as a percentage. | | backgroundColor | string/hex | Background color of the player element. Default blue. | | color | string/hex | Text and outline color for the player element. Default white |