shaack / cm-chessboard

A JavaScript chessboard without dependencies. Rendered in SVG, coded in ES6. Views FEN, handles move input, animated, responsive, expandable
MIT License
216 stars 68 forks source link

unable to change board orientation after initial setup #87

Closed vesper8 closed 2 years ago

vesper8 commented 2 years ago

I just noticed that if I initialize a new board and set the orientation to w, after the board has been set up if I try to now change the orientation to b, it does flip the board and show it from the perspective of black, however board.getOrientation() still returns w

So this seems to be a bug.. since it does flip the board as you'd expect but does not change the return value of getOrientation()

shaack commented 2 years ago

In that case, the code of the demo page at https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html would not work:

board.setOrientation(board.getOrientation() === 'w' ? 'b' : 'w', animated)

I think you are just not considering that setOrientation is asynchronous. Correct?

vesper8 commented 2 years ago

Hrmm... I guess that's what is throwing me off.

I made this very basic demo (in Vue) and indeed... the last console.log that's inside the setTimeout does return black, whereas the one immediately underneath the setOrientation does not


<template>
  <div id="cm-chessboard" />
</template>

<script>
import { Chessboard, COLOR } from 'cm-chessboard';
import { FEN } from '~/cm-chessboard/src/cm-chessboard/model/Position.js';

export default {
  mounted() {
    const boardConfig = {
      position: FEN.start,
      orientation: COLOR.white,
      sprite: {
        url: '/images/chessboard-sprite.svg',
      },
    };

    const chessboard = new Chessboard(document.getElementById('cm-chessboard'), boardConfig);

    console.log(`Board orientation: ${chessboard.getOrientation()}`);

    chessboard.setOrientation(COLOR.black);

    console.log(`Board orientation: ${chessboard.getOrientation()}`);

    setTimeout(() => {
      console.log(`Board orientation: ${chessboard.getOrientation()}`);
    }, 1000);
  },
};
</script>

<style>
@import '@/assets/styles/cm-chessboard.css';
@import '@/assets/styles/cm-chessboard-themes.css';
</style>

How do you suggest I deal with this? Adding an artificial timeout is not pretty.. would it be possible to make the call to setOrientation not asynchronous?

Or could I handle this with a promise? To be honest promises are not my forte.

vesper8 commented 2 years ago

Can I just add that.. I think having setOrientation be asynchronous by default does not make a whole lot of sense to me.. I think it would be more intuitive if it wasn't... What's the reasoning here? This is one of those calls that should be pretty much instantaneous every time even if it was synchronous no?

shaack commented 2 years ago

setPosition and setPiece are also asynchronous because they all are put into a queue of animations. In short, this means these functions must be asynchronous. For example you can not turn the board, while a setPosition animation is running. therefor we have to wait for the animation has finished to turn the board. That's asynchronous.