diff --git a/takhta.html b/takhta.html index f4d5a96..47d2f39 100644 --- a/takhta.html +++ b/takhta.html @@ -51,9 +51,12 @@ background-color: #999; } li { + display: block; padding-left: 0.2em; padding-right: 0.2em; - display: block; + } + .undone { + text-decoration: line-through; } @@ -181,6 +184,7 @@

+
@@ -198,6 +202,7 @@ form.onsubmit = moveEvent; let moveHistory = []; + let moveFuture = []; function moveEvent(event) { event.preventDefault(); @@ -210,7 +215,24 @@ 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) { @@ -352,7 +374,8 @@ end: endLetter + endNumber, startPiece: renderedPiece, endPiece: promotion ? renderedPromotion : renderedPiece, - capturedPiece: captures ? endSquare.childNodes[0].data : null + capturedPiece: captures ? endSquare.childNodes[0].data : null, + moveText: move }; moveHistory.push(moveRecord); @@ -366,14 +389,6 @@ // Flip whose turn it is 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 {} } @@ -384,7 +399,7 @@ } // 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 endSquare = document.getElementById(end); endSquare.removeChild(endSquare.childNodes[0]); @@ -397,8 +412,30 @@ let whiteMove = document.getElementById('tomove').childNodes[0].data == 'White'; document.getElementById('tomove').childNodes[0].data = whiteMove ? 'Black' : 'White'; - // Remove from list of moves - document.getElementById('movelist').removeChild(document.getElementById('movelist').lastChild); + // 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); + } + + // Mark it as un-undone in the list of moves + document.getElementById('movelist').children[index].className = ''; } function flipBoard() { @@ -457,6 +494,10 @@ 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) {