src/components/FootballField.vue

<template>

  <div class="football-field">

    <svg viewBox="-7 -2 119 72" preserveAspectRatio="xMidYMid meet" @click="handleBackgroundClick">

      <g>

        <!-- Base field -->

        <rect x="0" y="0" width="105" height="68" fill="none" stroke="#333" stroke-width="0.3"/>

        

        <!-- Clickable lines -->

        <g class="lines">

          <line v-for="(line, name) in lineCoordinates" 

                :key="name"

                class="field-line"

                :stroke="getLineColor(name)"

                :x1="line.x1"

                :y1="line.y1"

                :x2="line.x2"

                :y2="line.y2"

                @click="selectLine(name)" />

        </g>



        <!-- Key points -->

        <circle v-for="(point, index) in keypoints" 

                :key="index"

                :cx="point[0]" 

                :cy="point[1]" 

                r="2"

                :fill="getPointColor(index)"

                class="keypoint"

                @click="selectPoint(index)" />

        

        <!-- Center circle -->

        <circle 

          cx="52.5" 

          cy="34" 

          r="9.15" 

          fill="none" 

          :stroke="getLineColor('Circle central')"

          class="field-line"

          @click="selectLine('Circle central')" />

          

        

        <!-- Penalty area arcs -->

        <path 

          v-for="arc in circle_left_right" 

          :key="'Circle ' + arc.side"

          :d="getPenaltyArc(arc)"

          fill="none"

          :stroke="getLineColor('Circle ' + arc.side)"

          class="field-line"

          @click="selectLine('Circle ' + arc.side)" />

      </g>

    </svg>

    

    <!-- Selected line or point info -->

    <div v-if="selectedLine && LINES[selectedLine]" class="info-overlay">

      {{ LINES[selectedLine].name }}

    </div>

    <div v-if="selectedPointIndex !== null" class="info-overlay">

      {{ POINTS[selectedPointIndex].name }}

    </div>

  </div>

</template>



<script>

// Définition exacte des classes de lignes comme dans SoccerNet

const LINES = {

  'Big rect. left bottom': { name: 'Big rect. left bottom', description: 'Left penalty area - bottom line' },

  'Big rect. left main': { name: 'Big rect. left main', description: 'Left penalty area - parallel line' },

  'Big rect. left top': { name: 'Big rect. left top', description: 'Left penalty area - top line' },

  'Big rect. right bottom': { name: 'Big rect. right bottom', description: 'Right penalty area - bottom line' },

  'Big rect. right main': { name: 'Big rect. right main', description: 'Right penalty area - parallel line' },

  'Big rect. right top': { name: 'Big rect. right top', description: 'Right penalty area - top line' },

  'Circle central': { name: 'Center circle', description: 'Center circle' },

  'Circle left': { name: 'Left circle', description: 'Left arc' },

  'Circle right': { name: 'Right circle', description: 'Right arc' },

  'Goal left crossbar': { name: 'Goal left crossbar', description: 'Left goal crossbar' },

  'Goal left post left': { name: 'Goal left post left', description: 'Left goal - left post' },

  'Goal left post right': { name: 'Goal left post right', description: 'Left goal - right post' },

  'Goal right crossbar': { name: 'Goal right crossbar', description: 'Right goal crossbar' },

  'Goal right post left': { name: 'Goal right post left', description: 'Right goal - left post' },

  'Goal right post right': { name: 'Goal right post right', description: 'Right goal - right post' },

  'Goal unknown': { name: 'Goal unknown', description: 'Unidentified goal' },

  'Line unknown': { name: 'Line unknown', description: 'Unidentified line' },

  'Middle line': { name: 'Middle line', description: 'Center line' },

  'Side line bottom': { name: 'Side line bottom', description: 'Bottom goal line' },

  'Side line left': { name: 'Side line left', description: 'Left touch line' },

  'Side line right': { name: 'Side line right', description: 'Right touch line' },

  'Side line top': { name: 'Side line top', description: 'Top goal line' },

  'Small rect. left bottom': { name: 'Small rect. left bottom', description: 'Left goal area - bottom line' },

  'Small rect. left main': { name: 'Small rect. left main', description: 'Left goal area - parallel line' },

  'Small rect. left top': { name: 'Small rect. left top', description: 'Left goal area - top line' },

  'Small rect. right bottom': { name: 'Small rect. right bottom', description: 'Right goal area - bottom line' },

  'Small rect. right main': { name: 'Small rect. right main', description: 'Right goal area - parallel line' },

  'Small rect. right top': { name: 'Small rect. right top', description: 'Right goal area - top line' },

  center_circle: {

    name: "Center circle",

    type: "circle",

    color: "#00FF15"

  },

  circle_left: {

    name: "Left circle",

    type: "arc",

    color: "#00FF15"

  },

  circle_right: {

    name: "Right circle",

    type: "arc",

    color: "#00FF15"

  }

};



