Search code examples
javascriptchesschessboard.js

How to change the start position in Chessboard.js?


I am using the code given in the website https://chessboardjs.com/examples#5000. Here, when I try to change the start position in the config, all the pieces snap back to the intial position when any piece is moved. I also tried using game.load('fen'), but it gives the same result. Any help regarding this would be greatly appreciated.

I want to change the starting position, like in the cases of puzzles where only some pieces are there but all the usual chess rules are followed.

I tried using game.load('fen') and also change the 'position' in 'configs'.


Solution

  • I figured this out later myself. The problem is that chessboard.js and chess.js use different types of FENs. In chessboard.js, the FEN is simply

    'rnbqkbnr/ppp1pppp/8/3p4/4P3/8/PPPP1PPP/RNBQKBNR'

    whereas in chess.js, there are additional elements at the end: 'rnbqkbnr/ppp1pppp/8/3p4/4P3/8/PPPP1PPP/RNBQKBNR w KQkq d6 0 2'

    To achieve the desired result, change the position in the configs to the chessboard.js one

    var config = {
                    draggable: true,
                    position: 'rnbqkbnr/ppp1pppp/8/3p4/4P3/8/PPPP1PPP/RNBQKBNR',
                    onDragStart: onDragStart,
                    onDrop: onDrop,
                    onSnapEnd: onSnapEnd
                }
    

    and load the chess.js board with its own FEN

    var game = new Chess()
    game.load('rnbqkbnr/ppp1pppp/8/3p4/4P3/8/PPPP1PPP/RNBQKBNR w KQkq d6 0 2')
    

    I hope this solution helps someone in the future!