react-native-football-formation 1.0.0

package/src/theme/defaultTheme.ts

@@ -0,0 +1,74 @@
+import { FormationTheme } from '../types';
+
+/**
+ * Default theme configuration for the Formation Field component
+ * All values can be customized by passing a partial theme object to the component
+ */
+export const defaultTheme: FormationTheme = {
+  colors: {
+    primary: '#A8FF03',
+    blue: '#2194FF',
+    white: '#ffffff',
+    text: '#13151F',
+    border: '#96CBCB',
+    warning: '#FFA500',
+    success: '#34C759',
+    error: '#dc3545',
+    newError: '#FF4A4A',
+    formationBadge: '#41854A',
+  },
+
+  spacing: {
+    playerCardWidth: 70,
+    playerCardHeight: 50,
+    playerImageSize: 44,
+    jerseyNumberSize: 16,
+    iconSize: 12,
+    badgeMinWidth: 20,
+    badgeHeight: 14,
+  },
+
+  typography: {
+    playerNameSize: 12,
+    formationSize: 14,
+    jerseyNumberSize: 8,
+    goalCountSize: 8,
+    fontFamily: undefined,
+    fontFamilyBold: undefined,
+  },
+
+  borderRadius: {
+    playerImage: 44,
+    badge: 12,
+    card: 1,
+  },
+};
+
+/**
+ * Deep merge theme objects
+ * Allows users to override only specific theme values
+ */
+export const mergeTheme = (
+  customTheme?: Partial<FormationTheme>
+): FormationTheme => {
+  if (!customTheme) return defaultTheme;
+
+  return {
+    colors: {
+      ...defaultTheme.colors,
+      ...customTheme.colors,
+    },
+    spacing: {
+      ...defaultTheme.spacing,
+      ...customTheme.spacing,
+    },
+    typography: {
+      ...defaultTheme.typography,
+      ...customTheme.typography,
+    },
+    borderRadius: {
+      ...defaultTheme.borderRadius,
+      ...customTheme.borderRadius,
+    },
+  };
+};

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './defaultTheme';

package/src/types/component.types.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { ImageSourcePropType, ViewStyle, TextStyle } from 'react-native';
+import { LineupFormationPlayer, TeamLineup } from './formation.types';
+import { FormationTheme } from './theme.types';
+
+/**
+ * Props for the main FormationField component
+ */
+export interface FormationFieldProps {
+  // Required
+  lineup: TeamLineup;
+
+  // Optional - Dimensions
+  width?: number; // Default: screen width
+  height?: number; // Default: 395
+
+  // Optional - Theme customization
+  theme?: Partial<FormationTheme>;
+
+  // Optional - Asset overrides
+  fieldImage?: ImageSourcePropType;
+  playerPlaceholder?: ImageSourcePropType;
+  footballIcon?: ImageSourcePropType;
+  kickerIcon?: ImageSourcePropType;
+  renewalIcon?: ImageSourcePropType;
+  ownGoalIcon?: ImageSourcePropType;
+  logoImage?: ImageSourcePropType;
+
+  // Optional - Component overrides
+  renderPlayerCard?: (
+    player: LineupFormationPlayer,
+    fieldWidth: number,
+    fieldHeight: number
+  ) => ReactNode;
+  renderFooter?: (formation: string) => ReactNode;
+
+  // Optional - Callbacks
+  onPlayerPress?: (player: LineupFormationPlayer) => void;
+
+  // Optional - Display options
+  showLogo?: boolean; // Default: true
+  showFormation?: boolean; // Default: true
+  showRating?: boolean; // Default: false
+
+  // Optional - Styling
+  containerStyle?: ViewStyle;
+  playerCardStyle?: ViewStyle;
+  playerNameStyle?: TextStyle;
+
+  // Optional - Photo URL resolver
+  getPlayerPhotoUrl?: (playerId: string) => string;
+}
+
+/**
+ * Props for the PlayerCard component
+ */
+export interface PlayerCardProps {
+  player: LineupFormationPlayer;
+  fieldWidth: number;
+  fieldHeight: number;
+  theme: FormationTheme;
+  onPress?: (player: LineupFormationPlayer) => void;
+  style?: ViewStyle;
+  nameStyle?: TextStyle;
+
+  // Asset overrides
+  playerPlaceholder?: ImageSourcePropType;
+  footballIcon?: ImageSourcePropType;
+  kickerIcon?: ImageSourcePropType;
+  renewalIcon?: ImageSourcePropType;
+  ownGoalIcon?: ImageSourcePropType;
+}

