nortti
/
takhta
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add button for flipping the board perspective

This commit is contained in:
Juhani Krekelä 2021-01-08 21:57:50 +02:00
parent e1f534e41a
commit 7efde29810
1 changed files with 63 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
takhta.html
View File

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