update the player token to have 9999 z index when moved to keep it on top of other tokens.

static/css/style.css

@@ -2,12 +2,17 @@
     --cell-size: 4rem;
     --light-color: white;
     --dark-color: black;
+    --background-radial-percent: 70%;
 }
 
 body {
     background: #141E30;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right, black, #141E30);  /* Chrome 10-25, Safari 5.1-6 */
+    background: hsla(0, 0%, 0%, 1);
-    background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    background: radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+    background: -moz-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+    background: -webkit-radial-gradient(circle, hsla(0, 0%, 0%, 1) 0%, hsla(219, 41%, 13%, 1) var(--background-radial-percent));
+
+    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#141E30", GradientType=1 );
 
     display: flex;
     justify-content: center;  /* horizontal centering */
@@ -27,7 +32,7 @@ body {
     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 */
+    /* border: .5px solid #bebcbc76; subtle outer border */
 }
 
 .token {
@@ -43,6 +48,7 @@ body {
 #player-token {
     background-color: #EE6C4D;
     cursor: grab;
+    touch-action: none;
 }
 
 .cell {

static/js/script.js

@@ -15,12 +15,6 @@ 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')
-            // }
 
             const board = document.getElementById('board')
             board.appendChild(cell)
@@ -52,18 +46,25 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // check for the player grabbing the player icon
     player_token.addEventListener('pointerdown', (e) => {
+        e.preventDefault();
+        player_token.style.zIndex = "9999";
         const rect = player_token.getBoundingClientRect();
         player_token.style.width = `${rect.width}px`;
         player_token.style.height = `${rect.height}px`;
+
+        offsetX = e.pageX - rect.left;
+        offsetY = e.pageY - rect.top;
+
         isDragging = true;
-        offsetX = e.offsetX;
+
-        offsetY = e.offsetY;
         player_token.setPointerCapture(e.pointerId);
     });
 
     // Impliment the dragging
     player_token.addEventListener('pointermove', (e) => {
         if (!isDragging) return;
+        player_token.style.zIndex = "9999";
+
         player_token.style.position = 'absolute';
         player_token.style.left = `${e.pageX - offsetX}px`;
         player_token.style.top = `${e.pageY - offsetY}px`;
@@ -119,7 +120,6 @@ document.addEventListener('DOMContentLoaded', () => {
     function resetBoard() {
         inStreak = false;
         tokensRemaining = 5;
-        console.log("resetting board");
         board.querySelectorAll('.token').forEach(token => {
             token.style.display = '';
             token.dataset.captured = 'false'
@@ -151,19 +151,16 @@ document.addEventListener('DOMContentLoaded', () => {
         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
         };