gbtami / pychess-variants

Chess variant server
https://www.pychess.org
GNU Affero General Public License v3.0
232 stars 112 forks source link

Janggi: animate pass move #315

Open gbtami opened 3 years ago

gbtami commented 3 years ago

https://discord.com/channels/634298688663191582/693434760852406322/742133741421330514

randompearl-stack commented 2 months ago
pieceflip {
  translate: scaleX(-1);
  transition: 500ms ease-in-out;
}

Add the class to the piece element on pass click and then remove the class after the animation finishes.

gbtami commented 2 months ago

Good idea! Thx for the css snippet. Unfortunately adding class to the piece can't work because it already has another transform directive, and multiple transform can work in one line only.

But it may work at https://github.com/gbtami/pychess-variants/blob/master/client/roundCtrl.ts#L835 after const lastMove = uci2LastMove(msg.lastMove);

something like:

        // Add flip css to pass move piece
        if (lastMove[0] == lastMove[1]) {
            const flipColor = (this.turnColor == 'white') ? 'black' : 'white';
            const piece = document.querySelector(`piece.${flipColor}.k-piece`) as HTMLElement;
            piece.style.transform = piece.style.transform + ' scaleX(-1)'
            piece.style.transition = '200ms ease-in-out'
        }

Somewhere later this should be removed of course as well.