cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
90 lines (87 loc) • 3.95 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: Set different positions, with animation</h2>
<p>Animations are queued automatically.</p>
<div class="board" id="board"></div>
<br/>
<h3>Not animated</h3>
<button onclick="setPosition('empty').then(() => { console.log('empty finished')})">Empty Position</button>
<button onclick="setPosition('start')">Start Position</button>
<button onclick="setPosition('rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR')">Position 1</button>
<button onclick="setPosition('rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R')">Position 2</button>
<button onclick="setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR')">Position 3</button>
<button onclick="switchOrientation()">Switch Orientation</button>
<h3>Animated</h3>
<button onclick="setPosition('empty', true).then(() => { console.log('empty animated finished')})">Empty Position</button>
<button onclick="setPosition('start', true)">Start Position</button>
<button onclick="setPosition('rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR', true)">Position 1</button>
<button onclick="setPosition('rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R', true)">Position 2</button>
<button onclick="setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR', true)">Position 3</button>
<button onclick="switchOrientation(true)">Switch Orientation</button>
<pre><button onclick="window.board.setPosition('rn2k1r1/ppp1pp1p/3p2p1/5bn1/P7/2N2B2/1PPPPP2/2BNK1RR')">Position 3</button></pre>
<br/>
<span style="margin-right: 0.5rem">Move piece <label for="moveFrom">from</label> <input id="moveFrom" type="text" size="2" value="e2"/> <label
for="moveTo">to</label> <input id="moveTo" type="text" size="2"
value="e4"/></span>
<button onclick="movePiece()">Do move</button>
<pre>board.movePiece(squareFrom, squareTo)</pre>
<br/>
<button onclick="knightMove()">Knight dance</button>
<pre>
board.setPiece("e4", PIECE.wn)
await board.movePiece("e4", "c3")
await board.movePiece("c3", "d5")
await board.movePiece("d5", "f4")
</pre>
<script type="module">
import {Chessboard, PIECE} from "../src/Chessboard.js"
import {FEN} from "../src/model/Position.js"
const board = new Chessboard(document.getElementById("board"),
{
position: FEN.start,
assetsUrl: "../assets/",
style: {pieces: {file: "pieces/staunty.svg"}, animationDuration: 500}
})
let i = 0
window.setPosition = (position, animated) => {
if(position === "start") {
position = FEN.start
}
if(position === "empty") {
position = FEN.empty
}
i++
return board.setPosition(position, animated)
}
window.switchOrientation = (animated) => {
board.setOrientation(board.getOrientation() === 'w' ? 'b' : 'w', animated).then(() => {
console.log("board.getOrientation()", board.getOrientation())
})
}
window.movePiece = () => {
const squareFrom = document.getElementById("moveFrom").value
const squareTo = document.getElementById("moveTo").value
console.log("movePiece", squareFrom, squareTo)
board.movePiece(squareFrom, squareTo, true)
}
window.knightMove = async () => {
board.setPiece("e5", PIECE.wn)
board.movePiece("e5", "c4", true)
board.movePiece("c4", "d6", true)
board.movePiece("d6", "f5", true)
board.movePiece("f5", "h4", true)
board.movePiece("h4", "g6", true)
board.movePiece("g6", "e5", true)
}
</script>
</body>
</html>