Add Medieval Village AI Emulator

README.md

@@ -1,10 +1,75 @@
 ---
-title: Medieval Village AI
-emoji: 📊
-colorFrom: gray
-colorTo: pink
+title: Medieval Village AI Emulator
+emoji: 🏰
+colorFrom: blue
+colorTo: purple
 sdk: static
+app_file: index.html
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Medieval Village AI Emulator
+
+An interactive 3D simulation of a medieval village powered by artificial intelligence. Watch as AI-controlled villagers go about their daily routines, work, eat, sleep, and socialize in a dynamically generated environment.
+
+## Features
+
+- **3D Visualization**: Real-time 3D rendering of villagers, buildings, and resources using Three.js
+- **AI-Powered Villagers**: Villagers with complex behaviors based on needs (energy, hunger, social)
+- **Dynamic Environment**: Weather system, disasters, and wildlife interactions
+- **Interactive Controls**: Add villagers, trigger disasters, spawn animals, and dispatch warriors
+- **LLM Integration**: Optional integration with Hugging Face models for enhanced AI behaviors
+
+## How to Use
+
+1. The simulation starts automatically with 3 villagers
+2. Use the controls panel on the left to interact with the village:
+   - Add Villager: Creates a new villager at a random position
+   - Reset Simulation: Clears all villagers and restarts the simulation
+   - Adjust Time Speed: Control simulation speed (0.1x to 5.0x)
+   - Toggle Paths/Titles: Show/hide movement paths and villager names
+3. Camera controls:
+   - Mouse: Look around (orbit)
+   - Mouse Wheel: Zoom in/out
+   - Right Mouse + Drag: Pan camera
+4. Click on any villager to see detailed information about their state, needs, and current activities
+
+## Technical Details
+
+This simulation demonstrates several AI techniques:
+
+- **Pathfinding**: A* algorithm for efficient navigation
+- **Behavior Trees**: Decision-making system for villager actions
+- **Daily Routines**: Time-based scheduling system
+- **Crowd Simulation**: Steering behaviors and collision avoidance
+- **Resource Management**: Villagers gather and use resources
+- **Environmental Interaction**: Villagers interact with buildings and resources
+
+## LLM Integration
+
+The simulator can optionally integrate with Hugging Face models for enhanced AI behaviors. To use this feature:
+
+1. Get a Hugging Face API token from [https://huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)
+2. Set the token in the browser console: `window.HF_TOKEN = "your-token-here"`
+3. Select a model from the LLM Controls dropdown
+4. Ask questions about the simulation using the LLM query input
+
+## Architecture
+
+```
+index.html          # Main HTML file with UI
+├── app_new.js      # Main application logic
+└── src/ai/         # AI system components
+    ├── main.js     # AI system integration
+    ├── routines.js # Daily routine management
+    ├── environment.js # Environment interaction
+    ├── pathfinding.js # Navigation system
+    ├── behavior.js # Behavior trees
+    ├── crowd.js    # Crowd simulation
+    └── optimization.js # Performance optimization
+```
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

app.js

@@ -0,0 +1,687 @@
+// Using globally available THREE from script tag in index.html
+import VillageAISystem from './src/ai/main.js';
+
+/**
+ * Medieval Village AI System - Three.js Visualization Application
+ *
+ * This application demonstrates the village AI system with real-time 3D visualization
+ * using Three.js. It shows villagers moving around, performing activities, and interacting
+ * with their environment.
+ */
+class VillageVisualizationApp {
+    constructor() {
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.aiSystem = null;
+
+        // 3D Objects
+        this.villagerMeshes = new Map();
+        this.buildingMeshes = new Map();
+        this.resourceMeshes = new Map();
+        this.pathLines = new Map();
+
+        // UI Elements
+        this.uiElements = {};
+        this.selectedVillager = null;
+        this.timeSpeed = 1.0;
+        this.showPaths = true;
+
+        // Animation
+        this.clock = new THREE.Clock();
+        this.lastTime = 0;
+        this.frameCount = 0;
+        this.fps = 0;
+
+        this.init();
+    }
+
+    /**
+     * Initialize the application
+     */
+    init() {
+        console.log('Initializing Village Visualization App...');
+        this.initThreeJS();
+        this.initAI();
+        this.initUI();
+        this.createEnvironment();
+        this.createInitialVillagers();
+        this.animate();
+        console.log('Village Visualization App initialized successfully');
+    }
+
+    /**
+     * Initialize Three.js scene, camera, and renderer
+     */
+    initThreeJS() {
+        console.log('Initializing Three.js...');
+
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x87CEEB); // Sky blue
+        console.log('Scene created');
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.1,
+            1000
+        );
+        this.camera.position.set(20, 20, 20);
+        this.camera.lookAt(0, 0, 0);
+        console.log('Camera created');
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        console.log('Renderer created');
+
+        // Add to DOM
+        const container = document.getElementById('container');
+        if (container) {
+            container.appendChild(this.renderer.domElement);
+            console.log('Renderer added to DOM');
+        } else {
+            console.error('Container element not found!');
+        }
+
+        // Controls
+        console.log('Initializing controls...');
+        console.log('THREE.OrbitControls:', typeof THREE !== 'undefined' ? THREE.OrbitControls : 'undefined');
+        try {
+            // Check if OrbitControls is available globally
+            if (typeof THREE !== 'undefined' && typeof THREE.OrbitControls !== 'undefined') {
+                console.log('Creating OrbitControls instance from global THREE object...');
+                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+                console.log('OrbitControls instance created:', this.controls);
+                this.controls.enableDamping = true;
+                this.controls.dampingFactor = 0.05;
+                this.controls.enableZoom = true;
+                this.controls.enablePan = true;
+                console.log('OrbitControls initialized successfully');
+            } else {
+                console.warn('OrbitControls is not available');
+                this.controls = null;
+            }
+        } catch (error) {
+            console.warn('Error initializing OrbitControls:', error);
+            this.controls = null;
+        }
+
+        // Lighting
+        this.addLighting();
+
+        // Ground plane
+        this.createGround();
+
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x222222);
+        this.scene.add(gridHelper);
+
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+        window.addEventListener('keydown', (event) => this.onKeyDown(event));
+        this.renderer.domElement.addEventListener('click', (event) => this.onMouseClick(event));
+    }
+
+    /**
+     * Add lighting to the scene
+     */
+    addLighting() {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        this.scene.add(ambientLight);
+
+        // Directional light (sun)
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 5);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 50;
+        this.scene.add(directionalLight);
+    }
+
+    /**
+     * Create ground plane
+     */
+    createGround() {
+        const groundGeometry = new THREE.PlaneGeometry(100, 100);
+        const groundMaterial = new THREE.MeshLambertMaterial({
+            color: 0x228B22,
+            transparent: true,
+            opacity: 0.8
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        this.scene.add(ground);
+    }
+
+    /**
+     * Initialize the AI system
+     */
+    initAI() {
+        this.aiSystem = new VillageAISystem(this.scene);
+    }
+
+    /**
+     * Initialize UI event listeners
+     */
+    initUI() {
+        // Get UI elements
+        this.uiElements = {
+            addVillagerBtn: document.getElementById('add-villager-btn'),
+            resetBtn: document.getElementById('reset-btn'),
+            timeSpeed: document.getElementById('time-speed'),
+            timeSpeedDisplay: document.getElementById('time-speed-display'),
+            showPaths: document.getElementById('show-paths'),
+            villagerCountDisplay: document.getElementById('villager-count-display'),
+            villagerCountStat: document.getElementById('villager-count-stat'),
+            gameTime: document.getElementById('game-time'),
+            fps: document.getElementById('fps'),
+            buildingCount: document.getElementById('building-count'),
+            resourceCount: document.getElementById('resource-count'),
+            villagerList: document.getElementById('villager-list')
+        };
+
+        // Add event listeners
+        this.uiElements.addVillagerBtn.addEventListener('click', () => this.addVillager());
+        this.uiElements.resetBtn.addEventListener('click', () => this.resetSimulation());
+        this.uiElements.timeSpeed.addEventListener('input', (e) => this.updateTimeSpeed(e.target.value));
+        this.uiElements.showPaths.addEventListener('change', (e) => this.togglePaths(e.target.checked));
+    }
+
+    /**
+     * Create the 3D environment (buildings and resources)
+     */
+    createEnvironment() {
+        // Buildings are already created in the AI system
+        // We need to create 3D meshes for them
+        this.createBuildingMeshes();
+        this.createResourceMeshes();
+    }
+
+    /**
+     * Create 3D meshes for buildings
+     */
+    createBuildingMeshes() {
+        const buildingGeometry = new THREE.BoxGeometry(3, 3, 3);
+        const materials = {
+            house: new THREE.MeshLambertMaterial({ color: 0x8B4513 }),
+            workshop: new THREE.MeshLambertMaterial({ color: 0x696969 }),
+            market: new THREE.MeshLambertMaterial({ color: 0xFFD700 })
+        };
+
+        for (const [id, building] of this.aiSystem.environmentSystem.buildings) {
+            const material = materials[building.type] || materials.house;
+            const mesh = new THREE.Mesh(buildingGeometry, material);
+            mesh.position.set(building.position[0], building.position[1], building.position[2]);
+            mesh.position.y = 1.5; // Half height
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+
+            // Add building label
+            const label = this.createTextSprite(building.type);
+            label.position.set(0, 2.5, 0);
+            mesh.add(label);
+
+            this.buildingMeshes.set(id, mesh);
+            this.scene.add(mesh);
+        }
+
+        this.updateBuildingCount();
+    }
+
+    /**
+     * Create 3D meshes for resources
+     */
+    createResourceMeshes() {
+        const resourceGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2);
+        const materials = {
+            wood: new THREE.MeshLambertMaterial({ color: 0x8B4513 }),
+            stone: new THREE.MeshLambertMaterial({ color: 0x708090 }),
+            food: new THREE.MeshLambertMaterial({ color: 0x32CD32 })
+        };
+
+        for (const [id, resource] of this.aiSystem.environmentSystem.resources) {
+            const material = materials[resource.type] || materials.wood;
+            const mesh = new THREE.Mesh(resourceGeometry, material);
+            mesh.position.set(resource.position[0], resource.position[1], resource.position[2]);
+            mesh.position.y = 1; // Half height
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+
+            // Add resource label
+            const label = this.createTextSprite(`${resource.type} (${resource.amount})`);
+            label.position.set(0, 1.5, 0);
+            mesh.add(label);
+
+            this.resourceMeshes.set(id, mesh);
+            this.scene.add(mesh);
+        }
+
+        this.updateResourceCount();
+    }
+
+    /**
+     * Create initial villagers
+     */
+    createInitialVillagers() {
+        // Create a few initial villagers at random positions
+        const positions = [
+            [0, 0, 0],
+            [5, 0, 5],
+            [-3, 0, -3]
+        ];
+
+        positions.forEach((position, index) => {
+            this.createVillager(`villager${index + 1}`, position);
+        });
+    }
+
+    /**
+     * Create a new villager
+     */
+    createVillager(id, position) {
+        const villager = this.aiSystem.createVillager(id, position);
+        this.createVillagerMesh(villager);
+        this.updateVillagerCount();
+        return villager;
+    }
+
+    /**
+     * Create 3D mesh for a villager
+     */
+    createVillagerMesh(villager) {
+        // Create villager geometry (sphere)
+        const geometry = new THREE.SphereGeometry(0.5, 16, 16);
+        const material = new THREE.MeshLambertMaterial({
+            color: this.getStateColor(villager.state)
+        });
+
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.set(villager.position[0], villager.position[1], villager.position[2]);
+        mesh.position.y = 0.5; // Half height
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+
+        // Add villager ID label
+        const label = this.createTextSprite(villager.id);
+        label.position.set(0, 1.2, 0);
+        mesh.add(label);
+
+        // Store reference to villager in mesh
+        mesh.userData.villager = villager;
+
+        this.villagerMeshes.set(villager.id, mesh);
+        this.scene.add(mesh);
+    }
+
+    /**
+     * Get color for villager state
+     */
+    getStateColor(state) {
+        const colors = {
+            sleep: 0x7f8c8d,      // Gray
+            work: 0xe74c3c,       // Red
+            eat: 0xf39c12,        // Orange
+            socialize: 0x9b59b6,  // Purple
+            idle: 0x95a5a6        // Light gray
+        };
+        return colors[state] || colors.idle;
+    }
+
+    /**
+     * Create a text sprite for labels
+     */
+    createTextSprite(text) {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = 256;
+        canvas.height = 128;
+
+        context.fillStyle = 'rgba(0, 0, 0, 0.8)';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+
+        context.fillStyle = 'white';
+        context.font = '32px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(text, canvas.width / 2, canvas.height / 2);
+
+        const texture = new THREE.CanvasTexture(canvas);
+        const spriteMaterial = new THREE.SpriteMaterial({
+            map: texture,
+            transparent: true
+        });
+        const sprite = new THREE.Sprite(spriteMaterial);
+        sprite.scale.set(3, 1.5, 1);
+
+        return sprite;
+    }
+
+    /**
+     * Add a new villager via UI
+     */
+    addVillager() {
+        const villagerCount = this.villagerMeshes.size;
+        const id = `villager${villagerCount + 1}`;
+
+        // Random position within bounds
+        const position = [
+            (Math.random() - 0.5) * 40,
+            0,
+            (Math.random() - 0.5) * 40
+        ];
+
+        this.createVillager(id, position);
+    }
+
+    /**
+     * Reset the simulation
+     */
+    resetSimulation() {
+        // Clear all villagers
+        for (const [id, mesh] of this.villagerMeshes) {
+            this.scene.remove(mesh);
+        }
+        this.villagerMeshes.clear();
+
+        // Clear path lines
+        for (const [id, line] of this.pathLines) {
+            this.scene.remove(line);
+        }
+        this.pathLines.clear();
+
+        // Reset AI system
+        this.aiSystem = new VillageAISystem(this.scene);
+        this.createEnvironment();
+
+        // Clear selection
+        this.selectedVillager = null;
+        this.updateVillagerInfo();
+
+        this.updateVillagerCount();
+    }
+
+    /**
+     * Update time speed
+     */
+    updateTimeSpeed(speed) {
+        this.timeSpeed = parseFloat(speed);
+        this.uiElements.timeSpeedDisplay.textContent = `${speed}x`;
+    }
+
+    /**
+     * Toggle path visibility
+     */
+    togglePaths(show) {
+        this.showPaths = show;
+        for (const [id, line] of this.pathLines) {
+            line.visible = show;
+        }
+    }
+
+    /**
+     * Handle window resize
+     */
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    /**
+     * Handle keyboard input
+     */
+    onKeyDown(event) {
+        console.log('Key pressed:', event.code);
+        const speed = 0.5;
+        
+        // Handle keyboard input directly for camera movement
+        // Even when OrbitControls are available, we want to handle WASD keys
+        switch (event.code) {
+            case 'KeyW':
+                this.camera.position.z -= speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera forward');
+                break;
+            case 'KeyS':
+                this.camera.position.z += speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera backward');
+                break;
+            case 'KeyA':
+                this.camera.position.x -= speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera left');
+                break;
+            case 'KeyD':
+                this.camera.position.x += speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera right');
+                break;
+            case 'Space':
+                this.camera.position.y += speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera up');
+                break;
+            case 'ShiftLeft':
+                this.camera.position.y -= speed;
+                this.camera.lookAt(0, 0, 0);
+                console.log('Moved camera down');
+                break;
+        }
+    }
+
+    /**
+     * Handle mouse clicks for villager selection
+     */
+    onMouseClick(event) {
+        const mouse = { x: 0, y: 0 };
+        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(mouse, this.camera);
+
+        const villagerMeshes = Array.from(this.villagerMeshes.values());
+        const intersects = raycaster.intersectObjects(villagerMeshes);
+
+        if (intersects.length > 0) {
+            const selectedMesh = intersects[0].object;
+            this.selectedVillager = selectedMesh.userData.villager;
+            this.updateVillagerInfo();
+        }
+    }
+
+    /**
+     * Update villager count display
+     */
+    updateVillagerCount() {
+        const count = this.villagerMeshes.size;
+        this.uiElements.villagerCountDisplay.textContent = count;
+        this.uiElements.villagerCountStat.textContent = count;
+    }
+
+    /**
+     * Update building count display
+     */
+    updateBuildingCount() {
+        const count = this.buildingMeshes.size;
+        this.uiElements.buildingCount.textContent = count;
+    }
+
+    /**
+     * Update resource count display
+     */
+    updateResourceCount() {
+        const count = this.resourceMeshes.size;
+        this.uiElements.resourceCount.textContent = count;
+    }
+
+    /**
+     * Update villager information panel
+     */
+    updateVillagerInfo() {
+        const villagerList = this.uiElements.villagerList;
+
+        if (!this.selectedVillager) {
+            villagerList.innerHTML = '<p>No villager selected</p>';
+            return;
+        }
+
+        const villager = this.selectedVillager;
+        villagerList.innerHTML = `
+            <div class="villager-item selected">
+                <div><strong>${villager.id}</strong></div>
+                <div>State: <span class="state-indicator state-${villager.state}"></span>${villager.state}</div>
+                <div>Position: (${villager.position[0].toFixed(1)}, ${villager.position[1].toFixed(1)}, ${villager.position[2].toFixed(1)})</div>
+                <div>Energy: ${villager.energy.toFixed(1)}%</div>
+                <div>Hunger: ${villager.hunger.toFixed(1)}%</div>
+                <div>Social Need: ${villager.socialNeed.toFixed(1)}%</div>
+                <div>Path Points: ${villager.path.length}</div>
+            </div>
+        `;
+    }
+
+    /**
+     * Update path visualization for a villager
+     */
+    updatePathVisualization(villager) {
+        const villagerId = villager.id;
+
+        // Remove existing path line
+        if (this.pathLines.has(villagerId)) {
+            this.scene.remove(this.pathLines.get(villagerId));
+            this.pathLines.delete(villagerId);
+        }
+
+        // Create new path line if villager has a path
+        if (villager.path.length > 1) {
+            const geometry = new THREE.BufferGeometry();
+            const positions = [];
+
+            // Add current position
+            positions.push(villager.position[0], 0.1, villager.position[2]);
+
+            // Add path points
+            for (const point of villager.path) {
+                positions.push(point[0], 0.1, point[2]);
+            }
+
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+
+            const material = new THREE.LineBasicMaterial({
+                color: this.getStateColor(villager.state),
+                linewidth: 3
+            });
+
+            const line = new THREE.Line(geometry, material);
+            line.visible = this.showPaths;
+
+            this.pathLines.set(villagerId, line);
+            this.scene.add(line);
+        }
+    }
+
+    /**
+     * Update game time display
+     */
+    updateGameTime() {
+        const time = this.aiSystem.routineManager.currentTime;
+        const hours = Math.floor(time);
+        const minutes = Math.floor((time - hours) * 60);
+        this.uiElements.gameTime.textContent = `${hours}:${minutes.toString().padStart(2, '0')}`;
+    }
+
+    /**
+     * Update FPS counter
+     */
+    updateFPS() {
+        this.frameCount++;
+        const currentTime = performance.now();
+
+        if (currentTime - this.lastTime >= 1000) {
+            this.fps = Math.round(this.frameCount * 1000 / (currentTime - this.lastTime));
+            this.frameCount = 0;
+            this.lastTime = currentTime;
+            this.uiElements.fps.textContent = this.fps;
+        }
+    }
+
+    /**
+     * Animation loop
+     */
+    animate() {
+        requestAnimationFrame(() => this.animate());
+
+        const deltaTime = this.clock.getDelta() * this.timeSpeed;
+
+        // Update AI system
+        this.aiSystem.update(deltaTime);
+
+        // Update 3D visualization
+        this.updateVillagerMeshes();
+        this.updatePathVisualizations();
+
+        // Update UI
+        this.updateGameTime();
+        this.updateFPS();
+        this.updateVillagerInfo();
+
+        // Update controls
+        if (this.controls) {
+            // console.log('Updating controls');
+            this.controls.update();
+        }
+
+        // Render scene
+        if (this.renderer && this.scene && this.camera) {
+            this.renderer.render(this.scene, this.camera);
+        } else {
+            console.error('Missing renderer, scene, or camera for rendering');
+        }
+    }
+
+    /**
+     * Update villager mesh positions and colors
+     */
+    updateVillagerMeshes() {
+        for (const [villagerId, mesh] of this.villagerMeshes) {
+            const villager = mesh.userData.villager;
+
+            // Update position
+            mesh.position.set(villager.position[0], villager.position[1], villager.position[2]);
+            mesh.position.y = 0.5;
+
+            // Update color based on state
+            const material = mesh.material;
+            const newColor = this.getStateColor(villager.state);
+            if (material.color.getHex() !== newColor) {
+                material.color.setHex(newColor);
+            }
+        }
+    }
+
+    /**
+     * Update all path visualizations
+     */
+    updatePathVisualizations() {
+        for (const [villagerId, mesh] of this.villagerMeshes) {
+            const villager = mesh.userData.villager;
+            this.updatePathVisualization(villager);
+        }
+    }
+}
+
+// Initialize the application when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    const app = new VillageVisualizationApp();
+});

