1 files changed, 73 insertions, 6 deletions
diff --git a/html/rogue/js/player.js b/html/rogue/js/player.js
index 3c1c383..efecbdf 100644
--- a/html/rogue/js/player.js
+++ b/html/rogue/js/player.js
@@ -7,12 +7,30 @@ const player = {
     moveSpeed: Config.player.MOVE_SPEED,              // Movement speed (0 to 1 per frame)
     inventory: [],
     
+    // Animation properties
+    animation: null,
+    sprites: [],
+    
     // Initialize player
-    init() {
+    async init() {
         this.position = { q: 0, r: 0 };
         this.target = null;
         this.path = [];
         this.inventory = [];
+        
+        // Load sprites
+        try {
+            const [sprite1, sprite2] = await Promise.all([
+                Animation.loadImage('assets/home/goblin-01.png'),
+                Animation.loadImage('assets/home/goblin-02.png')
+            ]);
+            
+            this.sprites = [sprite1, sprite2];
+            this.animation = Animation.createAnimation(this.sprites, 500); // 500ms per frame
+        } catch (error) {
+            console.error('Failed to load player sprites:', error);
+        }
+        
         return this;
     },
 
@@ -151,14 +169,63 @@ 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();
+        if (this.animation && this.sprites.length > 0) {
+            // Get current sprite from animation
+            const currentSprite = this.animation.update(performance.now());
+            
+            // Scale sprite to fit within hex
+            // Use slightly smaller than hex size to ensure it fits visually
+            const hexInnerSize = HEX_SIZE * 0.8; // 80% of hex size
+            const { width, height, scale } = Animation.scaleToFit(
+                currentSprite, 
+                hexInnerSize * 2, // width
+                hexInnerSize * Math.sqrt(3) // height (hex height)
+            );
+            
+            // Calculate position to center the sprite in the hex
+            const spriteX = screenX - width / 2;
+            const spriteY = screenY - height / 2;
+            
+            // Save context state
+            ctx.save();
+            
+            // Optional: add a small bounce effect when moving
+            if (this.target) {
+                const bounce = Math.sin(performance.now() / 100) * 2;
+                ctx.translate(spriteX, spriteY + bounce);
+            } else {
+                ctx.translate(spriteX, spriteY);
+            }
+            
+            // Draw the sprite
+            ctx.drawImage(
+                currentSprite,
+                0, 0,
+                width,
+                height
+            );
+            
+            // Restore context state
+            ctx.restore();
+            
+            // Debug: draw hex bounds if debug is enabled
+            if (Debug.isEnabled) {
+                ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+                ctx.beginPath();
+                HexGrid.drawHexPath(ctx, screenX, screenY, HEX_SIZE * 0.8);
+                ctx.stroke();
+            }
+        } else {
+            // Fallback to circle if sprites aren't loaded
+            ctx.fillStyle = Config.colors.PLAYER;
+            ctx.beginPath();
+            ctx.arc(screenX, screenY, HEX_SIZE * Config.player.SIZE_RATIO, 0, Math.PI * 2);
+            ctx.fill();
+        }
         
         // 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 => {