finish implimenting game logic. Board reseting, proper movement and logic of when to reset. Also game completion.

static/css/style.css

@@ -4,7 +4,16 @@
     --dark-color: black;
 }
 
+body {
+  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));

static/js/script.js

@@ -1,6 +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++) {
@@ -21,12 +26,25 @@ document.addEventListener('DOMContentLoaded', () => {
             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;
@@ -60,7 +78,6 @@ document.addEventListener('DOMContentLoaded', () => {
         player_token.style.left = '';
         player_token.style.top = '';
         player_token.style.zIndex = '';
-
         startingCell.appendChild(player_token);
     }
 
@@ -99,25 +116,58 @@ document.addEventListener('DOMContentLoaded', () => {
         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 {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY);
         
         if (distance > MAX_SNAP_DISTANCE) {
+            console.log("TOO FAR AWAY")
             resetToken(player_token.parentElement);
             return;
         }
 
-        const isValid = checkMoveValid(player_token.parentElement, closestCell);
-
-        if (!isValid) {
-            resetToken(player_token.parentElement)
+        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';
         player_token.style.left = '';
@@ -125,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!")
+            
         } 
-
+    });
 })