Editing default dashed move highlighter

[JonL12345]

The dashed box around the piece appears on the square where I click the piece and the square I move it to.

How can I:

a) Change the dashed style for the first square clicked?

b) Change the dashed style for the marker that points to the destination square (if that makes sense!)?

[shaack]

You can change the markers, as described in https://github.com/shaack/cm-chessboard/blob/master/README.md#create-your-own-custom-markers "Create your own custom markers". It is about editing the svg sprite. You could use the callbacks of chessboard.enableMoveInput to set additional markers.

And I think @LandonSchropp has done exactly what you want to accomplish, if you look at his screen recordings in ticket https://github.com/shaack/cm-chessboard/issues/39

@LandonSchropp I also wanted to ask you, how you did this. Did you deactivate the default markers somehow?

[JonL12345]

I thought Landon's video was of chessboardjs, but I could be wrong.

I've already managed to work out how to highlight some squares. But I'm struggling to find where the box image below comes from.

Which file is that from? Not sure if I should be looking in the svg or in the css files.

[LandonSchropp]

Nope, my video is using cm-chessboard.

It's been a little while, so I'm not sure I remember 100% how I did this, but I think it's coming from this portion of my code:

function markerSlice(type) {
  switch (type) {
    case LEGAL_MOVE_MARKER:
      return "dot";
    case CHECK_MARKER:
      return "outlined-square";
    default:
      return "square";
  }
}

function addMarker(cmChessboard, square, type) {
  if (_.isNil(square)) {
    return;
  }
  cmChessboard.addMarker(
    square,
    {
      "class": classNames(
        `chessboard__marker--${ type }`,
        `chessboard__marker--${ squareColor(square) === DARK_SQUARE ? "dark" : "light" }`
      ),
      slice: markerSlice(type)
    }
  );
}

// ...

cmChessboard.removeMarkers();
verboseMarkers.map(({ square, type }) => addMarker(cmChessboard, square, type));

I believe the second to last line is what's doing it. My app uses some custom movement by a bot, so I needed a little more control over the markers. I keep track of the select square and highlight that. I don't display a marker to highlight the current hovered square.

I'm happy to provide more context if it'd be helpful. 🙂

[JonL12345]

Hey @LandonSchropp, thanks for that! I assumed you were using chessboardjs because you had a video showing the dots of possible squares for the piece and that was in chessboardjs. I will look into your code above to see if I can understand it and apply some of it to my app.

[JonL12345]

Ok, I've solved it. I edited marker1 in the svg file to this:

        <g id="marker1" transform="translate(1.5000, 1.500000)" fill="#000000" fill-opacity="0.2" >
            <rect  width="37" height="37"
        stroke="yellow" stroke-width="3" stroke-opacity="1"  />
        </g>

[shaack]

Nice, but with "marker1", i see, that you have an outdated version of cm-chessboard. It should be named "markerFrame" in version 3.11.0. I think, for me it would be a good idea to make the marker in the props configureable, to change the marker style more easy.

[JonL12345]

Do you have somewhere that lists the changes between each version?

[shaack]

With version 3.12.0 I modified the validate move example to show how you can change the markers completely: https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html

You find the version-number in the package.json "version": "3.12.0"

[LandonSchropp]

@JonL12345 I ran into the same problem with mine using marker1 (#36). 🙂

[JonL12345]

Thanks for the update. It would be good if there was a log showing a history of changes (going forwards). I've updated some bits of code and if I upgrade, I am nervous about what gets kicked out. If I knew what each update did, I could then decide if it is worth it.

[shaack]

Yeah, thats right. A change log would be nice and I'll be a little more careful not to do API or naming changes in the future.

[JonL12345]

A Roadmap!

[shaack]

I think this ticket is resolved. Thanks to all for the recommendations.