NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name FEN Previewer
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Preview FEN using Chessground.
// @author Chesswithsean
// @match https://lichess.org/*
// @exclude https://lichess.org/embed/*
// @grant none
// @icon https://lichess1.org/assets/images/favicon-32-white.png
// @copyright 2018, Chesswithsean (https://openuserjs.org/users/Chesswithsean)
// @license MIT
// ==/UserScript==
(function() {
const s = document.createElement('SCRIPT');
s.src = 'https://lichess1.org/assets/javascripts/vendor/chessground.min.js';
document.body.appendChild(s);
function check() {
if (!Chessground) {
console.log('Loading CG');
return false;
}
else {
return true;
}
}
let interv = setInterval(()=>{
if (check()) {
window.clearInterval(interv);
const styles = document.createElement('STYLE');
styles.innerHTML = `
#openFEN {
position: fixed;
bottom: 0;
left: 0;
}
#seansfen {
height: 310px;
width: 200px;
position: fixed;
top: 50%;
left: 50%;
margin: -110px 0 0 -110px;
padding: 5px 10px 10px 10px;
background: #333;
border: 1px solid #555;
z-index: 99999999999;
}
#seansfen p {
font-size: 17px;
text-align: center;
margin-bottom: 5px;
color: #888;
}
#seansfen input {
margin: 10px 0;
border: none;
padding: 5px;
font-size: 13px;
outline: none;
width: 190px;
}
#seansfen > div, #seansfen > div > div {
height: 200px;
width: 200px;
}
#seansfen .btns{
display: flex;
}
#seansfen .btns .button {
height: 20px;
flex-grow: 1;
text-align: center;
}
`;
document.body.append(styles);
const s2 = document.createElement('SCRIPT');
//This is so that this script should only run after Chessground loads.
s2.innerHTML = `
const config = {
orientation: 'white',
fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
coordinates: false,
movable: {
free: false
}
};
const b = document.getElementsByClassName('is3d')[1] || document.getElementsByClassName('is2d')[1];
const myel = {};
//To avoid messing with other variables.
myel.container = document.createElement('DIV');
myel.container.classList = 'is2d';
myel.container.id = 'seansfen';
myel.container.innerHTML = '<p>FEN Previwer</p>';
myel.cg = document.createElement('DIV');
myel.input = document.createElement('INPUT');
myel.input.placeholder = 'Enter FEN...';
myel.btns = document.createElement('DIV');
myel.btns.classList = 'btns';
myel.analy = document.createElement('A');
myel.analy.setAttribute('data-hint','Analysis Board');
myel.analy.classList = 'button hint--bottom';
myel.analy.href = \`https://lichess.org/analysis/standard/\${config.fen.split(' ').join('_')}\`;
myel.analy.innerHTML = '<span data-icon="A"></span>';
myel.edit = document.createElement('A');
myel.edit.setAttribute('data-hint','Board Editor');
myel.edit.classList = 'button hint--bottom';
myel.edit.href = \`https://lichess.org/editor/\${config.fen.split(' ').join('_')}\`;
myel.edit.innerHTML = '<span data-icon="m"></span>';
myel.flip = document.createElement('SPAN');
myel.flip.classList = 'button hint--bottom';
myel.flip.setAttribute('data-hint','Flip Board');
myel.flip.innerHTML = '<span data-icon="B"></span>';
myel.ai = document.createElement('A');
myel.ai.classList = 'button hint--bottom';
myel.ai.setAttribute('data-hint','Play with AI');
myel.ai.innerHTML = '<span data-icon="U"></span>';
myel.ai.href = \`https://lichess.org/?fen=\${config.fen.split(' ').join('_')}#ai\`;
myel.clsbtn = document.createElement('SPAN');
myel.clsbtn.classList = 'button hint--bottom';
myel.clsbtn.setAttribute('data-hint','Close');
myel.clsbtn.innerHTML = '<span data-icon="L"></span>';
myel.clsbtn.addEventListener('click',()=>myel.container.style.display = 'none');
myel.btns.appendChild(myel.analy);
myel.btns.appendChild(myel.edit);
myel.btns.appendChild(myel.flip);
myel.btns.appendChild(myel.ai);
myel.btns.appendChild(myel.clsbtn);
myel.container.appendChild(myel.cg);
myel.container.appendChild(myel.input);
myel.container.appendChild(myel.btns);
b.appendChild(myel.container);
var ground = Chessground(myel.cg, config);
myel.container.style.display = 'none';
//A trick so that the pieces load in the right places.
myel.input.addEventListener('keyup',()=>{
config.fen = myel.input.value;
ground = Chessground(myel.cg, config);
//Now I need to update the URLs of the buttons.
myel.analy.href = \`https://lichess.org/analysis/standard/\${config.fen.split(' ').join('_')}\`;
myel.ai.href = \`https://lichess.org/?fen=\${config.fen.split(' ').join('_')}#ai\`;
myel.edit.href = \`https://lichess.org/editor/\${config.fen.split(' ').join('_')}\`;
});
myel.flip.addEventListener('click',()=>ground.toggleOrientation());
const open = document.createElement('SPAN');
open.classList = 'button';
open.id = 'openFEN';
open.setAttribute('data-icon','*');
open.innerHTML = ' FEN Previewer';
document.body.appendChild(open);
open.addEventListener('click',()=>myel.container.style.display = 'block')`;
document.body.appendChild(s2);
}
},700);
})();