stanje 4am

src/entities/NPC.js

@@ -18,6 +18,7 @@ class NPC {
         this.gridMoveTime = 300; // ms za premik (počasneje)
 
         // Stanje
+        this.state = 'WANDER'; // WANDER, TAMED, FOLLOW
         this.isMoving = false;
         this.pauseTime = 0;
         this.maxPauseTime = 2000; // Pavza med premiki (2s)
@@ -32,11 +33,51 @@ class NPC {
         this.pauseTime = Math.random() * this.maxPauseTime;
     }
 
-    createSprite() {
-        // Check for custom sprites first
-        let texKey = `npc_${this.type}`;
+    tame() {
+        if (this.state === 'TAMED' || this.type !== 'zombie') return;
 
-        if (this.type === 'zombie' && this.scene.textures.exists('zombie_sprite')) {
+        this.state = 'TAMED';
+        console.log('🧟❤️ Zombie TAMED!');
+
+        // Visual Feedback
+        const headX = this.sprite.x;
+        const headY = this.sprite.y - 40;
+
+        const heart = this.scene.add.text(headX, headY, '❤️', { fontSize: '20px' });
+        heart.setOrigin(0.5);
+        heart.setDepth(this.sprite.depth + 100);
+
+        this.scene.tweens.add({
+            targets: heart,
+            y: headY - 30,
+            alpha: 0,
+            duration: 1500,
+            onComplete: () => heart.destroy()
+        });
+
+        // Change color slightly to indicate friend
+        this.sprite.setTint(0xAAFFAA);
+    }
+
+    toggleState() {
+        if (this.state === 'WANDER') {
+            this.tame();
+        } else {
+            // Maybe command to stay/follow?
+            this.state = this.state === 'FOLLOW' ? 'STAY' : 'FOLLOW';
+            console.log(`Command: ${this.state}`);
+        }
+    }
+
+    createSprite() {
+        let texKey = `npc_${this.type}`;
+        let isAnimated = false;
+
+        // Check for animated sprites first
+        if (this.type === 'zombie' && this.scene.textures.exists('zombie_walk')) {
+            texKey = 'zombie_walk';
+            isAnimated = true;
+        } else if (this.type === 'zombie' && this.scene.textures.exists('zombie_sprite')) {
             texKey = 'zombie_sprite';
         } else if (this.type === 'merchant' && this.scene.textures.exists('merchant_sprite')) {
             texKey = 'merchant_sprite';
@@ -52,17 +93,72 @@ class NPC {
             texKey
         );
         this.sprite.setOrigin(0.5, 1);
-        this.sprite.setScale(0.3); // Optimized for visibility
+
+        if (isAnimated) {
+            this.sprite.setScale(1.5);
+        } else {
+            this.sprite.setScale(0.3);
+        }
 
         // Depth sorting
         this.updateDepth();
     }
 
+    // ... loop update ...
+
+    moveToGrid(targetX, targetY) {
+        // Determine facing direction before moving
+        const dx = targetX - this.gridX;
+        const dy = targetY - this.gridY;
+        const movingRight = (dx > 0) || (dy > 0);
+        this.sprite.setFlipX(!movingRight);
+
+        this.isMoving = true;
+        this.gridX = targetX;
+        this.gridY = targetY;
+
+        const targetScreen = this.iso.toScreen(targetX, targetY);
+
+        // Animation
+        if (this.sprite.texture.key === 'zombie_walk') {
+            this.sprite.play('zombie_walk_anim', true);
+        }
+
+        // Tween za smooth gibanje
+        this.scene.tweens.add({
+            targets: this.sprite,
+            x: targetScreen.x + this.offsetX,
+            y: targetScreen.y + this.offsetY,
+            duration: this.gridMoveTime,
+            ease: 'Linear',
+            onComplete: () => {
+                this.isMoving = false;
+
+                // Stop Animation
+                if (this.sprite.texture.key === 'zombie_walk') {
+                    this.sprite.stop();
+                    this.sprite.setFrame(0);
+                }
+            }
+        });
+
+        // Posodobi depth
+        this.updateDepth();
+    }
+
     update(delta) {
+        this.updateDepth(); // Continuous depth sorting
+
         if (this.isMoving) {
             return; // Že se premika
         }
 
+        // Tamed logic
+        if (this.state === 'TAMED' || this.state === 'FOLLOW') {
+            this.followPlayer();
+            return;
+        }
+
         // Random walk - pavza med premiki
         this.pauseTime += delta;
 
@@ -72,6 +168,31 @@ class NPC {
         }
     }
 
+    followPlayer() {
+        if (!this.scene.player) return;
+
+        const playerPos = this.scene.player.getPosition();
+        const dist = Phaser.Math.Distance.Between(this.gridX, this.gridY, playerPos.x, playerPos.y);
+
+        // Če je precej dlje, se premakni k njemu
+        if (dist > 2) {
+            const dx = Math.sign(playerPos.x - this.gridX);
+            const dy = Math.sign(playerPos.y - this.gridY);
+
+            // Move 1 tile towards player
+            let targetX = this.gridX + dx;
+            let targetY = this.gridY + dy;
+
+            // Avoid occupying SAME tile as player
+            if (targetX === playerPos.x && targetY === playerPos.y) {
+                if (Math.random() < 0.5) targetX = this.gridX;
+                else targetY = this.gridY;
+            }
+
+            this.moveToGrid(targetX, targetY);
+        }
+    }
+
     performRandomWalk() {
         // Naključna smer (NSEW + možnost obstati)
         const directions = [
@@ -103,28 +224,7 @@ class NPC {
         }
     }
 
-    moveToGrid(targetX, targetY) {
-        this.isMoving = true;
-        this.gridX = targetX;
-        this.gridY = targetY;
 
-        const targetScreen = this.iso.toScreen(targetX, targetY);
-
-        // Tween za smooth gibanje
-        this.scene.tweens.add({
-            targets: this.sprite,
-            x: targetScreen.x + this.offsetX,
-            y: targetScreen.y + this.offsetY,
-            duration: this.gridMoveTime,
-            ease: 'Linear',
-            onComplete: () => {
-                this.isMoving = false;
-            }
-        });
-
-        // Posodobi depth
-        this.updateDepth();
-    }
 
     updatePosition() {
         const screenPos = this.iso.toScreen(this.gridX, this.gridY);
@@ -136,8 +236,8 @@ class NPC {
     }
 
     updateDepth() {
-        const depth = this.iso.getDepth(this.gridX, this.gridY);
-        this.sprite.setDepth(depth + 1000); // +1000 da je nad terenom
+        // Pixel perfect sorting
+        if (this.sprite) this.sprite.setDepth(this.sprite.y);
     }
 
     getPosition() {

src/entities/Player.js

@@ -31,13 +31,15 @@ class Player {
     }
 
     createSprite() {
-        // Use custom sprite if available, otherwise procedural
-        let texKey = 'player';
+        // Prefer animated sprite if available
+        let texKey = 'player_walk'; // Spritesheet
+        let isAnimated = this.scene.textures.exists(texKey);
 
-        if (this.scene.textures.exists('player_sprite')) {
-            texKey = 'player_sprite';
-        } else if (!this.scene.textures.exists(texKey)) {
-            TextureGenerator.createPlayerSprite(this.scene, texKey);
+        if (!isAnimated) {
+            texKey = this.scene.textures.exists('player_sprite') ? 'player_sprite' : 'player';
+            if (!this.scene.textures.exists(texKey)) {
+                TextureGenerator.createPlayerSprite(this.scene, texKey);
+            }
         }
 
         // Kreira sprite
@@ -48,12 +50,67 @@ class Player {
             texKey
         );
         this.sprite.setOrigin(0.5, 1);
-        this.sprite.setScale(0.3); // Optimized for visibility
+
+        // Scale logic
+        if (isAnimated) {
+            this.sprite.setScale(1.5); // 64px frame -> looks good around 96px total height relative to 48px tile
+        } else {
+            this.sprite.setScale(0.3);
+        }
+
+        // --- HAND / HELD ITEM SPRITE ---
+        this.handSprite = this.scene.add.sprite(
+            screenPos.x + this.offsetX + 10,
+            screenPos.y + this.offsetY - 25, // Adjusted for new height
+            'item_axe'
+        );
+        this.handSprite.setOrigin(0.5, 0.5);
+        this.handSprite.setScale(0.25);
+        this.handSprite.setVisible(false);
 
         // Depth sorting
         this.updateDepth();
     }
 
+    // ... setupControls ...
+
+    // ... update ...
+
+    moveToGrid(targetX, targetY) {
+        this.isMoving = true;
+        this.gridX = targetX;
+        this.gridY = targetY;
+
+        const targetScreen = this.iso.toScreen(targetX, targetY);
+
+        // Play Animation
+        if (this.sprite.texture.key === 'player_walk') {
+            this.sprite.play('player_walk_anim', true);
+        }
+
+        // Tween za smooth gibanje
+        this.scene.tweens.add({
+            targets: [this.sprite, this.handSprite], // Move both
+            x: '+=' + (targetScreen.x + this.offsetX - this.sprite.x),
+            y: '+=' + (targetScreen.y + this.offsetY - this.sprite.y),
+            duration: this.gridMoveTime,
+            ease: 'Linear',
+            onComplete: () => {
+                this.isMoving = false;
+                this.updatePosition();
+
+                // Stop Animation
+                if (this.sprite.texture.key === 'player_walk') {
+                    this.sprite.stop();
+                    this.sprite.setFrame(0); // Idle frame
+                }
+            }
+        });
+
+        // Posodobi depth
+        this.updateDepth();
+    }
+
     setupControls() {
         // WASD kontrole
         this.keys = this.scene.input.keyboard.addKeys({
@@ -65,41 +122,73 @@ class Player {
     }
 
     update(delta) {
+        this.updateDepth();
+
         if (!this.isMoving) {
             this.handleInput();
         }
+
+        // Sync Held Item with Inventory
+        this.updateHeldItem();
+    }
+
+    updateHeldItem() {
+        const uiScene = this.scene.scene.get('UIScene');
+        const invSys = this.scene.inventorySystem;
+
+        if (uiScene && invSys) {
+            const selectedIdx = uiScene.selectedSlot;
+            const slot = invSys.slots[selectedIdx];
+
+            if (slot && (slot.type === 'axe' || slot.type === 'pickaxe' || slot.type === 'hoe' || slot.type === 'sword')) {
+                const texKey = `item_${slot.type}`;
+                if (this.scene.textures.exists(texKey)) {
+                    this.handSprite.setTexture(texKey);
+                    this.handSprite.setVisible(true);
+                } else {
+                    this.handSprite.setVisible(false);
+                }
+            } else {
+                this.handSprite.setVisible(false);
+            }
+        }
     }
 
     handleInput() {
         let targetX = this.gridX;
         let targetY = this.gridY;
         let moved = false;
+        let facingRight = !this.sprite.flipX; // Keep current
 
         // WASD za isometric movement
-        if (this.keys.up.isDown) {
-            // W = North-West v isometric view
+        if (this.keys.up.isDown) { // North-West
             targetX--;
             moved = true;
-            this.direction = 'up';
-        } else if (this.keys.down.isDown) {
-            // S = South-East v isometric view
+            facingRight = false; // Left-ish
+        } else if (this.keys.down.isDown) { // South-East
             targetX++;
             moved = true;
-            this.direction = 'down';
+            facingRight = true; // Right-ish
         }
 
-        if (this.keys.left.isDown) {
-            // A = South-West v isometric view
-            targetY--;
+        if (this.keys.left.isDown) { // South-West
+            targetY++; // SWAPPED: Was --
             moved = true;
-            this.direction = 'left';
-        } else if (this.keys.right.isDown) {
-            // D = North-East v isometric view
-            targetY++;
+            facingRight = false; // Left-ish
+        } else if (this.keys.right.isDown) { // North-East
+            targetY--; // SWAPPED: Was ++
             moved = true;
-            this.direction = 'right';
+            facingRight = true; // Right-ish
         }
 
+        // Apply Facing
+        this.sprite.setFlipX(!facingRight);
+
+        // Update Hand Position based on facing
+        const handOffset = facingRight ? 10 : -10;
+        this.handSprite.setX(this.sprite.x + handOffset);
+        this.handSprite.setFlipX(!facingRight);
+
         // Preveri kolizijo z robovi mape
         const terrainSystem = this.scene.terrainSystem;
         if (moved && terrainSystem) {
@@ -109,28 +198,7 @@ class Player {
         }
     }
 
-    moveToGrid(targetX, targetY) {
-        this.isMoving = true;
-        this.gridX = targetX;
-        this.gridY = targetY;
 
-        const targetScreen = this.iso.toScreen(targetX, targetY);
-
-        // Tween za smooth gibanje (brez animacije za zdaj)
-        this.scene.tweens.add({
-            targets: this.sprite,
-            x: targetScreen.x + this.offsetX,
-            y: targetScreen.y + this.offsetY,
-            duration: this.gridMoveTime,
-            ease: 'Linear',
-            onComplete: () => {
-                this.isMoving = false;
-            }
-        });
-
-        // Posodobi depth
-        this.updateDepth();
-    }
 
     updatePosition() {
         const screenPos = this.iso.toScreen(this.gridX, this.gridY);
@@ -138,12 +206,24 @@ class Player {
             screenPos.x + this.offsetX,
             screenPos.y + this.offsetY
         );
+
+        // Update hand
+        const facingRight = !this.sprite.flipX;
+        const handOffset = facingRight ? 10 : -10;
+        this.handSprite.setPosition(
+            screenPos.x + this.offsetX + handOffset,
+            screenPos.y + this.offsetY - 15
+        );
+
         this.updateDepth();
     }
 
     updateDepth() {
-        const depth = this.iso.getDepth(this.gridX, this.gridY);
-        this.sprite.setDepth(depth + 1000); // +1000 da je nad terenom
+        // Pixel-perfect depth sorting based on screen Y
+        if (this.sprite) {
+            this.sprite.setDepth(this.sprite.y);
+            if (this.handSprite) this.handSprite.setDepth(this.sprite.y + 1);
+        }
     }
 
     getPosition() {
@@ -159,4 +239,19 @@ class Player {
             this.sprite.destroy();
         }
     }
+
+    dieAnimation() {
+        this.sprite.setTint(0xff0000);
+        this.scene.tweens.add({
+            targets: this.sprite,
+            angle: 90,
+            duration: 500,
+            ease: 'Bounce.easeOut'
+        });
+    }
+
+    respawn() {
+        this.sprite.clearTint();
+        this.sprite.angle = 0;
+    }
 }

src/scenes/GameScene.js

@@ -50,14 +50,24 @@ class GameScene extends Phaser.Scene {
 
         // Dodaj 3 NPCje
         console.log('🧟 Initializing NPCs...');
+        // Dodaj 3 NPCje (Mixed)
+        console.log('🧟 Initializing NPCs...');
         const npcTypes = ['zombie', 'villager', 'merchant'];
         for (let i = 0; i < 3; i++) {
-            const randomX = Phaser.Math.Between(20, 80);
-            const randomY = Phaser.Math.Between(20, 80);
+            const randomX = Phaser.Math.Between(40, 60); // Closer to center
+            const randomY = Phaser.Math.Between(40, 60);
             const npc = new NPC(this, randomX, randomY, this.terrainOffsetX, this.terrainOffsetY, npcTypes[i]);
             this.npcs.push(npc);
         }
 
+        // Dodaj 10 dodatnih Zombijev!
+        for (let i = 0; i < 10; i++) {
+            const randomX = Phaser.Math.Between(10, 90);
+            const randomY = Phaser.Math.Between(10, 90);
+            const zombie = new NPC(this, randomX, randomY, this.terrainOffsetX, this.terrainOffsetY, 'zombie');
+            this.npcs.push(zombie);
+        }
+
         // Kamera sledi igralcu z izboljšanimi nastavitvami
         this.cameras.main.startFollow(this.player.sprite, true, 1.0, 1.0); // Instant follow (was 0.1)
 
@@ -192,8 +202,8 @@ class GameScene extends Phaser.Scene {
         if (this.statsSystem) this.statsSystem.update(delta);
         if (this.interactionSystem) this.interactionSystem.update(delta);
         if (this.farmingSystem) this.farmingSystem.update(delta);
-        if (this.weatherSystem) this.weatherSystem.update(delta);
         if (this.dayNightSystem) this.dayNightSystem.update();
+        if (this.weatherSystem) this.weatherSystem.update(delta);
 
         // Update Parallax (foreground grass fading)
         if (this.parallaxSystem && this.player) {

src/scenes/PreloadScene.js

@@ -30,7 +30,31 @@ class PreloadScene extends Phaser.Scene {
         // Wait for load completion then process transparency
         this.load.once('complete', () => {
             this.processAllTransparency();
+            this.createAnimations();
         });
+
+        // New Processed Animations (Standardized 64x64 strips)
+        this.load.spritesheet('player_walk', 'assets/sprites/player_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
+        this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
+    }
+
+    createAnimations() {
+        if (this.anims.exists('player_walk_anim')) return;
+
+        this.anims.create({
+            key: 'player_walk_anim',
+            frames: this.anims.generateFrameNumbers('player_walk', { start: 0, end: 5 }),
+            frameRate: 12,
+            repeat: -1
+        });
+
+        this.anims.create({
+            key: 'zombie_walk_anim',
+            frames: this.anims.generateFrameNumbers('zombie_walk', { start: 0, end: 5 }),
+            frameRate: 8,
+            repeat: -1
+        });
+        console.log('🎞️ Animations created!');
     }
 
     processAllTransparency() {

src/scenes/UIScene.js

@@ -10,8 +10,10 @@ class UIScene extends Phaser.Scene {
         this.gameScene = this.scene.get('GameScene');
 
         // Setup UI Container
-        this.width = this.cameras.main.width;
-        this.height = this.cameras.main.height;
+        // Shared Overlay (DayNight + Weather)
+        // Rendered here to be screen-space (HUD) and ignore zoom
+        this.overlayGraphics = this.add.graphics();
+        this.overlayGraphics.setDepth(-1000); // Behind UI elements
 
         this.createStatusBars();
         this.createInventoryBar();
@@ -19,7 +21,33 @@ class UIScene extends Phaser.Scene {
         this.createClock();
         this.createDebugInfo();
 
-        // Listen for events from GameScene if needed
+        // Resize event
+        this.scale.on('resize', this.resize, this);
+    }
+
+    resize(gameSize) {
+        this.width = gameSize.width;
+        this.height = gameSize.height;
+
+        this.cameras.main.setViewport(0, 0, this.width, this.height);
+
+        // Re-create UI elements at new positions
+        this.createClock();
+        this.createGoldDisplay();
+        this.createInventoryBar();
+        this.createDebugInfo();
+
+        // Refresh data
+        if (this.gameScene) {
+            if (this.gameScene.inventorySystem) {
+                this.updateInventory(this.gameScene.inventorySystem.slots);
+            }
+            // Clock/Gold update automatically in next frame
+            // Overlay fixes itself via Systems
+            if (this.overlayGraphics) {
+                this.overlayGraphics.clear();
+            }
+        }
     }
 
     createStatusBars() {
@@ -81,16 +109,26 @@ class UIScene extends Phaser.Scene {
     }
 
     createInventoryBar() {
+        // Clean up
+        if (this.inventorySlots) {
+            this.inventorySlots.forEach(slot => {
+                if (slot.itemSprite) slot.itemSprite.destroy();
+                if (slot.itemText) slot.itemText.destroy();
+                if (slot.countText) slot.countText.destroy();
+                slot.destroy();
+            });
+        }
+
         const slotCount = 9;
         const slotSize = 48; // 48x48 sloti
         const padding = 5;
 
         const totalWidth = (slotCount * slotSize) + ((slotCount - 1) * padding);
-        const startX = (this.width - totalWidth) / 2;
-        const startY = this.height - slotSize - 20;
+        const startX = (this.scale.width - totalWidth) / 2;
+        const startY = this.scale.height - slotSize - 20;
 
         this.inventorySlots = [];
-        this.selectedSlot = 0;
+        if (this.selectedSlot === undefined) this.selectedSlot = 0;
 
         for (let i = 0; i < slotCount; i++) {
             const x = startX + i * (slotSize + padding);
@@ -220,8 +258,11 @@ class UIScene extends Phaser.Scene {
     }
 
     createClock() {
+        if (this.clockBg) this.clockBg.destroy();
+        if (this.clockText) this.clockText.destroy();
+
         // Clock box top right
-        const x = this.width - 150;
+        const x = this.scale.width - 150;
         const y = 20;
 
         // Background
@@ -231,6 +272,8 @@ class UIScene extends Phaser.Scene {
         bg.lineStyle(2, 0xffffff, 0.8);
         bg.strokeRect(x, y, 130, 40);
 
+        this.clockBg = bg; // Save ref
+
         this.clockText = this.add.text(x + 65, y + 20, 'Day 1 - 08:00', {
             fontSize: '14px',
             fontFamily: 'Courier New',
@@ -241,7 +284,10 @@ class UIScene extends Phaser.Scene {
     }
 
     createGoldDisplay() {
-        const x = this.width - 150;
+        if (this.goldBg) this.goldBg.destroy();
+        if (this.goldText) this.goldText.destroy();
+
+        const x = this.scale.width - 150;
         const y = 70; // Below clock
 
         // Background
@@ -251,6 +297,8 @@ class UIScene extends Phaser.Scene {
         bg.lineStyle(2, 0xFFD700, 0.8);
         bg.strokeRect(x, y, 130, 30);
 
+        this.goldBg = bg; // Save ref
+
         this.goldText = this.add.text(x + 65, y + 15, 'GOLD: 0', {
             fontSize: '16px',
             fontFamily: 'Courier New',
@@ -267,10 +315,21 @@ class UIScene extends Phaser.Scene {
     }
 
     createDebugInfo() {
+        if (this.debugText) this.debugText.destroy();
+
+        // Use scale height to position at bottom left (above inventory?) or top left
+        // Original was 10, 100 (top leftish). User said "manjkajo na dnu".
+        // Let's put it top left but ensure it is recreated.
+        // Actually, user said stats missing on top/bottom.
+        // Debug info is usually extra.
+        // Let's stick to simple recreation.
+
         this.debugText = this.add.text(10, 100, '', {
             fontSize: '12px',
             fontFamily: 'monospace',
-            fill: '#00ff00'
+            fill: '#00ff00', // Green as requested before? Or White? Sticking to Green from file.
+            stroke: '#000000',
+            strokeThickness: 3
         });
     }
 

src/systems/DayNightSystem.js

@@ -11,10 +11,7 @@ class DayNightSystem {
     }
 
     init() {
-        // Create lighting overlay
-        this.overlay = this.scene.add.graphics();
-        this.overlay.setDepth(4999); // Below weather, above everything else
-        this.overlay.setScrollFactor(0); // Fixed to camera
+        // No local overlay - using UIScene.overlayGraphics
     }
 
     update() {
@@ -32,17 +29,24 @@ class DayNightSystem {
     }
 
     getPhase(hour) {
-        if (hour >= 5 && hour < 7) return 'dawn';      // 5-7
-        if (hour >= 7 && hour < 18) return 'day';      // 7-18
-        if (hour >= 18 && hour < 20) return 'dusk';    // 18-20
-        return 'night';                                 // 20-5
+        if (hour >= 5 && hour < 7) return 'dawn';
+        if (hour >= 7 && hour < 18) return 'day';
+        if (hour >= 18 && hour < 20) return 'dusk';
+        return 'night';
     }
 
     updateLighting(hour) {
-        const width = this.scene.cameras.main.width;
-        const height = this.scene.cameras.main.height;
+        // Get Shared Overlay from UI Scene
+        const uiScene = this.scene.scene.get('UIScene');
+        if (!uiScene || !uiScene.overlayGraphics) return;
 
-        this.overlay.clear();
+        const graphics = uiScene.overlayGraphics;
+
+        // IMPORTANT: DayNight is the FIRST system to render to overlay, so it MUST CLEAR it.
+        graphics.clear();
+
+        const width = uiScene.scale.width;
+        const height = uiScene.scale.height;
 
         let color = 0x000033; // Default night blue
         let alpha = 0;
@@ -72,8 +76,8 @@ class DayNightSystem {
         }
 
         if (alpha > 0) {
-            this.overlay.fillStyle(color, alpha);
-            this.overlay.fillRect(0, 0, width, height);
+            graphics.fillStyle(color, alpha);
+            graphics.fillRect(0, 0, width, height);
         }
     }
 

src/systems/ParallaxSystem.js

@@ -21,8 +21,9 @@ class ParallaxSystem {
         console.log('🌄 ParallaxSystem: Initialized');
 
         // Layer 1: Sky/Hills (Distant background)
-        this.createSkyLayer();
-        this.createDistantHills();
+        // Layer 1: Sky/Hills (Disabled by request)
+        // this.createSkyLayer();
+        // this.createDistantHills();
 
         // Layer 4: Foreground overlay (High grass patches)
         this.createForegroundGrass();

src/systems/StatsSystem.js

@@ -85,24 +85,41 @@ class StatsSystem {
 
     die() {
         console.log('💀 Player died!');
-        // Zaenkrat samo respawn / reset
-        this.health = 100;
-        this.hunger = 100;
-        this.thirst = 100;
 
-        // Teleport to spawn
-        const spawnX = this.scene.terrainOffsetX + 500; // Dummy
-        const spawnY = this.scene.terrainOffsetY + 100; // Dummy
-        // Reset player pos... 
-        // V pravi implementaciji bi klicali GameScene.respawnPlayer()
+        // Trigger Player Animation
+        if (this.scene.player) {
+            this.scene.player.dieAnimation();
+        }
 
-        // Show notification
+        // Show Notification & Overlay in UI Scene
         const uiScene = this.scene.scene.get('UIScene');
         if (uiScene) {
-            const txt = uiScene.add.text(uiScene.width / 2, uiScene.height / 2, 'YOU DIED', {
+            // Full screen overlay using scale dimensions
+            const width = uiScene.scale.width;
+            const height = uiScene.scale.height;
+
+            const bg = uiScene.add.rectangle(width / 2, height / 2, width, height, 0x000000, 0.8);
+
+            const txt = uiScene.add.text(width / 2, height / 2, 'YOU DIED', {
                 fontSize: '64px', color: '#ff0000', fontStyle: 'bold'
             }).setOrigin(0.5);
-            uiScene.time.delayedCall(2000, () => txt.destroy());
+
+            // Wait and Respawn
+            uiScene.time.delayedCall(3000, () => {
+                if (bg) bg.destroy();
+                if (txt) txt.destroy();
+
+                // Reset Stats
+                this.health = 100;
+                this.hunger = 100;
+                this.thirst = 100;
+                this.updateUI();
+
+                // Reset Player
+                if (this.scene.player) {
+                    this.scene.player.respawn();
+                }
+            });
         }
     }
 

src/systems/TerrainSystem.js

@@ -350,6 +350,7 @@ class TerrainSystem {
                 if (x > 5 && x < this.width - 5 && y > 5 && y < this.height - 5) {
                     let decorType = null;
                     let maxHp = 1;
+                    let scale = 1.0; // Default scale
 
                     if (terrainType.name.includes('grass')) { // Check ANY grass type
                         const rand = Math.random();
@@ -361,6 +362,20 @@ class TerrainSystem {
                         } else if (rand < 0.025) { // Reduced to 2.5% trees (optimum balance)
                             decorType = 'tree';
                             maxHp = 5;
+
+                            // TREE SIZING LOGIC
+                            // 20% Normal (1.0)
+                            // 60% Medium (0.6-0.8)
+                            // 20% Tiny (0.2)
+                            const sizeRand = Math.random();
+                            if (sizeRand < 0.2) {
+                                scale = 0.25; // 20% Tiny (0.25 visible enough)
+                            } else if (sizeRand < 0.8) {
+                                scale = 0.6 + Math.random() * 0.2; // 60% Scale 0.6-0.8
+                            } else {
+                                scale = 1.0; // 20% Full size
+                            }
+
                         } else if (rand < 0.03) {
                             decorType = 'gravestone'; // 💀 Nagrobniki
                             maxHp = 10; // Težje uničiti
@@ -381,7 +396,8 @@ class TerrainSystem {
                             type: decorType,
                             id: key,
                             maxHp: maxHp,
-                            hp: maxHp
+                            hp: maxHp,
+                            scale: scale // Save scale
                         };
 
                         this.decorations.push(decorData);
@@ -608,7 +624,7 @@ class TerrainSystem {
                         ));
                     }
 
-                    sprite.setDepth(this.iso.getDepth(x, y));
+                    sprite.setDepth(this.iso.getDepth(x, y) - 2000); // Tiles always in background
 
                     this.visibleTiles.set(key, sprite);
                 }
@@ -630,8 +646,9 @@ class TerrainSystem {
                                 cropPos.x + this.offsetX,
                                 cropPos.y + this.offsetY + this.iso.tileHeight / 2 + elevationOffset
                             );
+                            // Crop depth = Y pos
                             const depth = this.iso.getDepth(x, y);
-                            sprite.setDepth(depth + 1); // Just slightly above tile
+                            sprite.setDepth(depth);
 
                             this.visibleCrops.set(key, sprite);
                         }
@@ -658,8 +675,13 @@ class TerrainSystem {
                             );
 
                             const depth = this.iso.getDepth(x, y);
-                            if (decor.type === 'flower') sprite.setDepth(depth + 1);
-                            else sprite.setDepth(depth + 1000); // Taller objects update depth
+                            // Depth strategy: Base of object sorting.
+                            // Add small offset based on type if needed, but mainly use Y
+                            sprite.setDepth(depth);
+
+                            // Apply scale if present
+                            if (decor.scale) sprite.setScale(decor.scale);
+                            else sprite.setScale(1);
 
                             sprite.flipX = (x + y) % 2 === 0;
 

src/systems/WeatherSystem.js

@@ -13,15 +13,18 @@ class WeatherSystem {
     }
 
     init() {
-        // Create weather overlay
-        this.overlay = this.scene.add.graphics();
-        this.overlay.setDepth(5000); // Above everything but UI
-        this.overlay.setScrollFactor(0); // Fixed to camera
-
-        // Start with random weather
+        // No local overlay - we use UI Scene
         this.changeWeather();
     }
 
+    getOverlay() {
+        const uiScene = this.scene.scene.get('UIScene');
+        if (uiScene && uiScene.weatherGraphics) {
+            return uiScene.weatherGraphics;
+        }
+        return null;
+    }
+
     changeWeather() {
         // Clean up old weather
         this.clearWeather();
@@ -61,10 +64,10 @@ class WeatherSystem {
     }
 
     startRain(heavy = false) {
-        const width = this.scene.cameras.main.width;
-        const height = this.scene.cameras.main.height;
+        const width = this.scene.scale.width;
+        const height = this.scene.scale.height;
 
-        // Create rain drops
+        // Create rain drops (keep logic for drops)
         const dropCount = heavy ? 150 : 100;
 
         for (let i = 0; i < dropCount; i++) {
@@ -77,27 +80,16 @@ class WeatherSystem {
             this.rainParticles.push(drop);
         }
 
-        // Darken screen slightly
-        this.overlay.clear();
-        this.overlay.fillStyle(0x000033, heavy ? 0.3 : 0.2);
-        this.overlay.fillRect(0, 0, width, height);
+        // No drawing here - handled in renderWeather
     }
 
     applyFog() {
-        const width = this.scene.cameras.main.width;
-        const height = this.scene.cameras.main.height;
-
-        this.overlay.clear();
-        this.overlay.fillStyle(0xcccccc, 0.4);
-        this.overlay.fillRect(0, 0, width, height);
+        // No drawing here - handled in renderWeather
     }
 
     clearWeather() {
-        // Remove all weather effects
         this.rainParticles = [];
-        if (this.overlay) {
-            this.overlay.clear();
-        }
+        // No clearing here - handled by DayNightSystem clearing the frame
     }
 
     update(delta) {
@@ -108,42 +100,50 @@ class WeatherSystem {
             this.changeWeather();
         }
 
-        // Update rain
-        if (this.currentWeather === 'rain' || this.currentWeather === 'storm') {
-            this.updateRain(delta);
+        // Always render active weather
+        if (this.currentWeather !== 'clear') {
+            this.renderWeather(delta);
         }
     }
 
-    updateRain(delta) {
-        const height = this.scene.cameras.main.height;
-        const width = this.scene.cameras.main.width;
+    renderWeather(delta) {
+        const overlay = this.getOverlay();
+        if (!overlay) return;
 
-        // Update drop positions
-        for (const drop of this.rainParticles) {
-            drop.y += (drop.speed * delta) / 1000;
+        const height = this.scene.scale.height;
+        const width = this.scene.scale.width;
 
-            // Reset if off screen
-            if (drop.y > height) {
-                drop.y = -10;
-                drop.x = Math.random() * width;
-            }
+        // FOG
+        if (this.currentWeather === 'fog') {
+            overlay.fillStyle(0xcccccc, 0.4);
+            overlay.fillRect(0, 0, width, height);
+            return;
         }
 
-        // Render rain
-        this.overlay.clear();
+        // RAIN / STORM
+        if (this.currentWeather === 'rain' || this.currentWeather === 'storm') {
+            // Update physics
+            for (const drop of this.rainParticles) {
+                drop.y += (drop.speed * delta) / 1000;
+                if (drop.y > height) {
+                    drop.y = -10;
+                    drop.x = Math.random() * width;
+                }
+            }
 
-        // Background darkening
-        const isDark = this.currentWeather === 'storm' ? 0.3 : 0.2;
-        this.overlay.fillStyle(0x000033, isDark);
-        this.overlay.fillRect(0, 0, width, height);
+            // Darken background for storm/rain (additive to DayNight)
+            const isDark = this.currentWeather === 'storm' ? 0.3 : 0.2;
+            overlay.fillStyle(0x000033, isDark);
+            overlay.fillRect(0, 0, width, height);
 
-        // Draw drops
-        this.overlay.lineStyle(1, 0x88aaff, 0.5);
-        for (const drop of this.rainParticles) {
-            this.overlay.beginPath();
-            this.overlay.moveTo(drop.x, drop.y);
-            this.overlay.lineTo(drop.x - 2, drop.y + drop.length);
-            this.overlay.strokePath();
+            // Draw drops
+            overlay.lineStyle(1, 0x88aaff, 0.5);
+            for (const drop of this.rainParticles) {
+                overlay.beginPath();
+                overlay.moveTo(drop.x, drop.y);
+                overlay.lineTo(drop.x - 2, drop.y + drop.length);
+                overlay.strokePath();
+            }
         }
     }
 

src/utils/IsometricUtils.js

@@ -21,8 +21,12 @@ class IsometricUtils {
     }
 
     // Izračun depth (z-index) za pravilno sortiranje
+    // Izračun depth (z-index)
+    // V Phaserju je najbolje uporabiti kar Y koordinato spritha.
+    // Tu vrnemo pričakovano Y pozicijo za grid celico.
     getDepth(gridX, gridY) {
-        return gridX + gridY;
+        // (gridX + gridY) * tileHeight/2 je točno screenY
+        return (gridX + gridY) * (this.tileHeight / 2);
     }
 
     // Izračun centerja tile-a