+ container.appendChild(movingPiece);
+ const animateSegment = (index, cb) => {
+ // NOTE: move.drag could be generalized per-segment (usage?)
+ const [i1, j1] = segments[index][0];
+ const [i2, j2] = 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);
+ };
+ let index = 0;
+ const animateSegmentCallback = () => {
+ if (index < segments.length)
+ animateSegment(index++, animateSegmentCallback);
+ else {
+ movingPiece.remove();
+ initPiece.style.opacity = "1";
+ cb();
+ }
+ };
+ animateSegmentCallback();
+ }
+
+ // Input array of objects with at least fields x,y (e.g. PiPo)
+ animateFading(arr, cb) {
+ const animLength = 350; //TODO: 350ms? More? Less?
+ arr.forEach(v => {
+ let fadingPiece = this.getDomPiece(v.x, v.y);
+ fadingPiece.style.transitionDuration = (animLength / 1000) + "s";
+ fadingPiece.style.opacity = "0";
+ });
+ setTimeout(cb, animLength);