feat(expansion): implement Phase 3 (Town Restoration) and Phase 4 (Cannabis Textiles)

- Added TownSquareScene and linked it with M key transition
- Integrated TownRestorationSystem with material costs and inventory
- Added locked shop items in NPCShopSystem until buildings are restored
- Updated InteractionSystem to handle ruin restoration triggers
- Expanded Cannabis farming to yield Hemp Fiber
- Added Hemp Clothing crafting recipe and procedural icons
- Refactored StatusEffectSystem and NPCShopSystem to global classes

src/scenes/GameScene.js

@@ -1,4 +1,5 @@
 // Game Scene - Glavna igralna scena
+
 class GameScene extends Phaser.Scene {
     constructor() {
         super({ key: 'GameScene' });
@@ -6,13 +7,14 @@ class GameScene extends Phaser.Scene {
         this.terrainContainer = null;
         this.player = null;
         this.npcs = []; // Array za NPCje
+        this.statusEffectSystem = null;
 
-        // Settings
         this.settings = {
-            viewDistance: 'HIGH', // LOW, MEDIUM, HIGH
-            particles: 'HIGH', // NONE, LOW, HIGH
+            viewDistance: 'HIGH',
+            particles: 'HIGH',
             shadows: true
         };
+        this.townRestorationSystem = null;
     }
 
     async create() {
@@ -258,6 +260,7 @@ class GameScene extends Phaser.Scene {
 
                 // Initialize Farming System
                 this.farmingSystem = new FarmingSystem(this);
+                this.statusEffectSystem = new StatusEffectSystem(this);
                 console.log('🌾 Farming system initialized!');
 
                 // Initialize Build System
@@ -759,6 +762,12 @@ class GameScene extends Phaser.Scene {
                         this.craftingUI.toggle();
                     }
                 });
+
+                // Add M key to transition to Town Square
+                this.input.keyboard.on('keydown-M', () => {
+                    console.log('🔄 Transitioning to Town Square...');
+                    this.scene.start('TownSquareScene');
+                });
             });
 
             // ========================================================
@@ -774,6 +783,8 @@ class GameScene extends Phaser.Scene {
             this.lootSystem = new LootSystem(this);
             this.interactionSystem = new InteractionSystem(this);
             this.farmingSystem = new FarmingSystem(this);
+            this.statusEffectSystem = new StatusEffectSystem(this);
+            this.townRestorationSystem = new TownRestorationSystem(this);
             this.buildingSystem = new BuildingSystem(this);
             // this.pathfinding = new Pathfinding(this); // REMOVED: Using PathfindingSystem (Worker) instead
             this.questSystem = new QuestSystem(this);
@@ -1879,6 +1890,7 @@ class GameScene extends Phaser.Scene {
         if (this.lootSystem) this.lootSystem.update(delta);
         if (this.interactionSystem) this.interactionSystem.update(delta);
         if (this.farmingSystem) this.farmingSystem.update(delta);
+        if (this.statusEffectSystem) this.statusEffectSystem.update(time, delta);
         if (this.buildSystem) this.buildSystem.update(delta);
         if (this.questSystem) this.questSystem.update(delta);
         if (this.multiplayerSystem) this.multiplayerSystem.update(delta);

src/scenes/TownSquareScene.js

@@ -0,0 +1,92 @@
+class TownSquareScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'TownSquareScene' });
+        this.buildingsSprites = new Map();
+    }
+
+    create() {
+        console.log('🏘️ TownSquareScene: Initialized!');
+        this.cameras.main.setBackgroundColor('#8B4513');
+
+        // Access the global TownRestorationSystem
+        this.townRestorationSystem = window.townRestorationSystem || new TownRestorationSystem(this);
+
+        this.add.text(512, 50, 'TOWN SQUARE', {
+            fontSize: '48px', color: '#FFD700', fontFamily: 'Courier New', fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        this.add.text(512, 100, 'Press M to go back to Farm', {
+            fontSize: '18px', color: '#ffffff', fontFamily: 'Courier New'
+        }).setOrigin(0.5);
+
+        // Transition back
+        this.input.keyboard.on('keydown-M', () => {
+            this.scene.start('GameScene');
+        });
+
+        // Create Ruins
+        this.createBuilding(400, 300, 'jakob_shop', 'Jakob\'s Shop');
+        this.createBuilding(650, 300, 'lena_bakery', 'Lena\'s Bakery');
+        this.createBuilding(512, 500, 'dr_chen_clinic', 'Dr. Chen\'s Clinic');
+    }
+
+    createBuilding(x, y, id, name) {
+        if (!this.townRestorationSystem) return;
+
+        const buildingData = this.townRestorationSystem.buildings.get(id);
+        const isRestored = buildingData ? buildingData.isRestored : false;
+
+        const color = isRestored ? 0x44aa44 : 0x666666;
+        const base = this.add.rectangle(x, y, 150, 150, color, 0.8);
+        base.setStrokeStyle(3, 0xffffff);
+
+        const label = this.add.text(x, y, `${name}\n${isRestored ? '✅ RESTORED' : '🏚️ RUIN'}`, {
+            fontSize: '16px', color: '#ffffff', align: 'center', fontFamily: 'Courier New', fontStyle: 'bold'
+        }).setOrigin(0.5);
+
+        base.setInteractive();
+        base.on('pointerdown', () => {
+            const currentData = this.townRestorationSystem.buildings.get(id);
+            if (!currentData || !currentData.isRestored) {
+                this.interactWithRuin(id);
+            } else {
+                const ui = this.scene.scene.get('UIScene');
+                if (ui && ui.showNotification) {
+                    ui.showNotification({ text: `${name} is functional!`, icon: '🏪' });
+                }
+            }
+        });
+
+        this.buildingsSprites.set(id, { base, label, name });
+    }
+
+    interactWithRuin(id) {
+        const building = this.townRestorationSystem.buildings.get(id);
+        if (!building) return;
+
+        if (this.townRestorationSystem.hasMaterials(building.materials)) {
+            this.townRestorationSystem.startRestoration(id);
+        } else {
+            const ui = this.scene.scene.get('UIScene');
+            if (ui && ui.showNotification) {
+                ui.showNotification({
+                    title: 'Resources Needed',
+                    text: `Wood: ${building.materials.wood}, Stone: ${building.materials.stone}`,
+                    icon: '📦'
+                });
+            }
+        }
+    }
+
+    updateBuildingVisuals(id) {
+        const sprite = this.buildingsSprites.get(id);
+        if (sprite) {
+            sprite.base.setFillStyle(0x44aa44);
+            sprite.label.setText(`${sprite.name}\n✅ RESTORED`);
+
+            // Celebration effect
+            this.cameras.main.shake(500, 0.01);
+            console.log(`✨ Visuals updated for ${id}`);
+        }
+    }
+}