- const [i2, j2] = [move.end.x, move.end.y];
- let startCoords;
- if (dropMove) {
- startCoords = [
- i1 == this.playerColor ? this.size.x : 0,
- this.size.y / 2 //not trying to be accurate here... (TODO?)
+ container.appendChild(movingPiece);
+ const animateSegment = (index, cb) => {
+ // NOTE: move.drag could be generalized per-segment (usage?)
+ const [i1, j1] = move.segments[index][0];
+ const [i2, j2] = move.segments[index][1];
+ const dep = this.getPixelPosition(i1, j1, r);
+ const arr = this.getPixelPosition(i2, j2, r);
+ movingPiece.style.transitionDuration = "0s";
+ movingPiece.style.transform = `translate(${dep[0]}px, ${dep[1]}px)`;
+ const distance =
+ Math.sqrt((arr[0] - dep[0]) ** 2 + (arr[1] - dep[1]) ** 2);
+ const duration = 0.2 + (distance / maxDist) * 0.3;
+ // TODO: unclear why we need this new delay below:
+ setTimeout(() => {
+ movingPiece.style.transitionDuration = duration + "s";
+ // movingPiece is child of container: no need to adjust coordinates
+ movingPiece.style.transform = `translate(${arr[0]}px, ${arr[1]}px)`;
+ setTimeout(cb, duration * 1000);
+ }, 50);
+ };
+ if (!move.segments) {
+ move.segments = [
+ [[move.start.x, move.start.y], [move.end.x, move.end.y]]