1 files changed, 23 insertions, 7 deletions
diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index 5b4a875..9a25715 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -14,6 +14,12 @@ const player = {
         return this;
     },
 
+    // Check if a hex coordinate is within grid bounds
+    isValidHex(hex) {
+        const halfGrid = Math.floor(HexGrid.GRID_SIZE / 2);
+        return Math.abs(hex.q) < halfGrid && Math.abs(hex.r) < halfGrid;
+    },
+
     // Get neighbors that share an edge with the given hex
     getEdgeNeighbors(hex) {
         const directions = [
@@ -25,10 +31,13 @@ const player = {
             {q: 1, r: -1}   // Northeast
         ];
         
-        return directions.map(dir => ({
-            q: hex.q + dir.q,
-            r: hex.r + dir.r
-        }));
+        // Only return neighbors that are within grid bounds
+        return directions
+            .map(dir => ({
+                q: hex.q + dir.q,
+                r: hex.r + dir.r
+            }))
+            .filter(hex => this.isValidHex(hex));
     },
 
     // Find path from current position to target
@@ -65,10 +74,17 @@ const player = {
 
     // Start moving to a target hex
     moveTo(targetHex) {
+        // Only start new movement if we're not already moving and target is valid
         if (!this.target) {
+            // Check if target is within grid bounds
+            if (!this.isValidHex(targetHex)) {
+                return; // Ignore movement request if target is out of bounds
+            }
+
             const path = this.findPath(targetHex);
             if (path) {
-                this.path = path.slice(1); // Remove starting position
+                // Filter out any path points that would go out of bounds
+                this.path = path.slice(1).filter(hex => this.isValidHex(hex));
                 if (this.path.length > 0) {
                     this.target = this.path.shift();
                     this.movementProgress = 0;
@@ -117,14 +133,14 @@ const player = {
         const screenX = pixelPos.x - camera.x;
         const screenY = pixelPos.y - camera.y;
 
-        ctx.fillStyle = 'red';
+        ctx.fillStyle = Config.colors.PLAYER;
         ctx.beginPath();
         ctx.arc(screenX, screenY, HEX_SIZE/3, 0, Math.PI * 2);
         ctx.fill();
         
         // Optionally, draw the remaining path
         if (this.path.length > 0) {
-            ctx.strokeStyle = 'rgba(255,0,0,0.3)';
+            ctx.strokeStyle = Config.colors.PLAYER + '4D'; // 30% opacity version of player color
             ctx.beginPath();
             let lastPos = this.target || this.position;
             this.path.forEach(point => {