I am looking to highlight the old move and the new move in chessboard.js, Basically anyone should know what the opponent has moved to and from which position.
Regardless of the backend chess engine you're using, I image you have access to the two coordinates, something like e2
and e4
source and target:
The docs have a great example (with jquery): http://chessboardjs.com/examples#5004
Otherwise, here is the code for highlighting the square an player moves onto in vanilla Javascript
First define the CSS, see the chess stackexchange for a more complete example: https://chess.stackexchange.com/questions/15265/how-to-highlight-current-and-previous-move-of-the-player-in-chessboard-js:
.highlight {
-webkit-box-shadow: inset 0 0 3px 3px green;
-moz-box-shadow: inset 0 0 3px 3px green;
box-shadow: inset 0 0 3px 3px green;
}
So, for example, clear all the other highlights you've done (see Remove CSS class from element with JavaScript (no jQuery)):
var hl = document.getElementsByClassName("highlight");
if (hl[0] != undefined) {
hl[0].className = hl[0].className.replace(/\bhighlight\b/g,'');
}
and find the square which a player moves onto and add the highlight
class:
// I'm assuming you have a data object with target field
var sq = document.getElementsByClassName("square-" + data.target);
sq[0].className += " highlight"; // Remember to add a space before
There is a bit more code to write in order to implement the source square, and differentiate Black and White; but it'll be along these lines.