ChessMeister - Documentation - Challenge - Design - GitHub
<head>
<script src="elements.chessmeister.js"></script>
</head>
This single (9300 Bytes GZip) file creates Custom Elements:
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: CardMeister: 52 SVG playingcards in one Custom Element
to display a chess board using standard chess FEN notation:
<chessmeister-board
fen="rnbqkbnr/
pppppppp/
8/
8/
8/
8/
PPPPPPPP/
RNBQKBNR" >
</chessmeister-board>
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 />
</chessmeister-board>
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" );
board.rotate();
//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)
});
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
hint:
