cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
62 lines (60 loc) • 3.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../styles/examples.css"/>
<link rel="stylesheet" href="../../assets/chessboard.css">
<link rel="stylesheet" href="../../assets/extensions/promotion-dialog/promotion-dialog.css"/>
<link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
<title>cm-chessboard promotion extension</title>
</head>
<body>
<h1><a href="../..">cm-chessboard</a></h1>
<h2>Example of the cm-chessboard PromotionDialog extension</h2>
<div id="chessboard" class="board-max-width" style="margin-bottom: 1rem">
</div>
<button style="margin-bottom: 10px"
onclick="window.switchOrientation()">Switch Orientation
</button>
<script type="module">
import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/Chessboard.js?v=1"
import {PromotionDialog} from "../../src/extensions/promotion-dialog/PromotionDialog.js?v=1"
import {Markers} from "../../src/extensions/markers/Markers.js?v=1"
import {Accessibility} from "../../src/extensions/accessibility/Accessibility.js?v=1"
const position = "4k3/1P6/8/8/6r1/8/61p/2R1K3 w - - 0 1"
const chessboard = new Chessboard(document.getElementById("chessboard"), {
position: position,
assetsUrl: "../../assets/",
extensions: [{class: PromotionDialog}, {class: Markers}, {class: Accessibility, props: {
brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
boardAsTable: true, // display the board additionally as HTML table
movePieceForm: true, // display a form to move a piece (from, to, move)
piecesAsList: true, // display the pieces additionally as List
visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
}}]
})
chessboard.enableMoveInput((event) => {
if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
if ((event.squareTo.charAt(1) === "8" || event.squareTo.charAt(1) === "1") && event.piece.charAt(1) === "p") {
const pieceColor = event.piece.charAt(0)
chessboard.showPromotionDialog(event.squareTo, pieceColor, (result) => {
console.log("Promotion result", result)
if (result && result.piece) {
chessboard.setPiece(result.square, result.piece, true)
} else {
chessboard.setPosition(position)
}
})
}
}
return true
})
window.switchOrientation = function () {
chessboard.setOrientation(chessboard.getOrientation() === 'w' ? 'b' : 'w')
}
</script>
</body>
</html>