chessground
Version:
Multipurpose chess UI, for lichess.org web and mobile
69 lines (67 loc) • 2.28 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<title>ChessGround mobile (dev mode)</title>
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/theme.css">
<link rel="stylesheet" href="../assets/mobile.css">
<link rel="stylesheet" href="example.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>
<!-- <div class="chessground wood small merida" id="ground1"></div> -->
<div class="wood merida coordinates" id="ground"></div>
<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 = window.ground = Chessground(document.getElementById('ground'), {
draggable: {
squareTarget: true
}
});
})();
</script>
<script>
window.onload = function() {
var size = (window.innerWidth) + 'px';
var ground = document.getElementById('ground');
setTimeout(function() {
ground.style.width = size;
ground.style.height = size;
}, 100);
ground.style.position = 'absolute';
ground.style.top = '100px';
};
</script>
</body>
</html>