Orientation

Use the orientation method to retrieve and set the orientation. Use the flip method to flip orientation.

HTML

<chess-board
    style="width: 400px"
    position="r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R">
</chess-board>

<button id="showOrientationBtn">Show orientation in console</button>
<button id="flipOrientationBtn">Flip orientation</button>
<br />
<button id="whiteOrientationBtn">White orientation</button>
<button id="blackOrientationBtn">Black orientation</button>

JavaScript

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

document.querySelector('#showOrientationBtn').addEventListener('click', () => {
  console.log('Board orientation is: ' + board.orientation);
});

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

document.querySelector('#whiteOrientationBtn').addEventListener('click', () => {
  board.orientation = 'white';
});

document.querySelector('#blackOrientationBtn').addEventListener('click', () => {
  board.orientation = 'black';
});