// Components
float x1, y1, x2, y2, gradient;
int width = 860;
int height = 420;

void setup() {
 // Alphine JS
 let courtSelect = document.getElementById('court-select');
 let playerSelect = document.getElementById('player-select');
 let shotSelect = document.getElementById('shot-select');
 let analysisSelect = document.getElementById('analysis-select');

 courtSelect.addEventListener('change', (e) => {
    courtSelected = e.target.value;
    playerSelected = null;
    playerSelect.value = null;
 });

 playerSelect.addEventListener('change', (e) => {
    playerSelected = e.target.value;
 });

 shotSelect.addEventListener('change', (e) => {
    shotSelected = e.target.value;
 });

 analysisSelect.addEventListener('change', (e) => {
    analysisSelected = e.target.value;
 });
}

void draw() {
 background(255);
 textSize(20);
 fill(0, 0, 0);
 text(`Players in this court: ${players.length}`, 30, height/2);
}

void mousePressed() {
 for (let i = 0; i < players.length; i++) {
    let player = players[i];
    let dx = dist(mouseX, mouseY, player.x, player.y);
    if (dx < player.size/2) {
      player.ballCount++;
      break;
    }
 }
}

void keyPressed() {
 if (keyCode === ENTER) {
    background(255);

    fill(0, 0, 0);
    textSize(20);
    text('You found an easter egg!', 30, height/2);

    noLoop();
    return;
 }

 if (keyCode === PATH) {