chessground
Version:
Multipurpose chess UI, for lichess.org web and mobile
139 lines (136 loc) • 5.16 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.min.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 -'
});
})();
</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>