1 files changed, 61 insertions, 6 deletions

diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index 22e57e0..09984dc 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -6,11 +6,30 @@ const player = {
     movementProgress: 0,          // Progress of current movement (0 to 1)
     moveSpeed: Config.player.MOVE_SPEED,              // Movement speed (0 to 1 per frame)
     
+    // Animation properties
+    sprites: {
+        idle: null,
+        run: null
+    },
+    currentFrame: 0,
+    frameCount: 0,
+    FRAME_DELAY: 8, // Adjust this to control animation speed
+    SPRITE_WIDTH: 32, // Adjust these based on your sprite sheet dimensions
+    SPRITE_HEIGHT: 32,
+    IDLE_FRAMES: 6, // Number of frames in idle animation
+    RUN_FRAMES: 8,  // Number of frames in run animation
+    facingLeft: false,
+    
     // Initialize player
     init() {
         this.position = { q: 0, r: 0 };
         this.target = null;
         this.path = [];
+        
+        // Load sprites
+        this.sprites.idle = document.getElementById('catIdle');
+        this.sprites.run = document.getElementById('catRun');
+        
         return this;
     },
 
@@ -132,14 +151,50 @@ const player = {
         const screenX = pixelPos.x - camera.x;
         const screenY = pixelPos.y - camera.y;
 
-        ctx.fillStyle = Config.colors.PLAYER;
-        ctx.beginPath();
-        ctx.arc(screenX, screenY, HEX_SIZE * Config.player.SIZE_RATIO, 0, Math.PI * 2);
-        ctx.fill();
+        // Update animation frame
+        this.frameCount++;
+        if (this.frameCount >= this.FRAME_DELAY) {
+            this.frameCount = 0;
+            this.currentFrame++;
+            
+            // Reset frame counter based on current animation
+            const maxFrames = this.target ? this.RUN_FRAMES : this.IDLE_FRAMES;
+            if (this.currentFrame >= maxFrames) {
+                this.currentFrame = 0;
+            }
+        }
+
+        // Determine facing direction based on movement
+        if (this.target) {
+            this.facingLeft = (this.target.q - this.position.q) < 0;
+        }
+
+        // Draw the sprite
+        const sprite = this.target ? this.sprites.run : this.sprites.idle;
+        const scale = (HEX_SIZE * Config.player.SIZE_RATIO * 2) / this.SPRITE_HEIGHT;
         
-        // Optionally, draw the remaining path
+        ctx.save();
+        ctx.translate(screenX, screenY);
+        if (this.facingLeft) {
+            ctx.scale(-1, 1);
+        }
+        
+        ctx.drawImage(
+            sprite,
+            this.currentFrame * this.SPRITE_WIDTH, // Source X
+            0,                                     // Source Y
+            this.SPRITE_WIDTH,                     // Source Width
+            this.SPRITE_HEIGHT,                    // Source Height
+            -this.SPRITE_WIDTH * scale / 2,        // Destination X
+            -this.SPRITE_HEIGHT * scale / 2,       // Destination Y
+            this.SPRITE_WIDTH * scale,             // Destination Width
+            this.SPRITE_HEIGHT * scale             // Destination Height
+        );
+        ctx.restore();
+
+        // Draw path (if needed)
         if (this.path.length > 0) {
-            ctx.strokeStyle = Config.colors.PLAYER + '4D'; // 30% opacity version of player color
+            ctx.strokeStyle = Config.colors.PLAYER + '4D';
             ctx.beginPath();
             let lastPos = this.target || this.position;
             this.path.forEach(point => {