// Définition des dimensions standard d'un terrain de football

const FIELD_DIMENSIONS = {

  PITCH_LENGTH: 105,

  PITCH_WIDTH: 68,

  GOAL_LINE_TO_PENALTY_MARK: 11.0,

  PENALTY_AREA_WIDTH: 40.32,

  PENALTY_AREA_LENGTH: 16.5,

  GOAL_AREA_WIDTH: 18.32,

  GOAL_AREA_LENGTH: 5.5,

  CENTER_CIRCLE_RADIUS: 9.15,

  GOAL_HEIGHT: 2.44,

  GOAL_LENGTH: 7.32

};



const POINTS = {

  0: { name: "Center point" },

  1: { name: "Left penalty point" },

  2: { name: "Right penalty point" }

};



export default {

  name: 'FootballField',

  props: {

    positionedLines: {

      type: Object,

      default: () => ({})

    },

    positionedPoints: {

      type: Object,

      default: () => ({})

    }

  },

  data() {

    return {

      selectedPointIndex: null,

      selectedLine: null,

      LINES,

      FIELD_DIMENSIONS,

      POINTS,

      keypoints: [

        [52.5, 34],    // Center point

        [11, 34],      // Left penalty point

        [94, 34],      // Right penalty point

      ],

      lineCoordinates: {

        'Side line top': { x1: 0, y1: 0, x2: 105, y2: 0 },

        'Side line bottom': { x1: 0, y1: 68, x2: 105, y2: 68 },

        'Side line left': { x1: 0, y1: 0, x2: 0, y2: 68 },

        'Side line right': { x1: 105, y1: 0, x2: 105, y2: 68 },

        'Middle line': { x1: 52.5, y1: 0, x2: 52.5, y2: 68 },

        

        // Penalty areas

        'Big rect. left bottom': { x1: 0, y1: 54.16, x2: 16.5, y2: 54.16 },

        'Big rect. left main': { x1: 16.5, y1: 13.84, x2: 16.5, y2: 54.16 },

        'Big rect. left top': { x1: 0, y1: 13.84, x2: 16.5, y2: 13.84 },

        'Big rect. right bottom': { x1: 88.5, y1: 54.16, x2: 105, y2: 54.16 },

        'Big rect. right main': { x1: 88.5, y1: 13.84, x2: 88.5, y2: 54.16 },

        'Big rect. right top': { x1: 88.5, y1: 13.84, x2: 105, y2: 13.84 },

        

        // Goal areas

        'Small rect. left bottom': { x1: 0, y1: 43.16, x2: 5.5, y2: 43.16 },

        'Small rect. left main': { x1: 5.5, y1: 24.84, x2: 5.5, y2: 43.16 },

        'Small rect. left top': { x1: 0, y1: 24.84, x2: 5.5, y2: 24.84 },

        'Small rect. right bottom': { x1: 99.5, y1: 43.16, x2: 105, y2: 43.16 },

        'Small rect. right main': { x1: 99.5, y1: 24.84, x2: 99.5, y2: 43.16 },

        'Small rect. right top': { x1: 99.5, y1: 24.84, x2: 105, y2: 24.84 },

        

        // Goals

        'Goal left post left': { x1: -5, y1: 37.66, x2: 0, y2: 37.66 },

        'Goal left crossbar': { x1: -5, y1: 30.34, x2: -5, y2: 37.66 },

        'Goal left post right': { x1: -5, y1: 30.34, x2: 0, y2: 30.34 },

        'Goal right post left': { x1: 105, y1: 30.34, x2: 110, y2: 30.34 },

        'Goal right crossbar': { x1: 110, y1: 30.34, x2: 110, y2: 37.66 },

        'Goal right post right': { x1: 105, y1: 37.66, x2: 110, y2: 37.66 },

      },

      lastSelected: null, // 'point' or 'line'

      circle_left_right: [

        { x: 11, y: 34, side: 'left' },

        { x: 94, y: 34, side: 'right' }

      ]

    }

  },

  methods: {

    handleBackgroundClick(event) {

      // Vérifie si le clic vient directement du SVG (pas d'un enfant)

      if (event.target.tagName === 'svg') {

        if (this.selectedPointIndex !== null) {

          this.selectedPointIndex = null;

          this.$emit('point-selected', null);

        }

        if (this.selectedLine) {

          this.selectedLine = null;

          this.$emit('line-selected', null);

        }

        this.lastSelected = null;

      }

    },

    selectPoint(index, event) {

      if (event) {

        event.stopPropagation();

      }

      if (this.selectedLine) this.selectedLine = null;

      this.selectedPointIndex = index;

      this.lastSelected = 'point';

      this.$emit('point-selected', {

        index,

        coordinates: this.keypoints[index],

        name: this.POINTS[index].name

      });

    },

    selectLine(lineName, event) {

      if (event) {

        event.stopPropagation();

      }

      if (this.selectedPointIndex !== null) this.selectedPointIndex = null;

      this.selectedLine = lineName;

      this.lastSelected = 'line';

      if (this.LINES[lineName]) {

        this.$emit('line-selected', {

          id: lineName,

          name: this.LINES[lineName].name,

          description: this.LINES[lineName].description

        });

      }

    },

    getPointColor(index) {

      if (this.selectedPointIndex === index && this.lastSelected === 'point') {

        return index in this.positionedPoints ? '#FFFF00' : 'red';

      }

      return index in this.positionedPoints ? '#00FF15' : 'white';

    },

    getLineColor(lineName) {

      if (this.selectedLine === lineName && this.lastSelected === 'line') {

        return this.positionedLines[lineName] ? '#FFFF00' : 'red';

      }

      return this.positionedLines[lineName] ? '#00FF15' : 'white';

    },  

    

    getPenaltyArc(arc) {

      const radius = 9.15;

      const startAngle = arc.side === 'left' ? -53 : -127;

      const endAngle = arc.side === 'left' ? 53 : 127;

      

      const start = {

        x: arc.x + radius * Math.cos(startAngle * Math.PI / 180),

        y: arc.y + radius * Math.sin(startAngle * Math.PI / 180)

      };

      

      const end = {

        x: arc.x + radius * Math.cos(endAngle * Math.PI / 180),

        y: arc.y + radius * Math.sin(endAngle * Math.PI / 180)

      };

      

      const largeArc = 0;

      const sweep = arc.side === 'left' ? 1 : 0;

      

      return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} ${sweep} ${end.x} ${end.y}`;

    }

  }

}

</script>



<style scoped>

.football-field {

  position: relative;

  width: 100%;

  height: 100%;

}



.field-line {

  stroke-width: 0.8;

  cursor: pointer;

}



/* Specific style for goal lines */

.field-line[class*="Goal"] {

  stroke-width: 1;  /* Thicker line for goals */

}



.field-line:hover {

  stroke-width: 1.2;  /* Even thicker on hover */

  opacity: 0.8;

}



.line-info {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

  background-color: rgba(0, 0, 0, 0.7);

  color: white;

  padding: 5px 10px;

  border-radius: 4px;

  font-size: 0.9rem;

}



.keypoint {

  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* Glow effect for points */

  cursor: pointer;

}



.keypoint:hover {

  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));

}



.info-overlay {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

  background-color: rgba(0, 0, 0, 0.7);

  color: white;

  padding: 5px 10px;

  border-radius: 4px;

  font-size: 0.9rem;

}

</style>