package/src/types/formation.types.ts

@@ -0,0 +1,88 @@
+/**
+ * Type definitions for React Native Football Formation component
+ */
+
+export interface PlayerStats {
+  type: string;
+  value: string | number;
+}
+
+export interface Player {
+  rating: string;
+  playerId: string;
+  position: string;
+  matchName: string;
+  shirtNumber: number;
+  positionSide?: string;
+  formationPosition?: string;
+  formationPlace?: string;
+  stats: PlayerStats[] | null[];
+}
+
+export interface TeamLineup {
+  players: Player[];
+  formationUsed: string; // e.g., "4-3-3", "4-2-3-1"
+}
+
+export interface LineupFormationPlayer {
+  rating: string;
+  playerId: string;
+  position: string;
+  matchName: string;
+  shirtNumber: number;
+  isScorer: boolean;
+  isSubstitute: boolean;
+  isYellowCard: boolean;
+  isRedCard: boolean;
+  isOwnGoal: boolean;
+  ownGoals: number;
+  isGoalAssist: boolean;
+  goals: number;
+  formationPlace: string;
+  photo: string;
+  x: string | number; // X coordinate (0-100)
+  y: string | number; // Y coordinate (0-100)
+}
+
+/**
+ * Supported formation types
+ */
+export type FormationType =
+  | '4-4-2'
+  | '4-1-2-1-2'
+  | '4-3-3'
+  | '4-5-1'
+  | '4-4-1-1'
+  | '4-1-4-1'
+  | '4-2-3-1'
+  | '4-3-2-1'
+  | '5-3-2'
+  | '5-4-1'
+  | '3-5-2'
+  | '3-4-3'
+  | '4-2-2-2'
+  | '3-5-1-1'
+  | '3-4-2-1'
+  | '3-4-1-2'
+  | '3-1-4-2'
+  | '3-4-3d'
+  | '4-1-3-2'
+  | '4-2-4-0'
+  | '4-3-1-2'
+  | '3-2-4-1'
+  | '3-3-3-1';
+
+/**
+ * Coordinate for player positioning on the field
+ */
+export interface FieldCoordinate {
+  x: number; // X position (0-100)
+  y: number; // Y position (0-100)
+}
+
+/**
+ * Formation coordinates mapping
+ */
+export type FormationCoordinates = {
+  [key: string]: FieldCoordinate;
+};

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './formation.types';
+export * from './theme.types';
+export * from './component.types';

package/src/types/theme.types.ts

@@ -0,0 +1,48 @@
+/**
+ * Theme configuration types for the formation component
+ */
+
+export interface FormationThemeColors {
+  primary: string;
+  blue: string;
+  white: string;
+  text: string;
+  border: string;
+  warning: string;
+  success: string;
+  error: string;
+  newError: string;
+  formationBadge: string;
+}
+
+export interface FormationThemeSpacing {
+  playerCardWidth: number;
+  playerCardHeight: number;
+  playerImageSize: number;
+  jerseyNumberSize: number;
+  iconSize: number;
+  badgeMinWidth: number;
+  badgeHeight: number;
+}
+
+export interface FormationThemeTypography {
+  playerNameSize: number;
+  formationSize: number;
+  jerseyNumberSize: number;
+  goalCountSize: number;
+  fontFamily?: string;
+  fontFamilyBold?: string;
+}
+
+export interface FormationThemeBorderRadius {
+  playerImage: number;
+  badge: number;
+  card: number;
+}
+
+export interface FormationTheme {
+  colors: FormationThemeColors;
+  spacing: FormationThemeSpacing;
+  typography: FormationThemeTypography;
+  borderRadius: FormationThemeBorderRadius;
+}

