@noe_rls/cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
79 lines (76 loc) • 2.86 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cm-chessboard</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
<link rel="stylesheet" href="styles/examples.css"/>
<link rel="stylesheet" href="../assets/styles/cm-chessboard.css"/>
</head>
<body>
<h1><a href="../">cm-chessboard</a></h1>
<h2>Example: Custom markers, left and right click, mark squares and log to console.</h2>
<div class="board" id="board1"></div>
<div class="board" id="board2"></div>
<br style="clear: both"/>
<pre>
board1.enableSquareSelect((event) => {
console.log("SquareSelect board1", event)
let markerType
if(event.type === SQUARE_SELECT_TYPE.primary) {
markerType = MARKER_TYPE.dot
} else {
markerType = MARKER_TYPE.circle
}
const markersOnSquare = board1.getMarkers(event.square, markerType)
if (markersOnSquare.length > 0) {
board1.removeMarkers(event.square, markerType)
} else {
board1.addMarker(event.square, markerType)
}
})
</pre>
<script type="module">
import {Chessboard, MARKER_TYPE, SQUARE_SELECT_TYPE} from "../src/cm-chessboard/Chessboard.js"
const board1 = new Chessboard(document.getElementById("board1"), {
position: "start",
sprite: {url: "../assets/images/chessboard-sprite.svg", cache: false}
})
board1.enableSquareSelect((event) => {
console.log("SquareSelect board1", event)
let markerType
if(event.type === SQUARE_SELECT_TYPE.primary) {
markerType = MARKER_TYPE.dot
} else {
markerType = MARKER_TYPE.circle
}
const markersOnSquare = board1.getMarkers(event.square, markerType)
if (markersOnSquare.length > 0) {
board1.removeMarkers(event.square, markerType)
} else {
board1.addMarker(event.square, markerType)
}
})
const board2 = new Chessboard(document.getElementById("board2"), {
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
sprite: {url: "../assets/images/chessboard-sprite-staunty.svg"},
markers: {move: MARKER_TYPE.square}
})
board2.enableMoveInput((event) => {
console.log("MoveInput board2", event)
return true
})
const marker = {class: "markerCircleRed", slice: "markerCircle"}
board2.enableSquareSelect((event) => {
if(event.type === SQUARE_SELECT_TYPE.secondary) {
const markersOnSquare = board2.getMarkers(event.square, marker)
if (markersOnSquare.length > 0) {
board2.removeMarkers(event.square, marker)
} else {
board2.addMarker(event.square, marker)
}
}
})
</script>
</body>
</html>