WATER: Added animated isometric water with cyan surface, dark blue cliffs, sparkle points - river system complete

src/scenes/GameScene.js

@@ -801,5 +801,10 @@ class GameScene extends Phaser.Scene {
         if (window.Antigravity) {
             window.Antigravity.Update(this, delta);
         }
+
+        // Terrain system update (za water animacijo)
+        if (this.terrainSystem) {
+            this.terrainSystem.update(Date.now(), delta);
+        }
     }
 }

src/systems/TerrainSystem.js

@@ -44,6 +44,10 @@ class TerrainSystem {
         this.visibleDecorations = new Map();
         this.visibleCrops = new Map();
 
+        // Water animation sistem
+        this.waterTiles = []; // Array za water tiles
+        this.waterAnimationTimer = 0;
+
         this.tilePool = {
             active: [],
             inactive: [],
@@ -225,6 +229,98 @@ class TerrainSystem {
             graphics.generateTexture(type.name, tileWidth + P * 2, tileHeight + P * 2);
             graphics.destroy();
         });
+
+        // ANIMATED WATER FRAMES - 4 frame animacija za tekoč tok!
+        this.createWaterFrames();
+    }
+
+    createWaterFrames() {
+        const tileWidth = 48;
+        const tileHeight = 48;
+        const P = 2;
+
+        // Generiraj 4 frame-e za water animacijo
+        for (let frame = 0; frame < 4; frame++) {
+            const graphics = this.scene.make.graphics({ x: 0, y: 0, add: false });
+
+            const xs = P;
+            const xe = 48 + P;
+            const midX = 24 + P;
+            const topY = P;
+            const midY = 12 + P;
+            const bottomY = 24 + P;
+            const depth = 14;
+
+            // 1. STRANICE (DARK BLUE - kot na sliki!)
+            // Left Face - temno modra
+            const cLeft = 0x0066aa;
+            graphics.fillStyle(cLeft);
+            graphics.beginPath();
+            graphics.moveTo(midX, bottomY);
+            graphics.lineTo(midX, bottomY + depth);
+            graphics.lineTo(xs, midY + depth);
+            graphics.lineTo(xs, midY);
+            graphics.closePath();
+            graphics.fill();
+
+            // Right Face - še temnejša modra
+            const cRight = 0x004488;
+            graphics.fillStyle(cRight);
+            graphics.beginPath();
+            graphics.moveTo(xe, midY);
+            graphics.lineTo(xe, midY + depth);
+            graphics.lineTo(midX, bottomY + depth);
+            graphics.lineTo(midX, bottomY);
+            graphics.closePath();
+            graphics.fill();
+
+            // 2. TOP SURFACE - SVETLO CYAN (kot na sliki!)
+            const waterColor = 0x33ccff;
+            graphics.fillStyle(waterColor);
+            graphics.beginPath();
+            graphics.moveTo(xs, midY);
+            graphics.lineTo(midX, topY);
+            graphics.lineTo(xe, midY);
+            graphics.lineTo(midX, bottomY);
+            graphics.closePath();
+            graphics.fill();
+
+            // 3. WAVE PATTERN
+            const offset = frame * 3;
+            graphics.lineStyle(1, 0x66ddff, 0.3);
+
+            for (let i = 0; i < 3; i++) {
+                graphics.beginPath();
+                const baseY = topY + 6 + i * 5;
+                for (let px = xs; px <= xe; px += 2) {
+                    const relativeX = px - xs;
+                    const waveOffset = Math.sin((relativeX + offset + i * 10) * 0.15) * 1.5;
+                    const py = baseY + waveOffset;
+                    if (px === xs) graphics.moveTo(px, py);
+                    else graphics.lineTo(px, py);
+                }
+                graphics.strokePath();
+            }
+
+            // 4. SPARKLE POINTS
+            graphics.fillStyle(0xffffff);
+            const sparkles = [
+                { x: midX - 10 + (frame * 2) % 20, y: midY + 3 },
+                { x: midX + 8 - (frame * 3) % 16, y: midY + 8 },
+                { x: midX - 4 + Math.floor(frame * 1.5) % 8, y: midY + 13 }
+            ];
+            sparkles.forEach(s => {
+                graphics.fillRect(s.x, s.y, 1, 1);
+                graphics.fillRect(s.x - 2, s.y, 1, 1);
+                graphics.fillRect(s.x + 2, s.y, 1, 1);
+                graphics.fillRect(s.x, s.y - 2, 1, 1);
+                graphics.fillRect(s.x, s.y + 2, 1, 1);
+            });
+
+            graphics.generateTexture(`water_frame_${frame}`, tileWidth + P * 2, tileHeight + P * 2);
+            graphics.destroy();
+        }
+        console.log('🌊 Water frames created!');
     }
 
     generate() {
@@ -295,6 +391,22 @@ class TerrainSystem {
                     terrainType = this.terrainTypes.GRASS_FULL; // ZELENA TRAVA!
                 }
 
+                // RIVER Override - VIJUGAST POTOK!
+                // River gre diagonalno skozi mapo z sinusnim vijuganjem
+                const riverCenterY = 50; // Center Y pozicija za river
+                const riverWidth = 3; // Širina potoka (3 tiles)
+                const waveAmplitude = 8; // Amplituda vijuganja
+                const waveFrequency = 0.1; // Frekvenca vijuganja
+
+                // Izračun vijugaste poti
+                const riverOffset = Math.sin(x * waveFrequency) * waveAmplitude;
+                const riverY = riverCenterY + riverOffset;
+
+                // Če je tile znotraj river area
+                if (Math.abs(y - riverY) <= riverWidth / 2) {
+                    terrainType = this.terrainTypes.WATER; // VODA!
+                }
+
                 // City Override
                 if (x >= CITY_START_X && x < CITY_START_X + CITY_SIZE &&
                     y >= CITY_START_Y && y < CITY_START_Y + CITY_SIZE) {
@@ -323,6 +435,11 @@ class TerrainSystem {
                     solid: terrainType.solid || false
                 };
 
+                // Track water tiles za animacijo
+                if (terrainType.name === 'water') {
+                    this.waterTiles.push(this.tiles[y][x]);
+                }
+
                 // Track valid positions for decorations
                 if (terrainType.name !== 'water' && terrainType.name !== 'sand' && terrainType.name !== 'stone' && !terrainType.solid) {
                     // Exclude Farm/City from random decor logic
@@ -964,4 +1081,30 @@ class TerrainSystem {
         }
         return true; // Out of bounds = solid
     }
+
+    // Water Animation Update
+    update(time, delta) {
+        // Posodobi water animation timer
+        this.waterAnimationTimer += delta;
+
+        // Water frame animacija (vsake 150ms = ~6.6 FPS za smooth flow)
+        if (this.waterAnimationTimer > 150) {
+            this.waterAnimationTimer = 0;
+
+            // Increment frame counter
+            if (!this.waterCurrentFrame) this.waterCurrentFrame = 0;
+            this.waterCurrentFrame = (this.waterCurrentFrame + 1) % 4; // Cycle 0-3
+
+            // Update vse visible water tiles s novim frame-om
+            this.visibleTiles.forEach((sprite, key) => {
+                const coords = key.split(',');
+                const x = parseInt(coords[0]);
+                const y = parseInt(coords[1]);
+
+                if (this.tiles[y] && this.tiles[y][x] && this.tiles[y][x].type === 'water') {
+                    sprite.setTexture(`water_frame_${this.waterCurrentFrame}`);
+                }
+            });
+        }
+    }
 }