package/src/utils/formationCoordinates.ts

@@ -0,0 +1,335 @@
+import { FormationCoordinates, FormationType } from '../types';
+
+/**
+ * Formation coordinates based on formationPlace (1-11)
+ * Each formation maps player positions (1-11) to x,y coordinates on the field (0-100 scale)
+ *
+ * Position 1 is always the goalkeeper
+ * Positions 2-11 vary based on the tactical formation
+ */
+export const FORMATION_COORDINATES_BY_PLACE: Record<
+  FormationType,
+  FormationCoordinates
+> = {
+  '4-4-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 82, y: 58 }, // RB
+    '3': { x: 16, y: 58 }, // LB
+    '4': { x: 58, y: 30 }, // LCB
+    '5': { x: 62, y: 58 }, // CB
+    '6': { x: 36, y: 58 }, // RCB
+    '7': { x: 76, y: 30 }, // RCM
+    '8': { x: 40, y: 30 }, // LCM
+    '9': { x: 38, y: 8 }, // ST
+    '10': { x: 60, y: 8 }, // RAM/RW
+    '11': { x: 22, y: 30 }, // LAM/LW
+  },
+
+  '4-1-2-1-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 88, y: 61 }, // RB
+    '3': { x: 10, y: 61 }, // LB
+    '4': { x: 36, y: 61 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 49, y: 50 }, // CDM
+    '7': { x: 68, y: 35 }, // RCM
+    '8': { x: 28, y: 35 }, // LCM
+    '9': { x: 36, y: 8 }, // LST
+    '10': { x: 62, y: 8 }, // RST
+    '11': { x: 49, y: 25 }, // CAM
+  },
+
+  '4-3-3': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 80, y: 59 }, // RB
+    '3': { x: 18, y: 59 }, // LB
+    '4': { x: 49, y: 32 }, // LCB
+    '5': { x: 60, y: 59 }, // RCB
+    '6': { x: 38, y: 59 }, // CDM
+    '7': { x: 68, y: 32 }, // RCM
+    '8': { x: 28, y: 32 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 70, y: 8 }, // RW
+    '11': { x: 26, y: 8 }, // LW
+  },
+
+  '4-5-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 88, y: 61 }, // RB
+    '3': { x: 10, y: 61 }, // LB
+    '4': { x: 36, y: 61 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 49, y: 35 }, // CM
+    '7': { x: 68, y: 35 }, // RCM
+    '8': { x: 28, y: 35 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 88, y: 35 }, // RM
+    '11': { x: 10, y: 35 }, // LM
+  },
+
+  '4-4-1-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 82, y: 61 }, // RB
+    '3': { x: 15, y: 61 }, // LB
+    '4': { x: 60, y: 40 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 36, y: 61 }, // RCM
+    '7': { x: 80, y: 40 }, // LCM
+    '8': { x: 40, y: 40 }, // CM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 49, y: 25 }, // CAM
+    '11': { x: 20, y: 40 }, // RM
+  },
+
+  '4-1-4-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 84, y: 61 }, // RB
+    '3': { x: 14, y: 61 }, // LB
+    '4': { x: 49, y: 44 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 36, y: 61 }, // CDM
+    '7': { x: 60, y: 26 }, // RCAM
+    '8': { x: 40, y: 26 }, // LCAM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 77, y: 26 }, // RM
+    '11': { x: 20, y: 26 }, // LM
+  },
+
+  '4-2-3-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 88, y: 61 }, // RB
+    '3': { x: 10, y: 61 }, // LB
+    '4': { x: 28, y: 40 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 36, y: 61 }, // RCDM
+    '7': { x: 80, y: 24 }, // LCDM
+    '8': { x: 68, y: 40 }, // CAM
+    '9': { x: 49, y: 6 }, // ST
+    '10': { x: 49, y: 24 }, // RW
+    '11': { x: 15, y: 24 }, // LW
+  },
+
+  '4-3-2-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 88, y: 61 }, // RB
+    '3': { x: 10, y: 61 }, // LB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 36, y: 61 }, // CM
+    '4': { x: 49, y: 40 }, // LCB
+    '7': { x: 28, y: 40 }, // RCM
+    '8': { x: 68, y: 40 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 62, y: 22 }, // RCAM
+    '11': { x: 36, y: 22 }, // LCAM
+  },
+
+  '5-3-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 82, y: 59 }, // RB
+    '3': { x: 14, y: 59 }, // LB
+    '4': { x: 32, y: 59 }, // LCB
+    '5': { x: 49, y: 59 }, // CB
+    '6': { x: 66, y: 59 }, // RCB
+    '7': { x: 68, y: 32 }, // RCM
+    '8': { x: 28, y: 32 }, // LCM
+    '9': { x: 36, y: 8 }, // LST
+    '10': { x: 62, y: 8 }, // RST
+    '11': { x: 49, y: 32 }, // CM
+  },
+
+  '5-4-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 84, y: 58 }, // RB
+    '3': { x: 15, y: 58 }, // LB
+    '4': { x: 32, y: 58 }, // LCB
+    '5': { x: 49, y: 58 }, // CB
+    '6': { x: 67, y: 58 }, // RCB
+    '7': { x: 76, y: 30 }, // RCM
+    '8': { x: 58, y: 30 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 40, y: 30 }, // RM
+    '11': { x: 22, y: 30 }, // LM
+  },
+
+  '3-5-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 86, y: 35 }, // RM
+    '3': { x: 16, y: 35 }, // LM
+    '4': { x: 28, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 70, y: 61 }, // RCB
+    '7': { x: 68, y: 35 }, // RCM
+    '8': { x: 32, y: 35 }, // LCM
+    '9': { x: 40, y: 8 }, // LST
+    '10': { x: 60, y: 8 }, // RST
+    '11': { x: 49, y: 35 }, // CM
+  },
+
+  '3-4-3': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 77, y: 33 }, // RM
+    '3': { x: 20, y: 33 }, // LM
+    '4': { x: 25, y: 59 }, // LCB
+    '5': { x: 49, y: 59 }, // CB
+    '6': { x: 72, y: 59 }, // RCB
+    '7': { x: 58, y: 33 }, // RCM
+    '8': { x: 38, y: 33 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 70, y: 8 }, // RW
+    '11': { x: 28, y: 8 }, // LW
+  },
+
+  '4-2-2-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 87, y: 58 }, // RB
+    '3': { x: 10, y: 58 }, // LB
+    '4': { x: 34, y: 58 }, // LCB
+    '5': { x: 62, y: 58 }, // RCB
+    '6': { x: 62, y: 35 }, // RCDM
+    '7': { x: 35, y: 35 }, // LCDM
+    '8': { x: 76, y: 20 }, // RCAM
+    '9': { x: 36, y: 8 }, // LST
+    '10': { x: 60, y: 8 }, // RST
+    '11': { x: 22, y: 20 }, // LCAM
+  },
+
+  '3-5-1-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 82, y: 40 }, // RWB
+    '3': { x: 16, y: 40 }, // LWB
+    '4': { x: 28, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 68, y: 61 }, // RCB
+    '7': { x: 66, y: 40 }, // RCM
+    '8': { x: 31, y: 40 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 49, y: 25 }, // CAM
+    '11': { x: 49, y: 40 }, // CM
+  },
+
+  '3-4-2-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 78, y: 40 }, // RM
+    '3': { x: 20, y: 40 }, // LM
+    '4': { x: 25, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 70, y: 61 }, // RCB
+    '7': { x: 60, y: 40 }, // RCM
+    '8': { x: 40, y: 40 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 62, y: 22 }, // RCAM
+    '11': { x: 36, y: 22 }, // LCAM
+  },
+
+  '3-4-1-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 80, y: 40 }, // RM
+    '3': { x: 18, y: 40 }, // LM
+    '4': { x: 28, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 70, y: 61 }, // RCB
+    '7': { x: 62, y: 40 }, // RCM
+    '8': { x: 36, y: 40 }, // LCM
+    '9': { x: 49, y: 25 }, // LST
+    '10': { x: 62, y: 8 }, // RST
+    '11': { x: 36, y: 8 }, // CAM
+  },
+
+  '3-1-4-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 80, y: 25 }, // RM
+    '3': { x: 15, y: 25 }, // LM
+    '4': { x: 49, y: 61 }, // LCB
+    '5': { x: 76, y: 61 }, // CB
+    '6': { x: 20, y: 61 }, // RCB
+    '7': { x: 49, y: 40 }, // RCAM
+    '8': { x: 62, y: 25 }, // LCAM
+    '9': { x: 62, y: 8 }, // LST
+    '10': { x: 36, y: 8 }, // RST
+    '11': { x: 36, y: 25 }, // CDM
+  },
+
+  '3-4-3d': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 74, y: 35 }, // RWB (deeper)
+    '3': { x: 22, y: 35 }, // LWB (deeper)
+    '4': { x: 26, y: 61 }, // LCB
+    '5': { x: 50, y: 61 }, // CB
+    '6': { x: 72, y: 61 }, // RCB
+    '7': { x: 50, y: 45 }, // RCM
+    '8': { x: 50, y: 25 }, // LCM
+    '9': { x: 50, y: 8 }, // ST
+    '10': { x: 76, y: 15 }, // RW
+    '11': { x: 22, y: 15 }, // LW
+  },
+
+  '4-1-3-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 86, y: 61 }, // RB
+    '3': { x: 12, y: 61 }, // LB
+    '4': { x: 36, y: 61 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 49, y: 44 }, // CDM
+    '7': { x: 77, y: 25 }, // RCAM
+    '8': { x: 20, y: 25 }, // LCAM
+    '9': { x: 35, y: 6 }, // LST
+    '10': { x: 62, y: 6 }, // RST
+    '11': { x: 49, y: 25 }, // CAM
+  },
+
+  '4-2-4-0': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 88, y: 55 }, // RB
+    '3': { x: 10, y: 55 }, // LB
+    '4': { x: 36, y: 55 }, // LCB
+    '5': { x: 62, y: 55 }, // RCB
+    '6': { x: 62, y: 30 }, // RCDM
+    '7': { x: 36, y: 30 }, // LCDM
+    '8': { x: 62, y: 8 }, // RCAM
+    '9': { x: 78, y: 16 }, // RW
+    '10': { x: 36, y: 8 }, // LCAM
+    '11': { x: 18, y: 16 }, // LW
+  },
+
+  '4-3-1-2': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 84, y: 61 }, // RB
+    '3': { x: 14, y: 61 }, // LB
+    '4': { x: 36, y: 61 }, // LCB
+    '5': { x: 62, y: 61 }, // RCB
+    '6': { x: 49, y: 40 }, // CM
+    '7': { x: 68, y: 40 }, // RCM
+    '8': { x: 28, y: 40 }, // LCM
+    '9': { x: 36, y: 6 }, // LST
+    '10': { x: 62, y: 6 }, // RST
+    '11': { x: 49, y: 23 }, // CAM
+  },
+
+  '3-2-4-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 76, y: 25 }, // RM
+    '3': { x: 22, y: 25 }, // LM
+    '4': { x: 20, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 76, y: 61 }, // RCB
+    '7': { x: 62, y: 45 }, // RCM
+    '8': { x: 36, y: 45 }, // LCM
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 58, y: 25 }, // RCAM
+    '11': { x: 40, y: 25 }, // LCAM
+  },
+
+  '3-3-3-1': {
+    '1': { x: 49, y: 80 }, // GK
+    '2': { x: 78, y: 40 }, // RCM
+    '3': { x: 20, y: 40 }, // LCM
+    '4': { x: 20, y: 61 }, // LCB
+    '5': { x: 49, y: 61 }, // CB
+    '6': { x: 76, y: 61 }, // RCB
+    '7': { x: 49, y: 40 }, // CM
+    '8': { x: 76, y: 20 }, // RW
+    '9': { x: 49, y: 8 }, // ST
+    '10': { x: 49, y: 20 }, // CAM
+    '11': { x: 24, y: 20 }, // LW
+  },
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './formationCoordinates';
+export * from './transformLineup';