search

lichess-org / chessground

Mobile/Web chess UI for lichess.org
https://lichess.org
GNU General Public License v3.0
1.02k stars 262 forks source link

Promotion animation is lagging (chessground and lichess.org) #240

Open elsiniestra opened 1 year ago

elsiniestra commented 1 year ago

When you try to promote a pawn to the last rank and create a new piece, the animation does not work correctly. I guess it should be the same as the smooth capture animation, but instead, it transfers to the destination in a moment, and the ghost piece (captured opponent piece or just a pawn that moved) fades with a lag effect. This issue is suitable either for lichess.org or chessground.js. Tested on Chrome and Safari (PC and mobile).

https://user-images.githubusercontent.com/54453888/196316976-e4d5ae2d-c5d5-4f36-ba5b-9b027b821181.mov

thinktt commented 1 year ago

I fixed this by turning off animation right before promotion and turning it on again right after. 

cg.set({ animation: { enabled: false} })
// do promotion stuff
cg.set({ animation: { enabled: true } })

When I did this it pretty much mimics how the board is working on lichess when you promote.

Unrelated question... you have the promotion overlay here? I couldn't figure out how to do this in the library itself so I rebuilt it myself. Is the promotion overlay actually in this library?

elsiniestra commented 1 year ago

When I did this it pretty much mimics how the board is working on lichess when you promote.

I don't know how and where you're testing it, but this exact bug I recorded on lichess.org, not my own board. I checked this now again and it still has the same lag on the website.

you have the promotion overlay here? I couldn't figure out how to do this in the library itself so I rebuilt it myself. Is the promotion overlay actually in this library?

Speaking of this, I do believe I was finding smth in the library since I also rewrote pretty heavily the source library but cannot say that I'm sure about it because I did put off my project for the last 1.5 months

elsiniestra commented 1 year ago

@thinktt yep, this approach did remove the lag, but, since I have the arrow bindings for the move navigation, it looks pretty bizarre when all the moves perform smoothly and then happens non-animated promotion, so I'm still looking for a more good-looking/user-friendly approach. The way chess.com handles it is pretty fine but I didn't make it to find out how to realize the same approach for the chessground

thinktt commented 1 year ago

I went back and looked, I was testing on the analysis board. I was able to play around with it and see the ghosting effect you mentioned.

When I was actually using Chesground it was giving me some extra funky animations so I just played with the animation until it at least wasn't distracting for me. Now I'm curious how chess.com does it. I'll take a look.

thinktt commented 1 year ago

@capitalistelite So I looked at how chess.com does it. This is what I saw.

  1. At the point of promotion they turn off the animation completely (the pawn never moves to the square it just disappears and the promotion box appears).
  2. When replaying the move the piece changes into its promotion and then moves to the square as if capturing.

I think I might be able to recreate both of those effects using the chess ground interface as is. I might try it and if I get it working I'll let you know.

elsiniestra commented 1 year ago

@thinktt thank you, I'll appreciate it a lot!

elsiniestra commented 1 year ago

@thinktt Hello! I'd like to know have you tried the method you talked about to recreate those effects? If yes, and you did not get it working, can you share what exactly your idea was? Maybe based on the info, I might try to do my own research on this

Hugos68 commented 1 year ago

I have the same issue here on promotion its a bit buggy

thinktt commented 1 year ago

Howdy @capitalistelite

So I got bogged down with my project and didn't really have any time to look into it, and right now I've moved on to something else at the moment... however I just looked at it and created a gist of kind of what I'm doing. I don't know if it'll be helpful, as it's not really complete, but take a look and maybe it'll give you an idea.

https://gist.github.com/thinktt/5b1d5933755c45dce152178f73a94696

The main thing to play with is, in the Chess Ground config is { movable: { events: { after: onMove } } }

Create an onMove function then test for promotions, then play around with turning the animation on and off on the board, then updating it however you want to.

I hope that's helpful, maybe I can give more details later or if you have a question I'll try and explain more at some point.