search

oakmac / chessboardjs

JavaScript chessboard
https://chessboardjs.com
MIT License
2k stars 406 forks source link

Highlight when check #207

Closed william-song-shy closed 3 years ago

william-song-shy commented 3 years ago

In some website like lichess etc.,the king will be highlight if it is being checked.Do you have this feature here? I'm a chinese so maybe it is a little difficult to undeerstand what I said.Please understand.

pablorodriguez-paraport commented 3 years ago

Hi @william-song-shy! I don't think chessboard.js has a built-in feature to highlight a check. The library only renders the board and the pieces, it doesn't actually know the rules of chess. It can be integrated with chess.js to identify the check and, from the chessboard.js examples, there are ways to highlight board squares and pieces. So, in combination, you can get the desired result. Unfortunately, I don't have a working code to share. I hope this helps!

william-song-shy commented 3 years ago

Hi @william-song-shy! I don't think chessboard.js has a built-in feature to highlight a check. The library only renders the board and the pieces, it doesn't actually know the rules of chess. It can be integrated with chess.js to identify the check and, from the chessboard.js examples, there are ways to highlight board squares and pieces. So, in combination, you can get the desired result. Unfortunately, I don't have a working code to share. I hope this helps!

Thanks for your advice ! I wonder know how to highlight the piece to show it's being checked like that image .

oakmac commented 3 years ago

This is possible using CSS with a [radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()) on the square where the King is located.

william-song-shy commented 3 years ago

This is possible using CSS with a [radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()) on the square where the King is located.

May be.I wonder know will it be a built-in feature in the future?