cm-chessboard
Version:
A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.
98 lines (91 loc) • 3.44 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: Input enabled without validation</h2>
<p>Input enabled on both sides, without move validation.
</p>
<p>Additionally, the <b>Markers</b> extension is used with its
autoMarkers ability.</p>
<div class="board" id="board"></div>
<pre>
const board = new Chessboard(document.getElementById("board"), {
position: FEN.start,
assetsUrl: "../assets/",
style: {pieces: {file: "pieces/staunty.svg"}},
extensions: [{class: Markers}]
})
board.enableMoveInput(inputHandler)
function inputHandler(event) {
console.log(event)
switch (event.type) {
case INPUT_EVENT_TYPE.moveInputStarted:
log(`moveInputStarted: ${event.squareFrom}`)
return true // false cancels move
case INPUT_EVENT_TYPE.validateMoveInput:
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
return true // false cancels move
case INPUT_EVENT_TYPE.moveInputCanceled:
log(`moveInputCanceled`)
break
case INPUT_EVENT_TYPE.moveInputFinished:
log(`moveInputFinished`)
break
case INPUT_EVENT_TYPE.movingOverSquare:
log(`movingOverSquare: ${event.squareTo}`)
break
}
}
</pre>
<button style="margin-bottom: 10px"
onclick="window.board.setOrientation(window.board.getOrientation() === 'w' ? 'b' : 'w')">Switch Orientation
</button>
<div id="output" style="width: 100%; overflow: hidden"></div>
<script type="module">
import {INPUT_EVENT_TYPE, Chessboard} from "../src/Chessboard.js"
import {FEN} from "../src/model/Position.js"
import {Markers} from "../src/extensions/markers/Markers.js"
window.board = new Chessboard(document.getElementById("board"), {
position: FEN.start,
assetsUrl: "../assets/",
style: {pieces: {file: "pieces/staunty.svg"}},
extensions: [{class: Markers}]
})
window.board.enableMoveInput(inputHandler)
function inputHandler(event) {
console.log(event)
switch (event.type) {
case INPUT_EVENT_TYPE.moveInputStarted:
log(`moveInputStarted: ${event.squareFrom}`)
return true // false cancels move
case INPUT_EVENT_TYPE.validateMoveInput:
log(`validateMoveInput: ${event.squareFrom}-${event.squareTo}`)
return true // false cancels move
case INPUT_EVENT_TYPE.moveInputCanceled:
log(`moveInputCanceled`)
break
case INPUT_EVENT_TYPE.moveInputFinished:
log(`moveInputFinished`)
break
case INPUT_EVENT_TYPE.movingOverSquare:
log(`movingOverSquare: ${event.squareTo}`)
break
}
}
const output = document.getElementById("output")
function log(text) {
const log = document.createElement("div")
log.innerText = text
output.appendChild(log)
}
</script>
</body>
</html>