Wires from Among us in P5JS

Hello to whoever sees this. I am trying to make the wires mini game from among us in P5JS. (here is a link to a YT video that shows how it looks in game. https://www.youtube.com/watch?v=Ogj9rJhGGKw&ab_channel=FFlinchGaming). This problem could be because of how im writing the code but I don't think it is. It should go as follows.

1. Draw a line staring at the box in position 1 (the top most box on the left.)
2. On mouse click it checks if your in the right spot by being close enough to a point in the middle of the corresponding box on the right. (This is done by color green -> green, red ->red, and blue -> blue.)
3. If it is right it attaches and starts the next wire (The wire in spot 2, the one in the middle)
4. Repeat until all wires are done
5. Display a "YOU WIN" kind of message.

let box2x, box2y, box2c;
let box3x, box3y, box3c;
let box4x, box4y, box4c;
let box5x, box5y, box5c;
let box6x, box6y, box6c;
let d;

function setup() {
  createCanvas(400, 400);
  box1x = 0;
  box2x = 0;
  box3x = 0;
  box4x = 350;
  box5x = 350;
  box6x = 350;
  box1y = 75;
  box2y = 175;
  box3y = 275;
  box4y = 75;
  box5y = 175;
  box6y = 275;
  let d = 0;
  
  let colorsArray1 = ['red', 'blue', 'green'];
  shuffle(colorsArray1, true);
  
  box1c = color(colorsArray1[0]);
  box2c = color(colorsArray1[1]);
  box3c = color(colorsArray1[2]);
  
  let colorsArray2 = ['red', 'blue', 'green'];
  shuffle(colorsArray2, true);
  
  box4c = color(colorsArray2[0]);
  box5c = color(colorsArray2[1]);
  box6c = color(colorsArray2[2]);
  background(200);
  print(colorsArray1);
  print(colorsArray2);

}

function draw() {
  background(200);
  fill(30);
  stroke(0);
  strokeWeight(0);
  rect(0,0,30,400);
  rect(370,0,30,400);
  
  fill(box1c);
  rect(box1x, box1y, 50, 50);
  fill(box2c);
  rect(box2x, box2y, 50, 50);
  fill(box3c);
  rect(box3x, box3y, 50, 50);
  
  fill(box4c);
  rect(box4x, box4y, 50, 50);
  fill(box5c);
  rect(box5x, box5y, 50, 50);
  fill(box6c);
  rect(box6x, box6y, 50, 50);
  
  if(box1c == box4c){
    point(box4x + 25, box4y +25);
    d = int(dist(box4x + 25, box4y +25,mouseX, mouseY));
    text('1',200,15)
  }
  else if(box1c == box5c){
    point(box5x + 25, box5y +25);
    d = int(dist(box5x + 25, box5y +25, mouseX, mouseY));
    text('2',200,15)
  }
  else if(box1c == box6c){
    point(box6x + 25, box6y +25);
    d = int(dist(mouseX, mouseY,box6x + 25, box6y +25));
    text('3',200,15)
  }
  else{
    text('4',75,15);
    d ="100"
  }
  text(d,150,30)
  stroke(box1c);
  strokeWeight(25)
  line(box1x +25, box1y + 25, mouseX, mouseY);
  
}

Link to P5JS editor: https://editor.p5js.org/ My problem right now is that I cant get step 2 to work. It makes sense to be in an "if" statement because i check "IF" the wire is connected. Please and thank you in advanced.