- 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?)
+ 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);
+
+console.log(dep,arr); //TODO: this seems right, but translations don't work well.
+
+ // 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]]