Arrows extension

[blasco]

Hi, I'm trying to use the arrow extension, but it's failing due to props not being defined:

from Arrows.js

if (props.sprite) {
            Object.assign(this.props.sprite, props.sprite)
}

How is this props set? and what should it be its value, is there a default one? This is how I'm setting up the chessboard:

    const config = {
      sprite: {
        url: 'assets/chess/images/chessboard-sprite.svg',
      },
      extensions: [
         { class: Markers },
         { class: Arrows }
      ],
      responsive: true,
    };
    this.chessboard = new Chessboard(this.chessboardElement, config);

Markers are working fine, but no luck with arrows. Thank you for your support!

[actor10]

I use arrows but don't have a "sprite" in my config.

[blasco]

I tried removing the sprite from my config and it doens't work either. This:

    const config = {
      // sprite: {
      //   url: 'assets/chess/images/chessboard-sprite.svg',
      // },
      extensions: [
         { class: Markers },
         { class: Arrows }
      ],
      responsive: true,
    };
    this.chessboard = new Chessboard(this.chessboardElement, config);

breaks in the same way:

[blasco]

I think the error is in the code, that it does not checks if arrow's props is undefined. I'm trying to see how to pass an empty object to props so that it will pass

[blasco]

Yes, the following works:

    const config = {
      sprite: {
        url: 'assets/chess/images/chessboard-sprite.svg',
      },
      extensions: [
         { class: Markers },
         { class: Arrows, props: {
            sprite: {
                //url: "./assets/images/chessboard-arrows.svg",
                size: 40,
                cache: true
            },
         } }
      ],
      responsive: true,
    };
    this.chessboard = new Chessboard(this.chessboardElement, config);

[shaack]

Hi, because it is working in this example, with the following code, without Arrows properties,

const chessboard = new Chessboard(document.getElementById("board"), {
    position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
    assetsUrl: "../../assets/",
    extensions: [{class: Arrows}]
})

I think you just forgot to set the assetsUrl. This property is important because the assets, also of extensions, are searched in this folder first.

[blasco]

you are right, I´m not using assetsUrl. Thank you!

[shaack]

It also looks like you are using an older version of cm-chessboard, because this code

if (props.sprite) {
    Object.assign(this.props.sprite, props.sprite)
}

is not part of the current version of the Arrows extension.

[blasco]

Things go fast hehe my version is from 2 months ago I think , will try to update