This commit is contained in:
mehbark 2023-04-01 23:37:30 -04:00
parent 041a8167ea
commit 037fe69250
4 changed files with 17 additions and 2 deletions

View file

@ -184,9 +184,19 @@
background-image: url("./piece-bq.png"); background-image: url("./piece-bq.png");
image-rendering: pixelated; image-rendering: pixelated;
} }
#dummy-board {
width: calc(min(90vw, 90vh));
height: calc(min(90vw, 90vh));
}
.much-tall {
height: 4130px;
}
</style> </style>
</head> </head>
<body> <body>
<div id="dummy-board"></div>
<g-chess-board <g-chess-board
id="board" id="board"
fen="start" fen="start"
@ -204,7 +214,7 @@
<button title="or press `c`" id="copy-stats">^ copy ^</button> <button title="or press `c`" id="copy-stats">^ copy ^</button>
<br /> <br />
<h1>Players: (click name to toggle strikethrough)</h1> <h1>Players: (click name to toggle strikethrough)</h1>
<div id="players"></div> <div id="players" class="much-tall"></div>
<footer> <footer>
<a href="https://www.youtube.com/watch?v=DpXy041BIlA">Tutorial</a <a href="https://www.youtube.com/watch?v=DpXy041BIlA">Tutorial</a
><br /> ><br />

View file

