How to make dynamic value array change value on element change

Question

I am trying to make 3 Men's Morris game. I created the game but there is little error or problem. When drag a ball to box its value pushed to Array but again drag the same ball to other box it pushed a new value to Array if the same ball match pattern it says user won without inserting other balls to game. Could there be a method to remove only the current ball value from Array . And could be any method to make the other player bot to auto play against like in tic tac toe. Here is my JavaScript:

let goalBoxes = document.querySelectorAll(".goal");
let user1 = [ ];
let user2 = [ ];

// Possible Win patterns
let pattern = [
  [1, 2, 3], // first row
  [4, 5, 6], // second row
  [7, 8, 9], // third row
  [1, 4, 7], // first column
  [2, 5, 8], // second column
  [3, 6, 9], // third column
  [1, 5, 9], // diagonal 1
  [3, 5, 7] // diagonal 2
];

// Check if anyone win or not
function checkWinner(user) {
  let won = false;
  pattern.forEach((row) => {
    if (
      user.indexOf(row[0]) > -1 &&
      user.indexOf(row[1]) > -1 &&
      user.indexOf(row[2]) > -1
    ) {
      return (won = true);
    }
  });
  return won;
}

function dragStart(event) {
  event.dataTransfer.setData(".", event.target.id);
}

function onDrop(event) {
  const id = event.dataTransfer.getData(".");
  const dragElem = document.getElementById(id);
  const patternIndex = event.target.getAttribute("data-index");
  event.target.appendChild(dragElem);

  // Adding pattern values
  if (event.target.firstChild.className == "ball") {
    user1.push(parseInt(patternIndex));
  } else {
    user2.push(parseInt(patternIndex));
  }

  // Checking for Winner
  checkWinner(user1);
  checkWinner(user2);

  // Showing message on the screen
  if (checkWinner(user1) == true) {
    alert("User1 have won");
  } else if (checkWinner(user2) == true) {
    alert("User2 have won");
  }
}

goalBoxes.forEach((goal) => {
  goal.addEventListener("dragover", (event) => {
    event.preventDefault();
  });
});

This is my codepen if want more details https://codepen.io/ghulamshabeer/pen/qBVavEg

Answer 1

If I make a dynamic Array whose values are changing then push those Arrays to main Array then you can overcome this problem.

let goalBoxes = document.querySelectorAll(".goal");
let user1 = [ ];
let user2 = [ ];
let ball1 = [ ];
let ball2 = [ ];
let ball3 = [ ];
let ball4 = [ ];
let ball5 = [ ];
let ball6 = [ ];


// Adding pattern values
  if (event.target.firstChild.className == "ball") {
    if (event.target.firstChild.id == "ball1") {
      ball1 = [];
      ball1.push(parseInt(patternIndex));
    } else if (event.target.firstChild.id == "ball2") {
     ball2 = [];
      ball2.push(parseInt(patternIndex));
    } else if(event.target.firstChild.id=="ball3"){
      ball3 = [];
      ball3.push(parseInt(patternIndex));
    }
  } else {
    if (event.target.id == "ball4") {
      ball4 = [];
      ball4.push(parseInt(patternIndex));;
    } else if (event.target.id == "ball5") {
      ball5 = [];
      ball5.push(parseInt(patternIndex));;
    } else(event.target.firstChild.id== " ball6") {
      ball6 = [];
      ball6.push(parseInt(patternIndex));;
    }
    
  }


 let user1pattern =[...ball1,...ball2,...ball3];
 let user2pattern =[...ball4,...ball5,...ball6];
  
  user1 = [...user1pattern];
  user2 = [...user2pattern];

Answer 2

Instead of using so much arrays the problem could be overcome by adding item at specific index like

let goalBoxes = document.querySelectorAll(".goal");
let user1 = [];
let user2 = [];

// Adding pattern values

let id = event.target.firstChild.id;

let className = event.target.firstChild.className;

if (className == "ball") {
    if (id == "ball1") {
        user1[0] = parseInt(patternIndex);
    } else if (id == "ball2") {
        user1[1] = parseInt(patternIndex);
    } else if (id == "ball3") {
        user1[2] = parseInt(patternIndex);
    }
} else {
    if (id == "ball4") {
        user2[0] = parseInt(patternIndex)
    } else if (id == "ball5") {
        user2[1] = parseInt(patternIndex);
    } else(id == "ball6") {
        user2[2] = parseInt(patternIndex);
    }
}