Change data for array of objects

Question

I'm trying to create a chess game by javaScript. my problem is when I make the chess move, I change the value position of my chess object. The chess can move to the new position but after rendering the chessboard, the previous chess piece is not deleted. Here is my code:

    const switchCurrentSquare = (selector, curr) => {
      let position = chess.forEach(item => {
        if(JSON.stringify(item.currentSquare) == JSON.stringify(selector)){
            item.currentSquare = curr
            renderChessItems(chess)
        }
    })
}

I check for each item in my array of objects, if it has the same position value (current square), it will change to the new position. Here is the code I get the position by click function:

    const allClass = document.querySelectorAll('div:not(.board)')
let chessSelector

allClass.forEach(item => {
    item.addEventListener("click", function () {

        const currentSquare = JSON.parse(this.getAttribute("id"))
        changeColorForSelectPiece(currentSquare)
        const pieceType = this.classList[2]
        const player = this.classList[3]
        
        if(chessSelector){
            switchCurrentSquare(chessSelector, currentSquare)
            removeClass()
            chessSelector = null
        }else{
            getNextStep(pieceType, currentSquare, player)
            if(player){
                chessSelector = currentSquare
            }
            else chessSelector = null
        }
    })
})

Answer 1

I would suggest an OOP approach, because this could become really complicated down the road.

With OOP this would be easy as well:

export class ChessBoard {
  private __state: string[][];

  constructor() {
    this.__state = new Array(8);

    for (let i = 0; i < 8; i++) {
      this.__state[i] = new Array(8);
    }
  }

  public render(): void {
    // Render the chessboard
  }
}

I wrote this in TypeScript, which I highly recommend too for a project like this.

You could just update your current state and re-render your chessboard, then display that on the web.

The state would look like something like this:

[
  [BlackRook], [BlackKnight], [BlackBishop], [BlackKing], [BlackQueen], [BlackKnight], [BlackBishop], [BlackRook],
  [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn],
  [WhiteRook], [WhiteKnight], [WhiteBishop], [WhiteKing], [WhiteQueen], [WhiteBishop], [WhiteKnight], [WhiteRook],
]

And after each move, update the state and re-render the ui:

[
  [BlackRook], [BlackKnight], [BlackBishop], [BlackKing], [BlackQueen], [BlackKnight], [BlackBishop], [BlackRook],
  [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn], [BlackPawn],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [], [], [], [], [], [],
  [], [], [WhiteKnight], [], [], [], [], [],
  [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn], [WhitePawn],
  [WhiteRook], [], [WhiteBishop], [WhiteKing], [WhiteQueen], [WhiteBishop], [WhiteKnight], [WhiteRook],
]

EDIT

This is how I would iterate through the state:

for (let i = 0; i < this.__state.length; i++) {
  for (let j = 0; j < this.__state[i].length; j++) {
    if (this.__state[i][j] instanceof EmptyField) {
      // move
    }
  }
}

EDIT 2

Created a git repo for this: https://github.com/kmpizmad/js-chess

You can run it with node ./build/index.js and you'll see the initial state. Do whatever you want with it. :D feel free to rebuild the structure if it doesn't work for you.

Hierarchy:

Game: this controls the whole program

Chessboard: this controls the squares

Graveyard: similar to Chessboard but it controls the fallen pieces instead

Piece: abstract class, contains each prop that every piece has.

Everything else is a child of Piece