app_new.js

@@ -0,0 +1,1798 @@
+// Medieval Village AI System - Three.js Visualization Application
+// Using globally available THREE from script tag in index.html
+import VillageAISystem from './src/ai/main.js';
+import LLMHandler from './src/ai/llmHandler.js';
+
+class VillageVisualizationApp {
+    constructor(hfToken = null) {
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.aiSystem = null;
+
+        // 3D Objects
+        this.villagerMeshes = new Map();
+        this.buildingMeshes = new Map();
+        this.resourceMeshes = new Map();
+        this.pathLines = new Map();
+
+        // UI Elements
+        this.uiElements = {};
+        this.selectedVillager = null;
+        this.timeSpeed = 1.0;
+        this.showPaths = true;
+        this.showTitles = true;
+        
+        // LLM System
+        this.llmHandler = new LLMHandler(hfToken);
+        this.llmConnected = false;
+        
+        // Log token status for debugging
+        console.log('LLM Handler initialized with token:', hfToken ? 'Set' : 'Not set');
+        if (hfToken) {
+            console.log('Token length:', hfToken.length);
+        }
+        
+        // Initialize LLM status indicator to red (disconnected)
+        this.updateLLMStatusIndicator(false);
+        
+        // New systems
+        this.weatherSystem = {
+            fogIntensity: 50,
+            currentWeather: 'sun',
+            rainParticles: [],
+            snowParticles: []
+        };
+        
+        this.disasterSystem = {
+            activeDisasters: new Map(),
+            fireEffects: [],
+            floodEffects: []
+        };
+        
+        this.animalSystem = {
+            animals: new Map(),
+            beasts: new Map()
+        };
+        
+        this.warriorSystem = {
+            warriors: new Map(),
+            dispatched: false
+        };
+
+        // Animation
+        this.clock = new THREE.Clock();
+        this.lastTime = 0;
+        this.frameCount = 0;
+        this.fps = 0;
+
+        this.init();
+    }
+
+    init() {
+        console.log('Initializing Village Visualization App...');
+        this.initThreeJS();
+        this.initAI();
+        this.initUI();
+        this.createEnvironment();
+        this.createInitialVillagers();
+        this.animate();
+        console.log('Village Visualization App initialized successfully');
+    }
+
+    initThreeJS() {
+        console.log('Initializing Three.js...');
+
+        // Scene
+        this.scene = new THREE.Scene();
+        // Create a more realistic sky gradient background
+        this.scene.background = new THREE.Color(0x87CEEB);
+        console.log('Scene created');
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.1,
+            1000
+        );
+        this.camera.position.set(15, 12, 15);
+        this.camera.lookAt(0, 0, 0);
+        console.log('Camera created');
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        this.renderer.setClearColor(0x87CEEB, 1); // Set clear color to sky blue
+        this.renderer.gammaOutput = true;
+        this.renderer.gammaFactor = 2.2;
+        console.log('Renderer created');
+
+        // Add to DOM
+        const container = document.getElementById('container');
+        if (container) {
+            container.appendChild(this.renderer.domElement);
+            console.log('Renderer added to DOM');
+        } else {
+            console.error('Container element not found!');
+        }
+
+        // Lighting
+        this.addLighting();
+
+        // Ground plane
+        this.createGround();
+
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x222222);
+        this.scene.add(gridHelper);
+
+        // Controls
+        console.log('Initializing controls...');
+        console.log('THREE.OrbitControls:', typeof THREE !== 'undefined' ? THREE.OrbitControls : 'undefined');
+        try {
+            // Check if OrbitControls is available globally
+            if (typeof THREE !== 'undefined' && typeof THREE.OrbitControls !== 'undefined') {
+                console.log('Creating OrbitControls instance from global THREE object...');
+                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
+                console.log('OrbitControls instance created:', this.controls);
+                this.controls.enableDamping = true;
+                this.controls.dampingFactor = 0.05;
+                this.controls.enableZoom = true;
+                this.controls.enablePan = true;
+                console.log('OrbitControls initialized successfully');
+            } else {
+                console.warn('OrbitControls is not available');
+                this.controls = null;
+            }
+        } catch (error) {
+            console.warn('Error initializing OrbitControls:', error);
+            this.controls = null;
+        }
+
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+        window.addEventListener('keydown', (event) => this.onKeyDown(event));
+        
+        // Handle mouse clicks for object selection
+        this.renderer.domElement.addEventListener('click', (event) => this.onMouseClick(event));
+        
+        // Configure OrbitControls to work properly with object selection
+        if (this.controls) {
+            // Enable all controls but make sure they don't interfere with clicks
+            this.controls.enableRotate = true;
+            this.controls.enableZoom = true;
+            this.controls.enablePan = true;
+            
+            // Disable keyboard navigation in OrbitControls to avoid conflicts
+            this.controls.enableKeys = false;
+            
+            // Use damping for smoother controls
+            this.controls.enableDamping = true;
+            this.controls.dampingFactor = 0.05;
+        }
+    }
+
+    addLighting() {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.4);
+        this.scene.add(ambientLight);
+
+        // Directional light (sun)
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 15, 5);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 50;
+        directionalLight.shadow.camera.left = -20;
+        directionalLight.shadow.camera.right = 20;
+        directionalLight.shadow.camera.top = 20;
+        directionalLight.shadow.camera.bottom = -20;
+        this.scene.add(directionalLight);
+        
+        // Add a fill light
+        const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
+        fillLight.position.set(-10, 5, -10);
+        this.scene.add(fillLight);
+        
+        // Add a hemisphere light for more natural outdoor lighting
+        const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x3a5f3a, 0.2);
+        this.scene.add(hemisphereLight);
+    }
+
+    createGround() {
+        // Create a more detailed ground with texture
+        const groundGeometry = new THREE.PlaneGeometry(100, 100, 20, 20);
+        
+        // Create a more realistic ground material
+        const groundMaterial = new THREE.MeshLambertMaterial({
+            color: 0x3a5f3a,
+            wireframe: false
+        });
+        
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        
+        // Add some variation to the ground
+        const vertices = ground.geometry.attributes.position.array;
+        for (let i = 0; i < vertices.length; i += 3) {
+            // Add some noise to the y position for a more natural look
+            vertices[i + 1] = (Math.random() - 0.5) * 0.5;
+        }
+        ground.geometry.attributes.position.needsUpdate = true;
+        ground.geometry.computeVertexNormals();
+        
+        
+        this.scene.add(ground);
+        
+        // Add fog to the scene for a more realistic atmosphere
+        this.scene.fog = new THREE.Fog(0x87CEEB, 20, 50);
+    }
+    initAI() {
+        this.aiSystem = new VillageAISystem(this.scene);
+    }
+
+    initUI() {
+        // Get UI elements
+        this.uiElements = {
+            addVillagerBtn: document.getElementById('add-villager-btn'),
+            resetBtn: document.getElementById('reset-btn'),
+            timeSpeed: document.getElementById('time-speed'),
+            timeSpeedDisplay: document.getElementById('time-speed-display'),
+            showPaths: document.getElementById('show-paths'),
+            showTitles: document.getElementById('show-titles'),
+            fogControl: document.getElementById('fog-control'),
+            weatherSun: document.getElementById('weather-sun'),
+            weatherRain: document.getElementById('weather-rain'),
+            weatherSnow: document.getElementById('weather-snow'),
+            disasterFire: document.getElementById('disaster-fire'),
+            disasterHurricane: document.getElementById('disaster-hurricane'),
+            disasterFlood: document.getElementById('disaster-flood'),
+            disasterEarthquake: document.getElementById('disaster-earthquake'),
+            disasterPlague: document.getElementById('disaster-plague'),
+            spawnWolf: document.getElementById('spawn-wolf'),
+            spawnBear: document.getElementById('spawn-bear'),
+            spawnDragon: document.getElementById('spawn-dragon'),
+            addWarrior: document.getElementById('add-warrior'),
+            dispatchWarriors: document.getElementById('dispatch-warriors'),
+            villagerCountDisplay: document.getElementById('villager-count-display'),
+            villagerCountStat: document.getElementById('villager-count-stat'),
+            gameTime: document.getElementById('game-time'),
+            fps: document.getElementById('fps'),
+            buildingCount: document.getElementById('building-count'),
+            resourceCount: document.getElementById('resource-count'),
+            villagerList: document.getElementById('villager-list'),
+            // LLM UI elements
+            llmModel: document.getElementById('llm-model'),
+            llmQuery: document.getElementById('llm-query'),
+            llmSubmit: document.getElementById('llm-submit'),
+            llmResponse: document.getElementById('llm-response')
+        };
+
+        // Add event listeners
+        if (this.uiElements.addVillagerBtn) {
+            this.uiElements.addVillagerBtn.addEventListener('click', () => this.addVillager());
+        }
+        if (this.uiElements.resetBtn) {
+            this.uiElements.resetBtn.addEventListener('click', () => this.resetSimulation());
+        }
+        if (this.uiElements.timeSpeed) {
+            this.uiElements.timeSpeed.addEventListener('input', (e) => this.updateTimeSpeed(e.target.value));
+        }
+        if (this.uiElements.showPaths) {
+            this.uiElements.showPaths.addEventListener('change', (e) => this.togglePaths(e.target.checked));
+        }
+        if (this.uiElements.showTitles) {
+            this.uiElements.showTitles.addEventListener('change', (e) => this.toggleTitles(e.target.checked));
+        }
+        
+        // Weather controls
+        if (this.uiElements.fogControl) {
+            this.uiElements.fogControl.addEventListener('input', (e) => this.updateFog(e.target.value));
+        }
+        if (this.uiElements.weatherSun) {
+            this.uiElements.weatherSun.addEventListener('click', () => this.setWeather('sun'));
+        }
+        if (this.uiElements.weatherRain) {
+            this.uiElements.weatherRain.addEventListener('click', () => this.setWeather('rain'));
+        }
+        if (this.uiElements.weatherSnow) {
+            this.uiElements.weatherSnow.addEventListener('click', () => this.setWeather('snow'));
+        }
+        
+        // Disaster controls
+        if (this.uiElements.disasterFire) {
+            this.uiElements.disasterFire.addEventListener('click', () => this.triggerDisaster('fire'));
+        }
+        if (this.uiElements.disasterHurricane) {
+            this.uiElements.disasterHurricane.addEventListener('click', () => this.triggerDisaster('hurricane'));
+        }
+        if (this.uiElements.disasterFlood) {
+            this.uiElements.disasterFlood.addEventListener('click', () => this.triggerDisaster('flood'));
+        }
+        if (this.uiElements.disasterEarthquake) {
+            this.uiElements.disasterEarthquake.addEventListener('click', () => this.triggerDisaster('earthquake'));
+        }
+        if (this.uiElements.disasterPlague) {
+            this.uiElements.disasterPlague.addEventListener('click', () => this.triggerDisaster('plague'));
+        }
+        
+        // Animal/Beast controls
+        if (this.uiElements.spawnWolf) {
+            this.uiElements.spawnWolf.addEventListener('click', () => this.spawnAnimal('wolf'));
+        }
+        if (this.uiElements.spawnBear) {
+            this.uiElements.spawnBear.addEventListener('click', () => this.spawnAnimal('bear'));
+        }
+        if (this.uiElements.spawnDragon) {
+            this.uiElements.spawnDragon.addEventListener('click', () => this.spawnAnimal('dragon'));
+        }
+        
+        // Warrior controls
+        if (this.uiElements.addWarrior) {
+            this.uiElements.addWarrior.addEventListener('click', () => this.addWarrior());
+        }
+        if (this.uiElements.dispatchWarriors) {
+            this.uiElements.dispatchWarriors.addEventListener('click', () => this.dispatchWarriors());
+        }
+        
+        // LLM event listeners
+        if (this.uiElements.llmModel) {
+            this.uiElements.llmModel.addEventListener('change', (e) => this.handleLLMModelChange(e.target.value));
+        }
+        if (this.uiElements.llmQuery) {
+            this.uiElements.llmQuery.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    this.handleLLMQuerySubmit();
+                }
+            });
+        }
+        if (this.uiElements.llmSubmit) {
+            this.uiElements.llmSubmit.addEventListener('click', () => this.handleLLMQuerySubmit());
+        }
+        
+        // Test LLM connection
+        this.testLLMConnection();
+    }
+    
+    /**
+     * Update the LLM status indicator
+     * @param {boolean} connected - Whether the LLM is connected
+     */
+    updateLLMStatusIndicator(connected) {
+        this.llmConnected = connected;
+        const indicator = document.getElementById('llm-status-indicator');
+        if (indicator) {
+            indicator.style.backgroundColor = connected ? 'green' : 'red';
+        }
+    }
+    
+    /**
+     * Test the LLM connection with an initial prompt
+     */
+    async testLLMConnection() {
+        // Log token status for debugging
+        console.log('Testing LLM connection, token set:', this.llmHandler.isApiTokenSet());
+        if (this.llmHandler.isApiTokenSet()) {
+            console.log('Token length:', this.llmHandler.getApiToken().length);
+        }
+        
+        // Check if API token is set
+        if (!this.llmHandler.isApiTokenSet()) {
+            // Update status indicator to red (disconnected)
+            this.updateLLMStatusIndicator(false);
+            
+            // Update UI with error message
+            if (this.uiElements.llmResponse) {
+                this.uiElements.llmResponse.textContent = "Hugging Face API token not set. Please set the HF_TOKEN environment variable or use the browser console to set the token.";
+            }
+            return;
+        }
+        
+        // Update UI to show testing state
+        if (this.uiElements.llmResponse) {
+            this.uiElements.llmResponse.textContent = 'Testing LLM connection...';
+        }
+        
+        try {
+            // Send an initial prompt to test the connection
+            const initialPrompt = "Provide a brief summary of a medieval village simulation with AI-controlled villagers. Include information about villager behaviors, resource management, and building types.";
+            const response = await this.llmHandler.sendQuery(initialPrompt);
+            
+            // Update UI with response
+            if (this.uiElements.llmResponse) {
+                this.uiElements.llmResponse.textContent = response;
+            }
+            
+            // Update status indicator to green (connected)
+            this.updateLLMStatusIndicator(true);
+        } catch (error) {
+            console.error('Error testing LLM connection:', error);
+            
+            // Update status indicator to red (disconnected)
+            this.updateLLMStatusIndicator(false);
+            
+            // Update UI with error message
+            if (this.uiElements.llmResponse) {
+                if (error.message.includes("API token is not set")) {
+                    this.uiElements.llmResponse.textContent = "Please set your Hugging Face API token by setting the HF_TOKEN environment variable or using the browser console.";
+                } else {
+                    this.uiElements.llmResponse.textContent = 'Error connecting to LLM: ' + error.message;
+                }
+            }
+        }
+    }
+    
+    /**
+     * Handle LLM model change
+     * @param {string} model - The selected model
+     */
+    handleLLMModelChange(model) {
+        console.log('LLM model changed to:', model);
+        this.llmHandler.setSelectedModel(model);
+    }
+    
+    /**
+     * Handle LLM query submission
+     */
+    async handleLLMQuerySubmit() {
+        if (!this.uiElements.llmQuery || !this.uiElements.llmResponse) return;
+        
+        const query = this.uiElements.llmQuery.value.trim();
+        if (!query) return;
+        
+        console.log('Submitting LLM query:', query);
+        console.log('LLM Handler token set:', this.llmHandler.isApiTokenSet());
+        if (this.llmHandler.isApiTokenSet()) {
+            console.log('Token length:', this.llmHandler.getApiToken().length);
+        }
+        
+        // Update UI to show loading state
+        this.uiElements.llmResponse.textContent = 'Processing your query...';
+        this.uiElements.llmSubmit.disabled = true;
+        
+        try {
+            // Send query to LLM handler
+            const response = await this.llmHandler.sendQuery(query);
+            
+            // Update UI with response
+            this.uiElements.llmResponse.textContent = response;
+            
+            // Update status indicator to green (connected)
+            this.updateLLMStatusIndicator(true);
+        } catch (error) {
+            console.error('Error processing LLM query:', error);
+            if (error.message.includes("API token is not set")) {
+                this.uiElements.llmResponse.textContent = "Please set your Hugging Face API token in the HTML file to enable LLM functionality. Get one from https://huggingface.co/settings/tokens";
+                // Update status indicator to red (disconnected)
+                this.updateLLMStatusIndicator(false);
+            } else {
+                this.uiElements.llmResponse.textContent = 'Error: ' + error.message;
+                // Update status indicator to red (disconnected) if it's a connection error
+                if (error.message.includes("API request failed")) {
+                    this.updateLLMStatusIndicator(false);
+                }
+            }
+        } finally {
+            // Re-enable submit button
+            this.uiElements.llmSubmit.disabled = false;
+        }
+    }
+    
+    createEnvironment() {
+        // Buildings are already created in the AI system
+        this.createBuildingMeshes();
+        this.createResourceMeshes();
+        this.createRoads();
+        this.createTrees();
+        console.log('Environment created with roads and trees');
+    }
+
+    createBuildingMeshes() {
+        if (this.aiSystem && this.aiSystem.environmentSystem) {
+            for (const [id, building] of this.aiSystem.environmentSystem.buildings) {
+                let mesh = null;
+
+                // Create unique geometry and materials for each building type
+                switch (building.type) {
+                    case 'house':
+                        // Cozy cottage with sloped roof
+                        const houseGroup = new THREE.Group();
+
+                        const houseBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(3, 2, 3),
+                            new THREE.MeshLambertMaterial({ color: 0xD2691E })
+                        );
+                        houseBase.position.y = 1;
+
+                        const houseRoof = new THREE.Mesh(
+                            new THREE.ConeGeometry(2.5, 1.5, 4),
+                            new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+                        );
+                        houseRoof.position.y = 2.75;
+
+                        houseGroup.add(houseBase);
+                        houseGroup.add(houseRoof);
+                        mesh = houseGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'workshop':
+                        // Industrial workshop with chimney
+                        const workshopGroup = new THREE.Group();
+
+                        const workshopBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(4, 3, 4),
+                            new THREE.MeshLambertMaterial({ color: 0x708090 })
+                        );
+                        workshopBase.position.y = 1.5;
+
+                        const chimney = new THREE.Mesh(
+                            new THREE.CylinderGeometry(0.3, 0.3, 2),
+                            new THREE.MeshLambertMaterial({ color: 0x696969 })
+                        );
+                        chimney.position.set(1.5, 3, 0);
+
+                        workshopGroup.add(workshopBase);
+                        workshopGroup.add(chimney);
+                        mesh = workshopGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'market':
+                        // Large marketplace with dome
+                        const marketGroup = new THREE.Group();
+
+                        const marketBase = new THREE.Mesh(
+                            new THREE.CylinderGeometry(5, 5, 2, 32),
+                            new THREE.MeshLambertMaterial({ color: 0xFFD700 })
+                        );
+                        marketBase.position.y = 1;
+
+                        const marketDome = new THREE.Mesh(
+                            new THREE.SphereGeometry(3, 16, 8, 0, Math.PI * 2, 0, Math.PI / 2),
+                            new THREE.MeshLambertMaterial({ color: 0xFFA500 })
+                        );
+                        marketDome.position.y = 3.5;
+
+                        marketGroup.add(marketBase);
+                        marketGroup.add(marketDome);
+                        mesh = marketGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'university':
+                        // Academic building with tower and columns
+                        const universityGroup = new THREE.Group();
+
+                        const uniBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(6, 4, 5),
+                            new THREE.MeshLambertMaterial({ color: 0x4169E1 })
+                        );
+                        uniBase.position.y = 2;
+
+                        const uniTower = new THREE.Mesh(
+                            new THREE.CylinderGeometry(1.5, 1.5, 6),
+                            new THREE.MeshLambertMaterial({ color: 0x1E90FF })
+                        );
+                        uniTower.position.set(2, 5, 0);
+
+                        // Add columns
+                        for (let i = -2; i <= 2; i += 2) {
+                            const column = new THREE.Mesh(
+                                new THREE.CylinderGeometry(0.3, 0.3, 3),
+                                new THREE.MeshLambertMaterial({ color: 0xF5F5F5 })
+                            );
+                            column.position.set(i, 1.5, 2);
+                            universityGroup.add(column);
+                        }
+
+                        universityGroup.add(uniBase);
+                        universityGroup.add(uniTower);
+                        mesh = universityGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'store':
+                        // Modern store with large windows
+                        const storeGroup = new THREE.Group();
+
+                        const storeBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(5, 3, 4),
+                            new THREE.MeshLambertMaterial({ color: 0x32CD32 })
+                        );
+                        storeBase.position.y = 1.5;
+
+                        // Add windows
+                        const windowMaterial = new THREE.MeshLambertMaterial({ color: 0x87CEEB });
+                        for (let i = -1.5; i <= 1.5; i += 1.5) {
+                            const window = new THREE.Mesh(
+                                new THREE.PlaneGeometry(1, 1),
+                                windowMaterial
+                            );
+                            window.position.set(i, 1.5, 2.01);
+                            storeGroup.add(window);
+                        }
+
+                        storeGroup.add(storeBase);
+                        mesh = storeGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'bank':
+                        // Impressive bank building
+                        const bankGroup = new THREE.Group();
+
+                        const bankBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(6, 5, 5),
+                            new THREE.MeshLambertMaterial({ color: 0xC0C0C0 })
+                        );
+                        bankBase.position.y = 2.5;
+
+                        // Add pillars
+                        for (let i = -2; i <= 2; i += 2) {
+                            const pillar = new THREE.Mesh(
+                                new THREE.CylinderGeometry(0.4, 0.4, 4),
+                                new THREE.MeshLambertMaterial({ color: 0xF5F5F5 })
+                            );
+                            pillar.position.set(i, 2, 2.5);
+                            bankGroup.add(pillar);
+                        }
+
+                        bankGroup.add(bankBase);
+                        mesh = bankGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'hospital':
+                        // Medical facility with cross
+                        const hospitalGroup = new THREE.Group();
+
+                        const hospitalBase = new THREE.Mesh(
+                            new THREE.BoxGeometry(7, 5, 5),
+                            new THREE.MeshLambertMaterial({ color: 0xFF0000 })
+                        );
+                        hospitalBase.position.y = 2.5;
+
+                        // Medical cross
+                        const crossVertical = new THREE.Mesh(
+                            new THREE.BoxGeometry(0.3, 2, 0.3),
+                            new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
+                        );
+                        crossVertical.position.set(0, 4.5, 2.5);
+
+                        const crossHorizontal = new THREE.Mesh(
+                            new THREE.BoxGeometry(1.5, 0.3, 0.3),
+                            new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
+                        );
+                        crossHorizontal.position.set(0, 4.5, 2.5);
+
+                        hospitalGroup.add(hospitalBase);
+                        hospitalGroup.add(crossVertical);
+                        hospitalGroup.add(crossHorizontal);
+                        mesh = hospitalGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    case 'restaurant':
+                        // Fancy restaurant with unique shape
+                        const restaurantGroup = new THREE.Group();
+
+                        const restaurantBase = new THREE.Mesh(
+                            new THREE.CylinderGeometry(4, 4, 3, 32),
+                            new THREE.MeshLambertMaterial({ color: 0xFF6347 })
+                        );
+                        restaurantBase.position.y = 1.5;
+
+                        const restaurantRoof = new THREE.Mesh(
+                            new THREE.ConeGeometry(3.5, 2, 8),
+                            new THREE.MeshLambertMaterial({ color: 0x8B0000 })
+                        );
+                        restaurantRoof.position.y = 3.5;
+
+                        restaurantGroup.add(restaurantBase);
+                        restaurantGroup.add(restaurantRoof);
+                        mesh = restaurantGroup;
+                        mesh.position.y = 0;
+                        break;
+
+                    default:
+                        // Default building
+                        mesh = new THREE.Mesh(
+                            new THREE.BoxGeometry(3, 3, 3),
+                            new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+                        );
+                        mesh.position.y = 1.5;
+                }
+
+                mesh.position.set(building.position[0], building.position[1], building.position[2]);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+
+                this.buildingMeshes.set(id, mesh);
+                this.scene.add(mesh);
+            }
+        }
+
+        this.updateBuildingCount();
+    }
+
+    createResourceMeshes() {
+        const resourceGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2);
+        const materials = {
+            wood: new THREE.MeshLambertMaterial({ color: 0x8B4513 }),
+            stone: new THREE.MeshLambertMaterial({ color: 0x708090 }),
+            food: new THREE.MeshLambertMaterial({ color: 0x32CD32 })
+        };
+
+        if (this.aiSystem && this.aiSystem.environmentSystem) {
+            for (const [id, resource] of this.aiSystem.environmentSystem.resources) {
+                const material = materials[resource.type] || materials.wood;
+                const mesh = new THREE.Mesh(resourceGeometry, material);
+                mesh.position.set(resource.position[0], resource.position[1], resource.position[2]);
+                mesh.position.y = 1;
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+
+                this.resourceMeshes.set(id, mesh);
+                this.scene.add(mesh);
+            }
+        }
+
+        this.updateResourceCount();
+    }
+
+    /**
+     * Create roads for the village
+     */
+    createRoads() {
+        console.log('Creating roads...');
+
+        // Create a simple crossroad in the center - very visible
+        const roadMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
+
+        // Horizontal road - very wide and visible
+        const horizontalRoad = new THREE.Mesh(
+            new THREE.BoxGeometry(50, 0.5, 6),
+            roadMaterial
+        );
+        horizontalRoad.position.set(0, 0.25, 0);
+        horizontalRoad.receiveShadow = true;
+        this.scene.add(horizontalRoad);
+        console.log('Added horizontal road at center');
+
+        // Vertical road - very wide and visible
+        const verticalRoad = new THREE.Mesh(
+            new THREE.BoxGeometry(6, 0.5, 50),
+            roadMaterial
+        );
+        verticalRoad.position.set(0, 0.25, 0);
+        verticalRoad.receiveShadow = true;
+        this.scene.add(verticalRoad);
+        console.log('Added vertical road at center');
+
+        // Add bright yellow road markings
+        const markingMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFF00 });
+
+        // Horizontal road markings
+        for (let x = -20; x <= 20; x += 4) {
+            if (Math.abs(x) > 2) { // Skip center
+                const marking = new THREE.Mesh(
+                    new THREE.BoxGeometry(2, 0.3, 0.5),
+                    markingMaterial
+                );
+                marking.position.set(x, 0.4, 0);
+                this.scene.add(marking);
+            }
+        }
+
+        // Vertical road markings
+        for (let z = -20; z <= 20; z += 4) {
+            if (Math.abs(z) > 2) { // Skip center
+                const marking = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.5, 0.3, 2),
+                    markingMaterial
+                );
+                marking.position.set(0, 0.4, z);
+                this.scene.add(marking);
+            }
+        }
+
+        console.log('Roads creation completed');
+    }
+
+    /**
+     * Create trees for the village
+     */
+    createTrees() {
+        console.log('Creating trees...');
+
+        // Create very visible trees at key positions
+        const treePositions = [
+            [-15, 0, -15], [15, 0, -15], [-15, 0, 15], [15, 0, 15],
+            [-25, 0, 0], [25, 0, 0], [0, 0, -25], [0, 0, 25]
+        ];
+
+        treePositions.forEach((pos, index) => {
+            // Create a very visible tree
+            const treeGroup = new THREE.Group();
+
+            // Large trunk
+            const trunk = new THREE.Mesh(
+                new THREE.CylinderGeometry(0.8, 1, 6, 8),
+                new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+            );
+            trunk.position.y = 3;
+            trunk.castShadow = true;
+            trunk.receiveShadow = true;
+            treeGroup.add(trunk);
+
+            // Large foliage - multiple layers for visibility
+            const foliage1 = new THREE.Mesh(
+                new THREE.SphereGeometry(5, 8, 6),
+                new THREE.MeshLambertMaterial({ color: 0x228B22 })
+            );
+            foliage1.position.y = 7;
+            foliage1.castShadow = true;
+            foliage1.receiveShadow = true;
+            treeGroup.add(foliage1);
+
+            const foliage2 = new THREE.Mesh(
+                new THREE.SphereGeometry(3, 8, 6),
+                new THREE.MeshLambertMaterial({ color: 0x32CD32 })
+            );
+            foliage2.position.y = 10;
+            foliage2.castShadow = true;
+            foliage2.receiveShadow = true;
+            treeGroup.add(foliage2);
+
+            treeGroup.position.set(pos[0], 0, pos[2]);
+            this.scene.add(treeGroup);
+            console.log(`Added tree ${index + 1} at:`, pos);
+        });
+
+        console.log('Trees creation completed');
+    }
+
+    createInitialVillagers() {
+        const positions = [
+            [0, 0, 0],
+            [5, 0, 5],
+            [-3, 0, -3]
+        ];
+
+        positions.forEach((position, index) => {
+            this.createVillager(`villager${index + 1}`, position);
+        });
+    }
+
+    createVillager(id, position) {
+        if (this.aiSystem) {
+            const villager = this.aiSystem.createVillager(id, position);
+            this.createVillagerMesh(villager);
+            this.updateVillagerCount();
+            return villager;
+        }
+    }
+
+    createVillagerMesh(villager) {
+        // Create a more detailed villager with a body and head
+        const villagerGroup = new THREE.Group();
+        
+        // Body
+        const bodyGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.8, 8);
+        const bodyMaterial = new THREE.MeshLambertMaterial({
+            color: this.getStateColor(villager.state)
+        });
+        const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+        body.position.y = 0.4;
+        body.castShadow = true;
+        body.receiveShadow = true;
+        villagerGroup.add(body);
+        
+        // Head
+        const headGeometry = new THREE.SphereGeometry(0.25, 16, 16);
+        const headMaterial = new THREE.MeshLambertMaterial({
+            color: 0xffd700 // Gold color for head
+        });
+        const head = new THREE.Mesh(headGeometry, headMaterial);
+        head.position.y = 0.9;
+        head.castShadow = true;
+        head.receiveShadow = true;
+        villagerGroup.add(head);
+        
+        // Create villager label (sprite)
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = 256;
+        canvas.height = 128;
+        
+        context.fillStyle = 'rgba(0, 0, 0, 0.8)';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        
+        context.fillStyle = 'white';
+        context.font = '32px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(villager.id, canvas.width / 2, canvas.height / 2);
+        
+        const texture = new THREE.CanvasTexture(canvas);
+        const spriteMaterial = new THREE.SpriteMaterial({
+            map: texture,
+            transparent: true
+        });
+        const label = new THREE.Sprite(spriteMaterial);
+        label.scale.set(3, 1.5, 1);
+        label.position.y = 1.5;
+        label.visible = this.showTitles; // Set initial visibility based on showTitles flag
+        villagerGroup.add(label);
+        
+        villagerGroup.position.set(villager.position[0], villager.position[1], villager.position[2]);
+        villagerGroup.position.y = 0;
+        villagerGroup.castShadow = true;
+        villagerGroup.receiveShadow = true;
+
+        villagerGroup.userData.villager = villager;
+
+        this.villagerMeshes.set(villager.id, villagerGroup);
+        this.scene.add(villagerGroup);
+    }
+
+    getStateColor(state) {
+        const colors = {
+            sleep: 0x7f8c8d,
+            work: 0xe74c3c,
+            eat: 0xf39c12,
+            socialize: 0x9b59b6,
+            idle: 0x95a5a6
+        };
+        return colors[state] || colors.idle;
+    }
+
+    addVillager() {
+        const villagerCount = this.villagerMeshes.size;
+        const id = `villager${villagerCount + 1}`;
+
+        const position = [
+            (Math.random() - 0.5) * 40,
+            0,
+            (Math.random() - 0.5) * 40
+        ];
+
+        this.createVillager(id, position);
+    }
+
+    resetSimulation() {
+        // Clear all villagers
+        for (const [id, mesh] of this.villagerMeshes) {
+            this.scene.remove(mesh);
+        }
+        this.villagerMeshes.clear();
+
+        // Clear path lines
+        for (const [id, line] of this.pathLines) {
+            this.scene.remove(line);
+        }
+        this.pathLines.clear();
+
+        // Reset AI system
+        this.aiSystem = new VillageAISystem(this.scene);
+        this.createEnvironment();
+
+        // Clear selection
+        this.selectedVillager = null;
+        this.updateVillagerInfo();
+
+        this.updateVillagerCount();
+    }
+
+    updateTimeSpeed(speed) {
+        this.timeSpeed = parseFloat(speed);
+        if (this.uiElements.timeSpeedDisplay) {
+            this.uiElements.timeSpeedDisplay.textContent = `${speed}x`;
+        }
+    }
+
+    togglePaths(show) {
+        console.log('Toggling paths:', show);
+        this.showPaths = show;
+        for (const [id, line] of this.pathLines) {
+            line.visible = show;
+        }
+    }
+
+    toggleTitles(show) {
+        console.log('Toggling titles:', show);
+        this.showTitles = show;
+        for (const [id, mesh] of this.villagerMeshes) {
+            // Find the text sprite (label) in the mesh children
+            // The label is the third child (index 2) - body, head, label
+            if (mesh.children.length >= 3) {
+                const label = mesh.children[2]; // Label is the third child
+                if (label instanceof THREE.Sprite) {
+                    label.visible = show;
+                }
+            }
+        }
+    }
+    
+    updateFog(intensity) {
+        console.log('Updating fog intensity:', intensity);
+        this.weatherSystem.fogIntensity = intensity;
+        
+        // Update fog in the scene
+        if (this.scene.fog) {
+            // Convert intensity (0-100) to fog density
+            const near = 10 + (100 - intensity); // More intensity = less near distance
+            const far = 30 + (100 - intensity) * 2; // More intensity = less far distance
+            this.scene.fog.near = near;
+            this.scene.fog.far = far;
+        }
+    }
+    
+    setWeather(weatherType) {
+        console.log('Setting weather to:', weatherType);
+        this.weatherSystem.currentWeather = weatherType;
+        
+        // Update scene based on weather
+        switch (weatherType) {
+            case 'sun':
+                this.scene.background = new THREE.Color(0x87CEEB); // Sky blue
+                if (this.scene.fog) {
+                    this.scene.fog.color = new THREE.Color(0x87CEEB);
+                }
+                break;
+            case 'rain':
+                this.scene.background = new THREE.Color(0x778899); // Gray
+                if (this.scene.fog) {
+                    this.scene.fog.color = new THREE.Color(0x778899);
+                }
+                this.createRainEffect();
+                break;
+            case 'snow':
+                this.scene.background = new THREE.Color(0xE0E6EF); // Light gray
+                if (this.scene.fog) {
+                    this.scene.fog.color = new THREE.Color(0xE0E6EF);
+                }
+                this.createSnowEffect();
+                break;
+        }
+    }
+    
+    createRainEffect() {
+        // Clear existing rain particles
+        this.weatherSystem.rainParticles.forEach(particle => {
+            this.scene.remove(particle);
+        });
+        this.weatherSystem.rainParticles = [];
+        
+        // Create new rain particles
+        const rainCount = 1000;
+        const rainGeometry = new THREE.BufferGeometry();
+        const positions = new Float32Array(rainCount * 3);
+        
+        for (let i = 0; i < rainCount * 3; i += 3) {
+            positions[i] = (Math.random() - 0.5) * 100; // x
+            positions[i + 1] = Math.random() * 50 + 10; // y
+            positions[i + 2] = (Math.random() - 0.5) * 100; // z
+        }
+        
+        rainGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        
+        const rainMaterial = new THREE.PointsMaterial({
+            color: 0xAAAAFF,
+            size: 0.1,
+            transparent: true
+        });
+        
+        const rainSystem = new THREE.Points(rainGeometry, rainMaterial);
+        this.scene.add(rainSystem);
+        this.weatherSystem.rainParticles.push(rainSystem);
+    }
+    
+    createSnowEffect() {
+        // Clear existing snow particles
+        this.weatherSystem.snowParticles.forEach(particle => {
+            this.scene.remove(particle);
+        });
+        this.weatherSystem.snowParticles = [];
+        
+        // Create new snow particles
+        const snowCount = 1000;
+        const snowGeometry = new THREE.BufferGeometry();
+        const positions = new Float32Array(snowCount * 3);
+        
+        for (let i = 0; i < snowCount * 3; i += 3) {
+            positions[i] = (Math.random() - 0.5) * 100; // x
+            positions[i + 1] = Math.random() * 50 + 10; // y
+            positions[i + 2] = (Math.random() - 0.5) * 100; // z
+        }
+        
+        snowGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        
+        const snowMaterial = new THREE.PointsMaterial({
+            color: 0xFFFFFF,
+            size: 0.2,
+            transparent: true
+        });
+        
+        const snowSystem = new THREE.Points(snowGeometry, snowMaterial);
+        this.scene.add(snowSystem);
+        this.weatherSystem.snowParticles.push(snowSystem);
+    }
+    
+    triggerDisaster(disasterType) {
+        console.log('Triggering disaster:', disasterType);
+        
+        // Create disaster effect
+        switch (disasterType) {
+            case 'fire':
+                this.createFireEffect();
+                break;
+            case 'hurricane':
+                this.createHurricaneEffect();
+                break;
+            case 'flood':
+                this.createFloodEffect();
+                break;
+            case 'earthquake':
+                this.createEarthquakeEffect();
+                break;
+            case 'plague':
+                this.createPlagueEffect();
+                break;
+        }
+        
+        // Add to active disasters
+        this.disasterSystem.activeDisasters.set(disasterType, {
+            startTime: Date.now(),
+            intensity: 1.0
+        });
+    }
+    
+    createFireEffect() {
+        // Create fire particles at random building locations
+        if (this.buildingMeshes.size > 0) {
+            const buildingArray = Array.from(this.buildingMeshes.values());
+            const building = buildingArray[Math.floor(Math.random() * buildingArray.length)];
+            
+            const fireGeometry = new THREE.SphereGeometry(1, 8, 8);
+            const fireMaterial = new THREE.MeshBasicMaterial({
+                color: 0xFF4500,
+                transparent: true,
+                opacity: 0.7
+            });
+            
+            const fireEffect = new THREE.Mesh(fireGeometry, fireMaterial);
+            fireEffect.position.copy(building.position);
+            fireEffect.position.y = 3;
+            
+            this.scene.add(fireEffect);
+            this.disasterSystem.fireEffects.push(fireEffect);
+            
+            // Remove fire after some time
+            setTimeout(() => {
+                this.scene.remove(fireEffect);
+                const index = this.disasterSystem.fireEffects.indexOf(fireEffect);
+                if (index > -1) {
+                    this.disasterSystem.fireEffects.splice(index, 1);
+                }
+            }, 5000);
+        }
+    }
+    
+    createHurricaneEffect() {
+        // Create a rotating wind effect in the center of the village
+        const tornadoGeometry = new THREE.CylinderGeometry(0.5, 2, 20, 8);
+        const tornadoMaterial = new THREE.MeshBasicMaterial({
+            color: 0x888888,
+            transparent: true,
+            opacity: 0.5
+        });
+        
+        const tornado = new THREE.Mesh(tornadoGeometry, tornadoMaterial);
+        tornado.position.set(0, 10, 0);
+        
+        this.scene.add(tornado);
+        
+        // Animate tornado
+        let tornadoTime = 0;
+        const animateTornado = () => {
+            tornadoTime += 0.1;
+            tornado.rotation.y = tornadoTime;
+            tornado.position.x = Math.sin(tornadoTime) * 5;
+            tornado.position.z = Math.cos(tornadoTime) * 5;
+            
+            if (tornadoTime < 20) { // Run for 20 seconds
+                requestAnimationFrame(animateTornado);
+            } else {
+                this.scene.remove(tornado);
+            }
+        };
+        
+        animateTornado();
+    }
+    
+    createFloodEffect() {
+        // Create a water plane that rises
+        const waterGeometry = new THREE.PlaneGeometry(100, 100);
+        const waterMaterial = new THREE.MeshBasicMaterial({
+            color: 0x4169E1,
+            transparent: true,
+            opacity: 0.6
+        });
+        
+        const water = new THREE.Mesh(waterGeometry, waterMaterial);
+        water.rotation.x = -Math.PI / 2;
+        water.position.y = 0.1;
+        
+        this.scene.add(water);
+        this.disasterSystem.floodEffects.push(water);
+        
+        // Animate water rising
+        let waterLevel = 0.1;
+        const raiseWater = () => {
+            waterLevel += 0.1;
+            water.position.y = waterLevel;
+            
+            if (waterLevel < 3) { // Raise to 3 units
+                setTimeout(raiseWater, 200);
+            } else {
+                // Remove water after some time
+                setTimeout(() => {
+                    this.scene.remove(water);
+                    const index = this.disasterSystem.floodEffects.indexOf(water);
+                    if (index > -1) {
+                        this.disasterSystem.floodEffects.splice(index, 1);
+                    }
+                }, 3000);
+            }
+        };
+        
+        raiseWater();
+    }
+    
+    createEarthquakeEffect() {
+        // Shake the camera
+        const originalCameraPosition = this.camera.position.clone();
+        let shakeIntensity = 0.5;
+        let shakeTime = 0;
+        
+        const shakeCamera = () => {
+            shakeTime += 0.1;
+            shakeIntensity *= 0.95; // Decrease intensity over time
+            
+            this.camera.position.x = originalCameraPosition.x + (Math.random() - 0.5) * shakeIntensity;
+            this.camera.position.y = originalCameraPosition.y + (Math.random() - 0.5) * shakeIntensity;
+            this.camera.position.z = originalCameraPosition.z + (Math.random() - 0.5) * shakeIntensity;
+            
+            if (shakeTime < 5) { // Shake for 5 seconds
+                requestAnimationFrame(shakeCamera);
+            } else {
+                // Reset camera position
+                this.camera.position.copy(originalCameraPosition);
+            }
+        };
+        
+        shakeCamera();
+    }
+    
+    createPlagueEffect() {
+        // Change villager colors to show they're sick
+        for (const [id, mesh] of this.villagerMeshes) {
+            if (mesh.children.length > 0) {
+                const body = mesh.children[0];
+                if (body.material) {
+                    body.material.color.setHex(0x808080); // Gray color for sick villagers
+                }
+            }
+        }
+        
+        // Reset colors after some time
+        setTimeout(() => {
+            for (const [id, mesh] of this.villagerMeshes) {
+                const villager = mesh.userData.villager;
+                if (mesh.children.length > 0) {
+                    const body = mesh.children[0];
+                    if (body.material) {
+                        body.material.color.setHex(this.getStateColor(villager.state));
+                    }
+                }
+            }
+        }, 10000);
+    }
+    
+    spawnAnimal(animalType) {
+        console.log('Spawning animal:', animalType);
+        
+        // Create animal at random position
+        const position = [
+            (Math.random() - 0.5) * 40,
+            0,
+            (Math.random() - 0.5) * 40
+        ];
+        
+        this.createAnimal(animalType, position);
+    }
+    
+    createAnimal(animalType, position) {
+        let animalMesh = null;
+        
+        switch (animalType) {
+            case 'wolf':
+                animalMesh = new THREE.Mesh(
+                    new THREE.BoxGeometry(1, 0.5, 0.5),
+                    new THREE.MeshLambertMaterial({ color: 0x696969 })
+                );
+                break;
+            case 'bear':
+                animalMesh = new THREE.Mesh(
+                    new THREE.BoxGeometry(1.5, 1, 1),
+                    new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+                );
+                break;
+            case 'dragon':
+                // Create a more complex dragon
+                const dragonGroup = new THREE.Group();
+                
+                // Body
+                const body = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.5, 0.8, 2, 8),
+                    new THREE.MeshLambertMaterial({ color: 0x8B0000 })
+                );
+                body.rotation.z = Math.PI / 2;
+                dragonGroup.add(body);
+                
+                // Head
+                const head = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.5, 8, 8),
+                    new THREE.MeshLambertMaterial({ color: 0x8B0000 })
+                );
+                head.position.x = 1.2;
+                dragonGroup.add(head);
+                
+                // Wings
+                const leftWing = new THREE.Mesh(
+                    new THREE.BoxGeometry(1.5, 0.1, 0.5),
+                    new THREE.MeshLambertMaterial({ color: 0x8B0000 })
+                );
+                leftWing.position.set(-0.5, 0, 0.5);
+                leftWing.rotation.z = Math.PI / 4;
+                dragonGroup.add(leftWing);
+                
+                const rightWing = new THREE.Mesh(
+                    new THREE.BoxGeometry(1.5, 0.1, 0.5),
+                    new THREE.MeshLambertMaterial({ color: 0x8B0000 })
+                );
+                rightWing.position.set(-0.5, 0, -0.5);
+                rightWing.rotation.z = -Math.PI / 4;
+                dragonGroup.add(rightWing);
+                
+                animalMesh = dragonGroup;
+                break;
+        }
+        
+        if (animalMesh) {
+            animalMesh.position.set(position[0], position[1], position[2]);
+            animalMesh.position.y = 0.5;
+            animalMesh.castShadow = true;
+            animalMesh.receiveShadow = true;
+            
+            this.scene.add(animalMesh);
+            this.animalSystem.animals.set(`animal_${Date.now()}`, {
+                type: animalType,
+                mesh: animalMesh,
+                position: position,
+                targetVillager: null
+            });
+        }
+    }
+    
+    addWarrior() {
+        console.log('Adding warrior');
+        
+        // Create warrior at random position
+        const position = [
+            (Math.random() - 0.5) * 10,
+            0,
+            (Math.random() - 0.5) * 10
+        ];
+        
+        this.createWarrior(position);
+    }
+    
+    createWarrior(position) {
+        // Create a warrior (similar to villager but with different color and weapon)
+        const warriorGroup = new THREE.Group();
+        
+        // Body
+        const bodyGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.8, 8);
+        const bodyMaterial = new THREE.MeshLambertMaterial({
+            color: 0x4169E1 // Blue for warriors
+        });
+        const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+        body.position.y = 0.4;
+        body.castShadow = true;
+        body.receiveShadow = true;
+        warriorGroup.add(body);
+        
+        // Head
+        const headGeometry = new THREE.SphereGeometry(0.25, 16, 16);
+        const headMaterial = new THREE.MeshLambertMaterial({
+            color: 0xFFD700 // Gold color for head
+        });
+        const head = new THREE.Mesh(headGeometry, headMaterial);
+        head.position.y = 0.9;
+        head.castShadow = true;
+        head.receiveShadow = true;
+        warriorGroup.add(head);
+        
+        // Weapon (sword)
+        const swordGeometry = new THREE.BoxGeometry(0.05, 1, 0.05);
+        const swordMaterial = new THREE.MeshLambertMaterial({
+            color: 0xC0C0C0 // Silver color for sword
+        });
+        const sword = new THREE.Mesh(swordGeometry, swordMaterial);
+        sword.position.set(0.4, 0.8, 0);
+        sword.rotation.z = Math.PI / 4;
+        warriorGroup.add(sword);
+        
+        // Create warrior label (sprite)
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = 256;
+        canvas.height = 128;
+        
+        context.fillStyle = 'rgba(0, 0, 0, 0.8)';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        
+        context.fillStyle = 'white';
+        context.font = '32px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText('Warrior', canvas.width / 2, canvas.height / 2);
+        
+        const texture = new THREE.CanvasTexture(canvas);
+        const spriteMaterial = new THREE.SpriteMaterial({
+            map: texture,
+            transparent: true
+        });
+        const label = new THREE.Sprite(spriteMaterial);
+        label.scale.set(3, 1.5, 1);
+        label.position.y = 1.5;
+        label.visible = this.showTitles; // Set initial visibility based on showTitles flag
+        warriorGroup.add(label);
+        
+        warriorGroup.position.set(position[0], position[1], position[2]);
+        warriorGroup.position.y = 0;
+        warriorGroup.castShadow = true;
+        warriorGroup.receiveShadow = true;
+        
+        this.scene.add(warriorGroup);
+        this.warriorSystem.warriors.set(`warrior_${Date.now()}`, {
+            mesh: warriorGroup,
+            position: position,
+            target: null
+        });
+        
+        this.updateVillagerCount(); // Update count to include warriors
+    }
+    
+    dispatchWarriors() {
+        console.log('Dispatching warriors');
+        this.warriorSystem.dispatched = true;
+        
+        // Make warriors patrol or attack animals/beasts
+        for (const [id, warrior] of this.warriorSystem.warriors) {
+            // Set a random patrol point
+            const patrolPoint = [
+                (Math.random() - 0.5) * 30,
+                0,
+                (Math.random() - 0.5) * 30
+            ];
+            
+            warrior.target = patrolPoint;
+        }
+    }
+
+    onWindowResize() {
+        if (this.camera && this.renderer) {
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+    }
+
+    onKeyDown(event) {
+        // WASD controls have been disabled to prevent interference with LLM chat input
+        // All camera movement should now be handled by OrbitControls only
+        console.log('Key pressed (WASD controls disabled):', event.code);
+    }
+
+    onMouseClick(event) {
+        const mouse = new THREE.Vector2();
+        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(mouse, this.camera);
+        
+        const villagerMeshes = Array.from(this.villagerMeshes.values());
+        
+        // Use recursive intersection to handle groups
+        const intersects = raycaster.intersectObjects(villagerMeshes, true);
+        
+        if (intersects.length > 0) {
+            // Find the parent group that has the villager data
+            let selectedMesh = intersects[0].object;
+            while (selectedMesh && !selectedMesh.userData.villager) {
+                selectedMesh = selectedMesh.parent;
+            }
+            
+            if (selectedMesh && selectedMesh.userData.villager) {
+                this.selectedVillager = selectedMesh.userData.villager;
+                this.updateVillagerInfo();
+            }
+        }
+    }
+
+    updateVillagerCount() {
+        const count = this.villagerMeshes.size;
+        if (this.uiElements.villagerCountDisplay) {
+            this.uiElements.villagerCountDisplay.textContent = count;
+        }
+        if (this.uiElements.villagerCountStat) {
+            this.uiElements.villagerCountStat.textContent = count;
+        }
+    }
+
+    updateBuildingCount() {
+        const count = this.buildingMeshes.size;
+        if (this.uiElements.buildingCount) {
+            this.uiElements.buildingCount.textContent = count;
+        }
+    }
+
+    updateResourceCount() {
+        const count = this.resourceMeshes.size;
+        if (this.uiElements.resourceCount) {
+            this.uiElements.resourceCount.textContent = count;
+        }
+    }
+
+    updateVillagerInfo() {
+        const villagerList = this.uiElements.villagerList;
+
+        if (!villagerList) return;
+
+        if (!this.selectedVillager) {
+            villagerList.innerHTML = '<p>No villager selected</p>';
+            return;
+        }
+
+        const villager = this.selectedVillager;
+        villagerList.innerHTML = `
+            <div class="villager-item selected">
+                <div><strong>${villager.id}</strong></div>
+                <div>State: <span class="state-indicator state-${villager.state}"></span>${villager.state}</div>
+                <div>Position: (${villager.position[0].toFixed(1)}, ${villager.position[1].toFixed(1)}, ${villager.position[2].toFixed(1)})</div>
+                <div>Energy: ${villager.energy.toFixed(1)}%</div>
+                <div>Hunger: ${villager.hunger.toFixed(1)}%</div>
+                <div>Social Need: ${villager.socialNeed.toFixed(1)}%</div>
+                <div>Path Points: ${villager.path.length}</div>
+            </div>
+        `;
+    }
+
+    updatePathVisualization(villager) {
+        const villagerId = villager.id;
+
+        // Remove existing path line
+        if (this.pathLines.has(villagerId)) {
+            this.scene.remove(this.pathLines.get(villagerId));
+            this.pathLines.delete(villagerId);
+        }
+
+        // Create new path line if villager has a path
+        if (villager.path.length > 1) {
+            const geometry = new THREE.BufferGeometry();
+            const positions = [];
+
+            // Add current position
+            positions.push(villager.position[0], 0.1, villager.position[2]);
+
+            // Add path points
+            for (const point of villager.path) {
+                positions.push(point[0], 0.1, point[2]);
+            }
+
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+
+            const material = new THREE.LineBasicMaterial({
+                color: this.getStateColor(villager.state),
+                linewidth: 3
+            });
+
+            const line = new THREE.Line(geometry, material);
+            line.visible = this.showPaths;
+
+            this.pathLines.set(villagerId, line);
+            this.scene.add(line);
+        }
+    }
+
+    updateGameTime() {
+        if (this.aiSystem && this.aiSystem.routineManager) {
+            const time = this.aiSystem.routineManager.currentTime;
+            const hours = Math.floor(time);
+            const minutes = Math.floor((time - hours) * 60);
+            if (this.uiElements.gameTime) {
+                this.uiElements.gameTime.textContent = `${hours}:${minutes.toString().padStart(2, '0')}`;
+            }
+        }
+    }
+
+    updateFPS() {
+        this.frameCount++;
+        const currentTime = performance.now();
+
+        if (currentTime - this.lastTime >= 1000) {
+            this.fps = Math.round(this.frameCount * 1000 / (currentTime - this.lastTime));
+            this.frameCount = 0;
+            this.lastTime = currentTime;
+            if (this.uiElements.fps) {
+                this.uiElements.fps.textContent = this.fps;
+            }
+        }
+    }
+
+    updateVillagerMeshes() {
+        for (const [villagerId, mesh] of this.villagerMeshes) {
+            const villager = mesh.userData.villager;
+
+            // Update position
+            mesh.position.set(villager.position[0], villager.position[1], villager.position[2]);
+            mesh.position.y = 0;
+
+            // Update color based on state
+            // Update the body color (first child)
+            if (mesh.children.length > 0) {
+                const body = mesh.children[0];
+                const newColor = this.getStateColor(villager.state);
+                if (body.material.color.getHex() !== newColor) {
+                    body.material.color.setHex(newColor);
+                }
+            }
+        }
+    }
+
+    updatePathVisualizations() {
+        for (const [villagerId, mesh] of this.villagerMeshes) {
+            const villager = mesh.userData.villager;
+            this.updatePathVisualization(villager);
+        }
+    }
+    
+    updateAnimals() {
+        // Update animal positions and behaviors
+        for (const [id, animal] of this.animalSystem.animals) {
+            // Simple movement logic - move towards random points
+            if (Math.random() < 0.02) { // 2% chance to change direction
+                animal.targetPosition = [
+                    animal.mesh.position.x + (Math.random() - 0.5) * 10,
+                    animal.mesh.position.y,
+                    animal.mesh.position.z + (Math.random() - 0.5) * 10
+                ];
+            }
+            
+            // Move towards target position
+            if (animal.targetPosition) {
+                const speed = 0.05;
+                const dx = animal.targetPosition[0] - animal.mesh.position.x;
+                const dz = animal.targetPosition[2] - animal.mesh.position.z;
+                
+                if (Math.abs(dx) > 0.1) {
+                    animal.mesh.position.x += Math.sign(dx) * speed;
+                }
+                if (Math.abs(dz) > 0.1) {
+                    animal.mesh.position.z += Math.sign(dz) * speed;
+                }
+            }
+            
+            // Rotate to face movement direction
+            if (animal.targetPosition) {
+                const dx = animal.targetPosition[0] - animal.mesh.position.x;
+                const dz = animal.targetPosition[2] - animal.mesh.position.z;
+                animal.mesh.rotation.y = Math.atan2(dx, dz);
+            }
+        }
+    }
+    
+    updateWarriors() {
+        // Update warrior positions and behaviors
+        for (const [id, warrior] of this.warriorSystem.warriors) {
+            // If warriors are dispatched, make them patrol
+            if (this.warriorSystem.dispatched) {
+                // Check if warrior has reached target
+                if (warrior.target) {
+                    const dx = warrior.target[0] - warrior.mesh.position.x;
+                    const dz = warrior.target[2] - warrior.mesh.position.z;
+                    
+                    // If close to target, set new target
+                    if (Math.abs(dx) < 1 && Math.abs(dz) < 1) {
+                        warrior.target = [
+                            (Math.random() - 0.5) * 30,
+                            0,
+                            (Math.random() - 0.5) * 30
+                        ];
+                    }
+                    
+                    // Move towards target
+                    const speed = 0.1;
+                    if (Math.abs(dx) > 0.1) {
+                        warrior.mesh.position.x += Math.sign(dx) * speed;
+                    }
+                    if (Math.abs(dz) > 0.1) {
+                        warrior.mesh.position.z += Math.sign(dz) * speed;
+                    }
+                    
+                    // Rotate to face movement direction
+                    warrior.mesh.rotation.y = Math.atan2(dx, dz);
+                }
+            }
+        }
+    }
+    
+    animate() {
+        requestAnimationFrame(() => this.animate());
+        
+        const deltaTime = this.clock.getDelta() * this.timeSpeed;
+        
+        // Update AI system
+        if (this.aiSystem) {
+            this.aiSystem.update(deltaTime);
+        }
+        
+        // Update 3D visualization
+        this.updateVillagerMeshes();
+        this.updatePathVisualizations();
+        this.updateAnimals();
+        this.updateWarriors();
+        
+        // Update UI
+        this.updateGameTime();
+        this.updateFPS();
+        this.updateVillagerInfo();
+        
+        // Update controls
+        if (this.controls) {
+            this.controls.update();
+        }
+        
+        // Render scene
+        if (this.renderer && this.scene && this.camera) {
+            this.renderer.render(this.scene, this.camera);
+        }
+    }
+}
+
+// Initialize the application when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    // Get the Hugging Face token from the window object
+    // This could be set by a server-side process that has access to the HF_TOKEN environment variable
+    const hfToken = window.HF_TOKEN || null;
+    
+    // Log token status for debugging
+    console.log('HF_TOKEN from window.HF_TOKEN:', hfToken ? 'Set' : 'Not set');
+    if (hfToken) {
+        console.log('HF_TOKEN length:', hfToken.length);
+    }
+    
+    window.app = new VillageVisualizationApp(hfToken);
+});

