- else
- startCoords = [i1, j1];
- const r = chessboard.getBoundingClientRect();
- const arrival = this.getPixelPosition(i2, j2, r); //TODO: arrival on drop?
- let rs = [0, 0];
- if (dropMove)
- rs = this.getReserveShift(i1, j1, r);
- const distance =
- Math.sqrt((startCoords[0] - i2) ** 2 + (startCoords[1] - j2) ** 2);
- const maxDist = Math.sqrt((this.size.x - 1)** 2 + (this.size.y - 1) ** 2);
- const multFact = (distance - 1) / (maxDist - 1); //1 == minDist
- const duration = 0.2 + multFact * 0.3;
- const initTransform = startPiece.style.transform;
- startPiece.style.transform =
- `translate(${arrival[0] + rs[0]}px, ${arrival[1] + rs[1]}px)`;
- startPiece.style.transitionDuration = duration + "s";
- setTimeout(
- () => {
- if (clonePiece) {
- if (this.options["rifle"])
- startArray[i1][j1].style.opacity = "1";
- startPiece.remove();
- }
+ const animateSegment = (index, cb) => {
+ 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);
+ // Start from i1, j1:
+ movingPiece.style.transform =
+ `translate(${dep[0] - ix}px, ${dep[1] - iy}px)`;
+ movingPiece.style.transitionDuration = "0s";
+ const distance =
+ Math.sqrt((arr[0] - dep[0]) ** 2 + (arr[1] - dep[1]) ** 2);
+ const duration = 0.2 + (distance / maxDist) * 0.3;
+ movingPiece.style.transform =
+ `translate(${arr[0] - dep[0]}px, ${arr[1] - dep[1]}px)`;
+ movingPiece.style.transitionDuration = duration + "s";
+ setTimeout(cb, duration * 1000);
+ };
+ if (!move.segments)
+ move.segments = [[move.start.x, move.start.y], [move.end.x, move.end.y]];
+ let index = 0;
+ animateSegment(index, () => {
+ if (index < move.segments.length)
+ animateSegment(++index);
+ else {
+ if (move.drag)
+ movingPiece.remove();