backup2.game.js

import * as THREE from 'three';
// Optional: Add OrbitControls for debugging/viewing scene
// import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// --- DOM Elements ---
const sceneContainer = document.getElementById('scene-container');
const storyTitleElement = document.getElementById('story-title');
const storyContentElement = document.getElementById('story-content');
const choicesElement = document.getElementById('choices');
const statsElement = document.getElementById('stats-display');
const inventoryElement = document.getElementById('inventory-display');

// --- Three.js Setup ---
let scene, camera, renderer, cube; // Basic scene object
// let controls; // Optional OrbitControls

function initThreeJS() {
    // Scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x222222); // Match body background

    // Camera
    camera = new THREE.PerspectiveCamera(75, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
    camera.position.z = 5;

    // Renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
    sceneContainer.appendChild(renderer.domElement);

    // Basic Lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
    directionalLight.position.set(5, 10, 7.5);
    scene.add(directionalLight);

    // Basic Object (Placeholder for scene illustration)
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({ color: 0xcccccc }); // Default color
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // Optional Controls
    // controls = new OrbitControls(camera, renderer.domElement);
    // controls.enableDamping = true;

    // Handle Resize
    window.addEventListener('resize', onWindowResize, false);

    // Start Animation Loop
    animate();
}

function onWindowResize() {
    if (!renderer || !camera) return;
    camera.aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
}

function animate() {
    requestAnimationFrame(animate);

    // Simple animation
    if (cube) {
        cube.rotation.x += 0.005;
        cube.rotation.y += 0.005;
    }

    // if (controls) controls.update(); // If using OrbitControls

    if (renderer && scene && camera) {
        renderer.render(scene, camera);
    }
}

// --- Game Data (Ported from Python, simplified for now) ---
const gameData = {
    "1": {
        title: "The Beginning",
        content: `<p>The Evil Power Master has been terrorizing the land... You stand at the entrance to Silverhold, ready to begin your quest.</p><p>How will you prepare?</p>`,
        options: [
            { text: "Visit the local weaponsmith", next: 2, /* addItem: "..." */ },
            { text: "Seek wisdom at the temple", next: 3, /* addItem: "..." */ },
            { text: "Meet the resistance leader", next: 4, /* addItem: "..." */ }
        ],
        illustration: "city-gates" // Key for Three.js scene
    },
    "2": {
        title: "The Weaponsmith",
        content: `<p>Gorn the weaponsmith welcomes you. "You'll need more than common steel," he says, offering weapons.</p>`,
        options: [
            { text: "Take the Flaming Sword", next: 5, addItem: "Flaming Sword" },
            { text: "Choose the Whispering Bow", next: 5, addItem: "Whispering Bow" },
            { text: "Select the Guardian Shield", next: 5, addItem: "Guardian Shield" }
        ],
        illustration: "weaponsmith"
    },
    "3": {
        title: "The Ancient Temple",
        content: `<p>High Priestess Alara greets you. "Prepare your mind and spirit." She offers to teach you a secret art.</p>`,
        options: [
            { text: "Learn Healing Light", next: 5, addItem: "Healing Light Spell" },
            { text: "Master Shield of Faith", next: 5, addItem: "Shield of Faith Spell" },
            { text: "Study Binding Runes", next: 5, addItem: "Binding Runes Scroll" }
        ],
        illustration: "temple"
    },
    "4": {
        title: "The Resistance Leader",
        content: `<p>Lyra, the resistance leader, shows you a map. "His fortress has three possible entry points." She offers an item.</p>`,
        options: [
            { text: "Take the Secret Tunnel Map", next: 5, addItem: "Secret Tunnel Map" },
            { text: "Accept Poison Daggers", next: 5, addItem: "Poison Daggers" },
            { text: "Choose the Master Key", next: 5, addItem: "Master Key" }
        ],
        illustration: "resistance-meeting"
    },
    "5": {
        title: "The Journey Begins",
        content: `<p>You leave Silverhold and enter the corrupted Shadowwood Forest. Strange sounds echo. Which path will you take?</p>`,
        options: [
            { text: "Take the main road", next: 6 }, // Leads to page 6 (Ambush)
            { text: "Follow the river path", next: 7 }, // Leads to page 7 (River Spirit)
            { text: "Brave the ruins shortcut", next: 8 } // Leads to page 8 (Ruins)
        ],
        illustration: "shadowwood-forest" // Key for Three.js scene
        // Add more pages here...
    },
     // Add placeholder pages 6, 7, 8 etc. to continue the story
     "6": {
         title: "Ambush!",
         content: "<p>Scouts jump out! 'Surrender!'</p>",
         options: [{ text: "Fight!", next: 9 }, { text: "Try to flee!", next: 10 }], // Example links
         illustration: "road-ambush"
     },
     // ... Add many more pages based on your Python data ...
     "9": { // Example continuation
         title: "Victory!",
         content: "<p>You defeat the scouts and continue.</p>",
         options: [{ text: "Proceed to the fortress plains", next: 15 }],
         illustration: "forest-edge"
     },
     "10": { // Example continuation
         title: "Captured!",
         content: "<p>You failed to escape and are captured!</p>",
         options: [{ text: "Accept fate (for now)", next: 20 }], // Go to prison wagon page
         illustration: "prisoner-cell"
     },
     // Game Over placeholder
     "99": {
        title: "Game Over",
        content: "<p>Your adventure ends here.</p>",
        options: [{ text: "Restart", next: 1 }], // Link back to start
        illustration: "game-over",
        gameOver: true
     }
};

const itemsData = { // Simplified item data
    "Flaming Sword": { type: "weapon", description: "A fiery blade" },
    "Whispering Bow": { type: "weapon", description: "A silent bow" },
    "Guardian Shield": { type: "armor", description: "A protective shield" },
    "Healing Light Spell": { type: "spell", description: "Mends minor wounds" },
    "Shield of Faith Spell": { type: "spell", description: "Temporary shield" },
    "Binding Runes Scroll": { type: "spell", description: "Binds an enemy" },
    "Secret Tunnel Map": { type: "quest", description: "Shows a hidden path" },
    "Poison Daggers": { type: "weapon", description: "Daggers with poison" },
    "Master Key": { type: "quest", description: "Unlocks many doors" },
    // Add other items...
};

// --- Game State ---
let gameState = {
    currentPageId: 1,
    inventory: [],
    stats: {
        courage: 7,
        wisdom: 5,
        strength: 6,
        hp: 30,
        maxHp: 30
    }
};

// --- Game Logic Functions ---

function startGame() {
    gameState = { // Reset state
        currentPageId: 1,
        inventory: [],
        stats: { courage: 7, wisdom: 5, strength: 6, hp: 30, maxHp: 30 }
    };
    renderPage(gameState.currentPageId);
}

function renderPage(pageId) {
    const page = gameData[pageId];
    if (!page) {
        console.error(`Error: Page data not found for ID: ${pageId}`);
        storyTitleElement.textContent = "Error";
        storyContentElement.innerHTML = "<p>Could not load page data. Adventure halted.</p>";
        choicesElement.innerHTML = '<button class="choice-button" onclick="handleChoice(1)">Restart</button>'; // Provide restart option
        updateScene('error'); // Show error scene
        return;
    }

    // Update UI
    storyTitleElement.textContent = page.title || "Untitled Page";
    storyContentElement.innerHTML = page.content || "<p>...</p>";
    updateStatsDisplay();
    updateInventoryDisplay();

    // Update Choices
    choicesElement.innerHTML = ''; // Clear old choices
    if (page.options && page.options.length > 0) {
        page.options.forEach(option => {
            const button = document.createElement('button');
            button.classList.add('choice-button');
            button.textContent = option.text;

            // Check requirements (basic check for now)
            let requirementMet = true;
            if (option.requireItem && !gameState.inventory.includes(option.requireItem)) {
                requirementMet = false;
                button.title = `Requires: ${option.requireItem}`; // Tooltip
                button.disabled = true;
            }
            // Add requireAnyItem check here later if needed

            if (requirementMet) {
                // Store data needed for handling the choice
                button.dataset.nextPage = option.next;
                if (option.addItem) {
                    button.dataset.addItem = option.addItem;
                }
                // Add other potential effects as data attributes if needed

                button.onclick = () => handleChoiceClick(button.dataset);
            }

            choicesElement.appendChild(button);
        });
    } else if (page.gameOver) {
         const button = document.createElement('button');
         button.classList.add('choice-button');
         button.textContent = "Restart Adventure";
         button.dataset.nextPage = 1; // Restart goes to page 1
         button.onclick = () => handleChoiceClick(button.dataset);
         choicesElement.appendChild(button);
    } else {
        choicesElement.innerHTML = '<p><i>No further options available from here.</i></p>';
         const button = document.createElement('button');
         button.classList.add('choice-button');
         button.textContent = "Restart Adventure";
         button.dataset.nextPage = 1; // Restart goes to page 1
         button.onclick = () => handleChoiceClick(button.dataset);
         choicesElement.appendChild(button);
    }


    // Update 3D Scene
    updateScene(page.illustration || 'default');
}

function handleChoiceClick(dataset) {
    const nextPageId = parseInt(dataset.nextPage); // Ensure it's a number
    const itemToAdd = dataset.addItem;

    if (isNaN(nextPageId)) {
        console.error("Invalid nextPageId:", dataset.nextPage);
        return;
    }

    // --- Process Effects of Making the Choice ---
    // Add item if specified and not already present
    if (itemToAdd && !gameState.inventory.includes(itemToAdd)) {
        gameState.inventory.push(itemToAdd);
        console.log("Added item:", itemToAdd);
    }
    // Add stat changes/hp loss *linked to the choice itself* here if needed

    // --- Move to Next Page and Process Landing Effects ---
    gameState.currentPageId = nextPageId;

    const nextPageData = gameData[nextPageId];
    if (nextPageData) {
        // Apply HP loss defined on the *landing* page
        if (nextPageData.hpLoss) {
            gameState.stats.hp -= nextPageData.hpLoss;
            console.log(`Lost ${nextPageData.hpLoss} HP.`);
            if (gameState.stats.hp <= 0) {
                console.log("Player died from HP loss!");
                gameState.stats.hp = 0;
                renderPage(99); // Go to a specific game over page ID
                return; // Stop further processing
            }
        }
        // Apply stat increase defined on the *landing* page
        if (nextPageData.statIncrease) {
            const stat = nextPageData.statIncrease.stat;
            const amount = nextPageData.statIncrease.amount;
            if (gameState.stats.hasOwnProperty(stat)) {
                gameState.stats[stat] += amount;
                console.log(`Stat ${stat} increased by ${amount}.`);
            }
        }
         // Check if landing page is game over
         if (nextPageData.gameOver) {
             console.log("Reached Game Over page.");
             renderPage(nextPageId);
             return;
         }

    } else {
        console.error(`Data for page ${nextPageId} not found!`);
        // Optionally go to an error page or restart
        renderPage(99); // Go to game over page as fallback
        return;
    }


    // Render the new page
    renderPage(nextPageId);
}


function updateStatsDisplay() {
    let statsHTML = '<strong>Stats:</strong> ';
    statsHTML += `<span>HP: ${gameState.stats.hp}/${gameState.stats.maxHp}</span>`;
    statsHTML += `<span>Str: ${gameState.stats.strength}</span>`;
    statsHTML += `<span>Wis: ${gameState.stats.wisdom}</span>`;
    statsHTML += `<span>Cor: ${gameState.stats.courage}</span>`;
    statsElement.innerHTML = statsHTML;
}

function updateInventoryDisplay() {
    let inventoryHTML = '<strong>Inventory:</strong> ';
    if (gameState.inventory.length === 0) {
        inventoryHTML += '<em>Empty</em>';
    } else {
        gameState.inventory.forEach(item => {
            const itemInfo = itemsData[item] || { type: 'unknown', description: '???' };
            // Add class based on item type for styling
            const itemClass = `item-${itemInfo.type || 'unknown'}`;
            inventoryHTML += `<span class="${itemClass}" title="${itemInfo.description}">${item}</span>`;
        });
    }
    inventoryElement.innerHTML = inventoryHTML;
}


function updateScene(illustrationKey) {
    console.log("Updating scene for:", illustrationKey);
    if (!cube) return; // Don't do anything if cube isn't initialized

    // Simple scene update: Change cube color based on key
    let color = 0xcccccc; // Default grey
    switch (illustrationKey) {
        case 'city-gates': color = 0xaaaaaa; break;
        case 'weaponsmith': color = 0x8B4513; break; // Brown
        case 'temple': color = 0xFFFFE0; break; // Light yellow
        case 'resistance-meeting': color = 0x696969; break; // Dim grey
        case 'shadowwood-forest': color = 0x228B22; break; // Forest green
        case 'road-ambush': color = 0xD2691E; break; // Chocolate (dirt road)
        case 'river-spirit': color = 0xADD8E6; break; // Light blue
        case 'ancient-ruins': color = 0x778899; break; // Light slate grey
        case 'forest-edge': color = 0x90EE90; break; // Light green
        case 'prisoner-cell': color = 0x444444; break; // Dark grey
        case 'game-over': color = 0xff0000; break; // Red
        case 'error': color = 0xffa500; break; // Orange
        default: color = 0xcccccc; break; // Default grey for unknown
    }
    cube.material.color.setHex(color);

    // In a more complex setup, you would:
    // 1. Remove old objects from the scene (scene.remove(object))
    // 2. Load/create new objects based on illustrationKey
    // 3. Add new objects to the scene (scene.add(newObject))
}


// --- Initialization ---
initThreeJS();
startGame(); // Start the game after setting up Three.js

// Make handleChoiceClick globally accessible IF using inline onclick
// If using addEventListener, this is not needed.
// window.handleChoiceClick = handleChoiceClick;