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 {
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>