3 ms·
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
- zzo38computer 7y agoI would want to be able to see the FEN string and move list even if document scripts and CSS are disabled, or if the client software does not implement some feature it uses. (I have now written a document about <widget> and <widgetset> elements (and some extensions for <script> and <noscript>) which contains a specification for how such things should be done, and the implementation could be made to support this.)
- spankalee 7y agoYou can include whatever content you want inside the tag. When the component is defined, that content won't render (the shadow root doesn't have any <slot>s). When the component is undefined it will. It's very similar to <script> / <noscript> in some ways.
- deleted 7y ago[deleted]