From 8e2575f6fcbbc551f238a83d3d5e522bd546a317 Mon Sep 17 00:00:00 2001
From: "Kacper Kostka (aider)" <kacper.kostka08@gmail.com>
Date: Sat, 5 Apr 2025 18:33:19 +0200
Subject: [PATCH] fix: Align player collision box and sprite rendering
 precisely

---
 js/entities/entity.js | 14 ++++++++++----
 js/entities/player.js | 16 +++++++++++-----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/js/entities/entity.js b/js/entities/entity.js
index 1d8bce3..993803a 100644
--- a/js/entities/entity.js
+++ b/js/entities/entity.js
@@ -81,10 +81,13 @@ class Entity {
         const numBottomPoints = 5;
         let groundCollision = false;
         
+        // For player entity, adjust the collision detection to match sprite feet position
+        const yOffset = this.type === ENTITY_TYPES.PLAYER ? 2 : 0;
+        
         for (let i = 0; i < numBottomPoints; i++) {
             const ratio = i / (numBottomPoints - 1);
             const bottomX = newX - halfWidth + (2 * halfWidth * ratio);
-            const bottomY = newY + halfHeight;
+            const bottomY = newY + halfHeight + yOffset;
             
             if (this.isPixelSolid(bottomX, bottomY)) {
                 groundCollision = true;
@@ -99,8 +102,11 @@ class Entity {
         }
         
         // Check side points for horizontal collision
-        const leftMiddle = { x: newX - halfWidth, y: newY };
-        const rightMiddle = { x: newX + halfWidth, y: newY };
+        // For player entity, adjust the collision detection to match sprite position
+        const yAdjust = this.type === ENTITY_TYPES.PLAYER ? -1 : 0;
+        
+        const leftMiddle = { x: newX - halfWidth, y: newY + yAdjust };
+        const rightMiddle = { x: newX + halfWidth, y: newY + yAdjust };
         
         if (this.isPixelSolid(leftMiddle.x, leftMiddle.y)) {
             result.collision = true;
@@ -113,7 +119,7 @@ class Entity {
         }
         
         // Check top for ceiling collision
-        const topMiddle = { x: newX, y: newY - halfHeight };
+        const topMiddle = { x: newX, y: newY - halfHeight + (this.type === ENTITY_TYPES.PLAYER ? -2 : 0) };
         if (this.isPixelSolid(topMiddle.x, topMiddle.y)) {
             result.collision = true;
             result.vertical = true;
diff --git a/js/entities/player.js b/js/entities/player.js
index 4d06fe8..c04dd76 100644
--- a/js/entities/player.js
+++ b/js/entities/player.js
@@ -2,8 +2,8 @@
 class Player extends Entity {
     constructor(x, y, options = {}) {
         super(ENTITY_TYPES.PLAYER, x, y, {
-            width: 8,  // Adjusted collision box size
-            height: 16,
+            width: 6,  // Narrower collision box to match sprite
+            height: 12, // Shorter collision box to match sprite
             ...options
         });
         
@@ -138,12 +138,12 @@ class Player extends Entity {
             }
             
             // Draw the correct sprite frame
-            // Center the sprite on the entity position, with slight y-offset to align feet
+            // Center the sprite on the entity position, with y-offset to align feet with collision box
             ctx.drawImage(
                 this.sprite,
                 this.currentFrame * this.frameWidth, 0,
                 this.frameWidth, this.frameHeight,
-                -spriteDisplayWidth / 2, -spriteDisplayHeight / 2 + 2, // Reduced offset for smaller sprite
+                -spriteDisplayWidth / 2, -spriteDisplayHeight / 2 - 2, // Adjusted y-offset to align with collision box
                 spriteDisplayWidth, spriteDisplayHeight
             );
             
@@ -167,10 +167,16 @@ class Player extends Entity {
                 ctx.lineWidth = 1;
                 ctx.strokeRect(
                     screenX - spriteDisplayWidth / 2,
-                    screenY - spriteDisplayHeight / 2 + 4,
+                    screenY - spriteDisplayHeight / 2 - 2, // Match the sprite drawing offset
                     spriteDisplayWidth,
                     spriteDisplayHeight
                 );
+                
+                // Draw a dot at the entity's exact position
+                ctx.fillStyle = '#ffff00';
+                ctx.beginPath();
+                ctx.arc(screenX, screenY, 2, 0, Math.PI * 2);
+                ctx.fill();
             }
         }
     }