<!DOCTYPE html>
<html lang="en">
<head>
<title>Elo Worldle</title>
<script>
var exports = {};
</script>
<!-- <script defer src="chess.js"></script> -->
<!-- You can still access the unminified files! Just go to,
e.g, https://elo-worldle.pyrope.net/main.js -->
<script type="module" src="main.min.js"></script>
<script type="module" src="gchessboard.min.js"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="Elo Worldle" property="og:title" />
<meta
content="A game where you guess what bad chess algorithm you are playing against."
property="og:description"
/>
<meta content="https://elo-worldle.pyrope.net/" property="og:url" />
<meta
content="https://elo-worldle.pyrope.net/favicon.png"
property="og:image"
/>
<meta content="#538d4e" data-react-helmet="true" name="theme-color" />
<meta
name="description"
content="A Wordle-like game where you guess what bad chess algorithm you are playing against."
/>
<!-- <link rel="stylesheet" href="./main.css"></link> -->
<style>
html {
background-color: #002121;
width: 100%;
height: 100%;
color: white;
}
#board {
margin-left: auto;
margin-right: auto;
width: calc(min(90vw, 90vh));
height: calc(min(90vw, 90vh));
}
#game-over,
#stats,
#copy-stats,
#play-again,
#win-count {
display: none;
margin-left: auto;
margin-right: auto;
}
#game-over,
#win-count {
text-align: center;
width: 100%;
}
#stats {
width: fit-content;
font-size: x-large;
font-weight: bold;
outline: 2px solid white;
margin-bottom: 0;
}
#copy-stats,
#play-again {
color: black;
}
#finish {
display: block;
margin-left: auto;
margin-right: auto;
}
:host {
--square-color-dark: #86a666;
--square-color-light: #ffffdd;
}
h1,
pre {
font-family: "Courier New", Courier, monospace;
}
h1 {
text-align: center;
}
p {
font-family: "Times New Roman", Times, serif;
}
#players,
.player {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.strikethrough {
text-decoration: line-through;
}
.player {
width: fit-content;
}
.player-name {
cursor: pointer;
user-select: none;
}
.correct {
color: #538d4e;
}
.wrong {
color: #3a3a3c;
text-decoration: line-through;
}
footer {
width: 100%;
font-size: large;
text-align: center;
color: white;
}
a {
color: white;
}
g-chess-board::part(piece-wb) {
background-image: url("./piece-wb.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-wr) {
background-image: url("./piece-wr.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-wp) {
background-image: url("./piece-wp.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-wn) {
background-image: url("./piece-wn.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-wk) {
background-image: url("./piece-wk.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-wq) {
background-image: url("./piece-wq.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-bb) {
background-image: url("./piece-bb.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-br) {
background-image: url("./piece-br.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-bp) {
background-image: url("./piece-bp.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-bn) {
background-image: url("./piece-bn.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-bk) {
background-image: url("./piece-bk.png");
image-rendering: pixelated;
}
g-chess-board::part(piece-bq) {
background-image: url("./piece-bq.png");
image-rendering: pixelated;
}
#dummy-board {
width: calc(min(90vw, 90vh));
height: calc(min(90vw, 90vh));
}
.much-tall {
height: 4130px;
}
</style>
</head>
<body>
<div id="dummy-board"></div>
<g-chess-board
id="board"
fen="start"
interactive
turn="white"
></g-chess-board>
<button style="display: none" id="finish">
show me the answer please i toootally guessed already
</button>
<h1 id="game-over"></h1>
<button title="or press `r`" id="play-again">
> play again <
</button>
<pre id="stats"></pre>
<button title="or press `c`" id="copy-stats">^ copy ^</button>
<br />
<h1>Players: (click name to toggle strikethrough)</h1>
<div id="players" class="much-tall"></div>
<footer>
<a href="https://www.youtube.com/watch?v=DpXy041BIlA">Tutorial</a
><br />
<a href="http://tom7.org/chess"
>Piece sprites, board colors, algorithms, etc.</a
>
&
<a
href="https://sourceforge.net/p/tom7misc/svn/HEAD/tree/trunk/chess/"
>Original implementations</a
>
&
<a href="http://tom7.org/chess/weak.pdf">Original paper</a>
by
<a href="http://tom7.org">tom7</a>
<br />
<a href="https://git.pyrope.net/mbk/elo-worldle">Code</a>
&
<a href="https://elo-worldle.pyrope.net/paper.pdf">Paper</a>
by
<a href="https://pl.pyrope.net/terezi">me</a>
<div id="win-count"></div>
</footer>
</body>
</html>