@ -739,6 +739,8 @@ function reset() {
document.getElementById("game-over").style.display = "none"; document.getElementById("game-over").style.display = "none";
} }
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
document.getElementById("dummy-board").style.display = "none";
document.getElementById("players").classList.remove("much-tall");
board.addEventListener("movestart", (e) => { board.addEventListener("movestart", (e) => {
console.log(`Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`); console.log(`Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`);
e.detail.setTargets( e.detail.setTargets(

2
main.min.js vendored
View file

@ -3,4 +3,4 @@ import{Chess,Ox88,DEFAULT_POSITION,SQUARES,rank,file,WHITE,BLACK,KING}from"./che
Win #${wins} Win #${wins}
Guesses: ${num_guesses} Guesses: ${num_guesses}
Moves: ${num_moves} Moves: ${num_moves}
${history}`;stats.innerText=stats_text;let copy_stats=document.getElementById("copy-stats");copy_stats.style.display="block";copy_stats.addEventListener("click",_=>copy_stats_to_clipboard());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;var num_moves=0;var history="";function append_players_to(n){for(const player of players){let child=document.createElement("div");child.classList.add("player");let child_name=document.createElement("h1");child_name.classList.add("player-name");child_name.innerText=player.name;let child_desc=document.createElement("p");child_desc.classList.add("player-desc");child_desc.innerText=player.description;let guess_button=document.createElement("button");guess_button.innerText="^ guess ^";guess_button.onclick=_=>{num_guesses++;history+="G";if(todays_player.name==player.name){show_win();child.classList.add("correct")}else{child.classList.add("wrong")}guess_button.onclick=()=>{}};child.appendChild(child_name);child.appendChild(child_desc);child.appendChild(guess_button);child_name.addEventListener("click",_=>child.classList.toggle("strikethrough"));n.appendChild(child)}}var wins=0;function wins_exclamation_marks(){let base_10_log_of_wins=Math.floor(Math.log10(wins));return base_10_log_of_wins>0?"!".repeat(base_10_log_of_wins):"."}var in_game_over=false;function reset(){let play_again=document.getElementById("play-again");play_again.style.display="none";play_again.onclick=_=>console.log("you can't play again again sorry :]");in_game_over=false;todays_player=get_todays_player();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("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}`);e.detail.setTargets(game.moves({square:e.detail.from,verbose:true}).map(m=>m.to));if(game.isGameOver()){show_game_over()}});board.addEventListener("moveend",e=>{console.log(`Move ending: ${e.detail.from} -> ${e.detail.to}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`);const move=game.move({from:e.detail.from,to:e.detail.to,promotion:"q"});if(move===null){e.preventDefault()}if(game.isGameOver()){show_game_over()}});board.addEventListener("movefinished",e=>{board.fen=game.fen();board.turn=game.turn()==="w"?"white":"black";board.interactive=game.turn()==="w";if(!board.interactive){let move=computer_move();if(!move){console.log("Didn't get a move from the computer (this is fine if the game is over)");return}console.log(`Computer move: ${move}`);game.move(move);board.fen=game.fen();board.turn="white";board.interactive=true}});document.getElementById("finish").addEventListener("click",_=>show_game_over());document.addEventListener("keypress",e=>{if(e.key=="r"&&in_game_over){reset()}else if(e.key=="c"&&in_game_over){copy_stats_to_clipboard()}});append_players_to(document.getElementById("players"))}); ${history}`;stats.innerText=stats_text;let copy_stats=document.getElementById("copy-stats");copy_stats.style.display="block";copy_stats.addEventListener("click",_=>copy_stats_to_clipboard());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;var num_moves=0;var history="";function append_players_to(n){for(const player of players){let child=document.createElement("div");child.classList.add("player");let child_name=document.createElement("h1");child_name.classList.add("player-name");child_name.innerText=player.name;let child_desc=document.createElement("p");child_desc.classList.add("player-desc");child_desc.innerText=player.description;let guess_button=document.createElement("button");guess_button.innerText="^ guess ^";guess_button.onclick=_=>{num_guesses++;history+="G";if(todays_player.name==player.name){show_win();child.classList.add("correct")}else{child.classList.add("wrong")}guess_button.onclick=()=>{}};child.appendChild(child_name);child.appendChild(child_desc);child.appendChild(guess_button);child_name.addEventListener("click",_=>child.classList.toggle("strikethrough"));n.appendChild(child)}}var wins=0;function wins_exclamation_marks(){let base_10_log_of_wins=Math.floor(Math.log10(wins));return base_10_log_of_wins>0?"!".repeat(base_10_log_of_wins):"."}var in_game_over=false;function reset(){let play_again=document.getElementById("play-again");play_again.style.display="none";play_again.onclick=_=>console.log("you can't play again again sorry :]");in_game_over=false;todays_player=get_todays_player();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("game-over").style.display="none"}window.addEventListener("DOMContentLoaded",()=>{document.getElementById("dummy-board").style.display="none";document.getElementById("players").classList.remove("much-tall");board.addEventListener("movestart",e=>{console.log(`Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`);e.detail.setTargets(game.moves({square:e.detail.from,verbose:true}).map(m=>m.to));if(game.isGameOver()){show_game_over()}});board.addEventListener("moveend",e=>{console.log(`Move ending: ${e.detail.from} -> ${e.detail.to}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`);const move=game.move({from:e.detail.from,to:e.detail.to,promotion:"q"});if(move===null){e.preventDefault()}if(game.isGameOver()){show_game_over()}});board.addEventListener("movefinished",e=>{board.fen=game.fen();board.turn=game.turn()==="w"?"white":"black";board.interactive=game.turn()==="w";if(!board.interactive){let move=computer_move();if(!move){console.log("Didn't get a move from the computer (this is fine if the game is over)");return}console.log(`Computer move: ${move}`);game.move(move);board.fen=game.fen();board.turn="white";board.interactive=true}});document.getElementById("finish").addEventListener("click",_=>show_game_over());document.addEventListener("keypress",e=>{if(e.key=="r"&&in_game_over){reset()}else if(e.key=="c"&&in_game_over){copy_stats_to_clipboard()}});append_players_to(document.getElementById("players"))});

View file

@ -900,6 +900,9 @@ function reset() {
} }
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
document.getElementById("dummy-board").style.display = "none";
document.getElementById("players").classList.remove("much-tall");
board.addEventListener("movestart", (e: any) => { board.addEventListener("movestart", (e: any) => {
console.log( console.log(
`Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}` `Move started: ${e.detail.from}, ${e.detail.piece.color} ${e.detail.piece.pieceType}`