Add redo
This commit is contained in:
parent
881a9b803c
commit
543f9bdbc2
1 changed files with 54 additions and 13 deletions
67
takhta.html
67
takhta.html
|
@ -51,9 +51,12 @@
|
||||||
background-color: #999;
|
background-color: #999;
|
||||||
}
|
}
|
||||||
li {
|
li {
|
||||||
|
display: block;
|
||||||
padding-left: 0.2em;
|
padding-left: 0.2em;
|
||||||
padding-right: 0.2em;
|
padding-right: 0.2em;
|
||||||
display: block;
|
}
|
||||||
|
.undone {
|
||||||
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -181,6 +184,7 @@
|
||||||
<p>
|
<p>
|
||||||
<form id="actions">
|
<form id="actions">
|
||||||
<input type="button" value="Undo" onclick="undoMove()">
|
<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="Flip board" onclick="flipBoard()">
|
||||||
<input type="button" value="Download moves" onclick="download()">
|
<input type="button" value="Download moves" onclick="download()">
|
||||||
</form>
|
</form>
|
||||||
|
@ -198,6 +202,7 @@
|
||||||
form.onsubmit = moveEvent;
|
form.onsubmit = moveEvent;
|
||||||
|
|
||||||
let moveHistory = [];
|
let moveHistory = [];
|
||||||
|
let moveFuture = [];
|
||||||
|
|
||||||
function moveEvent(event) {
|
function moveEvent(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -210,7 +215,24 @@
|
||||||
let ret = doMove(move);
|
let ret = doMove(move);
|
||||||
if ('error' in ret) {
|
if ('error' in ret) {
|
||||||
alert(ret.error);
|
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) {
|
function doMove(move) {
|
||||||
|
@ -352,7 +374,8 @@
|
||||||
end: endLetter + endNumber,
|
end: endLetter + endNumber,
|
||||||
startPiece: renderedPiece,
|
startPiece: renderedPiece,
|
||||||
endPiece: promotion ? renderedPromotion : renderedPiece,
|
endPiece: promotion ? renderedPromotion : renderedPiece,
|
||||||
capturedPiece: captures ? endSquare.childNodes[0].data : null
|
capturedPiece: captures ? endSquare.childNodes[0].data : null,
|
||||||
|
moveText: move
|
||||||
};
|
};
|
||||||
moveHistory.push(moveRecord);
|
moveHistory.push(moveRecord);
|
||||||
|
|
||||||
|
@ -366,14 +389,6 @@
|
||||||
// Flip whose turn it is
|
// Flip whose turn it is
|
||||||
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
||||||
|
|
||||||
// List the move
|
|
||||||
let listElement = document.createElement('li');
|
|
||||||
listElement.appendChild(document.createTextNode(move));
|
|
||||||
document.getElementById('movelist').appendChild(listElement);
|
|
||||||
|
|
||||||
// Empty input field
|
|
||||||
document.getElementById('move').value = '';
|
|
||||||
|
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -384,7 +399,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Undo move on the board
|
// Undo move on the board
|
||||||
let {start, end, startPiece, endPiece, capturedPiece} = moveHistory.pop();
|
let {start, end, startPiece, capturedPiece, moveText} = moveHistory.pop();
|
||||||
let startSquare = document.getElementById(start);
|
let startSquare = document.getElementById(start);
|
||||||
let endSquare = document.getElementById(end);
|
let endSquare = document.getElementById(end);
|
||||||
endSquare.removeChild(endSquare.childNodes[0]);
|
endSquare.removeChild(endSquare.childNodes[0]);
|
||||||
|
@ -397,8 +412,30 @@
|
||||||
let whiteMove = document.getElementById('tomove').childNodes[0].data == 'White';
|
let whiteMove = document.getElementById('tomove').childNodes[0].data == 'White';
|
||||||
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White';
|
||||||
|
|
||||||
// Remove from list of moves
|
// Add to list of redoable moves
|
||||||
document.getElementById('movelist').removeChild(document.getElementById('movelist').lastChild);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mark it as un-undone in the list of moves
|
||||||
|
document.getElementById('movelist').children[index].className = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
function flipBoard() {
|
function flipBoard() {
|
||||||
|
@ -457,6 +494,10 @@
|
||||||
|
|
||||||
for(let move = 0; move < moves.children.length; move += 1) {
|
for(let move = 0; move < moves.children.length; move += 1) {
|
||||||
let record = moves.children[move];
|
let record = moves.children[move];
|
||||||
|
if (record.className === 'undone') {
|
||||||
|
// Don't include undone moves
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
if(move % 2 === 0) {
|
if(move % 2 === 0) {
|
||||||
if(record.innerHTML.length > longest) {
|
if(record.innerHTML.length > longest) {
|
||||||
|
|
Loading…
Reference in a new issue