elo-worldle/index.html

233 lines
7.1 KiB
HTML
Raw Normal View History

2023-03-26 23:33:41 -04:00
<!DOCTYPE html>
2023-04-01 22:54:14 -04:00
<html lang="en">
2023-03-26 23:33:41 -04:00
<head>
<title>Elo Worldle</title>
2023-04-01 23:11:32 -04:00
<script>
var exports = {};
</script>
2023-03-26 23:33:41 -04:00
<!-- <script defer src="chess.js"></script> -->
2023-04-01 23:11:32 -04:00
<!-- 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" />
2023-03-28 21:38:35 -04:00
<meta content="Elo Worldle" property="og:title" />
2023-04-01 23:11:32 -04:00
<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"
/>
2023-03-28 21:38:35 -04:00
<meta content="#538d4e" data-react-helmet="true" name="theme-color" />
2023-04-01 23:11:32 -04:00
<meta
name="description"
content="A Wordle-like game where you guess what bad chess algorithm you are playing against."
/>
2023-04-01 22:54:14 -04:00
2023-04-01 23:11:32 -04:00
<!-- <link rel="stylesheet" href="./main.css"></link> -->
2023-03-26 23:33:41 -04:00
<style>
html {
background-color: #002121;
width: 100%;
height: 100%;
color: white;
2023-03-26 23:33:41 -04:00
}
#board {
margin-left: auto;
margin-right: auto;
2023-04-01 23:11:32 -04:00
width: calc(min(90vw, 90vh));
2023-03-26 23:33:41 -04:00
height: calc(min(90vw, 90vh));
}
2023-04-01 23:11:32 -04:00
#game-over,
#stats,
#copy-stats,
#play-again,
#win-count {
2023-03-26 23:33:41 -04:00
display: none;
margin-left: auto;
margin-right: auto;
}
2023-04-01 23:11:32 -04:00
#game-over,
#win-count {
2023-03-26 23:33:41 -04:00
text-align: center;
width: 100%;
}
#stats {
width: fit-content;
font-size: x-large;
font-weight: bold;
outline: 2px solid white;
margin-bottom: 0;
}
2023-04-01 23:11:32 -04:00
#copy-stats,
#play-again {
2023-03-26 23:33:41 -04:00
color: black;
}
#finish {
display: block;
margin-left: auto;
margin-right: auto;
}
:host {
2023-04-01 23:11:32 -04:00
--square-color-dark: #86a666;
--square-color-light: #ffffdd;
2023-03-26 23:33:41 -04:00
}
2023-04-01 23:11:32 -04:00
h1,
pre {
font-family: "Courier New", Courier, monospace;
2023-03-26 23:33:41 -04:00
}
h1 {
text-align: center;
}
2023-03-26 23:33:41 -04:00
p {
2023-04-01 23:11:32 -04:00
font-family: "Times New Roman", Times, serif;
2023-03-26 23:33:41 -04:00
}
2023-04-01 23:11:32 -04:00
#players,
.player {
2023-03-26 23:33:41 -04:00
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;
}
2023-03-27 15:01:44 -04:00
footer {
width: 100%;
font-size: large;
text-align: center;
color: white;
}
a {
color: white;
}
2023-04-01 23:11:32 -04:00
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;
}
2023-03-26 23:33:41 -04:00
2023-04-01 23:11:32 -04:00
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;
}
2023-03-26 23:33:41 -04:00
</style>
</head>
<body>
<g-chess-board
2023-04-01 23:11:32 -04:00
id="board"
fen="start"
interactive
turn="white"
2023-03-26 23:33:41 -04:00
></g-chess-board>
2023-04-01 23:11:32 -04:00
<button style="display: none" id="finish">
show me the answer please i toootally guessed already
</button>
2023-03-26 23:33:41 -04:00
<h1 id="game-over"></h1>
2023-04-01 23:11:32 -04:00
<button title="or press `r`" id="play-again">
&gt; play again &lt;
</button>
2023-03-26 23:33:41 -04:00
<pre id="stats"></pre>
2023-03-29 19:35:50 -04:00
<button title="or press `c`" id="copy-stats">^ copy ^</button>
2023-04-01 23:11:32 -04:00
<br />
<h1>Players: (click name to toggle strikethrough)</h1>
2023-04-01 23:11:32 -04:00
<div id="players"></div>
2023-03-27 14:52:00 -04:00
<footer>
2023-04-01 23:11:32 -04:00
<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
>
2023-03-28 07:24:22 -04:00
&amp;
2023-04-01 23:11:32 -04:00
<a
href="https://sourceforge.net/p/tom7misc/svn/HEAD/tree/trunk/chess/"
>Original implementations</a
>
2023-03-28 15:21:57 -04:00
&amp;
<a href="http://tom7.org/chess/weak.pdf">Original paper</a>
2023-03-27 15:01:44 -04:00
by
2023-03-28 15:21:57 -04:00
<a href="http://tom7.org">tom7</a>
2023-04-01 23:11:32 -04:00
<br />
2023-03-27 14:52:00 -04:00
<a href="https://git.pyrope.net/mbk/elo-worldle">Code</a>
2023-03-28 07:24:22 -04:00
&amp;
2023-03-27 14:52:00 -04:00
<a href="https://elo-worldle.pyrope.net/paper.pdf">Paper</a>
2023-03-27 15:01:44 -04:00
by
<a href="https://pl.pyrope.net/terezi">me</a>
2023-04-01 23:11:32 -04:00
<div id="win-count"></div>
2023-03-27 14:52:00 -04:00
</footer>
2023-03-26 23:33:41 -04:00
</body>
</html>