Editing default dashed move highlighter about cm-chessboard HOT 13 CLOSED

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.

from cm-chessboard.

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 #39

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

from cm-chessboard.

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.

from cm-chessboard.

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. 🙂

from cm-chessboard.

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.

from cm-chessboard.

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>

from cm-chessboard.

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.

from cm-chessboard.

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

from cm-chessboard.

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"

from cm-chessboard.

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

from cm-chessboard.

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.

from cm-chessboard.

A Roadmap!

from cm-chessboard.

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

from cm-chessboard.