change

The change event fires when the board position changes.

HTML

<chess-board
    style="width: 400px"
    position="start"
    draggable-pieces>
</chess-board>

<button id="ruyLopezBtn">Ruy Lopez</button>
<button id="startPositionBtn">Start Position</button>

JavaScript

const board = document.querySelector('chess-board');

board.addEventListener('change', (e) => {
  const {value, oldValue} = e.detail;
  console.log('Position changed:');
  console.log('Old position: ' + objToFen(oldValue));
  console.log('New position: ' + objToFen(value));
  console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');
});

document.querySelector('#ruyLopezBtn').addEventListener('click', () => {
  const ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
  board.setPosition(ruyLopez);
});

document.querySelector('#startPositionBtn').addEventListener('click', () => {
  board.start();
});