diff options
| author | Aargh Rai <aargh.rai+git@gmail.com> | 2026-02-20 11:34:32 +0530 |
|---|---|---|
| committer | Aargh Rai <aargh.rai+git@gmail.com> | 2026-02-20 11:34:32 +0530 |
| commit | fd57b964e50a4cb3385976a473bc287d682bcbdb (patch) | |
| tree | 0caa9b8a9fe239f2d5d7753faf0099eea7940e1a /bitboards.html | |
| parent | 44f9f648bc9de9d2e9a1054161a223cadd7c362d (diff) | |
bitboard tool
Diffstat (limited to 'bitboards.html')
| -rw-r--r-- | bitboards.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/bitboards.html b/bitboards.html new file mode 100644 index 0000000..94006a7 --- /dev/null +++ b/bitboards.html @@ -0,0 +1,111 @@ +<!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 = ["h", "g", "f", "e", "d", "c", "b", "a"][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, !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 = i; + board.appendChild(label); + } + </script> +</body> +</html> |