123 lines
4.3 KiB
HTML
123 lines
4.3 KiB
HTML
<!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;
|
|
}
|
|
|
|
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>
|
|
</body>
|
|
</html>
|