HTML

This chessboard responds to the rewind and fast forward commands along with flipping the orientation of the board.

<script>
  document.addEventListener('keydown', (event) => {
    event.preventDefault();
  });
  document.addEventListener('keyup', (event) => {
    event.preventDefault();
    if (event.code === 'KeyF') {
      document.querySelector('hexchess-board').flip();
    } else if (event.code === 'ArrowRight') {
      document.querySelector('hexchess-board').fastForward();
    } else if (event.code === 'ArrowLeft') {
      document.querySelector('hexchess-board').rewind();
    } else if (event.code === 'ArrowUp') {
      document.querySelector('hexchess-board').rewindAll();
    } else if (event.code === 'ArrowDown') {
      document.querySelector('hexchess-board').fastForwardAll();
    }
  });
</script>
<div style="width: 100vw; height: 100vh">
  <hexchess-board
    id="hexchess-board"
    board="start"
    orientation="white"
  ></hexchess-board>
</div>