index.html

@@ -1,19 +1,398 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Medieval Village AI System - Three.js Visualization</title>
+    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+            background-color: #2c3e50;
+            color: white;
+            overflow: hidden;
+        }
+
+        #container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #ui-panel {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 10px;
+            border-radius: 10px;
+            min-width: 200px;
+            max-width: 250px;
+            height: calc(100vh - 40px);
+            overflow-y: auto;
+            z-index: 101;
+        }
+        
+
+        #stats-panel {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 20px;
+            border-radius: 10px;
+            min-width: 200px;
+            z-index: 100;
+        }
+
+        #villager-info {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 20px;
+            border-radius: 10px;
+            min-width: 300px;
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 100;
+        }
+
+        .control-group {
+            margin-bottom: 8px;
+        }
+        
+        .control-group label {
+            font-size: 12px;
+        }
+        
+        .control-group input, .control-group button {
+            padding: 3px;
+            font-size: 10px;
+        }
+        
+        .control-group h4 {
+            font-size: 14px;
+            margin: 8px 0 4px 0;
+        }
+        
+        .control-group button {
+            background-color: #3498db;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            border: none;
+            border-radius: 3px;
+        }
+        
+        .control-group button:hover {
+            background-color: #2980b9;
+        }
+        
+        .weather-btn, .animal-btn, .warrior-btn {
+            background-color: #3498db;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            margin: 1px;
+            padding: 2px;
+            font-size: 12px;
+            width: 30px;
+            height: 30px;
+            display: inline-block;
+        }
+        
+        .disaster-btn {
+            background-color: #e74c3c;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            margin: 1px;
+            padding: 2px;
+            font-size: 12px;
+            width: 30px;
+            height: 30px;
+            display: inline-block;
+        }
+        
+        .weather-btn:hover, .disaster-btn:hover, .animal-btn:hover, .warrior-btn:hover {
+            background-color: #2980b9;
+        }
+        
+        .disaster-btn {
+            background-color: #e74c3c;
+        }
+        
+        .disaster-btn:hover {
+            background-color: #c0392b;
+        }
+        
+        .animal-btn {
+            background-color: #27ae60;
+        }
+        
+        .animal-btn:hover {
+            background-color: #229954;
+        }
+        
+        .warrior-btn {
+            background-color: #f39c12;
+        }
+        
+        .warrior-btn:hover {
+            background-color: #d68910;
+        }
+
+        .villager-item {
+            padding: 10px;
+            margin-bottom: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .villager-item:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .villager-item.selected {
+            background: rgba(52, 152, 219, 0.3);
+            border: 2px solid #3498db;
+        }
+
+        .state-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+
+        .state-sleep { background-color: #7f8c8d; }
+        .state-work { background-color: #e74c3c; }
+        .state-eat { background-color: #f39c12; }
+        .state-socialize { background-color: #9b59b6; }
+        .state-idle { background-color: #95a5a6; }
+
+        #instructions {
+            position: absolute;
+            bottom: 250px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 15px;
+            border-radius: 10px;
+            max-width: 300px;
+            font-size: 12px;
+            z-index: 100;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+
+    <!-- UI Controls Panel -->
+    <div id="ui-panel">
+        <h3>Village Controls</h3>
+        
+        <div class="control-group">
+            <label for="villager-count">Villager Count: <span id="villager-count-display">0</span></label>
+        </div>
+        
+        <div class="control-group">
+            <label for="add-villager-btn">Add Villager</label>
+            <button id="add-villager-btn" title="Add New Villager">👨‍🌾</button>
+        </div>
+        
+        <div class="control-group">
+            <label for="reset-btn">Reset Simulation</label>
+            <button id="reset-btn" title="Reset All">🔄</button>
+        </div>
+        
+        <div class="control-group">
+            <label for="time-speed">Time Speed: <span id="time-speed-display">1.0x</span></label>
+            <input type="range" id="time-speed" min="0.1" max="5" step="0.1" value="1.0">
+        </div>
+        
+        <div class="control-group">
+            <label for="show-paths">Show Movement Paths</label>
+            <input type="checkbox" id="show-paths" checked>
+        </div>
+        
+        <div class="control-group">
+            <label for="show-titles">Show Villager Titles</label>
+            <input type="checkbox" id="show-titles" checked>
+        </div>
+        
+        <!-- Weather Controls -->
+        <div class="control-group">
+            <h4>Weather Controls</h4>
+        </div>
+        
+        <div class="control-group">
+            <label for="fog-control">Fog Intensity</label>
+            <input type="range" id="fog-control" min="0" max="100" value="50">
+        </div>
+        
+        <div class="control-group">
+            <button id="weather-sun" class="weather-btn" title="Sunny Weather">☀️</button>
+            <button id="weather-rain" class="weather-btn" title="Rain Weather">🌧️</button>
+            <button id="weather-snow" class="weather-btn" title="Snow Weather">❄️</button>
+        </div>
+        
+        <!-- Disaster Controls -->
+        <div class="control-group">
+            <h4>Disaster Controls</h4>
+        </div>
+        
+        <div class="control-group">
+            <button id="disaster-fire" class="disaster-btn" title="Fire Disaster">🔥</button>
+            <button id="disaster-hurricane" class="disaster-btn" title="Hurricane Disaster">🌪️</button>
+            <button id="disaster-flood" class="disaster-btn" title="Flood Disaster">🌊</button>
+            <button id="disaster-earthquake" class="disaster-btn" title="Earthquake Disaster">🌍</button>
+            <button id="disaster-plague" class="disaster-btn" title="Plague Disaster">🦠</button>
+        </div>
+        
+        <!-- Animal/Beast Controls -->
+        <div class="control-group">
+            <h4>Animal/Beast Controls</h4>
+        </div>
+        
+        <div class="control-group">
+            <button id="spawn-wolf" class="animal-btn" title="Spawn Wolf">🐺</button>
+            <button id="spawn-bear" class="animal-btn" title="Spawn Bear">🐻</button>
+            <button id="spawn-dragon" class="animal-btn" title="Spawn Dragon">🐉</button>
+        </div>
+        
+        <!-- Warrior Controls -->
+        <div class="control-group">
+            <h4>Warrior Controls</h4>
+        </div>
+        
+        <div class="control-group">
+            <button id="add-warrior" class="warrior-btn" title="Add Warrior">⚔️</button>
+            <button id="dispatch-warriors" class="warrior-btn" title="Dispatch Warriors">🛡️</button>
+        </div>
+        
+        <!-- LLM Controls -->
+        <div class="control-group">
+            <h4>LLM Controls <span id="llm-status-indicator" style="width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 10px;"></span></h4>
+        </div>
+        
+        <div class="control-group">
+            <label for="llm-model">Select LLM Model:</label>
+            <select id="llm-model" style="width: 100%; padding: 2px; font-size: 11px;">
+                <option value="meta-llama/Llama-3.1-8B-Instruct">Llama-3.1-8B-Instruct</option>
+                <option value="google/gemma-3-270m-it">Gemma-3-270m-it</option>
+                <option value="google/gemma-3-4b-it">Gemma-3-4b-it</option>
+                <option value="google/gemma-3-27b-it">Gemma-3-27b-it</option>
+                <option value="Qwen/Qwen3-4B-Instruct-2507">Qwen3-4B-Instruct</option>
+                <option value="Qwen/Qwen3-8B">Qwen3-8B</option>
+                <option value="mistralai/Mistral-7B-Instruct-v0.3">Mistral-7B-Instruct</option>
+                <option value="HuggingFaceH4/zephyr-7b-beta">Zephyr-7b-beta</option>
+                <option value="TinyLlama/TinyLlama-1.1B-Chat-v1.0">TinyLlama-1.1B-Chat</option>
+                <option value="microsoft/Phi-3-mini-4k-instruct">Phi-3-mini-4k</option>
+                <option value="stabilityai/stablelm-2-1_6b">StableLM-2-1_6b</option>
+                <option value="NousResearch/Hermes-2-Pro-Llama-3-8B">Hermes-2-Pro-Llama-3</option>
+                <option value="CohereForAI/c4ai-command-r-v01">C4AI-Command-R</option>
+                <option value="nvidia/Nemotron-Research-Reasoning-Qwen-1.5B">Nemotron-Qwen-1.5B</option>
+                <option value="inclusionAI/AReaL-boba-2-8B">AReaL-boba-2-8B</option>
+            </select>
+        </div>
+        
+        <div class="control-group">
+            <label for="llm-query">Ask the LLM:</label>
+            <input type="text" id="llm-query" placeholder="Enter your question..." style="width: 100%; padding: 2px; font-size: 11px;">
+        </div>
+        
+        <div class="control-group">
+            <button id="llm-submit" style="width: 100%; padding: 3px; font-size: 11px;">Submit Query</button>
+        </div>
+        
+        <div class="control-group">
+            <label for="llm-response">LLM Response:</label>
+            <div id="llm-response" style="background: rgba(255, 255, 255, 0.1); padding: 5px; border-radius: 5px; min-height: 50px; max-height: 100px; overflow-y: auto; font-size: 11px;">
+                No response yet. Submit a query to get started.
+            </div>
+        </div>
+        
+        <div class="control-group">
+            <div style="background: rgba(255, 255, 0, 0.1); padding: 5px; border-radius: 5px; font-size: 9px; margin-top: 5px;">
+                <strong>API Token Required:</strong> To use the LLM functionality, you need to set your Hugging Face API token.
+                Get one from <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: #3498db;">Hugging Face</a>.
+                <br><br>
+                If running this application with a server that has access to the HF_TOKEN environment variable, the token will be automatically used.
+                <br><br>
+                For manual setup, you can set the token in the browser console with:
+                <code>window.HF_TOKEN = 'your-actual-token-here'</code>
+                <br>or<br>
+                <code>app.llmHandler.setApiToken('your-actual-token-here')</code>
+                <br><br>
+                Check the browser console for debugging information about the token status.
+            </div>
+        </div>
+    </div>
+
+    <!-- Stats Panel -->
+    <div id="stats-panel">
+        <h3>Simulation Stats</h3>
+        <div id="stats-content">
+            <div>Time: <span id="game-time">0:00</span></div>
+            <div>FPS: <span id="fps">0</span></div>
+            <div>Villagers: <span id="villager-count-stat">0</span></div>
+            <div>Buildings: <span id="building-count">0</span></div>
+            <div>Resources: <span id="resource-count">0</span></div>
+        </div>
+    </div>
+
+    <!-- Villager Information Panel -->
+    <div id="villager-info">
+        <h3>Villager Information</h3>
+        <div id="villager-list">
+            <p>No villagers selected</p>
+        </div>
+    </div>
+
+    <!-- Instructions Panel -->
+    <div id="instructions">
+        <h4>Controls:</h4>
+        <ul>
+            <li><strong>Mouse:</strong> Look around</li>
+            <li><strong>WASD:</strong> Move camera</li>
+            <li><strong>Space:</strong> Up</li>
+            <li><strong>Shift:</strong> Down</li>
+            <li><strong>Click villager:</strong> Select for info</li>
+        </ul>
+        <h4>Legend:</h4>
+        <ul>
+            <li><span class="state-indicator state-sleep"></span>Sleep</li>
+            <li><span class="state-indicator state-work"></span>Work</li>
+            <li><span class="state-indicator state-eat"></span>Eat</li>
+            <li><span class="state-indicator state-socialize"></span>Socialize</li>
+        </ul>
+    </div>
+
+    <!-- Hugging Face Token -->
+    <script>
+        // In a server-side implementation, the HF_TOKEN environment variable would be injected here
+        // For example, a Node.js server could inject it like this:
+        // window.HF_TOKEN = process.env.HF_TOKEN;
+        //
+        // For client-side usage, users can set the token in the browser console:
+        // window.HF_TOKEN = "your-actual-hugging-face-token";
+        //
+        // For testing purposes, you can uncomment the line below and replace with your actual token:
+        // window.HF_TOKEN = "your-actual-hugging-face-token";
+        window.HF_TOKEN = null;
+    </script>
+    
+    <!-- Three.js and Application Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js?v=1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js?v=1"></script>
+    <script type="module" src="app_new.js?v=1"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1 @@
+gradio==4.36.1

simple_app.js

@@ -0,0 +1,127 @@
+// Simple Three.js test application
+import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+
+class SimpleVillageApp {
+    constructor() {
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+
+        this.init();
+    }
+
+    init() {
+        console.log('Initializing Simple Village App...');
+        this.initThreeJS();
+        this.createEnvironment();
+        this.animate();
+        console.log('Simple Village App initialized successfully');
+    }
+
+    initThreeJS() {
+        // Scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x87CEEB);
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.1,
+            1000
+        );
+        this.camera.position.set(20, 20, 20);
+        this.camera.lookAt(0, 0, 0);
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.shadowMap.enabled = true;
+
+        const container = document.getElementById('container');
+        if (container) {
+            container.appendChild(this.renderer.domElement);
+            console.log('Renderer added to DOM');
+        }
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 5);
+        directionalLight.castShadow = true;
+        this.scene.add(directionalLight);
+
+        // Ground plane
+        const groundGeometry = new THREE.PlaneGeometry(100, 100);
+        const groundMaterial = new THREE.MeshLambertMaterial({
+            color: 0x228B22,
+            transparent: true,
+            opacity: 0.8
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        this.scene.add(ground);
+
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x222222);
+        this.scene.add(gridHelper);
+
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+
+    createEnvironment() {
+        // Create some simple buildings
+        this.createBuilding(5, 0, 5, 0x8B4513);
+        this.createBuilding(-5, 0, -5, 0x696969);
+        this.createBuilding(0, 0, 0, 0xFFD700);
+
+        // Create some villagers
+        this.createVillager(0, 0, 0, 0xff0000);
+        this.createVillager(5, 0, 5, 0x00ff00);
+        this.createVillager(-3, 0, -3, 0x0000ff);
+    }
+
+    createBuilding(x, y, z, color) {
+        const geometry = new THREE.BoxGeometry(3, 3, 3);
+        const material = new THREE.MeshLambertMaterial({ color: color });
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.set(x, y + 1.5, z);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        this.scene.add(mesh);
+    }
+
+    createVillager(x, y, z, color) {
+        const geometry = new THREE.SphereGeometry(0.5, 16, 16);
+        const material = new THREE.MeshLambertMaterial({ color: color });
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.set(x, y + 0.5, z);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        this.scene.add(mesh);
+    }
+
+    onWindowResize() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    animate() {
+        requestAnimationFrame(() => this.animate());
+
+        // Simple rotation for testing
+        this.scene.rotation.y += 0.001;
+
+        this.renderer.render(this.scene, this.camera);
+    }
+}
+
+// Initialize the application when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new SimpleVillageApp();
+});

src/ai/README.md

@@ -0,0 +1,109 @@
+# Medieval Village AI System
+
+This directory contains the AI system implementation for a medieval village simulator. The system includes various components for managing villager behavior, movement, and interactions.
+
+## Components
+
+### Pathfinding (`pathfinding.js`)
+Implements A* pathfinding using navigation meshes for efficient village-scale navigation in 3D space.
+
+Key features:
+- Navigation mesh support for complex 3D environments
+- Path calculation between any two points in the village
+- Entity movement along calculated paths
+
+### Behavior Trees (`behavior.js`)
+Implements a behavior tree system for complex villager decision-making.
+
+Key features:
+- Behavior tree nodes (Selector, Sequence, Action, Condition)
+- Villager behavior management for daily routines
+- Extensible behavior system for custom actions
+
+### Crowd Simulation (`crowd.js`)
+Implements crowd simulation with collision avoidance for multiple villagers.
+
+Key features:
+- Steering behaviors for natural movement
+- Spatial partitioning for efficient neighbor queries
+- Collision avoidance to prevent villagers from walking through each other
+
+### Daily Routines (`routines.js`)
+Manages villager daily routines including work, rest, and social interactions.
+
+Key features:
+- Schedule-based routine system
+- Activity management (sleep, work, eat, socialize)
+- Need-based systems (energy, hunger, social)
+
+### Environmental Interaction (`environment.js`)
+Handles how villagers interact with their environment, including resource gathering and building usage.
+
+Key features:
+- Resource management system
+- Building interaction system
+- Inventory system for villagers
+
+### Performance Optimization (`optimization.js`)
+Implements various optimization techniques for managing multiple AI entities efficiently.
+
+Key features:
+- Entity manager with update queuing
+- Spatial partitioning for efficient queries
+- Object pooling to reduce garbage collection
+
+### Main System (`main.js`)
+Integrates all components into a cohesive AI system for the village simulator.
+
+## Integration with Three.js
+
+The AI system is designed to integrate with Three.js for 3D rendering:
+
+1. Pathfinding uses Three.js Vector3 for positions
+2. Crowd simulation uses Three.js Vector3 for positions and velocities
+3. Environmental interactions use Three.js Vector3 for positions
+4. The main system takes a Three.js scene object for integration
+
+## Usage Example
+
+```javascript
+import VillageAISystem from './ai/main.js';
+import * as THREE from 'three';
+
+// Create a Three.js scene
+const scene = new THREE.Scene();
+
+// Initialize the AI system
+const aiSystem = new VillageAISystem(scene);
+
+// Create villagers
+const villager1 = aiSystem.createVillager('villager1', new THREE.Vector3(0, 0, 0));
+const villager2 = aiSystem.createVillager('villager2', new THREE.Vector3(5, 0, 5));
+
+// In your animation loop
+function animate(deltaTime) {
+    // Update the AI system
+    aiSystem.update(deltaTime);
+    
+    // Render the scene
+    renderer.render(scene, camera);
+    
+    requestAnimationFrame(animate);
+}
+```
+
+## Performance Considerations
+
+1. **Entity Updates**: Uses a queuing system to limit the number of entities updated per frame
+2. **Spatial Partitioning**: Implements spatial partitioning for efficient neighbor queries
+3. **Object Pooling**: Reduces garbage collection through object pooling
+4. **Level of Detail**: In a full implementation, you would add LOD systems to reduce AI complexity for distant entities
+
+## Extending the System
+
+The system is designed to be extensible:
+
+1. Add new behavior tree nodes for custom actions
+2. Extend the villager class for specialized villager types
+3. Add new resource and building types
+4. Implement additional optimization techniques as needed

src/ai/behavior.js

@@ -0,0 +1,183 @@
+/**
+ * Behavior Tree Implementation for Villager AI
+ * 
+ * This implementation uses a behavior tree approach to manage complex villager behaviors
+ * including decision-making for daily routines, work, rest, and social interactions.
+ */
+
+// Base Node class for behavior tree
+class Node {
+    constructor() {
+        this.status = 'INVALID'; // INVALID, SUCCESS, FAILURE, RUNNING
+    }
+
+    execute(agent, deltaTime) {
+        throw new Error('Execute method must be implemented');
+    }
+}
+
+// Composite node that can have children
+class CompositeNode extends Node {
+    constructor() {
+        super();
+        this.children = [];
+    }
+
+    addChild(child) {
+        this.children.push(child);
+    }
+}
+
+// Selector node - tries children in order until one succeeds
+class SelectorNode extends CompositeNode {
+    constructor() {
+        super();
+        this.currentChildIndex = 0;
+    }
+
+    execute(agent, deltaTime) {
+        // If we were running a child previously, continue with it
+        if (this.status === 'RUNNING' && this.currentChildIndex < this.children.length) {
+            const result = this.children[this.currentChildIndex].execute(agent, deltaTime);
+            if (result === 'RUNNING') {
+                return 'RUNNING';
+            } else if (result === 'SUCCESS') {
+                this.status = 'SUCCESS';
+                this.currentChildIndex = 0;
+                return 'SUCCESS';
+            }
+            // If child failed, try next child
+        }
+
+        // Try children in order
+        for (let i = 0; i < this.children.length; i++) {
+            const result = this.children[i].execute(agent, deltaTime);
+            if (result === 'RUNNING') {
+                this.status = 'RUNNING';
+                this.currentChildIndex = i;
+                return 'RUNNING';
+            } else if (result === 'SUCCESS') {
+                this.status = 'SUCCESS';
+                this.currentChildIndex = 0;
+                return 'SUCCESS';
+            }
+            // If child failed, try next child
+        }
+
+        // All children failed
+        this.status = 'FAILURE';
+        this.currentChildIndex = 0;
+        return 'FAILURE';
+    }
+}
+
+// Sequence node - executes children in order until one fails
+class SequenceNode extends CompositeNode {
+    constructor() {
+        super();
+        this.currentChildIndex = 0;
+    }
+
+    execute(agent, deltaTime) {
+        // If we were running a child previously, continue with it
+        if (this.status === 'RUNNING' && this.currentChildIndex < this.children.length) {
+            const result = this.children[this.currentChildIndex].execute(agent, deltaTime);
+            if (result === 'RUNNING') {
+                return 'RUNNING';
+            } else if (result === 'FAILURE') {
+                this.status = 'FAILURE';
+                this.currentChildIndex = 0;
+                return 'FAILURE';
+            }
+            // If child succeeded, try next child
+        }
+
+        // Try children in order
+        for (let i = this.currentChildIndex; i < this.children.length; i++) {
+            const result = this.children[i].execute(agent, deltaTime);
+            if (result === 'RUNNING') {
+                this.status = 'RUNNING';
+                this.currentChildIndex = i;
+                return 'RUNNING';
+            } else if (result === 'FAILURE') {
+                this.status = 'FAILURE';
+                this.currentChildIndex = 0;
+                return 'FAILURE';
+            }
+            // If child succeeded, continue to next child
+        }
+
+        // All children succeeded
+        this.status = 'SUCCESS';
+        this.currentChildIndex = 0;
+        return 'SUCCESS';
+    }
+}
+
+// Leaf node for specific actions
+class ActionNode extends Node {
+    constructor(action) {
+        super();
+        this.action = action;
+    }
+
+    execute(agent, deltaTime) {
+        return this.action(agent, deltaTime);
+    }
+}
+
+// Condition node to check specific conditions
+class ConditionNode extends Node {
+    constructor(condition) {
+        super();
+        this.condition = condition;
+    }
+
+    execute(agent, deltaTime) {
+        return this.condition(agent, deltaTime) ? 'SUCCESS' : 'FAILURE';
+    }
+}
+
+// Villager behavior tree implementation
+class VillagerBehaviorTree {
+    constructor() {
+        this.root = this.createBehaviorTree();
+    }
+
+    createBehaviorTree() {
+        // Root selector - decides what the villager should do
+        const root = new SelectorNode();
+
+        // Check if it's time to sleep
+        const sleepSequence = new SequenceNode();
+        sleepSequence.addChild(new ConditionNode((agent) => agent.isTired()));
+        sleepSequence.addChild(new ActionNode((agent) => agent.sleep()));
+
+        // Check if it's time to work
+        const workSequence = new SequenceNode();
+        workSequence.addChild(new ConditionNode((agent) => agent.shouldWork()));
+        workSequence.addChild(new ActionNode((agent) => agent.work()));
+
+        // Check if it's time to socialize
+        const socializeSequence = new SequenceNode();
+        socializeSequence.addChild(new ConditionNode((agent) => agent.shouldSocialize()));
+        socializeSequence.addChild(new ActionNode((agent) => agent.socialize()));
+
+        // Default action - idle
+        const idleAction = new ActionNode((agent) => agent.idle());
+
+        // Add all sequences to root
+        root.addChild(sleepSequence);
+        root.addChild(workSequence);
+        root.addChild(socializeSequence);
+        root.addChild(idleAction);
+
+        return root;
+    }
+
+    update(agent, deltaTime) {
+        this.root.execute(agent, deltaTime);
+    }
+}
+
+export { VillagerBehaviorTree, Node, CompositeNode, SelectorNode, SequenceNode, ActionNode, ConditionNode };

src/ai/crowd.js

@@ -0,0 +1,263 @@
+// No direct THREE.js import needed
+
+/**
+ * Crowd Simulation with Collision Avoidance for Villagers
+ * 
+ * This implementation uses a combination of steering behaviors and spatial partitioning
+ * to efficiently manage crowd simulation with collision avoidance for multiple villagers.
+ */
+
+class CrowdManager {
+    constructor() {
+        this.villagers = [];
+        this.spatialGrid = new SpatialGrid(100, 100, 5); // 100x100 grid with 5 unit cells
+    }
+
+    /**
+     * Add a villager to the crowd simulation
+     * @param {Villager} villager - The villager to add
+     */
+    addVillager(villager) {
+        this.villagers.push(villager);
+        this.spatialGrid.insert(villager);
+    }
+
+    /**
+     * Update all villagers in the crowd simulation
+     * @param {number} deltaTime - Time since last frame
+     */
+    update(deltaTime) {
+        // Update spatial grid
+        this.spatialGrid.clear();
+        for (const villager of this.villagers) {
+            this.spatialGrid.insert(villager);
+        }
+
+        // Update each villager
+        for (const villager of this.villagers) {
+            // Get nearby villagers for collision avoidance
+            const nearby = this.spatialGrid.query(villager.position, 10);
+
+            // Calculate steering forces
+            const avoidanceForce = this.calculateAvoidanceForce(villager, nearby);
+            const steeringForce = this.calculateSteeringForce(villager);
+
+            // Apply forces to velocity (using arrays)
+            this.addScaledVector(villager.velocity, avoidanceForce, deltaTime);
+            this.addScaledVector(villager.velocity, steeringForce, deltaTime);
+
+            // Limit velocity
+            const speed = this.calculateVectorLength(villager.velocity);
+            if (speed > villager.maxSpeed) {
+                this.normalizeVector(villager.velocity);
+                this.scaleVectorInPlace(villager.velocity, villager.maxSpeed);
+            }
+
+            // Update position
+            const moveVector = this.scaleVector(villager.velocity, deltaTime);
+            this.addVectors(villager.position, moveVector);
+        }
+    }
+
+    /**
+     * Calculate avoidance force to prevent collisions
+     * @param {Villager} villager - The villager to calculate for
+     * @param {Array<Villager>} nearby - Nearby villagers
+     * @returns {Array} Avoidance force as [x, y, z]
+     */
+    calculateAvoidanceForce(villager, nearby) {
+        const force = [0, 0, 0];
+
+        for (const neighbor of nearby) {
+            if (neighbor === villager) continue;
+
+            const distance = this.calculateDistance(villager.position, neighbor.position);
+            if (distance < villager.avoidanceRadius && distance > 0) {
+                // Calculate avoidance direction (away from neighbor)
+                const direction = this.subtractVectors(villager.position, neighbor.position);
+                this.normalizeVector(direction);
+
+                // Scale force by inverse of distance (stronger when closer)
+                const strength = (villager.avoidanceRadius - distance) / villager.avoidanceRadius;
+                this.addScaledVector(force, direction, strength);
+            }
+        }
+
+        return this.scaleVector(force, villager.avoidanceWeight);
+    }
+
+    /**
+     * Calculate distance between two positions
+     */
+    calculateDistance(pos1, pos2) {
+        const dx = pos1[0] - pos2[0];
+        const dy = pos1[1] - pos2[1];
+        const dz = pos1[2] - pos2[2];
+        return Math.sqrt(dx * dx + dy * dy + dz * dz);
+    }
+
+    /**
+     * Subtract two vectors
+     */
+    subtractVectors(vec1, vec2) {
+        return [
+            vec1[0] - vec2[0],
+            vec1[1] - vec2[1],
+            vec1[2] - vec2[2]
+        ];
+    }
+
+    /**
+     * Normalize a vector
+     */
+    normalizeVector(vec) {
+        const length = Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1] + vec[2] * vec[2]);
+        if (length > 0) {
+            vec[0] /= length;
+            vec[1] /= length;
+            vec[2] /= length;
+        }
+    }
+
+    /**
+     * Add scaled vector to another vector
+     */
+    addScaledVector(target, source, scale) {
+        target[0] += source[0] * scale;
+        target[1] += source[1] * scale;
+        target[2] += source[2] * scale;
+    }
+
+    /**
+     * Scale a vector
+     */
+    scaleVector(vec, scale) {
+        return [
+            vec[0] * scale,
+            vec[1] * scale,
+            vec[2] * scale
+        ];
+    }
+
+    /**
+     * Calculate vector length
+     */
+    calculateVectorLength(vec) {
+        return Math.sqrt(vec[0] * vec[0] + vec[1] * vec[1] + vec[2] * vec[2]);
+    }
+
+    /**
+     * Scale vector in place
+     */
+    scaleVectorInPlace(vec, scale) {
+        vec[0] *= scale;
+        vec[1] *= scale;
+        vec[2] *= scale;
+    }
+
+    /**
+     * Add two vectors
+     */
+    addVectors(target, source) {
+        target[0] += source[0];
+        target[1] += source[1];
+        target[2] += source[2];
+    }
+
+    /**
+     * Calculate steering force to follow path
+     * @param {Villager} villager - The villager to calculate for
+     * @returns {Array} Steering force as [x, y, z]
+     */
+    calculateSteeringForce(villager) {
+        if (villager.path.length === 0) return [0, 0, 0];
+
+        const target = villager.path[0];
+        const direction = this.subtractVectors(target, villager.position);
+        this.normalizeVector(direction);
+        const desired = this.scaleVector(direction, villager.maxSpeed);
+        const steer = this.subtractVectors(desired, villager.velocity);
+
+        return this.scaleVector(steer, villager.steeringWeight);
+    }
+}
+
+/**
+ * Spatial Grid for efficient neighbor queries
+ */
+class SpatialGrid {
+    constructor(width, height, cellSize) {
+        this.width = width;
+        this.height = height;
+        this.cellSize = cellSize;
+        this.grid = [];
+        
+        // Initialize grid
+        const cols = Math.ceil(width / cellSize);
+        const rows = Math.ceil(height / cellSize);
+        for (let i = 0; i < cols * rows; i++) {
+            this.grid.push([]);
+        }
+    }
+
+    /**
+     * Get cell index for a position
+     * @param {Array} position - Position to get cell for [x, y, z]
+     * @returns {number} Cell index
+     */
+    getCellIndex(position) {
+        const col = Math.floor(position[0] / this.cellSize);
+        const row = Math.floor(position[2] / this.cellSize);
+        return row * Math.ceil(this.width / this.cellSize) + col;
+    }
+
+    /**
+     * Insert an object into the grid
+     * @param {Object} obj - Object to insert
+     */
+    insert(obj) {
+        const index = this.getCellIndex(obj.position);
+        if (index >= 0 && index < this.grid.length) {
+            this.grid[index].push(obj);
+        }
+    }
+
+    /**
+     * Clear the grid
+     */
+    clear() {
+        for (let i = 0; i < this.grid.length; i++) {
+            this.grid[i] = [];
+        }
+    }
+
+    /**
+     * Query objects within a radius
+     * @param {Array} position - Center position [x, y, z]
+     * @param {number} radius - Query radius
+     * @returns {Array<Object>} Objects within radius
+     */
+    query(position, radius) {
+        const results = [];
+        const col = Math.floor(position[0] / this.cellSize);
+        const row = Math.floor(position[2] / this.cellSize);
+        const radiusCells = Math.ceil(radius / this.cellSize);
+        
+        const cols = Math.ceil(this.width / this.cellSize);
+        const rows = Math.ceil(this.height / this.cellSize);
+        
+        // Check surrounding cells
+        for (let r = Math.max(0, row - radiusCells); r <= Math.min(rows - 1, row + radiusCells); r++) {
+            for (let c = Math.max(0, col - radiusCells); c <= Math.min(cols - 1, col + radiusCells); c++) {
+                const index = r * cols + c;
+                if (index >= 0 && index < this.grid.length) {
+                    results.push(...this.grid[index]);
+                }
+            }
+        }
+        
+        return results;
+    }
+}
+
+export default CrowdManager;

src/ai/environment.js

@@ -0,0 +1,233 @@
+import { Villager } from './routines.js';
+
+/**
+ * Environmental Interaction System for Villager AI
+ * 
+ * This implementation handles how villagers interact with their environment,
+ * including resource gathering and building usage.
+ */
+class EnvironmentInteractionSystem {
+    constructor() {
+        this.resources = new Map(); // Map of resource IDs to resource objects
+        this.buildings = new Map(); // Map of building IDs to building objects
+    }
+
+    /**
+     * Add a resource to the environment
+     * @param {string} id - Resource identifier
+     * @param {Resource} resource - Resource object
+     */
+    addResource(id, resource) {
+        this.resources.set(id, resource);
+    }
+
+    /**
+     * Add a building to the environment
+     * @param {string} id - Building identifier
+     * @param {Building} building - Building object
+     */
+    addBuilding(id, building) {
+        this.buildings.set(id, building);
+    }
+
+    /**
+     * Find the nearest resource of a specific type
+     * @param {Array} position - Search position [x, y, z]
+     * @param {string} type - Resource type
+     * @returns {Resource|null} Nearest resource or null if none found
+     */
+    findNearestResource(position, type) {
+        let nearest = null;
+        let minDistance = Infinity;
+
+        for (const [id, resource] of this.resources) {
+            if (resource.type === type && resource.amount > 0) {
+                const distance = this.calculateDistance(position, resource.position);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearest = resource;
+                }
+            }
+        }
+
+        return nearest;
+    }
+
+    /**
+     * Find the nearest building of a specific type
+     * @param {Array} position - Search position [x, y, z]
+     * @param {string} type - Building type
+     * @returns {Building|null} Nearest building or null if none found
+     */
+    findNearestBuilding(position, type) {
+        let nearest = null;
+        let minDistance = Infinity;
+
+        for (const [id, building] of this.buildings) {
+            if (building.type === type) {
+                const distance = this.calculateDistance(position, building.position);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearest = building;
+                }
+            }
+        }
+
+        return nearest;
+    }
+
+    /**
+     * Calculate distance between two points
+     * @param {Array} pos1 - First position [x, y, z]
+     * @param {Array} pos2 - Second position [x, y, z]
+     * @returns {number} Distance between points
+     */
+    calculateDistance(pos1, pos2) {
+        return Math.sqrt(
+            Math.pow(pos1[0] - pos2[0], 2) +
+            Math.pow(pos1[1] - pos2[1], 2) +
+            Math.pow(pos1[2] - pos2[2], 2)
+        );
+    }
+
+    /**
+     * Gather a resource
+     * @param {Villager} villager - Villager gathering the resource
+     * @param {Resource} resource - Resource to gather
+     * @returns {boolean} True if successful
+     */
+    gatherResource(villager, resource) {
+        if (!resource || resource.amount <= 0) return false;
+
+        // Check if villager is close enough to gather
+        if (this.calculateDistance(villager.position, resource.position) > resource.gatherRadius) {
+            return false;
+        }
+
+        // Gather the resource
+        const amount = Math.min(resource.gatherAmount, resource.amount);
+        resource.amount -= amount;
+        villager.inventory.add(resource.type, amount);
+
+        return true;
+    }
+
+    /**
+     * Use a building
+     * @param {Villager} villager - Villager using the building
+     * @param {Building} building - Building to use
+     * @returns {boolean} True if successful
+     */
+    useBuilding(villager, building) {
+        if (!building) return false;
+
+        // Check if villager is close enough to use
+        if (this.calculateDistance(villager.position, building.position) > building.useRadius) {
+            return false;
+        }
+
+        // Use the building
+        return building.use(villager);
+    }
+}
+
+/**
+ * Resource class
+ */
+class Resource {
+    constructor(id, type, position, amount, gatherRadius = 2, gatherAmount = 1) {
+        this.id = id;
+        this.type = type; // 'wood', 'stone', 'food', etc.
+        this.position = position;
+        this.amount = amount;
+        this.gatherRadius = gatherRadius;
+        this.gatherAmount = gatherAmount;
+    }
+}
+
+/**
+ * Building class
+ */
+class Building {
+    constructor(id, type, position, useRadius = 3) {
+        this.id = id;
+        this.type = type; // 'house', 'workshop', 'market', etc.
+        this.position = position;
+        this.useRadius = useRadius;
+        this.occupancy = 0;
+        this.maxOccupancy = 1;
+    }
+
+    /**
+     * Use the building
+     * @param {Villager} villager - Villager using the building
+     * @returns {boolean} True if successful
+     */
+    use(villager) {
+        if (this.occupancy >= this.maxOccupancy) return false;
+
+        this.occupancy++;
+        // Simulate building usage
+        setTimeout(() => {
+            this.occupancy--;
+        }, 5000); // Occupied for 5 seconds
+
+        return true;
+    }
+}
+
+/**
+ * Villager inventory system
+ */
+class Inventory {
+    constructor() {
+        this.items = new Map(); // Map of item types to quantities
+    }
+
+    /**
+     * Add items to inventory
+     * @param {string} type - Item type
+     * @param {number} amount - Amount to add
+     */
+    add(type, amount) {
+        if (this.items.has(type)) {
+            this.items.set(type, this.items.get(type) + amount);
+        } else {
+            this.items.set(type, amount);
+        }
+    }
+
+    /**
+     * Remove items from inventory
+     * @param {string} type - Item type
+     * @param {number} amount - Amount to remove
+     * @returns {boolean} True if successful
+     */
+    remove(type, amount) {
+        if (!this.items.has(type)) return false;
+
+        const current = this.items.get(type);
+        if (current < amount) return false;
+
+        this.items.set(type, current - amount);
+        if (this.items.get(type) === 0) {
+            this.items.delete(type);
+        }
+
+        return true;
+    }
+
+    /**
+     * Get item count
+     * @param {string} type - Item type
+     * @returns {number} Item count
+     */
+    getCount(type) {
+        return this.items.get(type) || 0;
+    }
+}
+
+// Add inventory to Villager class
+Villager.prototype.inventory = new Inventory();
+
+export { EnvironmentInteractionSystem, Resource, Building, Inventory, Villager };

