ChessMeister (beta) - Positioning Chesspieces

Demonstrating W3C standard Custom Elements and CSS4.
Chesspiece positions just happened to be a great paradigm

elements.chessmeister.js - Custom Element documentation

      <script src="elements.chessmeister.js"></script>

This single (9300 Bytes GZip) file creates Custom Elements:

Extended Built-In Custom Element

extending the IMG element to display chess pieces without the need for external SVG files!!

    <img is="white-queen" />
    <img is="white-knight" />
    <img is="black-king" />
    <img is="black-bishop" />

For more information on SVG and Custom Elements see:

Autonomous Custom Element

to display a chess board using standard chess FEN notation:

            RNBQKBNR" >

A custom static chess board positioning pieces using lightDOM:

    <chessmeister-board static>
        <img is=white-king at=E6 />
        <img is=white-rook at=H8 />
        <img is=black-king at=E8 />

Configuration and JavaScript code examples:

style using CSS variables (showing default values)

    chessmeister-board {
        --chessmeister-squarelabel-color: black;// transparent sets squarelabels not visible
        --chessmeister-attack-color: darkred;
        --chessmeister-defend-color: darkgreen;
        --chessmeister-undefended-color: red;
        --chessmeister-squarewhite-color: #f0e9c5;
        --chessmeister-squareblack-color: #b58863;
        --chessmeister-allowed-destinations: .5vh solid orange;
        --chessmeister-piece-destinations: .5vh dashed green;


    let board = document.querySelector('chessmeister-board');
    console.log( board.fen );      // gets current board fen
    board.fen = "8/8/8/8/8/8/8/8"; // sets board fen (blank board)
    board.piece("F3");             // gets IMG element at F3 or False
    board.piece("K");              // gets White King IMG element
    board.add_board_piece( "white-rook" , "F3" );
    board.remove_board_piece( "F3" );
    //for more see source code


For usage see this page source code

    board.addEventListener('chessmeister-event', event => {
        let { name, type, square, move } = event.detail;
        // name = string name for event: dragged, click
        // type = "square"
        // square = "A1" to "H8"
        // move = "PE4" (moved white Pawn to E4)

Challenges: Gary Kasparov versus IBM Deep Blue - 1997

Deep Blue was the first computer to defeat a world champion under tournament conditions [wikipedia]

Click any of the 3 winning boards you want to play. Play the White move that made Black resign

Design your own board layout

CLICK a piece then CLICK on a squarelabel. CLICK a boardpiece to remove it.

Published: 2019-11-09 18:59