How do i stop iterating tough this array at "pgn[46]"?

Question

How do i stop iterating tough this array at "pgn[46]"?

I want to be unable to go to the next move when i click the button. because this array will start back from 0 and if a piece is on the square it will move again. i need some more text to post this question here. I love you all, peace

$('#move1Btn').on('click', function () {
  board.move(pgn[intpgnIndex])
})

var pgn = new Array()
pgn[0] = ""
pgn[1] = "e2-e4"
pgn[2] = "e7-e5"
pgn[3] = "f2-f4"
pgn[4] = "e5-f4"
pgn[5] = "f1-c4"
pgn[6] = "d8-h4"
pgn[7] = "e1-f1"
pgn[8] = "b7-b5"
pgn[9] = "c4-b5"
pgn[10] = "g8-f6"
pgn[11] = "g1-f3"
pgn[12] = "h4-h6"
pgn[13] = "d2-d3"
pgn[14] = "f6-h5"
pgn[15] = "f3-h4"
pgn[16] = "h6-g5"
pgn[17] = "h4-f5"
pgn[18] = "c7-c6"
pgn[19] = "g2-g4"
pgn[20] = "h5-f6"
pgn[21] = "h1-g1"
pgn[22] = "c6-b5"
pgn[23] = "h2-h4"
pgn[24] = "g5-g6"
pgn[25] = "h4-h5"
pgn[26] = "g6-g5"
pgn[27] = "d1-f3"
pgn[28] = "f6-g8"
pgn[29] = "c1-f4"
pgn[30] = "g5-f6"
pgn[31] = "b1-c3"
pgn[32] = "f8-c5"
pgn[33] = "c3-d5"
pgn[34] = "f6-b2"
pgn[35] = "f4-d6"
pgn[36] = "c5-g1"
pgn[37] = "e4-e5"
pgn[38] = "b2-a1"
pgn[39] = "f1-e2"
pgn[40] = "b8-a6"
pgn[41] = "f5-g7"
pgn[42] = "e8-d8"
pgn[43] = "f3-f6"
pgn[44] = "g8-f6"
pgn[45] = "d6-e7"
pgn[46] = ""
pgn[47] = ""
pgn[48] = ""
pgn[49] = ""

var intpgnIndex = 0;


function writeThing() {
    if ( intpgnIndex == pgn.length ) intpgnIndex = 0;
    intpgnIndex++;
}

Answer 1

I would check the value at the index and see if it is an empty string:

$('#move1Btn').on('click', function () {
  var move = pgn[intpgnIndex];
  if (move) {
    board.move(move);
  }
})

Here is a recommended approach:

const initialState = [
  { color: 'black', type: 'king', cells: ['e8'] },
  { color: 'black', type: 'queen', cells: ['d8'] },
  { color: 'black', type: 'rook', cells: ['a8', 'h8'] },
  { color: 'black', type: 'bishop', cells: ['c8', 'f8'] },
  { color: 'black', type: 'knight', cells: ['b8', 'g8'] },
  { color: 'black', type: 'pawn', cells: ['a7', 'b7', 'c7', 'd7', 'e7', 'f7', 'g7', 'h7'] },
  { color: 'white', type: 'king', cells: ['e1'] },
  { color: 'white', type: 'queen', cells: ['d1'] },
  { color: 'white', type: 'rook', cells: ['a1', 'h1'] },
  { color: 'white', type: 'bishop', cells: ['c1', 'f1'] },
  { color: 'white', type: 'knight', cells: ['b1', 'g1'] },
  { color: 'white', type: 'pawn', cells: ['a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2'] },
];

const moveList = ['e2-e4', 'e7-e5', 'f2-f4', 'e5-f4', 'f1-c4', 'd8-h4', 'e1-f1', 'b7-b5', 'c4-b5', 'g8-f6', 'g1-f3', 'h4-h6', 'd2-d3', 'f6-h5', 'f3-h4', 'h6-g5', 'h4-f5', 'c7-c6', 'g2-g4', 'h5-f6', 'h1-g1', 'c6-b5', 'h2-h4', 'g5-g6', 'h4-h5', 'g6-g5', 'd1-f3', 'f6-g8', 'c1-f4', 'g5-f6', 'b1-c3', 'f8-c5', 'c3-d5', 'f6-b2', 'f4-d6', 'c5-g1', 'e4-e5', 'b2-a1', 'f1-e2', 'b8-a6', 'f5-g7', 'e8-d8', 'f3-f6', 'g8-f6', 'd6-e7'];

const
  $board = $('.chess-board'),
  $moveInfo = $('.move-info');
let currentIndex = 0;

const currentPlayer = () => currentIndex % 2 === 0 ? 'white' : 'black';

