From 7efde2981001e243a435313c632525ee7ba68442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juhani=20Krekel=C3=A4?= <juhani@krekelä.fi>
Date: Fri, 8 Jan 2021 21:57:50 +0200
Subject: [PATCH] Add button for flipping the board perspective

---
 takhta.html | 78 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 63 insertions(+), 15 deletions(-)
diff --git a/takhta.html b/takhta.html
index 6b7bbe4..cfa117a 100644
--- a/takhta.html
+++ b/takhta.html
@@ -11,22 +11,22 @@
 			td {
 				font-size: 200%;
 			}
-			.board tbody :nth-child(odd) :nth-child(even) {
+			#board tbody :nth-child(odd) :nth-child(even) {
 				background-color: #fff;
 			}
-			.board tbody :nth-child(even) :nth-child(odd) {
+			#board tbody :nth-child(even) :nth-child(odd) {
 				background-color: #fff;
 			}
-			.board tbody :nth-child(odd) :nth-child(odd) {
+			#board tbody :nth-child(odd) :nth-child(odd) {
 				background-color: #999;
 			}
-			.board tbody :nth-child(even) :nth-child(even) {
+			#board tbody :nth-child(even) :nth-child(even) {
 				background-color: #999;
 			}
-			.board tbody :last-child :nth-child(n) {
+			#board tbody :last-child :nth-child(n) {
 				background-color: unset;
 			}
-			.board tbody :nth-child(n) :first-child {
+			#board tbody :nth-child(n) :first-child {
 				background-color: unset;
 			}
 			body {
@@ -54,7 +54,7 @@
 	</head>
 	<body>
 		<section>
-			<table class="board">
+			<table id="board">
 				<tbody>
 					<tr id="row8">
 						<th class="coords">8</th>
@@ -165,13 +165,20 @@
 					</tr>
 				</tbody>
 			</table>
-			<form id="form">
-				<label><span id="tomove">White</span>'s move
-					<input id="move" type="text" autocomplete="off">
-				</label>
-				<input type="submit" value="Move">
-				<input type="button" value="Undo" onclick="undoMove()">
-			</form>
+			<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="Flip board" onclick="flipBoard()">
+				</form>
+			</p>
 		</section>
 		<section id="moves">
 			<p>Moves thus far</p>
@@ -181,7 +188,7 @@
 
 		<script>
 			'use strict';
-			let form = document.getElementById('form');
+			let form = document.getElementById('input');
 			form.onsubmit = moveEvent;
 
 			let moveHistory = [];
@@ -389,6 +396,47 @@
 				// Remove from list of moves
 				document.getElementById('movelist').removeChild(document.getElementById('movelist').lastChild);
 			}
+
+			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);
+			}
 		</script>
 	</body>
 </html>
