Add redo

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;
 			}
 		</style>
 	</head>
@@ -181,6 +184,7 @@
 			<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>
@@ -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) {