diff --git a/src/scenes/GameScene.js b/src/scenes/GameScene.js index a8f3c44..7208d13 100644 --- a/src/scenes/GameScene.js +++ b/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); + } } } diff --git a/src/systems/TerrainSystem.js b/src/systems/TerrainSystem.js index 0757bb2..a0e04f4 100644 --- a/src/systems/TerrainSystem.js +++ b/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}`); + } + }); + } + } }