614 lines
17 KiB
HTML
614 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Takhta</title>
|
|
<style>
|
|
tr :nth-child(1) {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
td {
|
|
font-size: 200%;
|
|
}
|
|
td div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#board tbody :nth-child(odd) :nth-child(even) {
|
|
background-color: #fff;
|
|
}
|
|
#board tbody :nth-child(even) :nth-child(odd) {
|
|
background-color: #fff;
|
|
}
|
|
#board tbody :nth-child(odd) :nth-child(odd) {
|
|
background-color: #999;
|
|
}
|
|
#board tbody :nth-child(even) :nth-child(even) {
|
|
background-color: #999;
|
|
}
|
|
#board tbody :last-child :nth-child(n) {
|
|
background-color: unset;
|
|
}
|
|
#board tbody :nth-child(n) :first-child {
|
|
background-color: unset;
|
|
}
|
|
#options {
|
|
display: table;
|
|
}
|
|
.option {
|
|
display: table-row;
|
|
}
|
|
.option :nth-child(1) {
|
|
display: table-cell;
|
|
}
|
|
.optionvalues :nth-child(1) {
|
|
display: inline;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: #000;
|
|
}
|
|
#movelist {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
#movelist :nth-child(odd) {
|
|
background-color: #fff;
|
|
}
|
|
#movelist :nth-child(even) {
|
|
margin-left: 1em;
|
|
background-color: #999;
|
|
}
|
|
li {
|
|
display: block;
|
|
padding-left: 0.2em;
|
|
padding-right: 0.2em;
|
|
}
|
|
.undone {
|
|
text-decoration: line-through;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section>
|
|
<table id="board">
|
|
<tbody>
|
|
<tr id="row8">
|
|
<th class="coords">8</th>
|
|
<td><div id="a8">♜</div></td>
|
|
<td><div id="b8">♞</div></td>
|
|
<td><div id="c8">♝</div></td>
|
|
<td><div id="d8">♚</div></td>
|
|
<td><div id="e8">♛</div></td>
|
|
<td><div id="f8">♝</div></td>
|
|
<td><div id="g8">♞</div></td>
|
|
<td><div id="h8">♜</div></td>
|
|
</tr>
|
|
|
|
<tr id="row7">
|
|
<th class="coords">7</th>
|
|
<td><div id="a7">♟</div></td>
|
|
<td><div id="b7">♟</div></td>
|
|
<td><div id="c7">♟</div></td>
|
|
<td><div id="d7">♟</div></td>
|
|
<td><div id="e7">♟</div></td>
|
|
<td><div id="f7">♟</div></td>
|
|
<td><div id="g7">♟</div></td>
|
|
<td><div id="h7">♟</div></td>
|
|
</tr>
|
|
|
|
<tr id="row6">
|
|
<th class="coords">6</th>
|
|
<td><div id="a6"></div></td>
|
|
<td><div id="b6"></div></td>
|
|
<td><div id="c6"></div></td>
|
|
<td><div id="d6"></div></td>
|
|
<td><div id="e6"></div></td>
|
|
<td><div id="f6"></div></td>
|
|
<td><div id="g6"></div></td>
|
|
<td><div id="h6"></div></td>
|
|
</tr>
|
|
|
|
<tr id="row5">
|
|
<th class="coords">5</th>
|
|
<td><div id="a5"></div></td>
|
|
<td><div id="b5"></div></td>
|
|
<td><div id="c5"></div></td>
|
|
<td><div id="d5"></div></td>
|
|
<td><div id="e5"></div></td>
|
|
<td><div id="f5"></div></td>
|
|
<td><div id="g5"></div></td>
|
|
<td><div id="h5"></div></td>
|
|
</tr>
|
|
|
|
<tr id="row4">
|
|
<th class="coords">4</th>
|
|
<td><div id="a4"></div></td>
|
|
<td><div id="b4"></div></td>
|
|
<td><div id="c4"></div></td>
|
|
<td><div id="d4"></div></td>
|
|
<td><div id="e4"></div></td>
|
|
<td><div id="f4"></div></td>
|
|
<td><div id="g4"></div></td>
|
|
<td><div id="h4"></div></td>
|
|
</tr>
|
|
|
|
<tr id="row3">
|
|
<th class="coords">3</th>
|
|
<td><div id="a3"></div></td>
|
|
<td><div id="b3"></div></td>
|
|
<td><div id="c3"></div></td>
|
|
<td><div id="d3"></div></td>
|
|
<td><div id="e3"></div></td>
|
|
<td><div id="f3"></div></td>
|
|
<td><div id="g3"></div></td>
|
|
<td><div id="h3"></div></td>
|
|
</tr>
|
|
|
|
<tr id="row2">
|
|
<th class="coords">2</th>
|
|
<td><div id="a2">♙</div></td>
|
|
<td><div id="b2">♙</div></td>
|
|
<td><div id="c2">♙</div></td>
|
|
<td><div id="d2">♙</div></td>
|
|
<td><div id="e2">♙</div></td>
|
|
<td><div id="f2">♙</div></td>
|
|
<td><div id="g2">♙</div></td>
|
|
<td><div id="h2">♙</div></td>
|
|
</tr>
|
|
|
|
<tr id="row1">
|
|
<th class="coords">1</th>
|
|
<td><div id="a1">♖</div></td>
|
|
<td><div id="b1">♘</div></td>
|
|
<td><div id="c1">♗</div></td>
|
|
<td><div id="d1">♔</div></td>
|
|
<td><div id="e1">♕</div></td>
|
|
<td><div id="f1">♗</div></td>
|
|
<td><div id="g1">♘</div></td>
|
|
<td><div id="h1">♖</div></td>
|
|
</tr>
|
|
|
|
<tr class="coords">
|
|
<th></th>
|
|
<th>A</th>
|
|
<th>B</th>
|
|
<th>C</th>
|
|
<th>D</th>
|
|
<th>E</th>
|
|
<th>F</th>
|
|
<th>G</th>
|
|
<th>H</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
<form id="input">
|
|
<label><span id="tomove">White</span>'s move
|
|
<input id="move" type="text" autocomplete="off">
|
|
</label>
|
|
<input type="submit" value="Move">
|
|
</form>
|
|
</p>
|
|
<p>
|
|
<form id="actions">
|
|
<input type="button" value="Undo" onclick="undoMove()">
|
|
<input type="button" value="Redo" onclick="redoMove()">
|
|
<input type="button" value="Flip board" onclick="flipBoard()">
|
|
<input type="button" value="Download moves" onclick="download()">
|
|
</form>
|
|
</p>
|
|
<p>
|
|
<form id="options">
|
|
<div class="option">
|
|
<div class="optiontext">White king on</div>
|
|
<div class="optionvalues">
|
|
<label>
|
|
<input type="radio" id="whited1" name="whiteking" value="d1" checked onchange="setupKings()">
|
|
d1
|
|
</label>
|
|
<label>
|
|
<input type="radio" id="whitee1" name="whiteking" value="e1" onchange="setupKings()">
|
|
e1
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="option">
|
|
<div class="optiontext">Black king on</div>
|
|
<div class="optionvalues">
|
|
<label>
|
|
<input type="radio" id="blackd8" name="blackking" value="d8" checked onchange="setupKings()">
|
|
d8
|
|
</label>
|
|
<label>
|
|
<input type="radio" id="blacke8" name="blackking" value="e8" onchange="setupKings()">
|
|
e8
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</p>
|
|
</section>
|
|
<section id="moves">
|
|
<p>Moves thus far</p>
|
|
<ul id="movelist">
|
|
</ul>
|
|
</section>
|
|
|
|
<script>
|
|
'use strict';
|
|
let form = document.getElementById('input');
|
|
form.onsubmit = moveEvent;
|
|
|
|
document.getElementById('whited1').checked = true;
|
|
document.getElementById('blackd8').checked = true;
|
|
|
|
let moveHistory = [];
|
|
let moveFuture = [];
|
|
|
|
function moveEvent(event) {
|
|
event.preventDefault();
|
|
|
|
let move = document.getElementById('move').value;
|
|
if (move === '') {
|
|
return;
|
|
}
|
|
|
|
let ret = doMove(move);
|
|
if ('error' in ret) {
|
|
alert(ret.error);
|
|
return;
|
|
}
|
|
|
|
// Destroy the future
|
|
moveFuture = [];
|
|
let movelist = document.getElementById('movelist')
|
|
let undones = Array.from(document.getElementsByClassName('undone')); // Array.from makes this not change from under us
|
|
for (let element of undones) {
|
|
movelist.removeChild(element);
|
|
}
|
|
|
|
// List the move
|
|
let listElement = document.createElement('li');
|
|
listElement.appendChild(document.createTextNode(move));
|
|
movelist.appendChild(listElement);
|
|
|
|
// Empty input field
|
|
document.getElementById('move').value = '';
|
|
}
|
|
|
|
function doMove(move) {
|
|
// Piece
|
|
let piece = move.slice(0, 1);
|
|
let index = 0;
|
|
switch(piece) {
|
|
case 'K':
|
|
case 'Q':
|
|
case 'B':
|
|
case 'N':
|
|
case 'R':
|
|
case 'P':
|
|
index++;
|
|
break;
|
|
case 'a':
|
|
case 'b':
|
|
case 'c':
|
|
case 'd':
|
|
case 'e':
|
|
case 'f':
|
|
case 'g':
|
|
case 'h':
|
|
piece = 'P';
|
|
break;
|
|
default:
|
|
return {error: 'Not a valid piece: ' + piece};
|
|
}
|
|
|
|
// Start square
|
|
let startLetter = move.slice(index, index + 1);
|
|
let startNumber = move.slice(index + 1, index + 2);
|
|
index += 2;
|
|
if (
|
|
startLetter === '' || !'abcdefgh'.includes(startLetter) ||
|
|
startNumber === '' || !'12345678'.includes(startNumber)
|
|
) {
|
|
return {error: 'Not a valid coordinate: ' + startLetter + startNumber};
|
|
}
|
|
|
|
// Capturing
|
|
let captures = false;
|
|
if (move.slice(index, index + 1) === 'x') {
|
|
captures = true;
|
|
index++;
|
|
}
|
|
|
|
// End square
|
|
let endLetter = move.slice(index, index + 1);
|
|
let endNumber = move.slice(index + 1, index + 2);
|
|
index += 2;
|
|
if (
|
|
endLetter === '' || !'abcdefgh'.includes(endLetter) ||
|
|
endNumber === '' || !'12345678'.includes(endNumber)
|
|
) {
|
|
return {error: 'Not a valid coordinate: ' + endLetter + endNumber};
|
|
}
|
|
|
|
// Promotion
|
|
let promotion = null;
|
|
if (move.slice(index, index + 1) === '=') {
|
|
index++;
|
|
switch (move.slice(index, index + 1)) {
|
|
case 'Q':
|
|
case 'B':
|
|
case 'N':
|
|
case 'R':
|
|
promotion = move.slice(index, index + 1);
|
|
break;
|
|
case 'K':
|
|
return {error: 'Cannot promote a piece to king'};
|
|
break;
|
|
case 'P':
|
|
return {error: 'Cannot promote a piece to pawn'};
|
|
break;
|
|
default:
|
|
return {error: 'Unrecognized piece: ' + move.slice(index, index + 1)};
|
|
}
|
|
index++;
|
|
}
|
|
|
|
// Check(mate)
|
|
switch(move.slice(index)) {
|
|
case '':
|
|
// nothing
|
|
break;
|
|
case '+':
|
|
// TODO: Check
|
|
break;
|
|
case '++':
|
|
case '#':
|
|
// TODO: Checkmate'
|
|
break;
|
|
default:
|
|
return {error: 'Unexpected contents at the end of the move: ' + move.slice(index)};
|
|
}
|
|
|
|
// End of parsing, start of move construction
|
|
let whitePieces = {'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙'};
|
|
let blackPieces = {'K': '♚', 'Q': '♛', 'R': '♜', 'B': '♝', 'N': '♞', 'P': '♟'};
|
|
|
|
let whiteMove = document.getElementById('tomove').childNodes[0].data == 'White';
|
|
|
|
let renderedPiece = whiteMove ? whitePieces[piece] : blackPieces[piece];
|
|
let renderedPromotion = null;
|
|
if (promotion) {
|
|
renderedPromotion = whiteMove ? whitePieces[promotion] : blackPieces[promotion];
|
|
}
|
|
|
|
// Are we moving the piece onto itself?
|
|
if (startLetter === endLetter && startNumber === endNumber) {
|
|
return {error: 'Start and end squares of the move cannot be identical'};
|
|
}
|
|
|
|
// Are we moving the piece from where it is located?
|
|
let startSquare = document.getElementById(startLetter + startNumber);
|
|
if (startSquare.childNodes.length === 0) {
|
|
return {error: 'No piece on square ' + startLetter + startNumber};
|
|
}
|
|
if (startSquare.childNodes[0].data !== renderedPiece) {
|
|
let pieceNames = {'K': 'king', 'Q': 'vizier', 'R': 'rook', 'B': 'elephant', 'N': 'horse', 'P': 'pawn'};
|
|
return {error: (whiteMove ? 'White' : 'Black') + ' ' + pieceNames[piece] + ' not on square ' + startLetter + startNumber};
|
|
}
|
|
|
|
// TODO: Check piece is allowed to move like that
|
|
|
|
// Can the piece move to this location?
|
|
let endSquare = document.getElementById(endLetter + endNumber);
|
|
if (endSquare.childNodes.length !== 0 && !captures) {
|
|
return {error: 'Square ' + endLetter + endNumber + ' is occupied, did you mean to capture?'};
|
|
}
|
|
if (endSquare.childNodes.length === 0 && captures) {
|
|
return {error: 'Square ' + endLetter + endNumber + ' empty even though capture was specified'};
|
|
}
|
|
|
|
// Record our alterations to the table
|
|
let moveRecord = {
|
|
start: startLetter + startNumber,
|
|
end: endLetter + endNumber,
|
|
startPiece: renderedPiece,
|
|
endPiece: promotion ? renderedPromotion : renderedPiece,
|
|
capturedPiece: captures ? endSquare.childNodes[0].data : null,
|
|
moveText: move
|
|
};
|
|
moveHistory.push(moveRecord);
|
|
|
|
// Apply move
|
|
if (captures) {
|
|
endSquare.removeChild(endSquare.childNodes[0]);
|
|
}
|
|
startSquare.removeChild(startSquare.childNodes[0]);
|
|
endSquare.appendChild(document.createTextNode(promotion ? renderedPromotion : renderedPiece))
|
|
|
|
// Flip whose turn it is
|
|
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
|
|
|
return {}
|
|
}
|
|
|
|
function undoMove() {
|
|
if (moveHistory.length === 0) {
|
|
alert('No moves to undo');
|
|
return;
|
|
}
|
|
|
|
// Undo move on the board
|
|
let {start, end, startPiece, capturedPiece, moveText} = moveHistory.pop();
|
|
let startSquare = document.getElementById(start);
|
|
let endSquare = document.getElementById(end);
|
|
endSquare.removeChild(endSquare.childNodes[0]);
|
|
startSquare.appendChild(document.createTextNode(startPiece));
|
|
if (capturedPiece) {
|
|
endSquare.appendChild(document.createTextNode(capturedPiece));
|
|
}
|
|
|
|
// Flip whose turn it is
|
|
let whiteMove = document.getElementById('tomove').childNodes[0].data == 'White';
|
|
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
|
|
|
// Add to list of redoable moves
|
|
moveFuture.push(moveText);
|
|
|
|
// Mark as undone on the list of moves
|
|
document.getElementById('movelist').children[moveHistory.length].className = 'undone';
|
|
}
|
|
|
|
function redoMove() {
|
|
if (moveFuture.length === 0) {
|
|
alert('No moves to redo');
|
|
return;
|
|
}
|
|
|
|
let index = moveHistory.length;
|
|
let move = moveFuture.pop();
|
|
|
|
// Execute move
|
|
let ret = doMove(move);
|
|
if ('error' in ret) {
|
|
alert(ret.error);
|
|
// Put back in list of undone moves
|
|
moveFuture.push(move);
|
|
return false;
|
|
}
|
|
|
|
// Mark it as un-undone in the list of moves
|
|
document.getElementById('movelist').children[index].className = '';
|
|
|
|
return true;
|
|
}
|
|
|
|
function flipBoard() {
|
|
let oldBoard = document.getElementById('board').firstElementChild;
|
|
|
|
let newBoard = document.createElement('tbody');
|
|
|
|
// Create a set of new rows that are in the same order as in the old board
|
|
// but have their columns reversed
|
|
let rows = [];
|
|
for (let oldRow of oldBoard.children) {
|
|
let newRow = document.createElement('tr');
|
|
newRow.id = oldRow.id;
|
|
|
|
let columns = Array.from(oldRow.children);
|
|
|
|
// Treat the first column specially, as it is the label
|
|
newRow.appendChild(columns[0]);
|
|
|
|
// Add rest of columns in reverse order
|
|
for (let i = 8; i >= 1; i--) {
|
|
newRow.appendChild(columns[i]);
|
|
}
|
|
|
|
rows.push(newRow);
|
|
}
|
|
|
|
// Reverse the order of the first 8 rows
|
|
// This combined with the flipping of the columns creates a rotation
|
|
// The proof of this is left as homework for the linear algebra student reading this
|
|
for (let i = 7; i >= 0; i--) {
|
|
newBoard.appendChild(rows[i]);
|
|
}
|
|
|
|
// Treat the last row specifically, as it is a row of labels
|
|
// We did however reverse its column order, as all the columns have been reversed
|
|
// and it's important that the labels reflect that
|
|
newBoard.appendChild(rows[8]);
|
|
|
|
// Replace the old board with the new one
|
|
document.getElementById('board').replaceChild(newBoard, oldBoard);
|
|
}
|
|
|
|
function download() {
|
|
let actions = document.getElementById("actions");
|
|
let moves = document.getElementById("movelist");
|
|
let link = document.createElement("a");
|
|
|
|
link.setAttribute("download", "moves.text");
|
|
link.style.display = "none";
|
|
actions.appendChild(link);
|
|
|
|
var pos = 0;
|
|
var game = [];
|
|
var longest = 0;
|
|
|
|
for(let move = 0; move < moves.children.length; move += 1) {
|
|
let record = moves.children[move];
|
|
if (record.className === 'undone') {
|
|
// Don't include undone moves
|
|
continue;
|
|
}
|
|
|
|
if(move % 2 === 0) {
|
|
if(record.innerHTML.length > longest) {
|
|
longest = record.innerHTML.length;
|
|
}
|
|
|
|
game[pos] = [record.innerHTML];
|
|
} else {
|
|
game[pos].push(record.innerHTML);
|
|
pos += 1;
|
|
}
|
|
}
|
|
|
|
let file = [];
|
|
let padding = Math.floor(Math.log10(game.length));
|
|
|
|
for(let entry = 0; entry < game.length; entry += 1) {
|
|
var line = `${entry + 1}`.padStart(padding + 1, " ") + ". ";
|
|
|
|
if(game[entry][1] !== undefined) {
|
|
line += `${game[entry][0].padEnd(longest, " ")} ${game[entry][1]}`;
|
|
} else {
|
|
line += game[entry][0];
|
|
}
|
|
|
|
file.push(line);
|
|
}
|
|
|
|
let contents = encodeURIComponent(file.join("\n"));
|
|
|
|
link.setAttribute("href", "data:text/plain;charset=utf-8," + contents);
|
|
link.click();
|
|
actions.removeChild(link);
|
|
}
|
|
|
|
function setupKings() {
|
|
let options = new FormData(document.getElementById('options'));
|
|
let whiteKing = options.get('whiteking');
|
|
let whiteQueen = whiteKing === 'd1' ? 'e1' : 'd1';
|
|
let blackKing = options.get('blackking');
|
|
let blackQueen = blackKing === 'd8' ? 'e8' : 'd8';
|
|
|
|
// Undo all moves
|
|
while (moveHistory.length > 0) {
|
|
undoMove();
|
|
}
|
|
|
|
// Place the kings and queens
|
|
document.getElementById(whiteKing).firstChild.data = '♔';
|
|
document.getElementById(whiteQueen).firstChild.data = '♕';
|
|
document.getElementById(blackKing).firstChild.data = '♚';
|
|
document.getElementById(blackQueen).firstChild.data = '♛';
|
|
|
|
// Redo all the moves we can
|
|
while (moveFuture.length > 0) {
|
|
if (!redoMove()) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|