SESSION END 23:40 - Complete visual overhaul. New folder structure (Ground/Veg/Env). Generated final assets (Style 32 Dark-Chibi). Implemented GrassScene_Clean.js with density logic. Scene PERFECT.

.agent/workflows/no_pixelation_rule.md

@@ -2,315 +2,33 @@
 description: NO PIXELATION - Vector-Style Smooth Lines Enforcement
 ---
 
-# 🚫 NO PIXELATION RULE - Style 32 Smooth Lines
+# VISUAL STYLE GUIDE: "CULT OF THE LAMB" AESTHETIC
-
+
-**CRITICAL:** Style 32 is **NOT** pixel art! It uses smooth, vector-style lines with ZERO pixelation.
+## 1. STYLE DEFINITION (Style 32)
-
+- **CORE INSPIRATION**: *Cult of the Lamb*, *Don't Starve* (cleaner version).
----
+- **TYPE**: Vector Art / 2D Smooth.
-
+- **LINES**: Thick, consistent BLACK outlines on all major assets.
-## ✅ GOLD STANDARD REFERENCE
+- **COLORS**: Flat, saturated but slightly dark/muted colors (Noir palette). No gradients unless cel-shaded.
-
+- **SHADING**: Hard Cel-Shading (ostri prehodi senc).
-**MANDATORY REFERENCE:** `/references/main_characters/ana/master_reference_nobg.png`
+
-
+## 2. RESOLUTION RULES (MANDATORY)
-**Why Ana is the GOLD STANDARD:**
+Do not generate everything at 1024x1024. Use these target sizes:
-- ✅ **SMOOTH, CLEAN LINES** - No stair-stepping, no chunky pixels
+
-- ✅ **5px THICK OUTLINES** - Consistent, sharp, vector-quality
+| Asset Type | Resolution | Notes |
-- ✅ **HIGH-RES RENDERING** - Fluid, polished, film-quality
+| :--- | :--- | :--- |
-- ✅ **FLAT CEL SHADING** - Clean color fills, no pixelation
+| **Ground Tiles** | `512x512` | Seamless/Tileable textures. |
-- ✅ **SHARP EDGES** - Like vector art, not retro pixel sprites
+| **Hero Trees (Large)**| `512x512` | Main visual anchors. |
-
+| **Standard Trees** | `256x256` | General vegetation. |
-**THIS is Style 32. Everything else must match Ana's visual quality.**
+| **Props / Bushes** | `128x128` or `256x256` | Small items (grass tufts, rocks). |
-
+| **Characters** | `256x256` | Protagonist, Zombies. |
----
+| **UI Icons** | `64x64` or `128x128` | Inventory items. |
-
+
-## 🚫 WHAT IS FORBIDDEN (Pixel Art)
+## 3. ANTI-ALIASING RULE
-
+- **FORBIDDEN**: Pixel Art aesthetic (jagged edges).
-### **Pixel Art Characteristics (NEVER USE):**
+- **REQUIRED**: Smooth, anti-aliased edges (Vector Look).
-- ❌ **Stair-stepping edges** (jagged diagonal lines)
+- Images must look crisp and clean like an SVG export.
-- ❌ **Chunky, blocky appearance** (visible pixel grid)
+
-- ❌ **Low resolution** (< 64px for characters)
+## 4. WORKFLOW EXECUTION
-- ❌ **Dithering patterns** (checkerboard shading)
+1. Generate larger if needed (e.g. 1024) for details.
-- ❌ **Limited color palette** (8-bit/16-bit restrictions)
+2. DOWNSCALE to target resolution using high-quality resampling (Lanczos).
-- ❌ **Retro game aesthetic** (NES, SNES, Game Boy style)
+3. Ensure Alpha channel is clean (no halos).
-
-**Example of WRONG style:**
-```
-🔴 Pixelated character with visible 8x8 pixel blocks
-🔴 Diagonal lines look like stairs (█▄▀)
-🔴 Low resolution, chunky sprites
-```
-
----
-
-## ✅ REQUIRED STYLE (Vector-Smooth, High-Res)
-
-### **Style 32 Smooth Characteristics:**
-
-#### **1. SMOOTH, ANTI-ALIASED CURVES**
-- Outline curves are fluid (like vector art)
-- No jagged edges or stair-stepping
-- Diagonal lines are smooth gradients
-- Round shapes are perfectly circular
-
-#### **2. HIGH-RESOLUTION RENDERING**
-- Characters: Minimum 64x64px (prefer 128x128px or higher)
-- NPCs: 64x64px to 160x160px
-- Buildings: 128x128px to 256x256px
-- Render at high resolution, downscale if needed (preserves smooth edges)
-
-#### **3. THICK 5px OUTLINES (SMOOTH)**
-- 5px black outlines `#000000`
-- Outlines are vector-smooth (not pixel-chunky)
-- Consistent thickness around entire shape
-- Corners are rounded, not blocky
-
-#### **4. FLAT CEL SHADING (CLEAN)**
-- Solid color fills (no dithering)
-- Sharp shadow boundaries (but smooth edges)
-- No pixel noise or grain texture
-- Colors are vibrant and solid
-
-#### **5. FILM-QUALITY POLISH**
-- Looks like animation cel (Cult of the Lamb, Don't Starve)
-- NOT like retro game sprite (Mario, Zelda classic)
-- Professional, modern indie game quality
-- Fluid, dynamic, alive
-
----
-
-## 🔍 VISUAL COMPARISON
-
-### **✅ CORRECT (Ana Reference):**
-```
-Smooth outlines ───────────────► Vector-quality curves
-Thick 5px edges ───────────────► Consistent, clean
-High resolution ───────────────► 128px+, sharp details
-Flat shading ──────────────────► Solid colors, no grain
-Film quality ──────────────────► Professional, polished
-```
-
-### **❌ WRONG (Pixel Art):**
-```
-Jagged edges ──────────────────► Stair-stepping (█▄▀)
-Thin/blocky outlines ──────────► Inconsistent thickness
-Low resolution ────────────────► < 32px, chunky
-Dithered shading ──────────────► Checkerboard patterns
-Retro aesthetic ───────────────► Old-school 8-bit look
-```
-
----
-
-## 🛠️ GENERATION ENFORCEMENT
-
-### **MANDATORY PROMPT ADDITIONS:**
-
-**ALWAYS include these phrases:**
-```
-"SMOOTH vector-style lines (NOT pixel art),
-anti-aliased curves, high-resolution rendering,
-thick 5px black outlines with clean edges,
-matches Ana reference quality from /references/main_characters/ana/,
-film-quality polish, NO pixelation, NO stair-stepping,
-Cult of the Lamb aesthetic (smooth, not retro)."
-```
-
-### **FORBIDDEN PHRASES (Never Use):**
-```
-❌ "pixel art"
-❌ "8-bit style"
-❌ "retro game sprite"
-❌ "low resolution"
-❌ "chunky pixels"
-❌ "Game Boy style"
-❌ "NES aesthetic"
-```
-
----
-
-## 🔄 AUTO-REROLL TRIGGERS
-
-**IMMEDIATE REROLL if generated image has:**
-
-1. **Jagged diagonal lines** (stair-stepping visible)
-   - Reroll with: "SMOOTH anti-aliased diagonals, NO stair-stepping"
-
-2. **Blocky, chunky appearance** (pixel grid visible)
-   - Reroll with: "High-resolution vector-smooth, NO chunky pixels"
-
-3. **Thin or inconsistent outlines** (< 4px or varying thickness)
-   - Reroll with: "Consistent 5px thick black outlines, smooth edges"
-
-4. **Low resolution** (character < 64px or looks pixelated when zoomed)
-   - Reroll with: "High-resolution 128px+, film-quality rendering"
-
-5. **Dithering or grain texture** (checkerboard shading)
-   - Reroll with: "Flat cel shading, solid colors, NO dithering"
-
-**Maximum 3 rerolls. If still pixelated after 3 attempts, report to user.**
-
----
-
-## 📋 PRE-GENERATION CHECKLIST
-
-**BEFORE generating ANY asset:**
-
-- [ ] Viewed Ana reference (`master_reference_nobg.png`)
-- [ ] Understood smooth line quality required
-- [ ] Prompt includes "SMOOTH vector-style lines (NOT pixel art)"
-- [ ] Prompt includes "matches Ana reference quality"
-- [ ] Prompt includes "NO pixelation, NO stair-stepping"
-- [ ] Prompt specifies high resolution (64px+ minimum)
-- [ ] Prompt specifies 5px thick smooth outlines
-- [ ] Avoided ALL pixel art keywords
-
----
-
-## 📋 POST-GENERATION VERIFICATION
-
-**AFTER generating asset:**
-
-1. **Zoom In Test:**
-   - Zoom to 200-400%
-   - Check for jagged edges or stair-stepping
-   - If visible → REJECT, reroll
-
-2. **Outline Smoothness:**
-   - Inspect outline curves
-   - Must be fluid, not blocky
-   - If blocky → REJECT, reroll
-
-3. **Compare to Ana:**
-   - Side-by-side with Ana reference
-   - Match line quality?
-   - Match outline thickness?
-   - Match overall polish?
-   - If NO → REJECT, reroll
-
-4. **Resolution Check:**
-   - Character sprites: 64px minimum (prefer 128px+)
-   - Quality should survive zoom
-   - If too low-res → REJECT, reroll
-
----
-
-## 🎨 SPECIFIC ASSET TYPES
-
-### **Characters & NPCs:**
-- **Resolution:** 128x128px to 160x160px (high-res)
-- **Style:** Match Ana exactly (smooth, polished)
-- **Reference:** Ana's skin texture, outline quality, shading style
-
-### **Buildings:**
-- **Resolution:** 160x256px to 256x256px
-- **Style:** Smooth outlines, clean architecture
-- **NOT:** Minecraft-style blocky buildings
-
-### **Crops & Plants:**
-- **Resolution:** 64x64px minimum
-- **Style:** Smooth leaves, organic curves
-- **NOT:** Square pixel leaves
-
-### **UI Elements:**
-- **Resolution:** Vector-based or high-res PNG
-- **Style:** Sharp, modern, smooth
-- **NOT:** Retro pixelated UI
-
-### **VFX & Particles:**
-- **Resolution:** 64x64px to 128x128px
-- **Style:** Smooth glows, fluid effects
-- **NOT:** Chunky pixel sparkles
-
----
-
-## 🚨 EMERGENCY PIXELATION FIX
-
-**If asset was already generated with pixelation:**
-
-1. **Identify Issue:**
-   - "This asset is pixelated (pixel art style)"
-   - "Required: Smooth vector-style like Ana reference"
-
-2. **Regenerate Immediately:**
-   - Use corrected prompt with ALL smooth-line keywords
-   - Reference Ana directly in prompt
-   - Emphasize "NOT pixel art" explicitly
-
-3. **Compare Before/After:**
-   - Old (pixelated) vs New (smooth)
-   - Verify improvement
-   - Only accept if matches Ana quality
-
-4. **Replace File:**
-   - Delete pixelated version
-   - Save smooth version with same filename
-   - Update manifest
-
----
-
-## 📊 QUALITY STANDARDS
-
-### **MINIMUM ACCEPTABLE:**
-- Resolution: 64x64px for small assets
-- Outline: 5px thick, smooth edges
-- Shading: Flat cel, no dithering
-- Style: Matches Ana's polish level
-
-### **PREFERRED:**
-- Resolution: 128x128px or higher
-- Outline: Perfect vector-smooth curves
-- Shading: Professional cel animation quality
-- Style: Indistinguishable from Ana reference
-
-### **UNACCEPTABLE:**
-- ANY visible pixelation or stair-stepping
-- Chunky, blocky appearance
-- Retro game aesthetic
-- Low-resolution sprites (< 32px)
-- Dithered or grainy textures
-
----
-
-## 🎯 STYLE 32 = SMOOTH, NOT PIXELS
-
-**Remember:**
-- **Style 32** refers to the "32" in "Cult of the Lamb" inspiration (modern smooth indie)
-- **NOT** referring to "32-bit" (which could imply pixel art)
-- **ALWAYS** smooth, vector-quality, film-polished
-- **NEVER** chunky, pixelated, retro
-
----
-
-## 📚 REFERENCE LIBRARY UPDATE
-
-**Ana is now PRIMARY reference for line quality:**
-- Kai, Gronk, all NPCs must match Ana's smoothness
-- Buildings, crops, all assets use Ana's line quality
-- NO exceptions
-
-**Secondary references (must also be smooth):**
-- Cult of the Lamb (game) - smooth indie style
-- Don't Starve (game) - vector-style characters
-- Hollow Knight (game) - clean, sharp lines
-
-**NOT references (these are pixel art):**
-- Stardew Valley - pixel art style
-- Terraria - pixel art style
-- Celeste - pixel art style
-
----
-
-**ACTIVATION:** ALWAYS active (mandatory for ALL asset generation)
-**PRIORITY:** MAXIMUM - overrides everything
-**VERIFICATION:** Compare to Ana reference EVERY time
-
----
-
-**🎯 SUMMARY:**
-
-1. Ana = Gold Standard (smooth, vector-quality)
-2. NO pixel art, EVER
-3. Smooth lines, high-res, film-quality
-4. Auto-reroll if pixelated
-5. Compare to Ana every time
-
-**EVERYTHING must look like Ana. No exceptions.**

.agent/workflows/strict_reference_mode.md

@@ -1,178 +1,32 @@
 ---
-description: Strict Reference Mode - 100% Visual DNA Matching
+description: MANDATORY - Always check references before generating any assets
 ---
 
-# 🎯 STRICT REFERENCE MODE
+# STRICT REFERENCE MODE - VISUAL DNA
 
-**MANDATORY WORKFLOW:** Before generating ANY new visual asset, follow these steps:
+## 1. REFERENCE LOCK
+- **LOCKED LOCATION**: `assets/references`
+- **PERMISSION**: READ-ONLY.
+- **FORBIDDEN ACTIONS**: 
+  - NO MOVING files out of this folder.
+  - NO DELETING files from this folder.
+  - NO MODIFYING files in this folder.
+- **EXCEPTION**: Any write access requires EXPLICIT USER CONFIRMATION per file.
 
-## ✅ STEP 1: CHECK /references/ FOLDER
+## 2. GENERATION WORKFLOW (VISUAL DNA)
+When generating NEW assets (e.g. for `assets/DEMO_FAZA1/`):
+1.  **CONSULT DNA**: Look at `assets/references` to understand the style (Dark-Chibi, thick outlines, Style 32).
+2.  **GENERATE**: Create the new image in `assets/TEST_GEN` or `assets/DEMO_FAZA1`.
+    - **BACKGROUND**: MUST be SOLID PINK (`#FF00FF`) or GREEN (`#00FF00`) for easy keying.
+    - **FORMAT**: PNG-32.
+3.  **CLEANUP**: IMMEDIATELY run `remove_backgrounds.py` or equivalent tool to remove the solid background.
+4.  **RESULT**: Transparent PNG (Alpha 24).
 
-**Before any image generation:**
+## 3. ZERO PIXELATION RULE
-```bash
+- No pixelated artifacts.
-# View ALL master references
+- No loose pixels on edges.
-ls -R references/
+- Use anti-aliasing where appropriate for vector look.
-```
 
-**Must view these references FIRST:**
+## 4. COMMANDMENT
-- `/references/main_characters/kai/master_reference.png`
+* "Referenčna mapa je DNK projekta. Gledamo jo, spoštujemo jo, a se je ne dotikamo." *
-- `/references/main_characters/ana/master_reference.png`
-- `/references/main_characters/gronk/master_reference.png`
-- `/references/companions/zombie_scout/master_reference.png`
-- `/references/npcs/*/master_reference.png` (all NPCs)
 
-**Extract Visual DNA:**
-- **Outline thickness:** EXACTLY 5px solid black
-- **Proportions:** 1:1 chibi (head = body)
-- **Shading:** Flat cel shading, no gradients
-- **Colors:** Vibrant punk (neon pink, green, purple, blue)
-- **Background:** 100% transparent
-- **Aesthetic:** Cult of the Lamb style
-
----
-
-## ✅ STEP 2: MATCH VISUAL DNA 100%
-
-**When generating new asset, prompt MUST include:**
-
-```
-EXACT Style 32 matching /references/: 
-- THICK 5px BLACK OUTLINES (samme as Kai/Ana/Gronk)
-- Chibi 1:1 proportions  
-- Flat cel shading
-- Vibrant colored hair [specify color]
-- [X] piercings visible
-- [describe outfit matching post-apo punk]
-- Transparent background
-- Cult of the Lamb aesthetic
-```
-
-**Cross-reference checklist:**
-- [ ] Outlines are 5px thick (visually compare to Kai)
-- [ ] Proportions are 1:1 chibi (head = body size)
-- [ ] Colors are vibrant punk (no muted tones)
-- [ ] Shading is flat (no soft gradients)
-- [ ] Background is transparent
-- [ ] Overall style matches references
-
----
-
-## ✅ STEP 3: AUTO-REROLL IF MISMATCH
-
-**IF generated image doesn't match references:**
-
-1. **Identify mismatch:**
-   - Outlines too thin? → REROLL with "THICKER 5px black outlines"
-   - Colors too realistic? → REROLL with "vibrant flat colors"
-   - Shading too soft? → REROLL with "flat cel shading, no gradients"
-   - Wrong proportions? → REROLL with "chibi 1:1, head equals body"
-
-2. **Reroll immediately:**
-   ```
-   generate_image with CORRECTED prompt emphasizing the mismatch
-   ```
-
-3. **Maximum 3 rerolls per asset**
-   - If still doesn't match after 3 attempts, report to user
-
----
-
-## ✅ STEP 4: GALLERY SYNC - SIDE-BY-SIDE COMPARISON
-
-**After successful generation:**
-
-1. **Copy to assets folder:**
-   ```bash
-   cp ~/.gemini/antigravity/brain/*/[asset_name].png assets/sprites/[category]/
-   ```
-
-2. **Create comparison artifact:**
-   - Show reference image
-   - Show new generated image
-   - Highlight matching Visual DNA elements
-
-3. **Update manifest:**
-   ```bash
-   python3 scripts/generate_asset_manifest.py
-   ```
-
-4. **Visual verification:**
-   - Open both images side-by-side
-   - Verify outline thickness matches
-   - Verify color vibrancy matches
-   - Verify proportions match
-
----
-
-## 🚫 STRICT RULES - NO EXCEPTIONS
-
-1. **NEVER generate without viewing references first**
-2. **NEVER accept mismatched visuals** (auto-reroll required)
-3. **NEVER use soft/realistic shading** (only flat cel shading)
-4. **NEVER use thin outlines** (always 5px thick black)
-5. **NEVER use muted colors** (always vibrant punk)
-
----
-
-## 📋 QUALITY CONTROL CHECKLIST
-
-Before marking asset as "complete":
-
-- [ ] Viewed master references (Kai, Ana, Gronk, Zombie Scout)
-- [ ] Generated asset has 5px thick black outlines
-- [ ] Generated asset has 1:1 chibi proportions
-- [ ] Generated asset has flat cel shading
-- [ ] Generated asset has vibrant colors
-- [ ] Generated asset has transparent background
-- [ ] Visual comparison shows 100% match
-- [ ] Asset copied to correct folder
-- [ ] Manifest updated
-- [ ] User approved visual match
-
----
-
-## 🎨 REFERENCE LIBRARY
-
-**Main Characters (ALWAYS check these first):**
-- Kai: Pink+green dreadlocks, katana, leather jacket
-- Ana: Pink hair, friendly face, survivor outfit
-- Gronk: Pink dreadlocks, vape, troll features
-
-**NPCs (check specific NPC reference):**
-- Ivan Kovač: Blacksmith, beard, piercings
-- Pek: Baker, apron, colored hair
-- Tehnik: Tech gear, piercings, tools
-- Šivilja: Seamstress, neon pink hair, scissors
-- Kustos: Museum curator, glasses, artifacts
-- Župan: Mayor, formal but punk
-- Arborist: Tree planter, nature gear
-- Teacher: Educator, books, punk style
-- Miro Pravnik: Lawyer, suit but punk
-- Glavni Smetar: Sanitation, gray dreads, broom
-- Priest: Gray dreads, cross tattoo, torn robes
-
----
-
-## 🔄 AUTO-REROLL TRIGGERS
-
-**Immediate reroll if:**
-- Outlines < 4px or > 6px
-- Proportions are NOT 1:1 chibi
-- Shading has soft gradients
-- Colors are muted/realistic
-- Background is NOT transparent
-- Style doesn't match Cult of the Lamb aesthetic
-
-**Reroll prompt adjustments:**
-- Too realistic → ADD "flat cartoon cel shading"
-- Thin outlines → ADD "THICK 5px black outlines"
-- Wrong colors → ADD "vibrant neon [color]"
-- Wrong proportions → ADD "chibi 1:1, head equals body size"
-
----
-
-**ACTIVATION:** Type `/strict_reference_mode` before any asset generation session
-
-**STATUS:** Active until explicitly disabled
-
-**PRIORITY:** MAXIMUM - overrides all other generation rules

DEV_LOG.md

@@ -52,3 +52,12 @@ Posodobili smo dokument `docs/GAME_DESIGN_NOTES.md` z naslednjimi koncepti:
 *   **Struktura:**
     *   Ustvarjena mapa .
     *   Izbrisane stare neurejene podmape.
+
+### 6. Vizualni Demo (25.01.2026 14:30 CET)
+*   **Implementirano:**
+    *   : Proceduralna vegetacija, vetrovna animacija, megla, cikel dan/noč.
+    *   Popravljene poti v  (do  in ).
+    *   Strežnik teče na portu 8080.
+*   **Znana težava:**
+    *   Slike se še ne naložijo (napaka 404), ker je pot v  relativna na root, brskalnik pa je v .
+    *   **Rešitev (za naslednjič):** Popraviti poti v  (dodati ).

scripts/utils/resize_image.py

@@ -0,0 +1,18 @@
+from PIL import Image
+import sys
+import os
+
+def resize_image(image_path, size):
+    try:
+        img = Image.open(image_path)
+        img = img.resize((size, size), Image.Resampling.LANCZOS)
+        img.save(image_path)
+        print(f"Resized {image_path} to {size}x{size}")
+    except Exception as e:
+        print(f"Error: {e}")
+
+if __name__ == "__main__":
+    if len(sys.argv) < 3:
+        print("Usage: python resize.py <path> <size>")
+    else:
+        resize_image(sys.argv[1], int(sys.argv[2]))

scripts/utils/single_rembg.py

@@ -0,0 +1,35 @@
+import sys
+import os
+from rembg import remove
+from PIL import Image
+
+def process_file(file_path):
+    print(f"Processing: {file_path}")
+    try:
+        if not os.path.exists(file_path):
+            print(f"Error: File {file_path} not found.")
+            return
+
+        with open(file_path, "rb") as input_file:
+            input_data = input_file.read()
+        
+        output_data = remove(input_data)
+        
+        # Save as png (force extension if needed)
+        output_path = os.path.splitext(file_path)[0] + ".png"
+        
+        with open(output_path, "wb") as output_file:
+            output_file.write(output_data)
+            
+        print(f"Success! Saved to {output_path}")
+
+    except ImportError:
+        print("Error: Required libraries (rembg, PIL) not found. Please install them.")
+    except Exception as e:
+        print(f"Error processing file: {e}")
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print("Usage: python single_rembg.py <image_path>")
+    else:
+        process_file(sys.argv[1])

src/game.js

@@ -1,4 +1,4 @@
-import GrassScene from './scenes/GrassScene.js';
+import GrassScene from './scenes/GrassScene_Clean.js';
 
 const config = {
     type: Phaser.AUTO,

src/scenes/GrassScene.js

@@ -8,106 +8,153 @@ export default class GrassScene extends Phaser.Scene {
     preload() {
         console.log("🌿 Loading Environment assets...");
 
-        // Load assets from DEMO_FAZA1
+        // 1. DEFINICIJA POTI (ASSETS) - Absolute paths from server root
-        this.load.image('ground_dead', 'assets/DEMO_FAZA1/tla_trava_tekstura.png');
+        const ASSETS = {
-        this.load.image('grass_tall', 'assets/DEMO_FAZA1/visoka_trava.png');
+            ground: '/assets/DEMO_FAZA1/tla_trava_tekstura.png',
-        this.load.image('grass_tuft', 'assets/DEMO_FAZA1/trava_sop.png');
+            fog: '/assets/DEMO_FAZA1/megla_ozadje.png',
+            trees: {
+                faza1: '/assets/DEMO_FAZA1/drevo_faza_1.png',
+                faza2: '/assets/DEMO_FAZA1/drevo_faza_2.png',
+                small: '/assets/DEMO_FAZA1/drevo_majhno.png',
+                medium: '/assets/DEMO_FAZA1/drevo_srednje.png',
+                large: '/assets/DEMO_FAZA1/drevo_veliko.png',
+                dry: '/assets/DEMO_FAZA1/suho_drevo.png'
+            },
+            foliage: {
+                clump: '/assets/DEMO_FAZA1/trava_sop.png',
+                tall: '/assets/DEMO_FAZA1/visoka_trava.png'
+            }
+        };
 
-        // Trees (Growth Stages)
+        this.paths = ASSETS; // Store for reference if needed
-        this.load.image('tree_small', 'assets/DEMO_FAZA1/drevo_majhno.png');
-        this.load.image('tree_medium', 'assets/DEMO_FAZA1/drevo_srednje.png');
-        this.load.image('tree_large', 'assets/DEMO_FAZA1/drevo_veliko.png');
-        this.load.image('tree_dead', 'assets/DEMO_FAZA1/suho_drevo.png');
 
-        // Weather
+        // Load specific images
-        this.load.image('fog', 'assets/DEMO_FAZA1/megla_ozadje.png');
+        this.load.image('ground_dead', ASSETS.ground);
+        this.load.image('fog', ASSETS.fog);
 
-        // GLSL Wind Shader (Inline for simplicity)
+        // Trees
-        this.windPipeline = null; // Will create in create()
+        this.load.image('tree_faza1', ASSETS.trees.faza1);
+        this.load.image('tree_faza2', ASSETS.trees.faza2);
+        this.load.image('tree_small', ASSETS.trees.small);
+        this.load.image('tree_medium', ASSETS.trees.medium);
+        this.load.image('tree_large', ASSETS.trees.large);
+        this.load.image('tree_dead', ASSETS.trees.dry);
+
+        // Foliage
+        this.load.image('grass_tuft', ASSETS.foliage.clump);
+        this.load.image('grass_tall', ASSETS.foliage.tall);
+
+        // Add error handling for loading
+        this.load.on('loaderror', (file) => {
+            console.error('File failed to load:', file.src);
+        });
     }
 
     create() {
         const { width, height } = this.scale;
 
-        // 1. DEAD GROUND (Tiling background)
+        // 2. NALOGA: Implementiraj 'tla_trava_tekstura.png' kot ponavljajočo se podlago
-        // Uses the 'dead' texture as the base canvas
         this.ground = this.add.tileSprite(0, 0, width, height, 'ground_dead').setOrigin(0, 0);
 
-        // 2. VEGETATION GROUPS
+        // Vegetation Groups
         this.trees = [];
         this.grasses = [];
 
-        // 3. GENERATE WORLD (Procedural placement)
+        // Generate World
         this.generateVegetation(width, height);
 
-        // 4. WEATHER LAYERS (Fog)
+        // 2. NALOGA: Dodaj 'megla_ozadje.png' kot zgornji sloj
-        this.fog1 = this.add.tileSprite(0, 0, width, height, 'fog').setOrigin(0, 0).setAlpha(0.2).setBlendMode(Phaser.BlendModes.ADD);
+        this.fog1 = this.add.tileSprite(0, 0, width, height, 'fog')
-        this.fog2 = this.add.tileSprite(0, 0, width, height, 'fog').setOrigin(0, 0).setAlpha(0.15).setBlendMode(Phaser.BlendModes.ADD);
+            .setOrigin(0, 0)
+            .setAlpha(0.3)
+            .setBlendMode(Phaser.BlendModes.ADD); // Light atmosphere
 
-        // 5. LIGHTING / DAY-NIGHT OVERLAY
+        this.fog2 = this.add.tileSprite(0, 0, width, height, 'fog')
+            .setOrigin(0, 0)
+            .setAlpha(0.2)
+            .setBlendMode(Phaser.BlendModes.ADD);
+
+        // Day/Night Overlay
         this.dayNightOverlay = this.add.rectangle(0, 0, width, height, 0x000000, 0).setOrigin(0, 0).setDepth(1000);
 
         // UI Info
-        this.infoText = this.add.text(10, 10, 'Time: 12:00', { font: '16px monospace', fill: '#fff' }).setDepth(2000);
+        this.infoText = this.add.text(20, 20, 'Time: 12:00', {
+            fontFamily: 'monospace',
+            fontSize: '18px',
+            fill: '#ffffff',
+            stroke: '#000000',
+            strokeThickness: 3
+        }).setDepth(2000);
+    }
+
+    // 2. NALOGA: Pripravi funkcijo 'spawnTree(x, y, type)'
+    spawnTree(x, y, type) {
+        // Map simplified names to texture keys if needed, or use direct keys
+        // Types: 'tree_faza1', 'tree_faza2', 'tree_small', 'tree_medium', 'tree_large', 'tree_dead'
+
+        let tree = this.add.image(x, y, type);
+
+        // Custom scale logic based on type could go here, for now standardized or specific per tree
+        if (type === 'tree_large') tree.setScale(0.8);
+        else if (type === 'tree_medium') tree.setScale(0.6);
+        else if (type === 'tree_small') tree.setScale(0.5);
+        else tree.setScale(0.7); // Default for others
+
+        tree.setDepth(y); // Y-Sort
+        tree.setOrigin(0.5, 0.95); // Pivot at bottom center
+
+        // Sway properties for update loop
+        tree.swaySpeed = 0.001 + (Math.random() * 0.001);
+        tree.swayOffset = Math.random() * 100;
+
+        this.trees.push(tree);
+        return tree;
     }
 
     generateVegetation(w, h) {
-        // Randomly place HIGH GRASS (for cutting/hiding)
+        // Place Gras (Foliage)
         for (let i = 0; i < 50; i++) {
             let x = Phaser.Math.Between(50, w - 50);
             let y = Phaser.Math.Between(50, h - 50);
 
-            // Swaying tall grass
             let grass = this.add.image(x, y, 'grass_tall');
-            grass.setScale(0.15 + (Math.random() * 0.1)); // Random size
+            grass.setScale(0.15 + (Math.random() * 0.1));
-            grass.setDepth(y); // Y-sort
+            grass.setDepth(y);
-            grass.setOrigin(0.5, 1); // Anchor at bottom
+            grass.setOrigin(0.5, 1);
             grass.swaySpeed = 0.002 + (Math.random() * 0.002);
             grass.swayOffset = Math.random() * 100;
             this.grasses.push(grass);
         }
 
-        // Randomly place TREES
+        // Place Trees using spawnTree
-        for (let i = 0; i < 15; i++) {
+        const treeTypes = ['tree_faza1', 'tree_faza2', 'tree_small', 'tree_medium', 'tree_large', 'tree_dead'];
+
+        for (let i = 0; i < 20; i++) {
             let x = Phaser.Math.Between(50, w - 50);
             let y = Phaser.Math.Between(50, h - 50);
-            let type = Phaser.Math.RND.pick(['tree_small', 'tree_medium', 'tree_large', 'tree_dead']);
+            let type = Phaser.Math.RND.pick(treeTypes);
 
-            let tree = this.add.image(x, y, type);
+            this.spawnTree(x, y, type);
-            // Size adjustments based on type
-            if (type === 'tree_large') tree.setScale(0.8);
-            else if (type === 'tree_medium') tree.setScale(0.6);
-            else tree.setScale(0.5);
-
-            tree.setDepth(y);
-            tree.setOrigin(0.5, 0.95); // Anchor near bottom
-            tree.swaySpeed = 0.001 + (Math.random() * 0.001); // Slower sway for trees
-            tree.swayOffset = Math.random() * 100;
-            this.trees.push(tree);
         }
     }
 
     update(time, delta) {
-        // --- 1. WIND ANIMATION (Manual Vertex Sway Simulation) ---
+        // Wind Animation
-        // Since we aren't using a complex shader pipeline yet, we use rotation/skew
-
         this.grasses.forEach(g => {
-            // Simple sway using Sine wave
+            g.rotation = Math.sin((time * g.swaySpeed) + g.swayOffset) * 0.1;
-            g.rotation = Math.sin((time * g.swaySpeed) + g.swayOffset) * 0.1; // +/- 0.1 radians
         });
 
         this.trees.forEach(t => {
-            // Trees sway less
             t.rotation = Math.sin((time * t.swaySpeed) + t.swayOffset) * 0.03;
         });
 
-        // --- 2. FOG MOVEMENT ---
+        // Fog Movement
         this.fog1.tilePositionX += 0.5;
-        this.fog2.tilePositionX += 0.2;
+        this.fog2.tilePositionX += 0.2; // Parallax
         this.fog2.tilePositionY += 0.1;
 
-        // --- 3. DAY/NIGHT CYCLE ---
+        // Day/Night Cycle
-        this.baseTime += (delta * 0.001 * this.timeSpeed); // Simulated hours
+        this.baseTime += (delta * 0.001 * this.timeSpeed);
         if (this.baseTime >= 24) this.baseTime = 0;
 
         this.updateLighting(this.baseTime);

src/scenes/GrassScene_Clean.js

@@ -0,0 +1,164 @@
+export default class GrassScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'GrassScene' });
+        this.baseTime = 12; // Start at 12:00
+        this.timeSpeed = 0.5;
+    }
+
+    preload() {
+        console.log("🌿 Loading Clean Assets...");
+
+        // 1. PATHS (Absolute from server root)
+        const PATHS = {
+            ground: '/assets/DEMO_FAZA1/Ground/',
+            veg: '/assets/DEMO_FAZA1/Vegetation/'
+        };
+
+        // 2. LOAD ASSETS
+        // Ground
+        this.load.image('ground_base', PATHS.ground + 'tla_trava_tekstura.png');
+
+        // Vegetation - Grass
+        this.load.image('grass_tuft', PATHS.veg + 'trava_sop.png');
+        this.load.image('grass_tall', PATHS.veg + 'visoka_trava.png');
+
+        // Vegetation - Trees (All phases)
+        this.load.image('tree_f1', PATHS.veg + 'drevo_faza_1.png'); // Kalcek
+        this.load.image('tree_f2', PATHS.veg + 'drevo_faza_2.png'); // Mlado
+        this.load.image('tree_small', PATHS.veg + 'drevo_majhno.png');
+        this.load.image('tree_medium', PATHS.veg + 'drevo_srednje.png');
+        this.load.image('tree_large', PATHS.veg + 'drevo_veliko.png'); // Hero
+
+        // Error handling
+        this.load.on('loaderror', (file) => {
+            console.error('FAILED TO LOAD:', file.src);
+        });
+    }
+
+    create() {
+        const { width, height } = this.scale;
+
+        // 1. BACKGROUND (Tiling Sprite - Base Layer)
+        this.ground = this.add.tileSprite(0, 0, width, height, 'ground_base')
+            .setOrigin(0, 0);
+
+        // 2. VEGETATION GROUPS
+        this.grasses = [];
+        this.trees = [];
+
+        // 3. GENERATE WORLD
+        this.generateGrass(width, height);
+        this.generateTrees(width, height);
+
+        // 4. DAY/NIGHT OVERLAY
+        this.dayNightOverlay = this.add.rectangle(0, 0, width, height, 0x000000, 0)
+            .setOrigin(0, 0)
+            .setDepth(9000); // Top layer
+
+        // 5. UI INFO
+        this.infoText = this.add.text(20, 20, 'Time: 12:00', {
+            fontFamily: 'monospace', fontSize: '24px', fill: '#ffffff', stroke: '#000000', strokeThickness: 4
+        }).setDepth(10000);
+    }
+
+    generateGrass(w, h) {
+        // A) Small Tufts (Decoration) - High Density
+        // "Naključno razporedi trava_sop.png za vizualno gostoto"
+        for (let i = 0; i < 150; i++) {
+            let x = Phaser.Math.Between(0, w);
+            let y = Phaser.Math.Between(0, h);
+
+            let tuft = this.add.image(x, y, 'grass_tuft');
+            tuft.setScale(0.3 + Math.random() * 0.2); // Random size
+            tuft.setAlpha(0.9);
+            tuft.setDepth(y); // Simple Y-sort
+        }
+
+        // B) Tall Grass (Interactive) - Medium Density
+        // "Postavi visoka_trava.png ... dodaj nežen sinusni efekt"
+        for (let i = 0; i < 40; i++) {
+            let x = Phaser.Math.Between(50, w - 50);
+            let y = Phaser.Math.Between(50, h - 50);
+
+            let grass = this.add.image(x, y, 'grass_tall');
+            grass.setScale(0.4);
+            grass.setOrigin(0.5, 1); // Pivot at bottom
+            grass.setDepth(y);
+
+            // Custom properties for wind animation
+            grass.swaySpeed = 0.002 + Math.random() * 0.001;
+            grass.swayOffset = Math.random() * 100;
+
+            this.grasses.push(grass);
+        }
+    }
+
+    generateTrees(w, h) {
+        const treeTypes = ['tree_f1', 'tree_f2', 'tree_small', 'tree_medium', 'tree_large'];
+
+        for (let i = 0; i < 12; i++) {
+            let x = Phaser.Math.Between(50, w - 50);
+            let y = Phaser.Math.Between(50, h - 50);
+
+            // Randomly pick a growth stage
+            let type = Phaser.Math.RND.pick(treeTypes);
+
+            let tree = this.add.image(x, y, type);
+            tree.setOrigin(0.5, 0.9); // Pivot near bottom
+            tree.setDepth(y); // Sort by Y
+
+            // Scale adjustments to look good
+            if (type === 'tree_large') tree.setScale(0.8);
+            else if (type === 'tree_medium') tree.setScale(0.7);
+            else tree.setScale(0.6);
+
+            // Subtle sway for trees too
+            tree.swaySpeed = 0.0005 + Math.random() * 0.0005;
+            tree.swayOffset = Math.random() * 100;
+
+            this.trees.push(tree);
+        }
+    }
+
+    update(time, delta) {
+        // 1. WIND ANIMATION
+        // "Dodaj nežen sinusni efekt za plapolanje"
+        this.grasses.forEach(g => {
+            g.rotation = Math.sin((time * g.swaySpeed) + g.swayOffset) * 0.15; // Stronger sway for grass
+        });
+
+        this.trees.forEach(t => {
+            t.rotation = Math.sin((time * t.swaySpeed) + t.swayOffset) * 0.02; // Very subtle for trees
+        });
+
+        // 2. DAY/NIGHT CYCLE
+        this.baseTime += (delta * 0.001 * this.timeSpeed);
+        if (this.baseTime >= 24) this.baseTime = 0;
+        this.updateLighting(this.baseTime);
+
+        // Update UI
+        let hour = Math.floor(this.baseTime);
+        let minute = Math.floor((this.baseTime % 1) * 60).toString().padStart(2, '0');
+        this.infoText.setText(`Time: ${hour}:${minute}`);
+    }
+
+    updateLighting(hour) {
+        let alpha = 0;
+        let color = 0x000000;
+
+        // Simple Day/Night Logic
+        if (hour >= 20 || hour < 5) {
+            alpha = 0.7; // Night
+            color = 0x000022;
+        } else if (hour >= 5 && hour < 8) {
+            alpha = 0.3; // Dawn
+            color = 0xFF4500;
+        } else if (hour >= 18 && hour < 20) {
+            alpha = 0.4; // Dusk
+            color = 0xFF4500;
+        } else {
+            alpha = 0; // Day
+        }
+        this.dayNightOverlay.setFillStyle(color, alpha);
+    }
+}

web/index.html

@@ -1,17 +1,30 @@
 <!DOCTYPE html>
 <html lang="sl">
+
 <head>
     <meta charset="UTF-8">
     <title>Nova Farma - Clean Start</title>
     <style>
-        body { margin: 0; background: #000; overflow: hidden; }
+        body {
-        canvas { display: block; image-rendering: pixelated; } /* Ohrani ostrino */
+            margin: 0;
+            background: #000;
+            overflow: hidden;
+        }
+
+        canvas {
+            display: block;
+            image-rendering: pixelated;
+        }
+
+        /* Ohrani ostrino */
     </style>
 </head>
+
 <body>
     <!-- Phaser Library -->
     <script src="../node_modules/phaser/dist/phaser.js"></script>
     <!-- Game Entry -->
-    <script type="module" src="../src/game.js"></script>
+    <script type="module" src="../src/game.js?v=2"></script>
 </body>
-</html>
+
+</html>