Hacker News

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

19 pointsspankalee posted 2 months ago3 Comments
3 Comments:
zzo38computer said 2 months ago:

I 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 said 2 months ago:

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

said 2 months ago:
[deleted]