X-Chessboard: HTML5 Web Component

A few months ago I blogged about a fun experiment, explaining the creation of animated 3D chessboard and pieces with CSS3 and UTF characters only. Following my recent excitement and play with HTML5 Web Components I reused the CSS from the example and extended it to a custom tag, which when used as a simple HTML and without any JavaScript:

<acidjs-xchessboard id="xchessboard-01" boxsize="64">
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "c3"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
    [...]
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "f7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "g7"}'></acidjs-xchessboard-piece>
    <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "h5"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Produces this beautiful chessboard:

x-chessboard

Using it, you may define as many pieces as you need, and you can also specify their type, color and position on the board, using the data-bind attribute of the <acidjs-xchessboard-piece></acidjs-xchessboard-piece> tag:

{
    "type":"pawn",
    "color":"black",
    "position": "h5"
}

As usual – here’s the link to the demo, the code and the download, and on my HTML5, CSS3 and JavaScript Experiments and Insight website there’s a lot of other stuff that you may find useful.

Cheers and until later! See you on Twitter!

Advertisements

One comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s