cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
110 lines (108 loc) • 3.33 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: Different styles and piece sets</h2>
<div class="board" id="board1"></div>
<div class="board" id="board2"></div>
<div class="board" id="board3"></div>
<div class="board" id="board4"></div>
<div class="board" id="board5"></div>
<div class="board" id="board6"></div>
<div class="board" id="board7"></div>
<div class="board" id="board8"></div>
<div class="board" id="board9"></div>
<script type="module">
import {Chessboard, BORDER_TYPE} from "../src/Chessboard.js"
import {FEN} from "../src/model/Position.js"
new Chessboard(document.getElementById("board1"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "green",
borderType: BORDER_TYPE.frame,
pieces: {
file: "pieces/staunty.svg"
}
}
})
new Chessboard(document.getElementById("board2"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "chessboard-js",
borderType: BORDER_TYPE.thin
}
})
new Chessboard(document.getElementById("board3"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "chess-club",
borderType: BORDER_TYPE.frame,
pieces: {file: "pieces/staunty.svg"}
}
})
new Chessboard(document.getElementById("board4"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "blue",
borderType: BORDER_TYPE.thin,
showCoordinates: false,
}
})
new Chessboard(document.getElementById("board5"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {borderType: BORDER_TYPE.none, pieces: {file: "pieces/staunty.svg"}},
})
new Chessboard(document.getElementById("board6"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
pieces: {file: "pieces/staunty.svg"}, cssClass: "blue",
borderType: BORDER_TYPE.frame
},
})
new Chessboard(document.getElementById("board7"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "green"
}
})
new Chessboard(document.getElementById("board8"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "black-and-white"
}
})
new Chessboard(document.getElementById("board9"), {
position: FEN.start,
assetsUrl: "../assets/",
assetsCache: false,
style: {
cssClass: "chessboard-js",
borderType: BORDER_TYPE.frame
}
})
</script>
</body>
</html>