Show HN: A <chess-board> HTML element for any web page or app
Hello HN,
For a few months I'm been working on a fun side-project to port the (awesome) chessboardjs library to an easily reusable and embeddable web component. The quarantine has finally spurred me to put the finishing touches on it.
https://justinfagnani.github.io/chessboard-element/
It works in plain HTML files just by writing an HTML tag:
<chess-board></chess-board>
And it works in any framework because it's just an HTML element.Styling is encapsulated and customizable with CSS properties and parts:
chess-board {
--dark-color: darkmagenta;
}
/* Highlight the e2 square in red */
chess-board::part(e2) {
box-shadow: inset 0 0 3px 3px red;
}
I hope it's useful or fun for anyone who wants to do chess things on the web. You can try it out in plain HTML here:https://jsbin.com/jajijab/2/edit?html,output
Or in a React app here:
https://stackblitz.com/edit/react-chess-board
2 Comments:
Comment loading...