board.html + moveable pieces & bitboard updates

1 files changed, 156 insertions, 0 deletions

diff --git a/assets/board.js b/assets/board.js
new file mode 100644
index 0000000..6b8486a
--- /dev/null
+++ b/assets/board.js
@@ -0,0 +1,156 @@
+const assets = [
+  "wk.webp",
+  "wq.webp",
+  "wr.png",
+  "wb.webp",
+  "wn.png",
+  "wp.png",
+  "bk.webp",
+  "bq.png",
+  "br.webp",
+  "bb.webp",
+  "bn.webp",
+  "bp.png"
+].map(x => "./assets/" + x);
+let hoveringPiece = -1;
+
+const bitboards = [
+  16n,
+  8n,
+  129n,
+  36n,
+  66n,
+  65280n,
+  1152921504606846976n,
+  576460752303423488n,
+  9295429630892703744n,
+  2594073385365405696n,
+  4755801206503243776n,
+  71776119061217280n,
+];
+const WHITE_KING   =  1;
+const WHITE_QUEEN  =  2;
+const WHITE_ROOK   =  3;
+const WHITE_BISHOP =  4;
+const WHITE_KNIGHT =  5;
+const WHITE_PAWN   =  6;
+const BLACK_KING   =  7;
+const BLACK_QUEEN  =  8;
+const BLACK_ROOK   =  9;
+const BLACK_BISHOP = 10;
+const BLACK_KNIGHT = 11;
+const BLACK_PAWN   = 12;
+
+function trackBitboard(j, i, selected, output) {
+  const mask = 1n << BigInt(i);
+  if (selected) {
+    bitboards[j] |= mask;
+  } else {
+    bitboards[j] &= ~mask;
+  }
+  output.textContent = bitboards[j].toString();
+}
+
+function checkForPiece(square, bitIndex, set = true) {
+  for (let i = 0; i < bitboards.length; i++) {
+    const mask = bitboards[i];
+    if ((mask >> BigInt(bitIndex)) & 1n) {
+      if (set) square.style.backgroundImage = `url(${assets[i]})`;
+      return i;
+    }
+  }
+  return null;
+}
+
+const selectedAction = trackBitboard;
+
+window.onkeydown = (e) => {
+  if (e.key == 'b') {
+    console.log('Bitboards');
+    console.log(`
+position.bitboards[WHITE_KING] = ${bitboards[0].toString()}ULL;
+position.bitboards[WHITE_QUEEN] = ${bitboards[1].toString()}ULL;
+position.bitboards[WHITE_ROOK] = ${bitboards[2].toString()}ULL;
+position.bitboards[WHITE_BISHOP] = ${bitboards[3].toString()}ULL;
+position.bitboards[WHITE_KNIGHT] = ${bitboards[4].toString()}ULL;
+position.bitboards[WHITE_PAWN] = ${bitboards[5].toString()}ULL;
+position.bitboards[BLACK_KING] = ${bitboards[6].toString()}ULL;
+position.bitboards[BLACK_QUEEN] = ${bitboards[7].toString()}ULL;
+position.bitboards[BLACK_ROOK] = ${bitboards[8].toString()}ULL;
+position.bitboards[BLACK_BISHOP] = ${bitboards[9].toString()}ULL;
+position.bitboards[BLACK_KNIGHT] = ${bitboards[10].toString()}ULL;
+position.bitboards[BLACK_PAWN] = ${bitboards[11].toString()}ULL;
+      `)
+  }
+}
+window.onload = () => {
+  const output = document.getElementById("output");
+  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");
+    const bitIndex = (i % 8) - 8 * Math.floor(i / 8) + 56;
+    square.id = 'square-' + bitIndex.toString();
+    checkForPiece(square, bitIndex);
+    square.onclick = (e) => {
+      if (!e.ctrlKey) {
+        const piece = checkForPiece(square, bitIndex, false);
+        if (
+          (hoveringPiece < 0 && piece == null) ||
+          (hoveringPiece >= 0 && piece != null)
+        ) return;
+        if (hoveringPiece < 0) {
+          setHoverpiece(piece);
+          square.style.backgroundImage = `none`;
+          bitboards[piece] &= ~(1n << BigInt(bitIndex));
+        } else {
+          square.style.backgroundImage = `url(${assets[hoveringPiece]})`;
+          bitboards[hoveringPiece] |= (1n << BigInt(bitIndex));
+          setHoverpiece(-1);
+        }
+        return;
+      }
+      const selected = square.classList.contains("selected");
+      selectedAction(0, bitIndex, !selected, output);
+      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 = 1; i < 9; i++)  {
+    const label = document.createElement("div");
+    label.classList.add("horizontal_label");
+    label.textContent = i;
+    board.appendChild(label);
+  }
+
+  const mouse = document.getElementById("mouse");
+  function setHoverpiece(i) {
+    hoveringPiece = i;
+    if (i < 0) {
+      mouse.style.backgroundImage = `none`;
+      return;
+    }
+    mouse.style.backgroundImage = `url(${assets[i]})`;
+  }
+  window.onmousemove = (e) => {
+    const x = e.clientX;
+    const y = e.clientY;
+    mouse.style.left = x.toString() + 'px';
+    mouse.style.top = y.toString() + 'px';
+  }
+}