cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
46 lines (44 loc) • 1.58 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"/>
</head>
<body>
<h1><a href="../">cm-chessboard</a></h1>
<h2>Example: Simple chessboards, view only</h2>
<div class="board" id="board1"></div>
<div class="board" id="board2"></div>
<br style="clear: both"/>
<pre>
new Chessboard(document.getElementById("board1"), {
assetsUrl: "../assets/",
position: FEN.start
})
new Chessboard(document.getElementById("board2"), {
assetsUrl: "../assets/",
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
style: {pieces: {file: "pieces/staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
orientation: COLOR.black
})
</pre>
<script type="module">
import {COLOR, Chessboard, BORDER_TYPE} from "../src/Chessboard.js"
import {FEN} from "../src/model/Position.js"
new Chessboard(document.getElementById("board1"), {
assetsUrl: "../assets/",
position: FEN.start
})
new Chessboard(document.getElementById("board2"), {
assetsUrl: "../assets/",
assetsCache: false,
position: "rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR w Gkq - 4 11",
style: {pieces: {file: "pieces/staunty.svg"},cssClass: "green", borderType: BORDER_TYPE.frame},
orientation: COLOR.black
})
</script>
</body>
</html>