cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
80 lines (78 loc) • 3.1 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/chessboard.css"/>
<link rel="stylesheet" href="../../assets/extensions/markers/markers.css"/>
</head>
<body>
<h1><a href="../../">cm-chessboard</a></h1>
<h2>Example: Markers Extension with pointer input</h2>
<p>Use left and right click to create markers on the boards. The second board shows the usage of autoMarkers, when moving a piece.</p>
<div class="board" id="board1"></div>
<div class="board" id="board2"></div>
<div style="clear: both"></div>
<button onclick="window.removeDots()">Remove dots</button>
<script type="module">
import {Chessboard} from "../../src/Chessboard.js"
import {FEN} from "../../src/model/Position.js"
import {MARKER_TYPE, Markers} from "../../src/extensions/markers/Markers.js"
const board1 = new Chessboard(document.getElementById("board1"), {
position: FEN.start,
assetsCache: false,
assetsUrl: "../../assets/",
extensions: [{class: Markers}]
})
board1.context.addEventListener("contextmenu", (event) => {
event.preventDefault()
})
board1.context.addEventListener("mousedown", (event) => {
console.log("mousedown board1", event)
let markerType
if (event.button === 0) {
markerType = MARKER_TYPE.dot
} else {
markerType = MARKER_TYPE.circlePrimary
}
const square = event.target.getAttribute("data-square")
const markersOnSquare = board1.getMarkers(markerType, square)
if (markersOnSquare.length > 0) {
board1.removeMarkers(markerType, square)
} else {
board1.addMarker(markerType, square)
}
})
window.removeDots = () => {
board1.removeMarkers(MARKER_TYPE.dot)
}
const board2 = new Chessboard(document.getElementById("board2"), {
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR",
assetsUrl: "../../assets/",
style: {pieces: {file: "pieces/staunty.svg"}},
extensions: [{class: Markers, props: {autoMarkers: MARKER_TYPE.frame}}]
})
board2.enableMoveInput(() => {
return true
})
// define your own marker
const myOwnMarker = {class: "marker-circle-danger-filled", slice: "markerCircleFilled"}
board2.context.addEventListener("contextmenu", (event) => {
event.preventDefault()
})
board2.context.addEventListener("mousedown", (event) => {
if (event.button === 2) {
const square = event.target.getAttribute("data-square")
const markersOnSquare = board2.getMarkers(myOwnMarker, square)
if (markersOnSquare.length > 0) {
board2.removeMarkers(myOwnMarker, square)
} else {
board2.addMarker(myOwnMarker, square)
}
}
})
</script>
</body>
</html>