JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Football Formation Generator</title>
<style>
body {
  font-family: sans-serif;
}
#pitch {
  width: 400px;
  height: 600px;
  background-color: #00aa00;
  border: 2px solid #000;
  position: relative;
  margin: 0 auto;
}
.player {
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  border-radius: 50%;
  position: absolute;
  cursor: move;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
}
.player.goalkeeper {
  background-color: #00ff00; /* Green for goalkeeper */
}
#halfway-line {
  width: 100%;
  height: 2px;
  background-color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.arrow {
  position: absolute;
  cursor: move;
  stroke-width: 2;
  stroke: black;
  fill: none;
  transform-origin: center;
  user-select: none;
}
.arrow path {
  marker-end: url(#arrowhead);
}
</style>
</head>
<body>

<h1>Football Formation Generator</h1>

<div id="pitch">
  <div id="halfway-line"></div>
  <!-- Removed display: none; -->
  <svg>
    <defs>
      <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
        <polygon points="0 0, 10 3.5, 0 7" fill="black" />
      </marker>
    </defs>
  </svg>
</div>

<div style="display: flex; margin-top: 10px;">
  <button id="add-straight-arrow">Add Straight Arrow</button>
  <button id="add-left-curved-arrow">Add Left Curved Arrow</button>
  <button id="add-right-curved-arrow">Add Right Curved Arrow</button>
</div>



</body>
</html>

JavaScript

const pitch = document.getElementById('pitch');

// Sample formation (4-4-2)
const formation = [
  { top: 50, left: 200 },
  { top: 150, left: 100 },
  { top: 150, left: 200 },
  { top: 150, left: 300 },
  { top: 250, left: 50 },
  { top: 250, left: 150 },
  { top: 250, left: 250 },
  { top: 250, left: 350 },
  { top: 350, left: 150 },
  { top: 350, left: 250 },
  { top: 450, left: 200 }
];

// Create players
formation.forEach((position, index) => {
  const player = document.createElement('div');
  player.classList.add('player');
  if (index === formation.length - 1) {
    player.classList.add('goalkeeper'); // Add goalkeeper class
  }
  player.style.top = position.top + 'px';
  player.style.left = position.left + 'px';
  player.textContent = 11 - index; // Numbering from 11 to 1
  pitch.appendChild(player);

  // Make players draggable
  let isDragging = false;
  let offsetX, offsetY;

  player.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - player.offsetLeft;
    offsetY = e.clientY - player.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (isDragging) {
      const x = e.clientX - offsetX;
      const y = e.clientY - offsetY;

      const maxX = pitch.offsetWidth - player.offsetWidth;
      const maxY = pitch.offsetHeight - player.offsetHeight;
      const newX = Math.max(0, Math.min(x, maxX));
      const newY = Math.max(0, Math.min(y, maxY));

      player.style.left = newX + 'px';
      player.style.top = newY + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
});

// Add arrow functionality
document.getElementById('add-straight-arrow').addEventListener('click', () => {
  addArrow('straight');
});

document.getElementById('add-left-curved-arrow').addEventListener('click', () => {
  addArrow('left-curved');
});

document.getElementById('add-right-curved-arrow').addEventListener('click', () => {
  addArrow('right-curved');
});

function...