src/ai/llmHandler.js

@@ -0,0 +1,189 @@
+// llmHandler.js - Module for handling LLM interactions
+class LLMHandler {
+    constructor(apiToken = null) {
+        // List of free Hugging Face models
+        this.freeLLMs = [
+            "meta-llama/Llama-3.1-8B-Instruct",
+            "google/gemma-3-270m-it",
+            "google/gemma-3-4b-it",
+            "google/gemma-3-27b-it",
+            "Qwen/Qwen3-4B-Instruct-2507",
+            "Qwen/Qwen3-8B",
+            "mistralai/Mistral-7B-Instruct-v0.3",
+            "HuggingFaceH4/zephyr-7b-beta",
+            "TinyLlama/TinyLlama-1.1B-Chat-v1.0",
+            "microsoft/Phi-3-mini-4k-instruct",
+            "stabilityai/stablelm-2-1_6b",
+            "NousResearch/Hermes-2-Pro-Llama-3-8B",
+            "CohereForAI/c4ai-command-r-v01",
+            "nvidia/Nemotron-Research-Reasoning-Qwen-1.5B",
+            "inclusionAI/AReaL-boba-2-8B"
+        ];
+        
+        // Default selected model
+        this.selectedModel = this.freeLLMs[0];
+        
+        // Hugging Face Inference API endpoint
+        this.apiEndpoint = "https://api-inference.huggingface.co/models/";
+        
+        // API token (can be set in constructor or externally)
+        this.apiToken = apiToken;
+        
+        // Flag to indicate if we should use simulated responses
+        // If we have a token, we'll use real responses by default
+        this.useSimulatedResponses = !apiToken;
+    }
+    
+    /**
+     * Set the API token for Hugging Face Inference API
+     * @param {string} token - The API token
+     */
+    setApiToken(token) {
+        this.apiToken = token;
+        // When a real API token is set, disable simulated responses
+        this.useSimulatedResponses = !token;
+    }
+    
+    /**
+     * Set whether to use simulated responses
+     * @param {boolean} useSimulated - Whether to use simulated responses
+     */
+    setUseSimulatedResponses(useSimulated) {
+        this.useSimulatedResponses = useSimulated;
+    }
+    
+    /**
+     * Set the selected model
+     * @param {string} model - The model identifier
+     */
+    setSelectedModel(model) {
+        if (this.freeLLMs.includes(model)) {
+            this.selectedModel = model;
+        } else {
+            console.warn(`Model ${model} is not in the list of free LLMs`);
+        }
+    }
+    
+    /**
+     * Send a query to the selected LLM
+     * @param {string} query - The query to send to the LLM
+     * @returns {Promise<string>} - The response from the LLM
+     */
+    async sendQuery(query) {
+        // If we don't have an API token, throw an error
+        if (!this.apiToken) {
+            throw new Error("API token is not set. Please set your Hugging Face API token to use the LLM functionality.");
+        }
+        
+        // If we're using simulated responses, return a simulated response
+        if (this.useSimulatedResponses) {
+            console.log("Using simulated response for query:", query);
+            // Simulate API delay
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            return this.simulateLLMResponse(query);
+        }
+        
+        // Prepare the API request
+        const url = this.apiEndpoint + this.selectedModel;
+        const payload = {
+            inputs: query,
+            parameters: {
+                max_new_tokens: 200,
+                temperature: 0.7,
+                top_p: 0.9,
+                do_sample: true
+            }
+        };
+        
+        // Make the API request
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.apiToken}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            });
+            
+            // Check if the request was successful
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(`API request failed with status ${response.status}: ${errorData.error || 'Unknown error'}`);
+            }
+            
+            // Parse the response
+            const data = await response.json();
+            
+            // Extract the generated text from the response
+            if (Array.isArray(data) && data.length > 0 && data[0].generated_text) {
+                return data[0].generated_text;
+            } else if (data.generated_text) {
+                return data.generated_text;
+            } else {
+                throw new Error("Unexpected response format from the API");
+            }
+        } catch (error) {
+            console.error("Error sending query to LLM:", error);
+            throw error;
+        }
+    }
+    
+    /**
+     * Simulate an LLM response (for testing purposes)
+     * @param {string} query - The query to simulate a response for
+     * @returns {string} - A simulated response
+     */
+    simulateLLMResponse(query) {
+        const lowerQuery = query.toLowerCase();
+        
+        if (lowerQuery.includes("villager") && lowerQuery.includes("behavior")) {
+            return "Villagers in the medieval village simulation exhibit complex behaviors based on their needs and the time of day. They cycle through states like sleeping, working, eating, and socializing. Their decisions are influenced by factors such as energy levels, hunger, and social needs.";
+        } else if (lowerQuery.includes("resource") && lowerQuery.includes("management")) {
+            return "Resource management in the village is critical for sustainability. Villagers collect resources like wood and stone from designated areas. Proper allocation of resources to buildings and villagers ensures the village's growth and resilience against disasters.";
+        } else if (lowerQuery.includes("disaster") || lowerQuery.includes("emergency")) {
+            return "The village simulation includes various disasters like fires, floods, and plagues. These events test the village's resilience and require strategic planning to mitigate their effects. Warriors can be dispatched to help protect the village from certain threats.";
+        } else if (lowerQuery.includes("ai") || lowerQuery.includes("artificial intelligence")) {
+            return "This simulation uses several AI techniques including finite state machines for villager behavior, pathfinding algorithms for navigation, and rule-based systems for decision making. The emergent behaviors arise from the interaction of these systems.";
+        } else if (lowerQuery.includes("building") || lowerQuery.includes("structure")) {
+            return "The village features various building types, each with unique functions: houses for living, workshops for crafting, markets for trading, and specialized buildings like universities and hospitals. Buildings are placed strategically to optimize villager workflows.";
+        } else {
+            return `I've received your query about "${query}". In a full implementation with API access, I would provide a detailed response based on the selected LLM model. For now, try asking about villagers, resources, disasters, AI systems, or buildings in the village.`;
+        }
+    }
+    
+    /**
+     * Get the list of free LLMs
+     * @returns {string[]} - Array of free LLM model identifiers
+     */
+    getFreeLLMs() {
+        return this.freeLLMs;
+    }
+    
+    /**
+     * Get the currently selected model
+     * @returns {string} - The currently selected model identifier
+     */
+    getSelectedModel() {
+        return this.selectedModel;
+    }
+    
+    /**
+     * Check if the API token is set
+     * @returns {boolean} - Whether the API token is set
+     */
+    isApiTokenSet() {
+        return !!this.apiToken;
+    }
+    
+    /**
+     * Get the API token (for debugging purposes)
+     * @returns {string|null} - The API token or null if not set
+     */
+    getApiToken() {
+        return this.apiToken;
+    }
+}
+
+// Export the LLMHandler class
+export default LLMHandler;

