Demo example doesn't work

[Allirey]

I thought that was mistake in my code, but then I try to run example from this repository and got same error, problem with "movable" props, something wrong with dests key

[morganpstanley]

As niklasf points out here, dests is supposed to be a map instead of an object. Replace the calcMovable function with this code and it should work:

const calcMovable = () => {
      const dests = new Map()
      chess.SQUARES.forEach(s => {
        const ms = chess.moves({ square: s, verbose: true })
        if (ms.length) dests.set(s, ms.map(m => m.to))
      })
      return {
        free: false,
        dests,
        color: "white"
      }
}

[Allirey]

const calcMovable = () => {
      const dests = new Map()
      chess.SQUARES.forEach(s => {
        const ms = chess.moves({ square: s, verbose: true })
        if (ms.length) dests.set(s, ms.map(m => m.to))
      })
      return {
        free: false,
        dests,
        color: "white"
      }
}

This work, thanks. I thought map shouldn't work, because movable props has object type.
Anyway, example demo code should be corrected.

[morganpstanley]

I went ahead and created pull request #37.

[MichaelLeeHobbs]

The 1.5 build of react-chessground uses chessground ^7.6.12 which has some bugs where dests is expected to be a Map in some cases and a POJO in others. I was able to work around this issue with the following code. I've left my debugging code in.

    const onAction = (action) => (data) => {
        console.log(`${action}`, data)
    }
    const calcMovable = () => {
        const dests = new Map()
        chess.SQUARES.forEach(s => {
            const ms = chess.moves({square: s, verbose: true})
            if (ms.length) dests.set(s, ms.map(m => m.to))
        })
        const destsObj = {}
        dests.forEach((v,k)=>destsObj[k]=v)
        destsObj.get = (k) => destsObj[k]
        console.log('destsObj', destsObj)
        const config = {
            free: false,
            dests: destsObj,
            color: "white",
            events: {
                after: onAction('cg.events(move).after'),
                afterNewPiece: onAction('cg.events(move).afterNewPiece'),
            }
        }
        console.log('calcMovable', config)
        return config
    }