class GameStage { constructor() { this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(this.renderer.domElement); this.resources = { food: 0 }; this.population = 1; this.maxPopulation = 5; this.relations = "Neutral"; this.camera.position.set(0, 10, 20); // Position above the scene for a top-down view this.camera.lookAt(0, 0, 0); // Add ground const groundGeometry = new THREE.PlaneGeometry(100, 100); const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Placeholder green for grass this.ground = new THREE.Mesh(groundGeometry, groundMaterial); this.ground.rotation.x = -Math.PI / 2; // Rotate to lie flat this.scene.add(this.ground); this.objects = []; this.updateUI = this.updateUI.bind(this); window.addEventListener('resize', () => { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); }); } loadAsset(url, onLoad, onError) { const loader = new THREE.TextureLoader(); loader.crossOrigin = "anonymous"; // For CORS loader.load(url, onLoad, undefined, onError); } updateUI() { document.getElementById("resources").textContent = `Food: ${this.resources.food}`; document.getElementById("population").textContent = `Tribe: ${this.population}/${this.maxPopulation}`; document.getElementById("relations").textContent = `Relations: ${this.relations}`; } animate() { requestAnimationFrame(() => this.animate()); this.renderer.render(this.scene, this.camera); } } document.addEventListener('DOMContentLoaded', function() { const canvas = document.getElementById('gameCanvas'); if (canvas) { game = new TribalStage(canvas); game.init(); } else { console.error('Canvas element not found'); } }); // Global UI functions function gatherFood() { game.gatherFood(); } function buildHut() { game.buildHut(); } function attackTribe() { game.attackTribe(); } function socializeTribe() { game.socializeTribe(); } function toggleEditor() { const editor = document.getElementById("editor"); editor.style.display = editor.style.display === "none" ? "block" : "none"; } function applyChanges() { game.applyCreatureChanges(); }