src/ai/main.js

@@ -0,0 +1,199 @@
+import VillagePathfinder from './pathfinding.js';
+import { VillagerBehaviorTree } from './behavior.js';
+import CrowdManager from './crowd.js';
+import { DailyRoutineManager, Villager } from './routines.js';
+import { EnvironmentInteractionSystem, Resource, Building } from './environment.js';
+import { AIEntityManager } from './optimization.js';
+
+/**
+ * Main AI System for Medieval Village Simulator
+ * 
+ * This file integrates all AI components into a cohesive system for managing
+ * villager AI in a medieval town simulator.
+ */
+
+class VillageAISystem {
+    constructor(scene) {
+        this.scene = scene;
+        this.pathfinder = new VillagePathfinder();
+        this.crowdManager = new CrowdManager();
+        this.routineManager = new DailyRoutineManager();
+        this.environmentSystem = new EnvironmentInteractionSystem();
+        this.entityManager = new AIEntityManager();
+
+        // Initialize systems
+        this.initSystems();
+    }
+
+    /**
+     * Initialize all AI systems
+     */
+    initSystems() {
+        // Initialize pathfinding with a simple plane for now
+        // In a real implementation, this would use a navigation mesh
+        // Note: We're not using THREE.js directly in the AI system anymore
+        // The nav mesh is just a placeholder object
+        this.pathfinder.initNavMesh({});
+        
+        // Create some sample resources
+        this.createSampleResources();
+        
+        // Create some sample buildings
+        this.createSampleBuildings();
+    }
+
+    /**
+     * Create sample resources for the village
+     */
+    createSampleResources() {
+        const woodResource = new Resource('wood1', 'wood', [10, 0, 10], 100);
+        const stoneResource = new Resource('stone1', 'stone', [-10, 0, -10], 100);
+        const foodResource = new Resource('food1', 'food', [0, 0, 15], 100);
+        
+        this.environmentSystem.addResource('wood1', woodResource);
+        this.environmentSystem.addResource('stone1', stoneResource);
+        this.environmentSystem.addResource('food1', foodResource);
+    }
+
+    /**
+     * Create sample buildings for the village
+     */
+    createSampleBuildings() {
+        // Create a proper square village layout with buildings around a central square
+        const squareSize = 20; // Size of the central square
+        const buildingSpacing = 8; // Distance between buildings
+        let buildingId = 1;
+
+        // Define building types and their positions around the square
+        const buildingConfigs = [
+            { type: 'university', x: -squareSize, z: -squareSize, maxOccupancy: 8, useRadius: 6 },
+            { type: 'store', x: squareSize, z: -squareSize, maxOccupancy: 4, useRadius: 4 },
+            { type: 'bank', x: -squareSize, z: squareSize, maxOccupancy: 3, useRadius: 4 },
+            { type: 'hospital', x: squareSize, z: squareSize, maxOccupancy: 5, useRadius: 5 },
+            { type: 'market', x: 0, z: -squareSize - buildingSpacing, maxOccupancy: 10, useRadius: 8 },
+            { type: 'restaurant', x: 0, z: squareSize + buildingSpacing, maxOccupancy: 6, useRadius: 5 },
+            { type: 'workshop', x: -squareSize - buildingSpacing, z: 0, maxOccupancy: 4, useRadius: 4 },
+            { type: 'house', x: squareSize + buildingSpacing, z: 0, maxOccupancy: 3, useRadius: 3 }
+        ];
+
+        // Add buildings around the square
+        buildingConfigs.forEach(config => {
+            const building = new Building(`building${buildingId}`, config.type, [config.x, 0, config.z]);
+            building.maxOccupancy = config.maxOccupancy;
+            building.useRadius = config.useRadius;
+            this.environmentSystem.addBuilding(`building${buildingId}`, building);
+            buildingId++;
+        });
+
+        // Add houses around the perimeter
+        const housePositions = [
+            [-squareSize, 0, -squareSize + buildingSpacing],
+            [-squareSize + buildingSpacing, 0, -squareSize],
+            [squareSize - buildingSpacing, 0, -squareSize],
+            [squareSize, 0, -squareSize + buildingSpacing],
+            [-squareSize, 0, squareSize - buildingSpacing],
+            [-squareSize + buildingSpacing, 0, squareSize],
+            [squareSize - buildingSpacing, 0, squareSize],
+            [squareSize, 0, squareSize - buildingSpacing]
+        ];
+
+        housePositions.forEach((pos, index) => {
+            const house = new Building(`house${index + 1}`, 'house', pos);
+            house.maxOccupancy = 3;
+            house.useRadius = 3;
+            this.environmentSystem.addBuilding(`house${index + 1}`, house);
+        });
+
+        // Add some resources scattered around
+        const resources = [
+            new Resource('wood1', 'wood', [-squareSize - 5, 0, -squareSize - 5], 100),
+            new Resource('wood2', 'wood', [squareSize + 5, 0, squareSize + 5], 100),
+            new Resource('stone1', 'stone', [-squareSize - 5, 0, squareSize + 5], 100),
+            new Resource('stone2', 'stone', [squareSize + 5, 0, -squareSize - 5], 100),
+            new Resource('food1', 'food', [0, 0, -squareSize - 10], 100),
+            new Resource('food2', 'food', [0, 0, squareSize + 10], 100)
+        ];
+
+        resources.forEach(resource => {
+            this.environmentSystem.addResource(resource.id, resource);
+        });
+    }
+
+    /**
+     * Create a villager and add it to the simulation
+     * @param {string} id - Villager ID
+     * @param {Array} position - Initial position [x, y, z]
+     * @returns {Villager} Created villager
+     */
+    createVillager(id, position) {
+        // Convert THREE.Vector3 to array if needed
+        let posArray = position;
+        if (position && typeof position.x !== 'undefined') {
+            posArray = [position.x, position.y, position.z];
+        }
+        
+        const villager = new Villager(id, posArray);
+
+        // Add to systems
+        this.crowdManager.addVillager(villager);
+        this.entityManager.addEntity(villager);
+
+        // Create a schedule for the villager
+        const workBuilding = this.environmentSystem.findNearestBuilding(posArray, 'workshop');
+        const homeBuilding = this.environmentSystem.findNearestBuilding(posArray, 'house');
+        const marketBuilding = this.environmentSystem.findNearestBuilding(posArray, 'market');
+        
+        const workLocation = workBuilding ? workBuilding.position : [0, 0, 0];
+        const homeLocation = homeBuilding ? homeBuilding.position : [0, 0, 0];
+        const socialLocations = marketBuilding ? [marketBuilding.position] : [[0, 0, 0]];
+
+        this.routineManager.createDefaultSchedule(id, workLocation, homeLocation, socialLocations);
+
+        return villager;
+    }
+
+    /**
+     * Update the AI system
+     * @param {number} deltaTime - Time since last frame
+     */
+    update(deltaTime) {
+        // Update routine manager
+        this.routineManager.update(deltaTime);
+        
+        // Update entity manager (includes optimization techniques)
+        this.entityManager.update(deltaTime);
+        
+        // Update crowd manager
+        this.crowdManager.update(deltaTime);
+        
+        // Update each villager
+        for (const villager of this.crowdManager.villagers) {
+            // Update villager with routine manager and pathfinder
+            villager.update(this.routineManager, this.pathfinder, deltaTime);
+            
+            // Handle environmental interactions
+            if (villager.state === 'work' && villager.path.length === 0) {
+                // Try to gather resources
+                const nearestWood = this.environmentSystem.findNearestResource(villager.position, 'wood');
+                if (nearestWood && this.environmentSystem.calculateDistance(villager.position, nearestWood.position) <= nearestWood.gatherRadius) {
+                    this.environmentSystem.gatherResource(villager, nearestWood);
+                }
+            }
+            
+            if (villager.state === 'socialize' && villager.path.length === 0) {
+                // Try to use market
+                const market = this.environmentSystem.findNearestBuilding(villager.position, 'market');
+                if (market) {
+                    this.environmentSystem.useBuilding(villager, market);
+                }
+            }
+            
+            // Move along path if there is one
+            if (villager.path.length > 0) {
+                this.pathfinder.moveAlongPath(villager, villager.path, villager.maxSpeed, deltaTime);
+            }
+        }
+    }
+}
+
+export default VillageAISystem;

