cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
40 lines (37 loc) • 1.47 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"/>
<link rel="stylesheet" href="../../assets/extensions/arrows/arrows.css"/>
</head>
<body>
<h1><a href="../..">cm-chessboard</a></h1>
<h2>Example: RightClickAnnotator extension</h2>
<ul>
<li>Right-click to toggle green markers</li>
<li>Right-click + drag to draw green arrows</li>
<li>Use Alt for blue, Shift for red, Shift+Alt for orange</li>
</ul>
<div class="board" id="board"></div>
<button id="removeAllButton">Remove all annotations</button>
<script type="module">
import {Chessboard} from "../../src/Chessboard.js"
import {FEN} from "../../src/model/Position.js"
import {RightClickAnnotator} from "../../src/extensions/right-click-annotator/RightClickAnnotator.js"
const board = new Chessboard(document.getElementById("board"), {
position: FEN.start,
assetsUrl: "../../assets/",
extensions: [{class: RightClickAnnotator}]
})
document.getElementById("removeAllButton").addEventListener("click", (event) => {
board.removeArrows()
board.removeMarkers()
})
</script>
</body>
</html>