static/game.js

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(); }