src/ai/optimization.js

@@ -0,0 +1,274 @@
+/**
+ * Performance Optimization Techniques for Multiple AI Entities
+ * 
+ * This implementation includes various optimization techniques to efficiently
+ * manage multiple AI entities in a village simulation.
+ */
+
+class AIEntityManager {
+    constructor() {
+        this.entities = [];
+        this.activeEntities = new Set(); // Set of currently active entities
+        this.updateQueue = []; // Queue for entity updates
+        this.maxUpdatesPerFrame = 10; // Maximum entities to update per frame
+        this.spatialPartitioning = new SpatialPartitioning(100, 100, 10); // 100x100 grid with 10 unit cells
+    }
+
+    /**
+     * Add an entity to the manager
+     * @param {Object} entity - Entity to add
+     */
+    addEntity(entity) {
+        this.entities.push(entity);
+        this.spatialPartitioning.insert(entity);
+    }
+
+    /**
+     * Remove an entity from the manager
+     * @param {Object} entity - Entity to remove
+     */
+    removeEntity(entity) {
+        const index = this.entities.indexOf(entity);
+        if (index !== -1) {
+            this.entities.splice(index, 1);
+        }
+        this.spatialPartitioning.remove(entity);
+        this.activeEntities.delete(entity);
+    }
+
+    /**
+     * Update all entities with optimization techniques
+     * @param {number} deltaTime - Time since last frame
+     */
+    update(deltaTime) {
+        // Update spatial partitioning
+        this.spatialPartitioning.update();
+
+        // Reset active entities
+        this.activeEntities.clear();
+
+        // Determine active entities (those near the camera or player)
+        this.determineActiveEntities();
+
+        // Update entity queue
+        this.updateEntityQueue();
+
+        // Update entities
+        const updatesThisFrame = Math.min(this.maxUpdatesPerFrame, this.updateQueue.length);
+        for (let i = 0; i < updatesThisFrame; i++) {
+            const entity = this.updateQueue.shift();
+            if (entity) {
+                // Note: Entity updates are handled by the main system
+                // This is just for optimization management
+                this.updateQueue.push(entity); // Put back at end of queue
+            }
+        }
+    }
+
+    /**
+     * Determine which entities are active based on proximity to camera
+     */
+    determineActiveEntities() {
+        // In a real implementation, this would use the camera position
+        // For now, we'll mark all entities as active
+        for (const entity of this.entities) {
+            this.activeEntities.add(entity);
+        }
+    }
+
+    /**
+     * Update the entity queue with active entities
+     */
+    updateEntityQueue() {
+        // Add newly active entities to queue
+        for (const entity of this.activeEntities) {
+            if (!this.updateQueue.includes(entity)) {
+                this.updateQueue.push(entity);
+            }
+        }
+
+        // Remove inactive entities from queue
+        this.updateQueue = this.updateQueue.filter(entity => this.activeEntities.has(entity));
+    }
+
+    /**
+     * Get nearby entities for a position
+     * @param {Array} position - Position to check [x, y, z]
+     * @param {number} radius - Radius to check
+     * @returns {Array} Nearby entities
+     */
+    getNearbyEntities(position, radius) {
+        return this.spatialPartitioning.query(position, radius);
+    }
+}
+
+/**
+ * Spatial Partitioning for efficient entity queries
+ */
+class SpatialPartitioning {
+    constructor(width, height, cellSize) {
+        this.width = width;
+        this.height = height;
+        this.cellSize = cellSize;
+        this.grid = new Map(); // Map of cell keys to arrays of entities
+        this.entityToCell = new Map(); // Map of entities to their current cell
+    }
+
+    /**
+     * Get cell key for a position
+     * @param {Array} position - Position to get cell for [x, y, z]
+     * @returns {string} Cell key
+     */
+    getCellKey(position) {
+        const col = Math.floor(position[0] / this.cellSize);
+        const row = Math.floor(position[2] / this.cellSize);
+        return `${col},${row}`;
+    }
+
+    /**
+     * Insert an entity into the spatial partitioning
+     * @param {Object} entity - Entity to insert
+     */
+    insert(entity) {
+        const key = this.getCellKey(entity.position);
+        if (!this.grid.has(key)) {
+            this.grid.set(key, []);
+        }
+        this.grid.get(key).push(entity);
+        this.entityToCell.set(entity, key);
+    }
+
+    /**
+     * Remove an entity from the spatial partitioning
+     * @param {Object} entity - Entity to remove
+     */
+    remove(entity) {
+        const key = this.entityToCell.get(entity);
+        if (key && this.grid.has(key)) {
+            const cell = this.grid.get(key);
+            const index = cell.indexOf(entity);
+            if (index !== -1) {
+                cell.splice(index, 1);
+            }
+        }
+        this.entityToCell.delete(entity);
+    }
+
+    /**
+     * Update an entity's position in the spatial partitioning
+     * @param {Object} entity - Entity to update
+     */
+    updateEntity(entity) {
+        const oldKey = this.entityToCell.get(entity);
+        const newKey = this.getCellKey(entity.position);
+
+        if (oldKey !== newKey) {
+            // Remove from old cell
+            if (oldKey && this.grid.has(oldKey)) {
+                const oldCell = this.grid.get(oldKey);
+                const index = oldCell.indexOf(entity);
+                if (index !== -1) {
+                    oldCell.splice(index, 1);
+                }
+            }
+
+            // Add to new cell
+            if (!this.grid.has(newKey)) {
+                this.grid.set(newKey, []);
+            }
+            this.grid.get(newKey).push(entity);
+            this.entityToCell.set(entity, newKey);
+        }
+    }
+
+    /**
+     * Update all entities in the spatial partitioning
+     */
+    update() {
+        for (const entity of this.entityToCell.keys()) {
+            this.updateEntity(entity);
+        }
+    }
+
+    /**
+     * Query entities within a radius
+     * @param {Array} position - Center position [x, y, z]
+     * @param {number} radius - Query radius
+     * @returns {Array} Entities within radius
+     */
+    query(position, radius) {
+        const results = [];
+        const col = Math.floor(position[0] / this.cellSize);
+        const row = Math.floor(position[2] / this.cellSize);
+        const radiusCells = Math.ceil(radius / this.cellSize);
+
+        // Check surrounding cells
+        for (let r = row - radiusCells; r <= row + radiusCells; r++) {
+            for (let c = col - radiusCells; c <= col + radiusCells; c++) {
+                const key = `${c},${r}`;
+                if (this.grid.has(key)) {
+                    const cell = this.grid.get(key);
+                    for (const entity of cell) {
+                        if (this.calculateDistance(position, entity.position) <= radius) {
+                            results.push(entity);
+                        }
+                    }
+                }
+            }
+        }
+
+        return results;
+    }
+
+    /**
+     * Calculate distance between two positions
+     * @param {Array} pos1 - First position [x, y, z]
+     * @param {Array} pos2 - Second position [x, y, z]
+     * @returns {number} Distance between positions
+     */
+    calculateDistance(pos1, pos2) {
+        return Math.sqrt(
+            Math.pow(pos1[0] - pos2[0], 2) +
+            Math.pow(pos1[1] - pos2[1], 2) +
+            Math.pow(pos1[2] - pos2[2], 2)
+        );
+    }
+}
+
+/**
+ * Object pooling for AI entities to reduce garbage collection
+ */
+class ObjectPool {
+    constructor(createFn, resetFn, initialSize = 10) {
+        this.createFn = createFn;
+        this.resetFn = resetFn;
+        this.pool = [];
+
+        // Pre-populate pool
+        for (let i = 0; i < initialSize; i++) {
+            this.pool.push(this.createFn());
+        }
+    }
+
+    /**
+     * Get an object from the pool
+     * @returns {Object} Object from pool or new object if pool is empty
+     */
+    acquire() {
+        if (this.pool.length > 0) {
+            return this.pool.pop();
+        }
+        return this.createFn();
+    }
+
+    /**
+     * Return an object to the pool
+     * @param {Object} object - Object to return
+     */
+    release(object) {
+        this.resetFn(object);
+        this.pool.push(object);
+    }
+}
+
+export { AIEntityManager, SpatialPartitioning, ObjectPool };

