this code is chess.js for my chess game on web project this game can toggle 2 mode with 2 button is reset and play with bot/play with human but this code not complete can you write complete this code for me by follow comment and you can do anything you think this file should have

// Get the board element from the HTML
const board = document.querySelector('#board');

// Define the pieces
const pieces = {
  black: {
    king: '&#9818;',
    queen: '&#9819;',
    rook: '&#9820;',
    bishop: '&#9821;',
    knight: '&#9822;',
    pawn: '&#9823;'
  },
  white: {
    king: '&#9812;',
    queen: '&#9813;',
    rook: '&#9814;',
    bishop: '&#9815;',
    knight: '&#9816;',
    pawn: '&#9817;'
  }
};

// Create the chess board
function createBoard() {
  // Loop through the rows and columns of the board
  for (let row = 1; row <= 8; row++) {
    for (let col = 1; col <= 8; col++) {
      // Create a new square element
      const square = document.createElement('div');
      square.classList.add('square');
      // Add the square color class based on its position
      if ((row + col) % 2 === 0) {
        square.classList.add('white');
      } else {
        square.classList.add('black');
      }
      // Add the square to the board
      board.appendChild(square);
      // Add the appropriate piece to the square
      switch (row) {
        case 1:
          addPiece(square, pieces.black, col);
          break;
        case 2:
          addPiece(square, pieces.black, 'pawn');
          break;
        case 7:
          addPiece(square, pieces.white, 'pawn');
          break;
        case 8:
          addPiece(square, pieces.white, col);
          break;
        default:
          break;
      }
    }
  }
}

// Get all the squares on the board
const squares = document.querySelectorAll('.square');

// Loop through all the squares and add the corresponding piece
squares.forEach(square => {
  const row = square.parentNode.rowIndex;
  const col = square.cellIndex;
  
  // Check if the square has a piece assigned to it
  if (square.innerHTML !== '') {
    return;
  }
  
  // Assign the piece to the square based on the row and column
  if (row === 0 || row === 7) {
    // Setup black pieces on first and last rows
    switch (col) {
      case 0:
      case 7:
        square.innerHTML = pieces.black.rook;
        break;
      case 1:
      case 6:
        square.innerHTML = pieces.black.knight;
        break;
      case 2:
      case 5:
        square.innerHTML = pieces.black.bishop;
        break;
      case 3:
        square.innerHTML = pieces.black.queen;
        break;
      case 4:
        square.innerHTML = pieces.black.king;
        break;
    }
  } else if (row === 1 || row === 6) {
    // Setup black pawns on second and second-to-last rows
    square.innerHTML = pieces.black.pawn;
  } else if (row === 2 || row === 5) {
    // Setup empty squares on third and fifth rows
    square.innerHTML = '';
  } else if (row === 3) {
    // Setup white queen and king on fourth row
    switch (col) {
      case 3:
        square.innerHTML = pieces.white.queen;
        break;
      case 4:
        square.innerHTML = pieces.white.king;
        break;
      default:
        square.innerHTML = '';
        break;
    }
  } else if (row === 4) {
    // Setup white pawns on fifth row
    square.innerHTML = pieces.white.pawn;
  }
});

// Add a piece to a square
function addPiece(square, color, piece) {
  const pieceChar = color[piece];
  if (pieceChar) {
    const pieceElement = document.createElement('div');
    pieceElement.classList.add('piece');
    pieceElement.innerHTML = pieceChar;
    square.appendChild(pieceElement);
  }
}

// Call the createBoard function to create the initial board
createBoard();

const resetBtn = document.getElementById('reset-btn');
const playWithBotBtn = document.getElementById('play-with-bot-btn');

resetBtn.addEventListener('click', resetGame);
playWithBotBtn.addEventListener('click', playWithBot);

function resetGame() {
  // Remove all pieces from the board
  const pieces = document.querySelectorAll('.piece');
  pieces.forEach(piece => piece.remove());

  // Reset the board to its original setup
  const board = document.querySelector('.board');
  board.innerHTML = '';
  const rows = ['8', '7', '6', '5', '4', '3', '2', '1'];
  const cols = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
  for (let i = 0; i < rows.length; i++) {
    const row = document.createElement('div');
    row.classList.add('row');
    board.appendChild(row);
    for (let j = 0; j < cols.length; j++) {
      const square = document.createElement('div');
      square.classList.add('square');
      if ((i + j) % 2 === 0) {
        square.classList.add('white');
      } else {
        square.classList.add('black');
      }
      row.appendChild(square);
      const piece = getInitialPiece(rows[i], cols[j]);
      if (piece !== '') {
        square.innerHTML = piece;
        square.classList.add('piece');
      }
    }
  }

  // Reset the turn to white
  const turnDisplay = document.querySelector('.turn');
  turnDisplay.innerHTML = 'White';
}

// Helper function to get the initial piece for a given square
function getInitialPiece(row, col) {
  if (row === '1') {
    switch (col) {
      case 'a':
      case 'h':
        return '&#9814;'; // rook
      case 'b':
      case 'g':
        return '&#9816;'; // knight
      case 'c':
      case 'f':
        return '&#9815;'; // bishop
      case 'd':
        return '&#9813;'; // queen
      case 'e':
        return '&#9812;'; // king
      default:
        return '';
    }
  } else if (row === '2') {
    return '&#9817;'; // pawn
  } else if (row === '7') {
    return '&#9823;'; // pawn
  } else if (row === '8') {
    switch (col) {
      case 'a':
      case 'h':
        return '&#9820;'; // rook
      case 'b':
      case 'g':
        return '&#9822;'; // knight
      case 'c':
      case 'f':
        return '&#9821;'; // bishop
      case 'd':
        return '&#9819;'; // queen
      case 'e':
        return '&#9818;'; // king
      default:
        return '';
    }
  } else {
    return '';
  }
}

function playWithBot() {
  console.log('Play with bot button clicked');
  // Get all black pieces
  const blackPieces = Array.from(document.querySelectorAll('.piece'))
    .filter(piece => piece.innerHTML.charCodeAt(0) > 9817);
  // Find legal moves for each black piece
  const legalMoves = [];
  blackPieces.forEach(piece => {
    // Add your logic here to find legal moves for each piece
    // For example:
    // if (piece.innerHTML === pieces.black.pawn) {
    //   // Find legal moves for the pawn
    // }
    // legalMoves.push({ piece, move });
  });
  // Choose a random legal move for the bot
  const randomMove = legalMoves[Math.floor(Math.random() * legalMoves.length)];
  // Make the move on the board
  if (randomMove) {
    const { piece, move } = randomMove;
    // Add your logic here to update the board with the chosen move
    // For example:
    // piece.parentElement.removeChild(piece);
    // move.square.appendChild(piece);
  }
}