update styling. Remove black and white pattern from cells.

static/css/style.css

@@ -4,14 +4,34 @@
     --dark-color: black;
 }
 
+body {
+    background: #141E30;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, black, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+    display: flex;
+    justify-content: center;  /* horizontal centering */
+    align-items: center;      /* vertical centering */
+    height: 100vh;            /* make body full height */
+    margin: 0;                /* remove default margin */
+}
+
 #board {
+    margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(5, var(--cell-size));
     grid-template-rows: repeat(5, var(--cell-size));
+
+    gap: 0; /* we'll use borders instead */
+    background: #ad5389;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+    border: .5px solid #bebcbc76; /* subtle outer border */
 }
 
 .token {
-    background-color: orange;
+    background-color: #17A398;
     width: 60%;
     height: 60%;
     border-radius: 50%;
@@ -21,13 +41,16 @@
 }
 
 #player-token {
-    background-color: darkkhaki;
+    background-color: #EE6C4D;
     cursor: grab;
 }
 
 .cell {
     width: var(--cell-size);
     height: var(--cell-size);
+
+    border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
+    box-sizing: border-box;  /* ensures borders don't expand cells */
 }
 
 .dark {

static/js/script.js

@@ -1,4 +1,11 @@
 document.addEventListener('DOMContentLoaded', () => {
+    // Constants for adjusting game
+    const MAX_SNAP_DISTANCE = 90;
+
+    // Track game state
+    let tokensRemaining = 5;
+    let inStreak = false;
+
     // Generate the board
     for (let i=0; i < 5; i++) {
         for (let j = 0; j < 5; j++) {
@@ -8,23 +15,36 @@ document.addEventListener('DOMContentLoaded', () => {
             cell.id = `cell-${i}-${j}`
             cell.dataset.piece = ""
             cell.classList.add('cell')
-            if ((i + j) % 2 == 0) {
-                cell.classList.add('dark')
-            }
-            else {
-                cell.classList.add('light')
-            }
+            // if ((i + j) % 2 == 0) {
+            //     cell.classList.add('dark')
+            // }
+            // else {
+            //     cell.classList.add('light')
+            // }
 
             const board = document.getElementById('board')
             board.appendChild(cell)
         }
     }
+
+    // Generate Target Tokens
+    target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3']
+    for (let index = 0; index < target_token_list.length; index++) {
+        const element = target_token_list[index];
+        const token = document.createElement('div');
+        token.classList.add('token');
+        token.dataset.captured = 'false';
+        const target_cell = document.getElementById(`cell-${element}`);
+        target_cell.appendChild(token);
+    }
+    
     // Generate player token
     const player_token = document.createElement('div')
     const target_cell = document.getElementById('cell-4-0')
     player_token.id="player-token"
     player_token.classList.add('token')
     target_cell.appendChild(player_token)
+    player_token.zIndex = 1000;
 
     // Add logic for moving player token
     let isDragging = false;
@@ -49,40 +69,104 @@ 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) );
+    }
+
+    function resetBoard() {
+        inStreak = false;
+        tokensRemaining = 5;
+        console.log("resetting board");
+        board.querySelectorAll('.token').forEach(token => {
+            token.style.display = '';
+            token.dataset.captured = 'false'
+        });
+
+        resetToken(null)
+    }
+
+    function captureCell(cell) {
+        const existingToken = cell.querySelector('.token')
+        if (existingToken && existingToken.dataset.captured == 'false') {
+            existingToken.dataset.captured = 'true';
+            existingToken.style.display = 'none';
+            tokensRemaining--;
+            inStreak = true;
+        } else {
+            if (inStreak) {
+                return false
+            }
+        }
+        return true
+        
+    }
 
     // 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) {
+            console.log("TOO FAR AWAY")
+            resetToken(player_token.parentElement);
+            return;
+        }
+
+        if (!checkMoveValid(player_token.parentElement, closestCell)) {
+            console.log("INVALID MOVE")
+            resetBoard()
+            return;
+        }
+
+        if (!captureCell(closestCell)) {
+            console.log("")
+            resetBoard();
+            return
+        };
 
         // Reset token style and append to cell
         player_token.style.position = 'relative';
@@ -91,16 +175,10 @@ document.addEventListener('DOMContentLoaded', () => {
         player_token.style.zIndex = '';
 
         closestCell.appendChild(player_token);
-    });
 
-    // Generate Target Tokens
-    target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3']
-    for (let index = 0; index < target_token_list.length; index++) {
-        const element = target_token_list[index];
-        const token = document.createElement('div');
-        token.classList.add('token')
-        const target_cell = document.getElementById(`cell-${element}`)
-        target_cell.appendChild(token)
+        if (tokensRemaining == 0) {
+            alert("You win!")
+            
         } 
-
+    });
 })