src/ai/pathfinding.js

@@ -0,0 +1,87 @@
+// Note: three-pathfinding is not available via CDN, using basic pathfinding instead
+
+/**
+ * A* Pathfinding Implementation for Village Navigation
+ *
+ * This implementation uses a navigation mesh approach for efficient pathfinding
+ * in complex 3D environments like medieval villages.
+ */
+class VillagePathfinder {
+    constructor() {
+        // Simple pathfinding implementation without external library
+        this.zoneName = 'village';
+    }
+
+    /**
+     * Initialize the navigation mesh
+     * @param {Object} navMeshGeometry - The navigation mesh geometry
+     */
+    initNavMesh(navMeshGeometry) {
+        // Store the navigation mesh for future use
+        this.navMesh = navMeshGeometry;
+        console.log('Navigation mesh initialized');
+    }
+
+    /**
+     * Find a path between two points
+     * @param {Array} start - Start position [x, y, z]
+     * @param {Array} end - End position [x, y, z]
+     * @returns {Array<Array>} Path as array of points [[x, y, z], ...]
+     */
+    findPath(start, end) {
+        // Simple direct path for now
+        // In a real implementation, this would use A* algorithm
+        return [
+            [start[0], start[1], start[2]],
+            [end[0], end[1], end[2]]
+        ];
+    }
+
+    /**
+     * Move an entity along a path
+     * @param {Object} entity - The entity to move
+     * @param {Array<Array>} path - Path to follow [[x, y, z], ...]
+     * @param {number} speed - Movement speed
+     * @param {number} deltaTime - Time since last frame
+     */
+    moveAlongPath(entity, path, speed, deltaTime) {
+        if (path.length === 0) return;
+
+        const target = path[0];
+        const direction = this.normalize([
+            target[0] - entity.position[0],
+            target[1] - entity.position[1],
+            target[2] - entity.position[2]
+        ]);
+        const moveDistance = speed * deltaTime;
+        
+        // Move towards the target
+        entity.position[0] += direction[0] * moveDistance;
+        entity.position[1] += direction[1] * moveDistance;
+        entity.position[2] += direction[2] * moveDistance;
+        
+        // Check if we've reached the target point
+        const distance = Math.sqrt(
+            Math.pow(entity.position[0] - target[0], 2) +
+            Math.pow(entity.position[1] - target[1], 2) +
+            Math.pow(entity.position[2] - target[2], 2)
+        );
+        
+        if (distance < 0.1) {
+            path.shift(); // Remove the reached point
+        }
+    }
+
+    /**
+     * Normalize a vector
+     * @param {Array} vector - Vector to normalize [x, y, z]
+     * @returns {Array} Normalized vector [x, y, z]
+     */
+    normalize(vector) {
+        const length = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1] + vector[2] * vector[2]);
+        if (length === 0) return [0, 0, 0];
+        return [vector[0] / length, vector[1] / length, vector[2] / length];
+    }
+}
+
+export default VillagePathfinder;

