HTML5, CSS3 & JS Experiments

By Martin Ivanov

Chessboard

AcidJs.XChessboard is a fun experiment with HTML5 Web Components, based on my Pure CSS 3D Animated Chessboard Experiment, but now implemented as a custom HTML tag:

<acidjs-xchessboard>
    <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "a1"}'></acidjs-xchessboard-piece>
</acidjs-xchessboard>

Demo

Board 1

Board 2

Board 3

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XChessboard/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XChessboard/classes/XChessboard.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <h4>Board 1</h4>
            
            <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":"queen", "color":"white", "position": "d1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"king", "color":"white", "position": "e1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "f1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "g1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "h1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "a2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "b4"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "c5"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "d2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "e2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "f2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "g2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "h2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"black", "position": "a8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"black", "position": "b8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"black", "position": "c8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"queen", "color":"black", "position": "d8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"king", "color":"black", "position": "e8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"black", "position": "f8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"black", "position": "f6"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"black", "position": "h6"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "a7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "b7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "c7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "d7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "e7"}'></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>
            
            <h4>Board 2</h4>
            
            <acidjs-xchessboard id="xchessboard-02" 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": "b1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "c1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"queen", "color":"white", "position": "d1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"king", "color":"white", "position": "e1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"white", "position": "f1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"white", "position": "g1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"white", "position": "h1"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "a2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "b2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "c2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "d2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "e2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "f2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "g2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"white", "position": "h2"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"black", "position": "a8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"black", "position": "b8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"black", "position": "c8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"queen", "color":"black", "position": "d8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"king", "color":"black", "position": "e8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"bishop", "color":"black", "position": "f8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"knight", "color":"black", "position": "g8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"rook", "color":"black", "position": "h8"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "a7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "b7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "c7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "d7"}'></acidjs-xchessboard-piece>
                <acidjs-xchessboard-piece data-bind='{"type":"pawn", "color":"black", "position": "e7"}'></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": "h7"}'></acidjs-xchessboard-piece>
            </acidjs-xchessboard>
            
            <h4>Board 3</h4>
            
            <acidjs-xchessboard id="xchessboard-03" boxsize="64"></acidjs-xchessboard>

/*
 * X-Chessboard HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

acidjs-xchessboard,
acidjs-xchessboard *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

acidjs-xchessboard li:nth-child(-2n+8), 
acidjs-xchessboard li:nth-child(8) ~ li:nth-child(-2n+15), 
acidjs-xchessboard li:nth-child(16) ~ li:nth-child(-2n+24),
acidjs-xchessboard li:nth-child(24) ~ li:nth-child(-2n+31),
acidjs-xchessboard li:nth-child(32) ~ li:nth-child(-2n+40),
acidjs-xchessboard li:nth-child(40) ~ li:nth-child(-2n+47),
acidjs-xchessboard li:nth-child(48) ~ li:nth-child(-2n+56),
acidjs-xchessboard li:nth-child(56) ~ li:nth-child(-2n+63)
{
    background-color: #2f343a;
}

acidjs-xchessboard,
acidjs-xchessboard ul
{
    display: inline-block;
}

acidjs-xchessboard *
{
    margin: 0;
    padding: 0;
    list-style: none;
}

acidjs-xchessboard
{
    margin: auto;
    cursor: default;
    background: #fff;
}

acidjs-xchessboard ul
{
    border: solid 3px #2f343a;
}

acidjs-xchessboard li
{
    float: left;
    width: 64px;
    height: 64px;
    text-align: center;
}

acidjs-xchessboard li:nth-child(8n + 1)
{
    clear: left;
}

acidjs-xchessboard li::after
{
    display: block;
    font: bold 64px/64px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
    color: #1572b7;
}

acidjs-xchessboard .black::after
{
    color: #e74c3c;
}

acidjs-xchessboard .rook::after
{
    content: "\2656";
}

acidjs-xchessboard .pawn::after
{
    content: "\2659";
}

acidjs-xchessboard .knight::after
{
    content: "\2658";
}

acidjs-xchessboard .bishop::after
{
    content: "\2657";
}

acidjs-xchessboard .king::after
{
    content: "\2654";
}

acidjs-xchessboard .queen::after
{
    content: "\2655";
}

Please, disable your ad blocker

This website is made possible by displaying online advertisements to the visitors. To view the content, please, disable your ad blocker, then refresh the page.