adding move marker

1 files changed, 41 insertions, 0 deletions

diff --git a/assets/board.js b/assets/board.js
index e4dcb87..fdfeb28 100644
--- a/assets/board.js
+++ b/assets/board.js
@@ -84,7 +84,37 @@ position.bitboards[BLACK_PAWN] = ${bitboards[11].toString()}ULL;
       `)
   }
 }
+
+let validMoves = {};
+let renderingMoves = [];
+
+function updateRenderingMoves() {
+  for (let i = 0; i < 64; i++) {
+    const square = document.getElementById(`square-${i}`);
+    if (i in renderingMoves) {
+      square.children[0].classList.add("possible_move");
+    } else {
+      square.children[0].classList.remove("possible_move");
+    }
+  }
+}
+
+function addMoves(moves) {
+  console.log(moves);
+  validMoves = {};
+  for (const [from, to] of moves) {
+    if (validMoves[from] == undefined) validMoves[from] = []
+    validMoves[from].push(to);
+  }
+
+  console.log(validMoves);
+}
+
 window.onload = () => {
+  const socket = new WebSocket("ws://localhost:3456");
+  socket.addEventListener("moves", (event) => addMoves(event.data));
+  // socket.addEventListener("do_move", (event) => addMoves(event.data));
+
   const output = document.getElementById("output");
   const board = document.getElementById("board");
   for (let i = 0; i < 64; i++) {
@@ -96,6 +126,11 @@ window.onload = () => {
     }
     const square = document.createElement("div");
     square.classList.add("square");
+
+    const renderingMoveMarker = document.createElement("div");
+    renderingMoveMarker.classList.add("rendering_marker");
+    square.appendChild(renderingMoveMarker);
+
     const shift = Math.floor(i / 8);
     square.classList.add((i + shift) % 2 ? "dark" : "light");
     const bitIndex = (i % 8) - 8 * Math.floor(i / 8) + 56;
@@ -112,20 +147,26 @@ window.onload = () => {
         }
         return;
       }
+      
       const piece = checkForPiece(square, bitIndex, false);
       if (
         (hoveringPiece < 0 && piece == null) ||
         (hoveringPiece >= 0 && piece != null)
       ) return;
       if (hoveringPiece < 0) {
+        if (validMoves[bitIndex]) {
+          renderingMoves = validMoves[bitIndex];
+        }
         setHoverpiece(piece);
         square.style.backgroundImage = `none`;
         bitboards[piece] &= ~(1n << BigInt(bitIndex));
       } else {
+        renderingMoves = [];
         square.style.backgroundImage = `url(${assets[hoveringPiece]})`;
         bitboards[hoveringPiece] |= (1n << BigInt(bitIndex));
         setHoverpiece(-1);
       }
+      updateRenderingMoves();
     };
     board.appendChild(square);
   }