Menu
Before we implement our own, is there an existing Open Source piece of Java code that takes a chess FEN string and converts it into an HTML representation of the chess board?
A FEN code looks like this: rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
The output would be something like <table><tr><td>♘</td><td>♛</td><td>...
An icons-based solution, or even a solution that produces a big image instead of HTML, could be acceptable too. It is for integration into an Android app.
(Here is an implementation in Python)
474
I found some useful CSS3 from this place: http://designindevelopment.com/css/css3-chess-board/
So I came up with the following:
<html>
<head>
<style type="text/css">
.chess_board { border:1px solid #333; }
.chess_board td {
background:#fff; background:-moz-linear-gradient(top, #fff, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
box-shadow:inset 0 0 0 1px #fff;
-moz-box-shadow:inset 0 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 0 1px #fff;
height:40px; text-align:center; vertical-align:middle; width:40px; font-size:30px;}
.chess_board tr:nth-child(odd) td:nth-child(even),
.chess_board tr:nth-child(even) td:nth-child(odd) {
background:#ccc; background:-moz-linear-gradient(top, #ccc, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
box-shadow:inset 0 0 10px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.4); }
</style>
<script type="text/javascript">
function renderFen(fentxt) {
fentxt = fentxt.replace(/ .*/g, '');
fentxt = fentxt.replace(/r/g, 'x'); // Convert black rooks to 'x' to avoid mixup with <tr></tr> tags
fentxt = fentxt.replace(/\//g, '</tr><tr>');
fentxt = fentxt.replace(/1/g, '<td></td>');
fentxt = fentxt.replace(/2/g, '<td></td><td></td>');
fentxt = fentxt.replace(/3/g, '<td></td><td></td><td></td>');
fentxt = fentxt.replace(/4/g, '<td></td><td></td><td></td><td></td>');
fentxt = fentxt.replace(/5/g, '<td></td><td></td><td></td><td></td><td></td>');
fentxt = fentxt.replace(/6/g, '<td></td><td></td><td></td><td></td><td></td><td></td>');
fentxt = fentxt.replace(/7/g, '<td></td><td></td><td></td><td></td><td></td><td></td><td></td>');
fentxt = fentxt.replace(/8/g, '<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>');
fentxt = fentxt.replace(/K/g, '<td>♔</td>');
fentxt = fentxt.replace(/Q/g, '<td>♕</td>');
fentxt = fentxt.replace(/R/g, '<td>♖</td>');
fentxt = fentxt.replace(/B/g, '<td>♗</td>');
fentxt = fentxt.replace(/N/g, '<td>♘</td>');
fentxt = fentxt.replace(/P/g, '<td>♙</td>');
fentxt = fentxt.replace(/k/g, '<td>♚</td>');
fentxt = fentxt.replace(/q/g, '<td>♛</td>');
fentxt = fentxt.replace(/x/g, '<td>♜</td>');
fentxt = fentxt.replace(/b/g, '<td>♝</td>');
fentxt = fentxt.replace(/n/g, '<td>♞</td>');
fentxt = fentxt.replace(/p/g, '<td>♟</td>');
return '<table class="chess_board" cellspacing="0" cellpadding="0"><tr>' + fentxt + '</tr></table>';
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(renderFen('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'));
</script>
</body>
Quoting from Alexander Maryanovsky Jin's site site:
About Jin
Jin is an open source, cross platform, graphical client for chess servers, written in Java. Jin can run either as a standalone application (available at this website) or as an applet, directly from your browser (available at the chess server's website).
His project is open source and available on Sourceforge.
Grab the Position.java class and you will find some piece of Java code handling FEN.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
