search

shaack / cm-chessboard

A JavaScript chessboard without dependencies. Rendered in SVG, coded in ES6. Views FEN, handles move input, animated, responsive, expandable
MIT License
209 stars 63 forks source link

Highlight square #122

Closed blasco closed 12 months ago

blasco commented 1 year ago

Hi, is there a way to highlight squares in different colors? I've tested markers but it's not the same I think, maybe I'm missing a way to use them.

actor10 commented 1 year ago

I needed to color squares red and green. I added these two classes to the end of the markers.css

  .cm-chessboard .markers .marker.bad-square {
      fill: #ff0000;
      opacity: 1.0; 
  }
  .cm-chessboard .markers .marker.good-square {
      fill: #7CFC00;
      opacity: 1.0; 
 }

Then, for each "square" I would const useClass = (isBad) ? "bad-square" : "good-square" const myOwnMarker = {class: useClass, slice: "markerSquare"} chessboard.addMarker(myOwnMarker,square)

shaack commented 1 year ago

I would recommend to define two markers for this:

const goodMarker =  {class:  "good-square", slice: "markerSquare"}
const badMarker =  {class:  "bad-square", slice: "markerSquare"}

If you do so, you can also remove markers.

chessboard.removeMarkers(goodMarker)
chessboard.addMarker(goodMarker, square)
chessboard.addMarker(badMarker, square)