<!DOCTYPE html>
<html>
<head>
<title>Elo Worldle</title>
<script>var exports = {};</script>
<!-- <script defer src="chess.js"></script> -->
<script type="module" src="main.js"></script>
<script type="module" src="https://unpkg.com/gchessboard"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./main.css"></link>
<style>
html {
background-color: #002121;
width: 100%;
height: 100%;
}
#board {
margin-left: auto;
margin-right: auto;
width: calc(min(90vw, 90vh));
height: calc(min(90vw, 90vh));
}
#game-over, #stats, #copy-stats {
display: none;
margin-left: auto;
margin-right: auto;
color: white;
}
#game-over {
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 {
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;
}
p {
font-family: 'Times New Roman', Times, serif;
}
#players, .player {
color: white;
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; }
</style>
</head>
<body>
<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>
<pre id="stats"></pre>
<button id="copy-stats">^ copy ^</button>
<div id="players">
<h1>Players: (click name to toggle strikethrough)</h1>
</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>
</footer>
</body>
</html>