Add button for flipping the board perspective
This commit is contained in:
parent
e1f534e41a
commit
7efde29810
78
takhta.html
78
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>
|
||||
|
|
Loading…
Reference in New Issue