add play again feature

addictions are good (especially when they don't require internet to
maintain (a la wordle))

index.html

@@ -20,6 +20,7 @@
                 background-color: #002121;
                 width: 100%;
                 height: 100%;
+                color: white;
             }
             #board {
                 margin-left: auto;
@@ -27,11 +28,10 @@
                 width:  calc(min(90vw, 90vh));
                 height: calc(min(90vw, 90vh));
             }
-            #game-over, #stats, #copy-stats  {
+            #game-over, #stats, #copy-stats, #play-again {
                 display: none;
                 margin-left: auto;
                 margin-right: auto;
-                color: white;
             }
 
             #game-over {
@@ -47,7 +47,7 @@
                 margin-bottom: 0;
             }
 
-            #copy-stats {
+            #copy-stats, #play-again {
                 color: black;
             }
 
@@ -66,12 +66,15 @@
                 font-family: 'Courier New', Courier, monospace;
             }
 
+            h1 {
+                text-align: center;
+            }
+
             p {
                 font-family: 'Times New Roman', Times, serif;
             }
 
             #players, .player {
-                color: white;
                 margin-left: auto;
                 margin-right: auto;
                 text-align: center;
@@ -130,10 +133,12 @@
         ></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 id="play-again">&gt; play again &lt;</button>
         <pre id="stats"></pre>
         <button id="copy-stats">^ copy ^</button>
+        <br>
+        <h1>Players: (click name to toggle strikethrough)</h1>
         <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>

main.js

@@ -103,7 +103,7 @@ const alphabetical = board => {
 // yeah this version sucks butttttt uh
 // yeah
 // prettier-ignore
-var equalizer_state = {
+const equalizer_state_default = {
     piece_moves: {
         p: 0,
         b: 0,
@@ -124,6 +124,7 @@ var equalizer_state = {
         a1: 0, b1: 0, c1: 0, d1: 0, e1: 0, f1: 0, g1: 0, h1: 0
     }
 };
+var equalizer_state = equalizer_state_default;
 const equalizer = board => {
     let best_move;
     let least_moved_found = Infinity;
@@ -623,8 +624,8 @@ function find_specified_in_hash() {
 const todays_player = (_a = find_specified_in_hash()) !== null && _a !== void 0 ? _a : players[Math.floor(Math.random() * players.length)];
 console.log(`SPOILER: today's player is ${todays_player.name}`);
 // const todays_player = min_oppt_move;
-const board = document.getElementById("board");
+var board = document.getElementById("board");
-const game = new Chess();
+var game = new Chess();
 function computer_move() {
     num_moves++;
     history += "M";
@@ -653,6 +654,9 @@ ${history}`;
     let copy_stats = document.getElementById("copy-stats");
     copy_stats.style.display = "block";
     copy_stats.addEventListener("click", _ => navigator.clipboard.writeText(stats_text));
+    let play_again = document.getElementById("play-again");
+    play_again.style.display = "block";
+    play_again.addEventListener("click", _ => reset());
     console.log("PLAYER IS WIN");
 }
 var num_guesses = 0;
@@ -689,6 +693,28 @@ function append_players_to(n) {
         n.appendChild(child);
     }
 }
+// ERROR: !
+// INELEGANT
+// "HACK"!
+function reset() {
+    game = new Chess();
+    board.fen = game.fen();
+    board.turn = "white";
+    board.interactive = true;
+    num_guesses = 0;
+    num_moves = 0;
+    history = "";
+    equalizer_state = equalizer_state_default;
+    let players = document.getElementById("players");
+    players.innerHTML = "";
+    append_players_to(players);
+    let stats = document.getElementById("stats");
+    stats.innerHTML = "";
+    stats.style.display = "none";
+    document.getElementById("copy-stats").style.display = "none";
+    document.getElementById("play-again").style.display = "none";
+    document.getElementById("game-over").style.display = "none";
+}
 window.addEventListener("DOMContentLoaded", () => {
     board.addEventListener("movestart", (e) => {
         console.log(`Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`);

main.ts

@@ -140,7 +140,7 @@ const alphabetical: Player = board => {
 // yeah this version sucks butttttt uh
 // yeah
 // prettier-ignore
-var equalizer_state: {
+const equalizer_state_default: {
     piece_moves: Record<PieceSymbol, number>;
     square_visits: Record<Square, number>;
 } = {
@@ -165,6 +165,8 @@ var equalizer_state: {
     }
 };
 
+var equalizer_state = equalizer_state_default;
+
 const equalizer: Player = board => {
     let best_move: Move;
     let least_moved_found = Infinity;
@@ -749,9 +751,9 @@ const todays_player =
 console.log(`SPOILER: today's player is ${todays_player.name}`);
 // const todays_player = min_oppt_move;
 
-const board: any = document.getElementById("board");
+var board: any = document.getElementById("board");
 
-const game = new Chess();
+var game = new Chess();
 
 function computer_move() {
     num_moves++;
@@ -789,6 +791,10 @@ ${history}`;
         navigator.clipboard.writeText(stats_text)
     );
 
+    let play_again = document.getElementById("play-again");
+    play_again.style.display = "block";
+    play_again.addEventListener("click", _ => reset());
+
     console.log("PLAYER IS WIN");
 }
 
@@ -834,6 +840,34 @@ function append_players_to(n: Node) {
     }
 }
 
+// ERROR: !
+// INELEGANT
+// "HACK"!
+function reset() {
+    game = new Chess();
+    board.fen = game.fen();
+    board.turn = "white";
+    board.interactive = true;
+
+    num_guesses = 0;
+    num_moves = 0;
+    history = "";
+
+    equalizer_state = equalizer_state_default;
+
+    let players = document.getElementById("players");
+    players.innerHTML = "";
+    append_players_to(players);
+
+    let stats = document.getElementById("stats");
+    stats.innerHTML = "";
+    stats.style.display = "none";
+
+    document.getElementById("copy-stats").style.display = "none";
+    document.getElementById("play-again").style.display = "none";
+    document.getElementById("game-over").style.display = "none";
+}
+
 window.addEventListener("DOMContentLoaded", () => {
     board.addEventListener("movestart", (e: any) => {
         console.log(