add play again feature

addictions are good (especially when they don't require internet to
maintain (a la wordle))
This commit is contained in:
mehbark 2023-03-29 19:07:20 -04:00
parent 8f63113e4c
commit 30f147095d
3 changed files with 76 additions and 11 deletions

View file

@ -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>

32
main.js
View file

@ -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");
const game = new Chess();
var board = document.getElementById("board");
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}`);

40
main.ts
View file

@ -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(