cm-chessboard-playfield
Version:
A cm-chessboard plugin which knows the rules of chess to validate moves, support promotions and does some fancy square marking.
57 lines (53 loc) • 2.41 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/chessboard.css"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/extensions/markers/markers.css"/>
<link rel="stylesheet" href="./node_modules/cm-chessboard/assets/extensions/promotion-dialog/promotion-dialog.css"/>
<title>Example of the Playfield plugin for cm-chessboard</title>
</head>
<body>
<h1>The Playfield extension for cm-chessboard</h1>
<div id="chessboard" style="max-width: 600px; margin: 0 auto"></div>
<script src="https://cdn.jsdelivr.net/npm/es-module-shims@1.7.2/dist/es-module-shims.min.js"></script>
<!-- @formatter:off -->
<script type="importmap">
{
"imports": {
"cm-chessboard/": "./node_modules/cm-chessboard/",
"cm-web-modules/": "./node_modules/cm-web-modules/",
"chess.mjs/": "./node_modules/chess.mjs/",
"cm-pgn/": "./node_modules/cm-pgn/",
"cm-chess/": "./node_modules/cm-chess/"
}
}
</script>
<!-- @formatter:on -->
<script type="module">
import {Chessboard} from "cm-chessboard/src/Chessboard.js"
import {Playfield} from "./src/Playfield.js"
import {PlayfieldMarkers} from "./src/dependent-extensions/PlayfieldMarkers.js"
import {PlayfieldSounds} from "./src/dependent-extensions/PlayfieldSounds.js"
import {RandomPlayer} from "./src/players/RandomPlayer.js"
import {LocalPlayerWithPremoves} from "./src/players/LocalPlayerWithPremoves.js"
const chessboard = new Chessboard(document.getElementById("chessboard"), {
position: "4k3/1P6/8/8/6r1/8/pp2PPPP/2R1KBNR w K - 0 1", // "7k/1P6/8/b7/6r1/8/pp2PPPP/2R1KBNR w - - 0 1"
assetsUrl: "node_modules/cm-chessboard/assets/",
extensions: [
{
class: Playfield, props: {
player: {name: "Local Player", type: LocalPlayerWithPremoves},
opponent: {name: "Random Player", type: RandomPlayer, props: {delay: 2000}}
}
},
{class: PlayfieldMarkers},
{class: PlayfieldSounds}
]
})
</script>
</body>
</html>