const generateBoard = () => {
  for (let i = 0; i < 100; i++) {
    const
      row = Math.floor(i / 10),
      col = i % 10,
      isOdd = ((row % 2 === 1) ^ (col % 2 === 0)) === 0,
      $cell = $('<div>', { class: 'cell' });
    if (row === 0 || row === 9) {
      $cell.addClass('boundry');
      if (col > 0 && col < 9) {
        $cell.attr('data-index', String.fromCharCode(97 + col - 1));
      }
    } else if (col === 0 || col === 9) {
      $cell.addClass('boundry');
      if (row > 0 && row < 9) {
        $cell.attr('data-index', 9 - row);
      }
    } else {
      const
        dr = 10 - row - 1, dc = String.fromCharCode(97 + col - 1),
        code = `${dc}${dr}`;
      $cell.attr('data-code', code).toggleClass('is-odd', isOdd);
    }
    $board.append($cell);
  }
};

const initializePieces = () => {
  initialState.forEach(({ color, type, cells }) => {
    cells.forEach(code => {
      $board
        .find(`.cell[data-code="${code}"]`)
        .attr('data-type', type)
        .attr('data-color', color);
    });
  });
};

const resetBoard = () => {
  currentIndex = 0;
  $board.find('.cell')
    .removeAttr('data-color')
    .removeAttr('data-type');
  initializePieces();
  $moveInfo.find('[data-move-index]').text('');
  $moveInfo.find('[data-move-value]').text('');
  $moveInfo.find('[data-move-atk-color]').text('');
  $moveInfo.find('[data-move-atk-type]').text('');
  $moveInfo.find('[data-move-def-color]').text('');
  $moveInfo.find('[data-move-def-type]').text('');
};

const nextMove = () => {
  let move = moveList[currentIndex];
  if (!move) {
    alert('No more moves, reseting...');
    resetBoard();
    return;
  }
  const [from, to] = move.split('-');
  const $prev = $board.find(`.cell[data-code="${from}"]`);
  const $curr = $board.find(`.cell[data-code="${to}"]`);
  const atkColor = $prev.attr('data-color');
  const atkType = $prev.attr('data-type');
  const defColor = $curr.attr('data-color') || '';
  const defType = $curr.attr('data-type') || '';
  
  $moveInfo.find('[data-move-index]').text(currentIndex + 1);
  $moveInfo.find('[data-move-value]').text(move);
  $moveInfo.find('[data-move-atk-color]').text(atkColor);
  $moveInfo.find('[data-move-atk-type]').text(atkType);
  $moveInfo.find('[data-move-def-color]').text(defColor);
  $moveInfo.find('[data-move-def-type]').text(defType);
  
  $prev.removeAttr('data-color').removeAttr('data-type');
  $curr.attr('data-color', atkColor).attr('data-type', atkType);
  currentIndex++;
};

generateBoard();
initializePieces();

$('#move-btn').on('click', nextMove);

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  background: #222;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(10, auto);
  border: thin solid LightYellow;
}

.cell {
  width: 16px;
  height: 16px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: LightYellow;
}

.cell.is-odd {
  background: LightSalmon;
}

.cell.is-active {
  color: green;
}

.cell[data-color="white"] { color: FireBrick }
.cell[data-color="black"] { color: FireBrick }

.cell[data-color="white"][data-type="king"]:after { content: "\2654" }
.cell[data-color="white"][data-type="queen"]:after { content: "\2655" }
.cell[data-color="white"][data-type="rook"]:after { content: "\2656" }
.cell[data-color="white"][data-type="bishop"]:after { content: "\2657" }
.cell[data-color="white"][data-type="knight"]:after { content: "\2658" }
.cell[data-color="white"][data-type="pawn"]:after { content: "\2659" }
.cell[data-color="black"][data-type="king"]:after { content: "\265A" }
.cell[data-color="black"][data-type="queen"]:after { content: "\265B" }
.cell[data-color="black"][data-type="rook"]:after { content: "\265C" }
.cell[data-color="black"][data-type="bishop"]:after { content: "\265D" }
.cell[data-color="black"][data-type="knight"]:after { content: "\265E" }
.cell[data-color="black"][data-type="pawn"]:after { content: "\265F" }

.cell[data-index]:after { content: attr(data-index); }

.cell.boundry { background: FireBrick; color: LightYellow; font-size: smaller; }

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 10rem;
  border: thin solid FireBrick;
  padding: 0.5rem;
  background: LightYellow;
}

.move-info {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.25rem;
  font-family: monospace;
  font-size: smaller;
  text-transform: uppercase;
}

.move-info strong { text-align: right; }
.move-info strong:after { content: ":"; }

.move-info .details { display: flex; gap: 0.25rem; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chess-board"></div>
<div class="sidebar">
  <div class="move-info">
    <strong>Move</strong>
    <div class="details">
      <span data-move-index></span>
      <span data-move-value></span>
    </div>
    <strong>Attacker</strong>
    <div class="details">
      <span data-move-atk-color></span>
      <span data-move-atk-type></span>
    </div>
    <strong>Defender</strong>
    <div class="details">
      <span data-move-def-color></span>
      <span data-move-def-type></span>
    </div>
  </div>
  <button id="move-btn">Next</button>
</div>