Animation on collection change

help
1

Im building a chess game in meteor

The pieces are moved my changing the collection of pieces to their new location on each move. Is there a way to animate this movement in meteor?

Perhaps having it recognize the collection change and delay the change to allow for an animation running before hand?

2

You could use: https://docs.meteor.com/api/collections.html#Mongo-Cursor-observeChanges

In the changed(id, fields) method you can initiate your move.

Board = class Board {
  constuctor() {
    this.pieces = [];
  }

  addPiece(piece) {
    this.pieces[] = piece;
  }

  movePiece(_id, x, y) {
    if(x) {
      console.log('piece ' + _id + ' has move on x-axis to: ' + x + ' so animate');
    }
    if(y) {
      console.log('piece ' + _id + ' has move on x-axis to: ' + x + ' so animate');
    }
  }

  renderBoard() {
    this.pieces.forEach((piece) {
      console.log('piece (' + piece._id + '): ' + piece.x + '.' + piece.y + ' = name');
    })
  }
}

let myGame = new Board();

var query = Pieces.find({});
var handle = query.observeChanges({
  added: function (id, piece) {
    myGame.addPiece(piece);
  },
  changed: function (id, fields) {
    myGame.movePiece(_id, fields.x || null, fields.y || null);
  }
});

myGame.renderBoard();