impliment piece movement and a check for valid moves.

static/js/script.js

@@ -1,4 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
+    const MAX_SNAP_DISTANCE = 90;
+
     // Generate the board
     for (let i=0; i < 5; i++) {
         for (let j = 0; j < 5; j++) {
@@ -49,40 +51,72 @@ document.addEventListener('DOMContentLoaded', () => {
         player_token.style.top = `${e.pageY - offsetY}px`;
     });
 
-    function resetToken() {
-        const startingCell = document.getElementById(`cell-4-0`);
+    function resetToken(startingCell) {
+        if (startingCell == null) {
+            startingCell = document.getElementById('cell-4-0');
+        }
         // Reset position inside cell
         player_token.style.position = 'relative'; // back to relative so it sits inside the cell
         player_token.style.left = '';
         player_token.style.top = '';
         player_token.style.zIndex = '';
 
-        originalCell.appendChild(token);
+        startingCell.appendChild(player_token);
     }
 
-    function getClosestCell(x,y) {
-        const boardRect = board.getBoundingClientRect();
-        const cellSize = boardRect.width / 5;
+    function getClosestCellByDistance(x, y) {
+        let closestCell = null;
+        let minDistance = Infinity;
 
-        // Convert page coordinates to board-relative coordinates
-        const relX = x - boardRect.left;
-        const relY = y - boardRect.top;
+        const cells = document.querySelectorAll('.cell');
+        cells.forEach(cell => {
+            const rect = cell.getBoundingClientRect();
+            const cellCenterX = rect.left + rect.width / 2;
+            const cellCenterY = rect.top + rect.height / 2;
 
-        // Find closest column and row
-        const col = Math.min(4, Math.max(0, Math.floor(relX / cellSize)));
-        const row = Math.min(4, Math.max(0, Math.floor(relY / cellSize)));
+            const dx = x - cellCenterX;
+            const dy = y - cellCenterY;
+            const distance = Math.sqrt(dx*dx + dy*dy);
 
-        return document.getElementById(`cell-${row}-${col}`);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestCell = cell;
+            }
+        });
+
+        return { cell: closestCell, distance: minDistance };
     }
 
+    function checkMoveValid(startingCell, endingCell) {
+        const startRow = startingCell.dataset.row
+        const startCol = startingCell.dataset.col
+        const endRow = endingCell.dataset.row
+        const endCol = endingCell.dataset.col
 
+        const rowDiff = Math.abs(startRow - endRow)
+        const colDiff = Math.abs(startCol - endCol)
+
+        return ( (rowDiff == 1 && colDiff == 2) || (rowDiff == 2 && colDiff == 1) );
+    }
 
     // stop dragging once they let go
     player_token.addEventListener('pointerup', (e) => {
         isDragging = false;  
 
         // Find nearest cell
-        const closestCell = getClosestCell(e.pageX, e.pageY);
+        const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY);
+        
+        if (distance > MAX_SNAP_DISTANCE) {
+            resetToken(player_token.parentElement);
+            return;
+        }
+
+        const isValid = checkMoveValid(player_token.parentElement, closestCell);
+
+        if (!isValid) {
+            resetToken(player_token.parentElement)
+            return;
+        }
 
         // Reset token style and append to cell
         player_token.style.position = 'relative';