src/ai/routines.js

@@ -0,0 +1,228 @@
+// No direct THREE.js import needed
+
+/**
+ * Daily Routine System for Villager AI
+ * 
+ * This implementation manages villager daily routines including work, rest, and social interactions.
+ * It uses a schedule-based approach with some randomness to create natural-looking behavior.
+ */
+
+class DailyRoutineManager {
+    constructor() {
+        this.schedules = new Map(); // Map of villager IDs to schedules
+        this.currentTime = 0; // In-game time in hours (0-24)
+    }
+
+    /**
+     * Set a schedule for a villager
+     * @param {string} villagerId - Villager identifier
+     * @param {Array} schedule - Array of schedule entries
+     */
+    setSchedule(villagerId, schedule) {
+        this.schedules.set(villagerId, schedule);
+    }
+
+    /**
+     * Update the routine manager
+     * @param {number} deltaTime - Time since last update in hours
+     */
+    update(deltaTime) {
+        this.currentTime += deltaTime;
+        if (this.currentTime >= 24) {
+            this.currentTime -= 24; // Wrap around to next day
+        }
+    }
+
+    /**
+     * Get current activity for a villager
+     * @param {string} villagerId - Villager identifier
+     * @returns {Object} Current activity
+     */
+    getCurrentActivity(villagerId) {
+        const schedule = this.schedules.get(villagerId);
+        if (!schedule) return null;
+
+        // Find the current activity based on time
+        for (let i = schedule.length - 1; i >= 0; i--) {
+            if (this.currentTime >= schedule[i].startTime) {
+                return schedule[i];
+            }
+        }
+
+        // If no activity found, return the last one (for times before first activity)
+        return schedule[schedule.length - 1];
+    }
+
+    /**
+     * Create a default schedule for a villager
+     * @param {string} villagerId - Villager identifier
+     * @param {Object} workLocation - Work location
+     * @param {Object} homeLocation - Home location
+     * @param {Array} socialLocations - Social locations
+     */
+    createDefaultSchedule(villagerId, workLocation, homeLocation, socialLocations) {
+        const schedule = [
+            { startTime: 0, activity: 'sleep', location: homeLocation },
+            { startTime: 7, activity: 'eat', location: homeLocation },
+            { startTime: 8, activity: 'work', location: workLocation },
+            { startTime: 12, activity: 'eat', location: workLocation },
+            { startTime: 13, activity: 'work', location: workLocation },
+            { startTime: 17, activity: 'socialize', location: socialLocations[0] },
+            { startTime: 19, activity: 'eat', location: homeLocation },
+            { startTime: 20, activity: 'sleep', location: homeLocation }
+        ];
+
+        this.setSchedule(villagerId, schedule);
+    }
+}
+
+/**
+ * Villager class with routine-based behavior
+ */
+class Villager {
+    constructor(id, position) {
+        this.id = id;
+        this.position = position;
+        this.velocity = [0, 0, 0]; // Simple array instead of THREE.Vector3
+        this.maxSpeed = 2;
+        this.energy = 100;
+        this.hunger = 0;
+        this.socialNeed = 0;
+        this.state = 'idle'; // idle, working, sleeping, eating, socializing
+        this.path = [];
+        this.avoidanceRadius = 2;
+        this.avoidanceWeight = 1.5;
+        this.steeringWeight = 1.0;
+    }
+
+    /**
+     * Calculate distance between two points
+     * @param {Array} pos1 - First position [x, y, z]
+     * @param {Array} pos2 - Second position [x, y, z]
+     * @returns {number} Distance between points
+     */
+    calculateDistance(pos1, pos2) {
+        return Math.sqrt(
+            Math.pow(pos1[0] - pos2[0], 2) +
+            Math.pow(pos1[1] - pos2[1], 2) +
+            Math.pow(pos1[2] - pos2[2], 2)
+        );
+    }
+
+    /**
+     * Update villager state
+     * @param {DailyRoutineManager} routineManager - Routine manager
+     * @param {VillagePathfinder} pathfinder - Pathfinding system
+     * @param {number} deltaTime - Time since last update
+     */
+    update(routineManager, pathfinder, deltaTime) {
+        // Update needs
+        this.updateNeeds(deltaTime);
+
+        // Get current activity
+        const activity = routineManager.getCurrentActivity(this.id);
+        
+        // Update state based on activity
+        if (activity) {
+            this.state = activity.activity;
+            
+            // If we have a location for this activity, pathfind to it
+            if (activity.location && this.calculateDistance(this.position, activity.location) > 1) {
+                this.path = pathfinder.findPath(this.position, activity.location);
+            } else {
+                this.path = [];
+            }
+        }
+        
+        // Perform state-specific actions
+        switch (this.state) {
+            case 'sleep':
+                this.sleep(deltaTime);
+                break;
+            case 'work':
+                this.work(deltaTime);
+                break;
+            case 'eat':
+                this.eat(deltaTime);
+                break;
+            case 'socialize':
+                this.socialize(deltaTime);
+                break;
+        }
+    }
+
+    /**
+     * Update villager needs over time
+     * @param {number} deltaTime - Time since last update
+     */
+    updateNeeds(deltaTime) {
+        this.energy = Math.max(0, this.energy - 0.1 * deltaTime);
+        this.hunger = Math.min(100, this.hunger + 0.05 * deltaTime);
+        this.socialNeed = Math.min(100, this.socialNeed + 0.03 * deltaTime);
+    }
+
+    /**
+     * Check if villager is tired
+     * @returns {boolean} True if tired
+     */
+    isTired() {
+        return this.energy < 20;
+    }
+
+    /**
+     * Check if villager should work
+     * @returns {boolean} True if should work
+     */
+    shouldWork() {
+        return this.energy > 30 && this.hunger < 80;
+    }
+
+    /**
+     * Check if villager should socialize
+     * @returns {boolean} True if should socialize
+     */
+    shouldSocialize() {
+        return this.energy > 40 && this.socialNeed > 50;
+    }
+
+    /**
+     * Sleep action
+     * @param {number} deltaTime - Time since last update
+     */
+    sleep(deltaTime) {
+        this.energy = Math.min(100, this.energy + 0.5 * deltaTime);
+    }
+
+    /**
+     * Work action
+     * @param {number} deltaTime - Time since last update
+     */
+    work(deltaTime) {
+        this.energy = Math.max(0, this.energy - 0.2 * deltaTime);
+    }
+
+    /**
+     * Eat action
+     * @param {number} deltaTime - Time since last update
+     */
+    eat(deltaTime) {
+        this.hunger = Math.max(0, this.hunger - 0.8 * deltaTime);
+    }
+
+    /**
+     * Socialize action
+     * @param {number} deltaTime - Time since last update
+     */
+    socialize(deltaTime) {
+        this.socialNeed = Math.max(0, this.socialNeed - 0.6 * deltaTime);
+    }
+
+    /**
+     * Idle action
+     */
+    idle() {
+        // Do nothing
+    }
+}
+
+export { DailyRoutineManager, Villager };

src/ai/routines_simple.js

@@ -0,0 +1,224 @@
+/**
+ * Daily Routine System for Villager AI (Simplified Version)
+ *
+ * This implementation manages villager daily routines including work, rest, and social interactions.
+ * Uses simple arrays for positions instead of THREE.Vector3 to avoid import issues.
+ */
+
+class DailyRoutineManager {
+    constructor() {
+        this.schedules = new Map(); // Map of villager IDs to schedules
+        this.currentTime = 0; // In-game time in hours (0-24)
+    }
+
+    /**
+     * Set a schedule for a villager
+     * @param {string} villagerId - Villager identifier
+     * @param {Array} schedule - Array of schedule entries
+     */
+    setSchedule(villagerId, schedule) {
+        this.schedules.set(villagerId, schedule);
+    }
+
+    /**
+     * Update the routine manager
+     * @param {number} deltaTime - Time since last update in hours
+     */
+    update(deltaTime) {
+        this.currentTime += deltaTime;
+        if (this.currentTime >= 24) {
+            this.currentTime -= 24; // Wrap around to next day
+        }
+    }
+
+    /**
+     * Get current activity for a villager
+     * @param {string} villagerId - Villager identifier
+     * @returns {Object} Current activity
+     */
+    getCurrentActivity(villagerId) {
+        const schedule = this.schedules.get(villagerId);
+        if (!schedule) return null;
+
+        // Find the current activity based on time
+        for (let i = schedule.length - 1; i >= 0; i--) {
+            if (this.currentTime >= schedule[i].startTime) {
+                return schedule[i];
+            }
+        }
+
+        // If no activity found, return the last one (for times before first activity)
+        return schedule[schedule.length - 1];
+    }
+
+    /**
+     * Create a default schedule for a villager
+     * @param {string} villagerId - Villager identifier
+     * @param {Array} workLocation - Work location [x, y, z]
+     * @param {Array} homeLocation - Home location [x, y, z]
+     * @param {Array} socialLocations - Social locations [[x, y, z], ...]
+     */
+    createDefaultSchedule(villagerId, workLocation, homeLocation, socialLocations) {
+        const schedule = [
+            { startTime: 0, activity: 'sleep', location: homeLocation },
+            { startTime: 7, activity: 'eat', location: homeLocation },
+            { startTime: 8, activity: 'work', location: workLocation },
+            { startTime: 12, activity: 'eat', location: workLocation },
+            { startTime: 13, activity: 'work', location: workLocation },
+            { startTime: 17, activity: 'socialize', location: socialLocations[0] },
+            { startTime: 19, activity: 'eat', location: homeLocation },
+            { startTime: 20, activity: 'sleep', location: homeLocation }
+        ];
+
+        this.setSchedule(villagerId, schedule);
+    }
+}
+
+/**
+ * Villager class with routine-based behavior (Simplified Version)
+ */
+class Villager {
+    constructor(id, position) {
+        this.id = id;
+        this.position = position; // [x, y, z] array
+        this.velocity = [0, 0, 0]; // [x, y, z] array
+        this.maxSpeed = 2;
+        this.energy = 100;
+        this.hunger = 0;
+        this.socialNeed = 0;
+        this.state = 'idle'; // idle, working, sleeping, eating, socializing
+        this.path = [];
+        this.avoidanceRadius = 2;
+        this.avoidanceWeight = 1.5;
+        this.steeringWeight = 1.0;
+    }
+
+    /**
+     * Update villager state
+     * @param {DailyRoutineManager} routineManager - Routine manager
+     * @param {VillagePathfinder} pathfinder - Pathfinding system
+     * @param {number} deltaTime - Time since last update
+     */
+    update(routineManager, pathfinder, deltaTime) {
+        // Update needs
+        this.updateNeeds(deltaTime);
+
+        // Get current activity
+        const activity = routineManager.getCurrentActivity(this.id);
+
+        // Update state based on activity
+        if (activity) {
+            this.state = activity.activity;
+
+            // If we have a location for this activity, pathfind to it
+            if (activity.location && this.distanceTo(activity.location) > 1) {
+                this.path = pathfinder.findPath(this.position, activity.location);
+            } else {
+                this.path = [];
+            }
+        }
+
+        // Perform state-specific actions
+        switch (this.state) {
+            case 'sleep':
+                this.sleep(deltaTime);
+                break;
+            case 'work':
+                this.work(deltaTime);
+                break;
+            case 'eat':
+                this.eat(deltaTime);
+                break;
+            case 'socialize':
+                this.socialize(deltaTime);
+                break;
+        }
+    }
+
+    /**
+     * Calculate distance to another position
+     * @param {Array} other - Other position [x, y, z]
+     * @returns {number} Distance
+     */
+    distanceTo(other) {
+        const dx = this.position[0] - other[0];
+        const dy = this.position[1] - other[1];
+        const dz = this.position[2] - other[2];
+        return Math.sqrt(dx * dx + dy * dy + dz * dz);
+    }
+
+    /**
+     * Update villager needs over time
+     * @param {number} deltaTime - Time since last update
+     */
+    updateNeeds(deltaTime) {
+        this.energy = Math.max(0, this.energy - 0.1 * deltaTime);
+        this.hunger = Math.min(100, this.hunger + 0.05 * deltaTime);
+        this.socialNeed = Math.min(100, this.socialNeed + 0.03 * deltaTime);
+    }
+
+    /**
+     * Check if villager is tired
+     * @returns {boolean} True if tired
+     */
+    isTired() {
+        return this.energy < 20;
+    }
+
+    /**
+     * Check if villager should work
+     * @returns {boolean} True if should work
+     */
+    shouldWork() {
+        return this.energy > 30 && this.hunger < 80;
+    }
+
+    /**
+     * Check if villager should socialize
+     * @returns {boolean} True if should socialize
+     */
+    shouldSocialize() {
+        return this.energy > 40 && this.socialNeed > 50;
+    }
+
+    /**
+     * Sleep action
+     * @param {number} deltaTime - Time since last update
+     */
+    sleep(deltaTime) {
+        this.energy = Math.min(100, this.energy + 0.5 * deltaTime);
+    }
+
+    /**
+     * Work action
+     * @param {number} deltaTime - Time since last update
+     */
+    work(deltaTime) {
+        this.energy = Math.max(0, this.energy - 0.2 * deltaTime);
+    }
+
+    /**
+     * Eat action
+     * @param {number} deltaTime - Time since last update
+     */
+    eat(deltaTime) {
+        this.hunger = Math.max(0, this.hunger - 0.8 * deltaTime);
+    }
+
+    /**
+     * Socialize action
+     * @param {number} deltaTime - Time since last update
+     */
+    socialize(deltaTime) {
+        this.socialNeed = Math.max(0, this.socialNeed - 0.6 * deltaTime);
+    }
+
+    /**
+     * Idle action
+     */
+    idle() {
+        // Do nothing
+    }
+}
+
+export { DailyRoutineManager, Villager };