Skip to content

Instantly share code, notes, and snippets.

@fulldecent

fulldecent/fen2html.html

Last active May 31, 2023 12:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fulldecent/70f308219c8d59f5693f to your computer and use it in GitHub Desktop.
Save fulldecent/70f308219c8d59f5693f to your computer and use it in GitHub Desktop.
Download ZIP
Paste in a Chess FEN position to get a board representation in HTML
Raw
fen2html.html
<!-- COPIED FROM https://phor.net/gadgets/fen2html/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>FEN2HTML</title>
<style>
table.chess { border: 1px solid black; margin: 2px; font-size: xx-large}
table.chess td { width: 1.5em; height: 1.5em; padding: 0; margin: 1em; vertical-align: middle; text-align: center }
table.chess tr td { background: #F2E0CB }
table.chess tr:nth-child(odd) td:nth-child(even), table.chess tr:nth-child(even) td:nth-child(odd) { background: #C4AA8B }
</style>
</head>
<body class="my-5">
<div class="container">
<h1><abbr title="Forsyth-Edwards Notation">FEN</abbr> to HTML</h1>
<p class="lead">by <a href="http://fulldecent.blogspot.com">William Entriken</a></p>
<hr>
<h2>Input FEN</h2>
<div class="input-group input-group-lg">
<input class="form-control" onKeyUp="fentohtml()" id="fen" value="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1">
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Output View</h2>
<div id="out">
</div>
</div>
<div class="col-lg-6">
<h2>Output HTML (view source for CSS)</h2>
<pre id="outhtml"></pre>
</div>
</div>
</div> <!-- /container -->
<script>
const pieces = {
K:"♔", Q:"♕", R:"♖", B:"♗", N:"♘", P:"♙",
k:"♚", q:"♛", r:"♜", b:"♝", n:"♞", p:"♟",
}
function fentohtml() {
html = document.getElementById("fen").value
.trim()
.replace(/\s+.*/,"")
.replace(/\d+/g, n => " ".repeat(n))
.replace(/./g, char => "<td>" + (pieces[char] || char))
.replace(/^|<td>\//g,"\n <tr>");
html = "<table class=\"chess\">" + html + "\n</table>";
document.getElementById("out").innerHTML = html;
document.getElementById("outhtml").innerHTML = html.replace(/</g,"&lt;").replace(/>/g,"&gt;");
}
fentohtml();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-52764-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-52764-3');
</script>
</body>
</html>
@fulldecent
Copy link
Author

Updated now, a little cleaner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment