chessground
Version:
Multipurpose chess UI, for lichess.org web and mobile
141 lines (138 loc) • 4.9 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="example.css">
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/theme.css">
<link rel="stylesheet" href="../assets/desktop.css">
</head>
<body>
<script src="../chessground.js"></script>
<!-- chess.js is NOT required by chessground. We include it for the examples. -->
<script src="chess.min.js"></script>
<script>
function chessToDests(chess) {
var dests = {};
chess.SQUARES.forEach(function(s) {
var ms = chess.moves({square: s, verbose: true});
if (ms.length) dests[s] = ms.map(function(m) { return m.to; });
});
return dests;
}
function chessToColor(chess) {
return (chess.turn() == "w") ? "white" : "black";
}
</script>
<section>
<div class="chessground wood small merida coordinates" id="ground1"></div>
<p>Board editor</p>
<script>
//var controller = new cg.controller();
//m.render(document.getElementById('ground1'), cg.view.board(controller));
(function() {
window.ground1 = Chessground(document.getElementById('ground1'), {
orientation: 'black',
fen:'2r3k1/pp2Qpbp/4b1p1/3p4/3n1PP1/2N4P/Pq6/R2K1B1R w -',
draggable: {
}
});
})();
</script>
</section>
<section>
<div class="chessground wood small merida coordinates" id="ground2"></div>
<p>Free as a birrd</p>
<script>
(function() {
var ground = Chessground(document.getElementById('ground2'), {
movable: {
free: true,
color: 'both',
dropOff: 'trash'
},
animation: {
enabled: true,
duration: 800
}
});
setInterval(function() {
ground.set({
fen:'2r3k1/pp2Qpbp/4b1p1/3p4/3n1PP1/2N4P/Pq6/R2K1B1R w -',
orientation:'black'
});
//ground.set({fen:'rnbqkbnr/pNpppppp/8/8/8/8/PPPPPPPP/R1BQKBNR b KQkq'});
setTimeout(function() {
ground.set({
fen:'start',
orientation:'white'
});
}, 1000);
}, 2000);
})();
</script>
</section>
<!-- <section> -->
<!-- <div class="chessground wood small merida" id="ground7"></div> -->
<!-- <p>Play a game on a single board</p> -->
<!-- <script> -->
<!-- (function() { -->
<!-- var ground; -->
<!-- var chess = new Chess(); -->
<!-- var onMove = function(orig, dest) { -->
<!-- chess.move({from: orig, to: dest}); -->
<!-- ground.set({ -->
<!-- turnColor: chessToColor(chess), -->
<!-- movable: { -->
<!-- color: chessToColor(chess), -->
<!-- dests: chessToDests(chess) -->
<!-- } -->
<!-- }); -->
<!-- console.log(ground.getFen()); -->
<!-- }; -->
<!-- ground = Chessground(document.getElementById('ground7'), { -->
<!-- turnColor: 'white', -->
<!-- movable: { -->
<!-- free: false, -->
<!-- color: chessToColor(chess), -->
<!-- premove: true, -->
<!-- dests: chessToDests(chess), -->
<!-- events: { -->
<!-- after: onMove -->
<!-- } -->
<!-- } -->
<!-- }); -->
<!-- })(); -->
<!-- </script> -->
<!-- </section> -->
<!-- <section> -->
<!-- <div class="chessground blue small cburnett" id="ground5"></div> -->
<!-- <p>Valid moves: white plays, then premoves</p> -->
<!-- <script> -->
<!-- (function() { -->
<!-- var ground; -->
<!-- var chess = new Chess(); -->
<!-- var onMove = function(orig, dest) { -->
<!-- chess.move({from: orig, to: dest}); -->
<!-- ground.set({ -->
<!-- turnColor: chessToColor(chess), -->
<!-- }); -->
<!-- }; -->
<!-- ground = Chessground(document.getElementById('ground5'), { -->
<!-- turnColor: 'white', -->
<!-- orientation: 'white', -->
<!-- movable: { -->
<!-- free: false, -->
<!-- premove: true, -->
<!-- color: 'white', -->
<!-- dests: chessToDests(chess), -->
<!-- events: { -->
<!-- after: onMove -->
<!-- } -->
<!-- } -->
<!-- }); -->
<!-- window.cg5 = ground; -->
<!-- })(); -->
<!-- </script> -->
<!-- </section> -->
</body>
</html>