how to undo and redo chess moves using chessboard.js for analyze mode

Question

I am using the chess.js and chessboard.js for my chess a project.

I just want to implement the undo and redo functionality of chess moves.

I am creating "Move Recorder" for chess moves using chessboard.js, through which users can undo and redo chess moves. User is playing from both sides to analyze chess puzzle.

Please let me know if any one can help on this.

only weak players take moves back, and only fools let opponents do so. — dandavis, Jun 23 '14 at 18:15

score 3 · Answer 1 · answered Dec 04 '16 at 14:15

Typically the game logic, validation and move history recording, aren't done with chessboard.js but with an engine, such as chess.js.

With an engine there might be an undo() or takeback() function, see the chess.js docs for an example:

chess.move('e4');
chess.fen();
// -> 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1'

chess.undo();
// -> { color: 'w', from: 'e2', to: 'e4', flags: 'b', piece: 'p', san: 'e4' }
chess.fen();
// -> 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'

There is also an open branch at chess.js, https://github.com/jhlywa/chess.js/pull/48

this code implements next() and back() functions into the engine, (and a future array for storing the history). These might be what you're looking for, because after you undo, you mention you want to redo.

This branch isn't merged, and I don't think it will be, but it's there to look at; basically just add these two functions:

back: function() {
  var moves = this.history();
  var tmp = new Chess();
  var previous = moves.length-future.length-1;
  for(var i=0;i<previous;i++) {
    tmp.move(moves[i]);
  }
  var previous_fen = tmp.fen();
  tmp.move(moves[previous]);
  future.push(tmp.fen());
  return previous_fen;
},

next: function() {
  return future.pop();
},

and an array

var future = [];

Then you can call back(), analyze the position, and then next() to return to the game state.

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

Start here for the basic design. data structure used to implement UNDO and REDO option

And I presume there are methods in this framework to keep track of the commands you'll need for designated past actions.

Hope that helps!

edited May 23 '17 at 11:53

Community

1
1

answered Jun 23 '14 at 17:47

ecMode

530
3
16

how to undo and redo chess moves using chessboard.js for analyze mode

2 Answers2