diff options
Diffstat (limited to 'bitboards.html')
| -rw-r--r-- | bitboards.html | 111 |
1 files changed, 0 insertions, 111 deletions
diff --git a/bitboards.html b/bitboards.html deleted file mode 100644 index 8323dfe..0000000 --- a/bitboards.html +++ /dev/null @@ -1,111 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Bitboard editor</title> - <style> - :root { - --square-side-length: 6rem; - --dark-color: #779556; - --light-color: #ebecd0; - --selected-color: #f37f6b; - --background-color: #0f0f0f; - --text-color: #fefefe; - } - body { - display: flex; - flex-direction: column; - align-items: center; - background-color: var(--background-color); - color: var(--text-color); - } - #board { - display: grid; - grid-template-columns: repeat(9, 1fr); - grid-template-rows: repeat(9, 1fr); - } - .dark { - background-color: var(--dark-color); - } - .light { - background-color: var(--light-color); - } - .selected { - background-color: var(--selected-color); - } - .square { - width: var(--square-side-length); - height: var(--square-side-length); - } - .label { - width: var(--square-side-length); - height: var(--square-side-length); - display: flex; - align-items: center; - justify-content: flex-end; - } - .horizontal_label { - width: var(--square-side-length); - height: var(--square-side-length); - display: flex; - justify-content: center; - } - </style> -</head> -<body> - <div id="board"> - </div> - <div id="output"> - </div> - <script> - const output = document.getElementById("output"); - - let bitboard = 0n; - function trackBitboard(i, selected) { - const mask = 1n << BigInt(i); - if (selected) { - bitboard |= mask; - } else { - bitboard &= ~mask; - } - output.textContent = bitboard.toString(); - } - - const selectedAction = trackBitboard; - - const board = document.getElementById("board"); - for (let i = 0; i < 64; i++) { - if (i % 8 == 0) { - const label = document.createElement("div"); - label.classList.add("label"); - label.textContent = 8 - Math.round(i / 8); - board.appendChild(label); - } - const square = document.createElement("div"); - square.classList.add("square"); - const shift = Math.floor(i / 8); - square.classList.add((i + shift) % 2 ? "dark" : "light"); - square.onclick = () => { - const selected = square.classList.contains("selected"); - selectedAction((i % 8) - 8 * Math.floor(i / 8) + 56, !selected); - if (selected) { - square.classList.remove("selected"); - } else { - square.classList.add("selected"); - } - }; - board.appendChild(square); - } - const label = document.createElement("div"); - label.classList.add("horizontal_label"); - board.appendChild(label); - for (let i = 0; i < 8; i++) { - const label = document.createElement("div"); - label.classList.add("horizontal_label"); - label.textContent = ["a", "b", "c", "d", "e", "f", "g", "h"][i]; - board.appendChild(label); - } - </script> -</body> -</html> |
