Update game.js

game.js

@@ -1,825 +1,425 @@
-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; // Basic scene objects
-let currentAssemblyGroup = null; // Group to hold the current scene's objects
-// let controls; // Optional OrbitControls
-
-// --- Shared Materials (Define common materials here for reuse) ---
-const stoneMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1 });
-const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7, metalness: 0 });
-const darkWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x5C3D20, roughness: 0.7, metalness: 0 });
-const leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 }); // SeaGreen
-const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 }); // DarkOliveGreen
-const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
-const fabricMaterial = new THREE.MeshStandardMaterial({ color: 0x696969, roughness: 0.9, metalness: 0 }); // DimGray
-const waterMaterial = new THREE.MeshStandardMaterial({ color: 0x60A3D9, roughness: 0.2, metalness: 0.1, transparent: true, opacity: 0.7 });
-const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 }); // Light stone/sandstone
-const fireMaterial = new THREE.MeshStandardMaterial({ color: 0xFF4500, emissive: 0xff6600, roughness: 0.5, metalness: 0 }); // OrangeRed emissive
-const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 }); // Orange
-const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 }); // Red
-
-
-function initThreeJS() {
-    // Scene
-    scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x222222); // Match body background
-    // scene.fog = new THREE.Fog(0x222222, 8, 20); // Optional: Add fog for depth
-
-    // Camera
-    camera = new THREE.PerspectiveCamera(75, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
-    camera.position.set(0, 2.5, 7); // Adjusted camera position for better view
-    camera.lookAt(0, 0, 0);
-
-    // Renderer
-    renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
-    renderer.shadowMap.enabled = true; // Enable shadows
-    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
-    sceneContainer.appendChild(renderer.domElement);
-
-    // Basic Lighting
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
-    scene.add(ambientLight);
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
-    directionalLight.position.set(8, 15, 10);
-    directionalLight.castShadow = true; // Enable shadow casting
-    // Configure shadow properties (optional, adjust for quality/performance)
-    directionalLight.shadow.mapSize.width = 1024;
-    directionalLight.shadow.mapSize.height = 1024;
-    directionalLight.shadow.camera.near = 0.5;
-    directionalLight.shadow.camera.far = 50;
-    directionalLight.shadow.camera.left = -15;
-    directionalLight.shadow.camera.right = 15;
-    directionalLight.shadow.camera.top = 15;
-    directionalLight.shadow.camera.bottom = -15;
-    scene.add(directionalLight);
-    // const lightHelper = new THREE.DirectionalLightHelper(directionalLight, 5); // Helper to visualize light
-    // scene.add(lightHelper);
-    // const shadowCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // Helper for shadow camera
-    // scene.add(shadowCameraHelper);
-
-
-    // REMOVED: Basic Object (Placeholder) - Will be added dynamically
-
-    // Optional Controls
-    // controls = new OrbitControls(camera, renderer.domElement);
-    // controls.enableDamping = true;
-    // controls.target.set(0, 1, 0); // Adjust target if needed
-
-    // Handle Resize
-    window.addEventListener('resize', onWindowResize, false);
-
-    // Start Animation Loop
-    animate();
-}
-
-// --- Helper function to create meshes ---
-function createMesh(geometry, material, position = { x: 0, y: 0, z: 0 }, rotation = { x: 0, y: 0, z: 0 }, scale = { x: 1, y: 1, z: 1 }) {
-    const mesh = new THREE.Mesh(geometry, material);
-    mesh.position.set(position.x, position.y, position.z);
-    mesh.rotation.set(rotation.x, rotation.y, rotation.z);
-    mesh.scale.set(scale.x, scale.y, scale.z);
-    mesh.castShadow = true;
-    mesh.receiveShadow = true;
-    return mesh;
-}
-
-// --- Procedural Generation Functions ---
-
-function createGroundPlane(material = groundMaterial, size = 20) {
-    const groundGeo = new THREE.PlaneGeometry(size, size);
-    const ground = new THREE.Mesh(groundGeo, material);
-    ground.rotation.x = -Math.PI / 2; // Rotate flat
-    ground.position.y = -0.05; // Slightly below origin
-    ground.receiveShadow = true;
-    return ground;
-}
+// --- Game State (Modify Existing) ---
+let gameState = {
+    currentPageId: 1,
+    // 👇 Encapsulate character data
+    character: {
+        name: "Hero",
+        race: "Human",
+        alignment: "Neutral Good",
+        class: "Fighter",
+        level: 1,
+        xp: 0,
+        xpToNextLevel: 100, // Experience needed for level 2
+        statPointsPerLevel: 1, // How many points earned on level up (optional)
+        availableStatPoints: 0, // Points available to spend
+        stats: {
+            strength: 7,
+            intelligence: 5,
+            wisdom: 5, // Corrected spelling from before
+            dexterity: 6,
+            constitution: 6, // Added constitution
+            charisma: 5,     // Added charisma
+            hp: 30,
+            maxHp: 30
+        },
+        inventory: [] // Will mirror items collected in game
+    }
+    // Note: We removed the top-level 'stats' and 'inventory' as they are now inside character
+};
 
-function createDefaultAssembly() {
-    const group = new THREE.Group();
-    const sphereGeo = new THREE.SphereGeometry(0.5, 16, 16);
-    group.add(createMesh(sphereGeo, stoneMaterial, { x: 0, y: 0.5, z: 0 }));
-    group.add(createGroundPlane());
-    return group;
-}
+// --- DOM Element Getters (Add New) ---
+const charNameInput = document.getElementById('char-name');
+const charRaceSpan = document.getElementById('char-race');
+const charAlignmentSpan = document.getElementById('char-alignment');
+const charClassSpan = document.getElementById('char-class');
+const charLevelSpan = document.getElementById('char-level');
+const charXPSpan = document.getElementById('char-xp');
+const charXPNextSpan = document.getElementById('char-xp-next');
+const charHPSpan = document.getElementById('char-hp');
+const charMaxHPSpan = document.getElementById('char-max-hp');
+const charInventoryList = document.getElementById('char-inventory-list');
+const statSpans = { // Map stat names to their display elements
+    strength: document.getElementById('stat-strength'),
+    intelligence: document.getElementById('stat-intelligence'),
+    wisdom: document.getElementById('stat-wisdom'),
+    dexterity: document.getElementById('stat-dexterity'),
+    constitution: document.getElementById('stat-constitution'),
+    charisma: document.getElementById('stat-charisma'),
+};
+const statIncreaseButtons = document.querySelectorAll('.stat-increase');
+const levelUpButton = document.getElementById('levelup-btn');
+const saveCharButton = document.getElementById('save-char-btn');
+const exportCharButton = document.getElementById('export-char-btn');
+const statIncreaseCostSpan = document.getElementById('stat-increase-cost');
+
+// --- NEW Character Sheet Functions ---
+
+/**
+ * Renders the entire character sheet based on gameState.character
+ */
+function renderCharacterSheet() {
+    const char = gameState.character;
+
+    charNameInput.value = char.name;
+    charRaceSpan.textContent = char.race;
+    charAlignmentSpan.textContent = char.alignment;
+    charClassSpan.textContent = char.class;
+    charLevelSpan.textContent = char.level;
+    charXPSpan.textContent = char.xp;
+    charXPNextSpan.textContent = char.xpToNextLevel;
+
+    // Update HP (ensure it doesn't exceed maxHP)
+    char.stats.hp = Math.min(char.stats.hp, char.stats.maxHp);
+    charHPSpan.textContent = char.stats.hp;
+    charMaxHPSpan.textContent = char.stats.maxHp;
+
+    // Update core stats display
+    for (const stat in statSpans) {
+        if (statSpans.hasOwnProperty(stat) && char.stats.hasOwnProperty(stat)) {
+            statSpans[stat].textContent = char.stats[stat];
+        }
+    }
 
-function createCityGatesAssembly() {
-    const group = new THREE.Group();
-    const gateWallHeight = 4;
-    const gateWallWidth = 1.5;
-    const gateWallDepth = 0.8;
-    const archHeight = 1;
-    const archWidth = 3;
-
-    // Left Tower
-    const towerLeftGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
-    group.add(createMesh(towerLeftGeo, stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
-
-    // Right Tower
-    const towerRightGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
-    group.add(createMesh(towerRightGeo, stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
-
-    // Arch Top
-    const archGeo = new THREE.BoxGeometry(archWidth, archHeight, gateWallDepth);
-    group.add(createMesh(archGeo, stoneMaterial, { x: 0, y: gateWallHeight - archHeight / 2, z: 0 }));
-
-    // Optional: Add crenellations (battlements)
-    const crenellationSize = 0.4;
-    for (let i = -2; i <= 2; i += 1) {
-        const crenGeo = new THREE.BoxGeometry(crenellationSize, crenellationSize, gateWallDepth * 1.1);
-        group.add(createMesh(crenGeo, stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 1.5, y: gateWallHeight + crenellationSize / 2, z: 0 }));
-        group.add(createMesh(crenGeo, stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 1.5, y: gateWallHeight + crenellationSize / 2, z: 0 }));
+    // Update inventory list (up to 15 slots)
+    charInventoryList.innerHTML = ''; // Clear previous list
+    const maxSlots = 15;
+    for (let i = 0; i < maxSlots; i++) {
+        const li = document.createElement('li');
+        if (i < char.inventory.length) {
+             const item = char.inventory[i];
+             const itemInfo = itemsData[item] || { type: 'unknown', description: '???' };
+             const itemSpan = document.createElement('span');
+             itemSpan.classList.add(`item-${itemInfo.type || 'unknown'}`);
+             itemSpan.title = itemInfo.description;
+             itemSpan.textContent = item;
+             li.appendChild(itemSpan);
+        } else {
+            // Add placeholder for empty slot
+            const emptySlotSpan = document.createElement('span');
+            emptySlotSpan.classList.add('item-slot');
+            li.appendChild(emptySlotSpan);
+        }
+        charInventoryList.appendChild(li);
     }
 
-    group.add(createGroundPlane(stoneMaterial)); // Stone ground
-    return group;
+    // Update level up / stat increase buttons state
+    updateLevelUpAvailability();
+
+    // Display cost to increase stat (example: level * 10)
+    statIncreaseCostSpan.textContent = calculateStatIncreaseCost();
 }
 
-function createWeaponsmithAssembly() {
-    const group = new THREE.Group();
-    const buildingWidth = 3;
-    const buildingHeight = 2.5;
-    const buildingDepth = 3.5;
-    const roofHeight = 1;
-
-    // Main Building
-    const buildingGeo = new THREE.BoxGeometry(buildingWidth, buildingHeight, buildingDepth);
-    group.add(createMesh(buildingGeo, darkWoodMaterial, { x: 0, y: buildingHeight / 2, z: 0 }));
-
-    // Roof (simple triangular prism shape made of two planes)
-    const roofGeo = new THREE.PlaneGeometry(buildingWidth * 1.1, Math.sqrt(Math.pow(buildingDepth / 2, 2) + Math.pow(roofHeight, 2)));
-    const roofLeft = createMesh(roofGeo, woodMaterial, { x: 0, y: buildingHeight + roofHeight / 2, z: -buildingDepth / 4 }, { x: 0, y: 0, z: Math.atan2(roofHeight, buildingDepth / 2) });
-    const roofRight = createMesh(roofGeo, woodMaterial, { x: 0, y: buildingHeight + roofHeight / 2, z: buildingDepth / 4 }, { x: 0, y: Math.PI, z: -Math.atan2(roofHeight, buildingDepth / 2) });
-    group.add(roofLeft);
-    group.add(roofRight);
-     // Add gable ends (triangles)
-    const gableShape = new THREE.Shape();
-    gableShape.moveTo(-buildingWidth/2, buildingHeight);
-    gableShape.lineTo(buildingWidth/2, buildingHeight);
-    gableShape.lineTo(0, buildingHeight + roofHeight);
-    gableShape.closePath();
-    const gableGeo = new THREE.ShapeGeometry(gableShape);
-    group.add(createMesh(gableGeo, woodMaterial, {x: 0, y: 0, z: buildingDepth/2}, {x: 0, y: 0, z: 0}));
-    group.add(createMesh(gableGeo, woodMaterial, {x: 0, y: 0, z: -buildingDepth/2}, {x: 0, y: Math.PI, z: 0}));
-
-
-    // Forge/Chimney (simple representation)
-    const forgeHeight = 3;
-    const forgeGeo = new THREE.CylinderGeometry(0.3, 0.4, forgeHeight, 8);
-    group.add(createMesh(forgeGeo, stoneMaterial, { x: buildingWidth * 0.3, y: forgeHeight / 2, z: -buildingDepth * 0.3 }));
-
-    // Anvil (simple block)
-    const anvilGeo = new THREE.BoxGeometry(0.4, 0.5, 0.7);
-    group.add(createMesh(anvilGeo, metalMaterial, { x: -buildingWidth * 0.2, y: 0.25, z: buildingDepth * 0.2 }));
-
-
-    group.add(createGroundPlane());
-    return group;
+/**
+ * Calculates the XP cost to increase a stat (example logic)
+ */
+function calculateStatIncreaseCost() {
+    // Cost could depend on current stat value or level
+    return (gameState.character.level * 10) + 5; // Example: 15 XP at level 1, 25 at level 2 etc.
 }
 
-function createTempleAssembly() {
-    const group = new THREE.Group();
-    const baseSize = 5;
-    const baseHeight = 0.5;
-    const columnHeight = 3;
-    const columnRadius = 0.25;
-    const roofHeight = 1;
-
-    // Base Platform
-    const baseGeo = new THREE.BoxGeometry(baseSize, baseHeight, baseSize);
-    group.add(createMesh(baseGeo, templeMaterial, { x: 0, y: baseHeight / 2, z: 0 }));
-
-    // Columns (example: 4 columns)
-    const colPositions = [
-        { x: -baseSize / 3, z: -baseSize / 3 },
-        { x: baseSize / 3, z: -baseSize / 3 },
-        { x: -baseSize / 3, z: baseSize / 3 },
-        { x: baseSize / 3, z: baseSize / 3 },
-    ];
-    const colGeo = new THREE.CylinderGeometry(columnRadius, columnRadius, columnHeight, 12);
-    colPositions.forEach(pos => {
-        group.add(createMesh(colGeo, templeMaterial, { x: pos.x, y: baseHeight + columnHeight / 2, z: pos.z }));
+/**
+ * Enables/disables level up and stat increase buttons based on XP/Points
+ */
+function updateLevelUpAvailability() {
+    const char = gameState.character;
+    const canLevelUp = char.xp >= char.xpToNextLevel;
+    levelUpButton.disabled = !canLevelUp;
+
+    const canIncreaseStat = char.availableStatPoints > 0 || (char.xp >= calculateStatIncreaseCost()); // Can spend points OR XP
+    statIncreaseButtons.forEach(button => {
+        // Enable if points available OR if enough XP (and not leveling up)
+        button.disabled = !(char.availableStatPoints > 0 || (char.xp >= calculateStatIncreaseCost()));
+        // Optionally disable if level up is pending to force level up first?
+        // button.disabled = button.disabled || canLevelUp;
     });
 
-    // Simple Roof Slab
-    const roofGeo = new THREE.BoxGeometry(baseSize * 0.8, roofHeight / 2, baseSize * 0.8);
-    group.add(createMesh(roofGeo, templeMaterial, { x: 0, y: baseHeight + columnHeight + roofHeight / 4, z: 0 }));
-
-    // Optional: Pyramid roof top
-    const pyramidGeo = new THREE.ConeGeometry(baseSize * 0.5, roofHeight * 1.5, 4); // 4 sides for pyramid
-    group.add(createMesh(pyramidGeo, templeMaterial, { x: 0, y: baseHeight + columnHeight + roofHeight *0.75, z: 0 }, { x: 0, y: Math.PI / 4, z: 0 })); // Rotate for alignment
-
-
-    group.add(createGroundPlane());
-    return group;
-}
-
-function createResistanceMeetingAssembly() {
-    const group = new THREE.Group();
-    const tableWidth = 2;
-    const tableHeight = 0.8;
-    const tableDepth = 1;
-    const tableThickness = 0.1;
-
-    // Table Top
-    const tableTopGeo = new THREE.BoxGeometry(tableWidth, tableThickness, tableDepth);
-    group.add(createMesh(tableTopGeo, woodMaterial, { x: 0, y: tableHeight - tableThickness / 2, z: 0 }));
-
-    // Table Legs
-    const legHeight = tableHeight - tableThickness;
-    const legSize = 0.1;
-    const legGeo = new THREE.BoxGeometry(legSize, legHeight, legSize);
-    const legOffsetW = tableWidth / 2 - legSize * 1.5;
-    const legOffsetD = tableDepth / 2 - legSize * 1.5;
-    group.add(createMesh(legGeo, woodMaterial, { x: -legOffsetW, y: legHeight / 2, z: -legOffsetD }));
-    group.add(createMesh(legGeo, woodMaterial, { x: legOffsetW, y: legHeight / 2, z: -legOffsetD }));
-    group.add(createMesh(legGeo, woodMaterial, { x: -legOffsetW, y: legHeight / 2, z: legOffsetD }));
-    group.add(createMesh(legGeo, woodMaterial, { x: legOffsetW, y: legHeight / 2, z: legOffsetD }));
-
-    // Simple Stools/Boxes for people to sit on
-    const stoolSize = 0.4;
-    const stoolGeo = new THREE.BoxGeometry(stoolSize, stoolSize * 0.8, stoolSize);
-    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: -tableWidth * 0.6, y: stoolSize * 0.4, z: 0 }));
-    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: tableWidth * 0.6, y: stoolSize * 0.4, z: 0 }));
-    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: 0, y: stoolSize * 0.4, z: -tableDepth * 0.7 }));
-
-    // Dim room feeling - maybe add simple walls
-    const wallHeight = 3;
-    const wallThickness = 0.2;
-    const roomSize = 5;
-    const wallBackGeo = new THREE.BoxGeometry(roomSize, wallHeight, wallThickness);
-    group.add(createMesh(wallBackGeo, stoneMaterial, { x: 0, y: wallHeight / 2, z: -roomSize / 2 }, {}));
-    const wallLeftGeo = new THREE.BoxGeometry(wallThickness, wallHeight, roomSize);
-    group.add(createMesh(wallLeftGeo, stoneMaterial, { x: -roomSize / 2, y: wallHeight / 2, z: 0 }, {}));
-
-
-    group.add(createGroundPlane(stoneMaterial)); // Stone floor
-    return group;
+     // Enable spending stat points ONLY if available > 0
+     if (char.availableStatPoints > 0) {
+          statIncreaseCostSpan.parentElement.innerHTML = `<small>Available points: ${char.availableStatPoints} / Cost per point: 1</small>`;
+          statIncreaseButtons.forEach(button => button.disabled = false);
+     } else {
+          statIncreaseCostSpan.parentElement.innerHTML = `<small>Cost to increase stat: <span id="stat-increase-cost">${calculateStatIncreaseCost()}</span> XP</small>`;
+          // Disable based on XP check done above
+     }
 }
 
-function createForestAssembly(treeCount = 15, area = 10) {
-    const group = new THREE.Group();
-
-    // Tree generation function
-    const createTree = (x, z) => {
-        const treeGroup = new THREE.Group();
-        const trunkHeight = Math.random() * 2 + 2; // Random height between 2 and 4
-        const trunkRadius = Math.random() * 0.15 + 0.1; // Random radius
-        const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8);
-        treeGroup.add(createMesh(trunkGeo, woodMaterial, { x: 0, y: trunkHeight / 2, z: 0 }));
-
-        // Foliage (simple sphere or cone)
-        const foliageType = Math.random();
-        const foliageHeight = trunkHeight * (Math.random() * 0.5 + 0.8); // Relative to trunk
-        if (foliageType < 0.6) { // Sphere foliage
-            const foliageRadius = trunkHeight * 0.4;
-            const foliageGeo = new THREE.SphereGeometry(foliageRadius, 8, 6);
-            treeGroup.add(createMesh(foliageGeo, leafMaterial, { x: 0, y: trunkHeight * 0.9 + foliageRadius * 0.5, z: 0 }));
-        } else { // Cone foliage
-            const foliageRadius = trunkHeight * 0.5;
-            const coneGeo = new THREE.ConeGeometry(foliageRadius, foliageHeight, 8);
-             treeGroup.add(createMesh(coneGeo, leafMaterial, { x: 0, y: trunkHeight * 0.9 + foliageHeight * 0.5, z: 0 }));
-        }
-        treeGroup.position.set(x, 0, z); // Set position for the whole tree
-         // Slight random rotation for variation
-        treeGroup.rotation.y = Math.random() * Math.PI * 2;
-        return treeGroup;
-    };
-
-    // Scatter trees
-    for (let i = 0; i < treeCount; i++) {
-        const x = (Math.random() - 0.5) * area;
-        const z = (Math.random() - 0.5) * area;
-        // Basic check to avoid trees too close to the center (optional)
-        if (Math.sqrt(x*x + z*z) > 1.5) {
-            group.add(createTree(x, z));
-        }
+/**
+ * Handles leveling up the character
+ */
+function handleLevelUp() {
+    const char = gameState.character;
+    if (char.xp >= char.xpToNextLevel) {
+        char.level++;
+        char.xp -= char.xpToNextLevel; // Subtract cost
+        char.xpToNextLevel = Math.floor(char.xpToNextLevel * 1.6); // Increase next level cost (adjust multiplier)
+        char.availableStatPoints += char.statPointsPerLevel; // Grant stat points
+
+        // Increase max HP based on Constitution (example: + half CON modifier)
+        const conModifier = Math.floor((char.stats.constitution - 10) / 2);
+        const hpGain = Math.max(1, Math.floor(Math.random() * 6) + 1 + conModifier); // Roll d6 + CON mod (like D&D)
+        char.stats.maxHp += hpGain;
+        char.stats.hp = char.stats.maxHp; // Full heal on level up
+
+        console.log(`🎉 Leveled Up to ${char.level}! Gained ${char.statPointsPerLevel} stat point(s) and ${hpGain} HP.`);
+        renderCharacterSheet(); // Update display
+    } else {
+        console.warn("Not enough XP to level up yet.");
     }
-
-    group.add(createGroundPlane()); // Forest floor
-    return group;
 }
 
-function createRoadAmbushAssembly() {
-     const group = new THREE.Group();
-     const area = 12;
-
-     // Add some forest elements
-     const forestGroup = createForestAssembly(10, area);
-     group.add(forestGroup); // Reuse forest generation
-
-     // Add a simple road (a flat, wider plane)
-     const roadWidth = 3;
-     const roadLength = area * 1.5;
-     const roadGeo = new THREE.PlaneGeometry(roadWidth, roadLength);
-     const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x966F33, roughness: 0.9 }); // Muddy brown
-     const road = createMesh(roadGeo, roadMaterial, {x: 0, y: 0.01, z: 0}, {x: -Math.PI / 2}); // Slightly above ground
-     road.receiveShadow = true; // Ensure road receives shadows too
-     group.add(road);
-
-     // Add some rocks/bushes for cover (simple spheres/low boxes)
-     const rockGeo = new THREE.SphereGeometry(0.5, 5, 4);
-     const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666, roughness: 0.8 });
-     group.add(createMesh(rockGeo, rockMaterial, {x: roadWidth * 0.7, y: 0.25, z: 1}, {y: Math.random() * Math.PI}));
-     group.add(createMesh(rockGeo, rockMaterial, {x: -roadWidth * 0.8, y: 0.3, z: -2}, {y: Math.random() * Math.PI, x: Math.random()*0.2}));
-     group.add(createMesh(new THREE.SphereGeometry(0.7, 5, 4), rockMaterial, {x: roadWidth * 0.9, y: 0.35, z: -3}, {y: Math.random() * Math.PI}));
-
-    // Suggestion: You could add simple cylinder/box figures near cover later for the ambushers
-
-     // Ground plane is added by createForestAssembly
+/**
+ * Handles increasing a specific stat
+ */
+function handleStatIncrease(statName) {
+    const char = gameState.character;
+    const cost = calculateStatIncreaseCost();
+
+     // Priority 1: Spend available stat points
+     if (char.availableStatPoints > 0) {
+         char.stats[statName]++;
+         char.availableStatPoints--;
+         console.log(`📈 Increased ${statName} using a point. ${char.availableStatPoints} points remaining.`);
+
+         // Update derived stats if needed (e.g., CON affects maxHP)
+         if (statName === 'constitution') {
+             const oldModifier = Math.floor((char.stats.constitution - 1 - 10) / 2);
+             const newModifier = Math.floor((char.stats.constitution - 10) / 2);
+             const hpBonusPerLevel = Math.max(0, newModifier - oldModifier) * char.level; // Gain HP retroactively? Or just going forward? Simpler: just add difference.
+             if(hpBonusPerLevel > 0) {
+                console.log(`Increased max HP by ${hpBonusPerLevel} due to CON increase.`);
+                char.stats.maxHp += hpBonusPerLevel;
+                char.stats.hp += hpBonusPerLevel; // Also increase current HP
+             }
+         }
 
-     return group;
-}
+         renderCharacterSheet();
+         return; // Exit after spending a point
+     }
 
-function createForestEdgeAssembly() {
-    const group = new THREE.Group();
-    const area = 15;
+    // Priority 2: Spend XP if no points are available
+    if (char.xp >= cost) {
+        char.stats[statName]++;
+        char.xp -= cost;
+        console.log(`💪 Increased ${statName} for ${cost} XP.`);
+
+         // Update derived stats (same as above)
+         if (statName === 'constitution') {
+              const oldModifier = Math.floor((char.stats.constitution - 1 - 10) / 2);
+             const newModifier = Math.floor((char.stats.constitution - 10) / 2);
+             const hpBonusPerLevel = Math.max(0, newModifier - oldModifier) * char.level;
+              if(hpBonusPerLevel > 0) {
+                console.log(`Increased max HP by ${hpBonusPerLevel} due to CON increase.`);
+                char.stats.maxHp += hpBonusPerLevel;
+                char.stats.hp += hpBonusPerLevel;
+             }
+         }
 
-    // Dense forest on one side
-    const forestGroup = new THREE.Group();
-     for (let i = 0; i < 20; i++) { // More trees, denser area
-        const x = (Math.random() - 0.9) * area / 2; // Skew to one side (negative X)
-        const z = (Math.random() - 0.5) * area;
-        forestGroup.add(createForestAssembly(1, 0).children[0].position.set(x,0,z)); // Add single tree procedurally
+        renderCharacterSheet();
+    } else {
+        console.warn(`Not enough XP (${char.xp}/${cost}) or stat points to increase ${statName}.`);
     }
-    group.add(forestGroup);
-
-
-    // Open plains on the other side (just ground)
-    group.add(createGroundPlane(groundMaterial, area * 1.2)); // Larger ground plane
-
-    return group;
 }
 
-function createPrisonerCellAssembly() {
-    const group = new THREE.Group();
-    const cellSize = 3;
-    const wallHeight = 2.5;
-    const wallThickness = 0.2;
-    const barRadius = 0.04;
-    const barSpacing = 0.2;
-
-    // Floor
-    group.add(createGroundPlane(stoneMaterial, cellSize));
-
-    // Back Wall
-    const wallBackGeo = new THREE.BoxGeometry(cellSize, wallHeight, wallThickness);
-    group.add(createMesh(wallBackGeo, stoneMaterial, { x: 0, y: wallHeight / 2, z: -cellSize / 2 }));
-
-    // Left Wall
-    const wallSideGeo = new THREE.BoxGeometry(wallThickness, wallHeight, cellSize);
-    group.add(createMesh(wallSideGeo, stoneMaterial, { x: -cellSize / 2, y: wallHeight / 2, z: 0 }));
-
-    // Right Wall (Partial or Full)
-     group.add(createMesh(wallSideGeo, stoneMaterial, { x: cellSize / 2, y: wallHeight / 2, z: 0 }));
-
-    // Ceiling (optional)
-    // const ceilingGeo = new THREE.BoxGeometry(cellSize, wallThickness, cellSize);
-    // group.add(createMesh(ceilingGeo, stoneMaterial, { x: 0, y: wallHeight, z: 0 }));
 
-
-    // Bars for the front
-    const barGeo = new THREE.CylinderGeometry(barRadius, barRadius, wallHeight, 8);
-    const numBars = Math.floor(cellSize / barSpacing);
-    for (let i = 0; i <= numBars; i++) {
-        const xPos = -cellSize / 2 + i * barSpacing;
-         group.add(createMesh(barGeo, metalMaterial, { x: xPos, y: wallHeight / 2, z: cellSize / 2 }));
+/**
+ * Saves character data to localStorage
+ */
+function saveCharacter() {
+    try {
+        localStorage.setItem('textAdventureCharacter', JSON.stringify(gameState.character));
+        console.log('💾 Character saved locally.');
+        // Optional: Add brief visual confirmation
+        saveCharButton.textContent = '💾 Saved!';
+        setTimeout(() => { saveCharButton.innerHTML = '💾<span class="btn-label">Save</span>'; }, 1500);
+    } catch (e) {
+        console.error('Error saving character to localStorage:', e);
+        alert('Failed to save character. Local storage might be full or disabled.');
     }
-     // Horizontal bars (top/bottom)
-    const horizBarGeo = new THREE.BoxGeometry(cellSize, barRadius * 2, barRadius * 2);
-    group.add(createMesh(horizBarGeo, metalMaterial, {x: 0, y: wallHeight - barRadius, z: cellSize/2}));
-    group.add(createMesh(horizBarGeo, metalMaterial, {x: 0, y: barRadius, z: cellSize/2}));
-
-
-    return group;
-}
-
-function createGameOverAssembly() {
-     const group = new THREE.Group();
-     const boxGeo = new THREE.BoxGeometry(2, 2, 2);
-     group.add(createMesh(boxGeo, gameOverMaterial, { x: 0, y: 1, z: 0 }));
-     group.add(createGroundPlane(stoneMaterial.clone().set({color: 0x333333}))); // Darker ground
-     return group;
-}
-
-function createErrorAssembly() {
-     const group = new THREE.Group();
-     const coneGeo = new THREE.ConeGeometry( 0.8, 1.5, 8 );
-     group.add(createMesh(coneGeo, errorMaterial, { x: 0, y: 0.75, z: 0 }));
-     group.add(createGroundPlane());
-     return group;
-}
-
-
-function onWindowResize() {
-    if (!renderer || !camera) return;
-    camera.aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
-    camera.updateProjectionMatrix();
-    renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
 }
 
-function animate() {
-    requestAnimationFrame(animate);
-
-    // Optional: Add subtle animation to the entire assembly
-    if (currentAssemblyGroup) {
-         // Example: Very slow rotation
-         // currentAssemblyGroup.rotation.y += 0.0005;
-    }
-
-    // if (controls) controls.update(); // If using OrbitControls
-
-    if (renderer && scene && camera) {
-        renderer.render(scene, camera);
+/**
+ * Loads character data from localStorage
+ */
+function loadCharacter() {
+    try {
+        const savedData = localStorage.getItem('textAdventureCharacter');
+        if (savedData) {
+            const loadedChar = JSON.parse(savedData);
+            // Basic validation / merging with default structure
+             gameState.character = {
+                 ...gameState.character, // Start with defaults
+                 ...loadedChar,          // Override with loaded data
+                 stats: {                // Ensure stats object exists and merge
+                     ...gameState.character.stats,
+                     ...(loadedChar.stats || {})
+                 },
+                 inventory: loadedChar.inventory || [] // Ensure inventory array exists
+             };
+            console.log('💾 Character loaded from local storage.');
+            return true; // Indicate success
+        }
+    } catch (e) {
+        console.error('Error loading character from localStorage:', e);
+        // Don't overwrite gameState if loading fails
     }
+    return false; // Indicate nothing loaded or error
 }
 
-// --- 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) - NEEDS 3D Scene
-            { text: "Brave the ruins shortcut", next: 8 } // Leads to page 8 (Ruins) - NEEDS 3D Scene
-        ],
-        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 from behind rocks and trees! 'Surrender!'</p>",
-        options: [{ text: "Fight!", next: 9 }, { text: "Try to flee!", next: 10 }], // Example links
-        illustration: "road-ambush"
-     },
-     "7": { // Placeholder - NEEDS 3D Scene function
-        title: "River Path",
-        content: "<p>You follow the winding river. The water seems unnaturally dark.</p>",
-        options: [{ text: "Continue along the river", next: 11 }, { text: "Investigate strange glow", next: 12 }],
-        illustration: "river-spirit" // Needs createRiverSpiritAssembly()
-     },
-      "8": { // Placeholder - NEEDS 3D Scene function
-        title: "Ancient Ruins",
-        content: "<p>Crumbling stones and overgrown vines mark ancient ruins. It feels watched.</p>",
-        options: [{ text: "Search the main structure", next: 13 }, { text: "Look for hidden passages", next: 14 }],
-        illustration: "ancient-ruins" // Needs createRuinsAssembly()
-     },
-     "9": { // Example continuation
-        title: "Victory!",
-        content: "<p>You defeat the scouts and retrieve some basic supplies. The forest edge is near.</p>",
-        options: [{ text: "Proceed to the fortress plains", next: 15 }],
-        illustration: "forest-edge"
-     },
-     "10": { // Example continuation
-        title: "Captured!",
-        content: "<p>Your attempt to flee fails! You are knocked out and awaken in a dark, damp cell.</p>",
-        options: [{ text: "Wait and observe", next: 20 }], // Go to prison observation page
-        illustration: "prisoner-cell"
-     },
-     // ... Add many more pages based on your Python data ...
-      "15": { // Placeholder for plains
-        title: "Fortress Plains",
-        content: "<p>You emerge from the forest onto windswept plains. The dark fortress looms ahead.</p>",
-        options: [{ text: "Approach the main gate", next: 30 }, { text: "Scout the perimeter", next: 31 }],
-        illustration: "fortress-plains" // Needs createFortressPlainsAssembly()
-     },
-     "20": { // Placeholder for cell observation
-        title: "Inside the Cell",
-        content: "<p>The cell is small and cold. You hear guards patrolling outside.</p>",
-        options: [{ text: "Look for weaknesses in the bars", next: 21 }, { text: "Try to talk to a guard", next: 22 }],
-        illustration: "prisoner-cell" // Reuse 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
+/**
+ * Exports character data as a JSON file download
+ */
+function exportCharacter() {
+    try {
+        const charJson = JSON.stringify(gameState.character, null, 2); // Pretty print JSON
+        const blob = new Blob([charJson], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        // Sanitize name for filename
+        const filename = `${gameState.character.name.replace(/[^a-z0-9]/gi, '_').toLowerCase() || 'character'}_save.json`;
+        a.download = filename;
+        document.body.appendChild(a); // Required for Firefox
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url); // Clean up
+        console.log(`📤 Character exported as ${filename}`);
+    } catch (e) {
+        console.error('Error exporting character:', e);
+        alert('Failed to export character data.');
     }
-};
-
-// --- 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="handleChoiceClick({ nextPage: 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
+// --- Event Listeners (Add New) ---
+charNameInput.addEventListener('change', () => {
+    gameState.character.name = charNameInput.value.trim() || "Hero";
+    // No need to re-render just for name change unless displaying it elsewhere
+    console.log(`👤 Name changed to: ${gameState.character.name}`);
+    // Maybe save automatically on name change?
+    // saveCharacter();
+});
+
+levelUpButton.addEventListener('click', handleLevelUp);
+
+statIncreaseButtons.forEach(button => {
+    button.addEventListener('click', () => {
+        const statToIncrease = button.dataset.stat;
+        if (statToIncrease) {
+            handleStatIncrease(statToIncrease);
+        }
+    });
+});
 
-            if (requirementMet) {
-                // Store data needed for handling the choice using dataset
-                const choiceData = { nextPage: option.next }; // Always include next page
-                 if (option.addItem) {
-                    choiceData.addItem = option.addItem;
-                 }
-                  // Add other potential effects as data attributes if needed (e.g., data-stat-change="strength:1")
+saveCharButton.addEventListener('click', saveCharacter);
+exportCharButton.addEventListener('click', exportCharacter);
 
-                // Use an event listener instead of inline onclick for better practice
-                button.addEventListener('click', () => handleChoiceClick(choiceData));
 
-            } else {
-                 button.classList.add('disabled'); // Style disabled buttons
-            }
+// --- Modify Existing Functions ---
 
-            choicesElement.appendChild(button);
-        });
-    } else if (page.gameOver) {
-         const button = document.createElement('button');
-         button.classList.add('choice-button');
-         button.textContent = "Restart Adventure";
-         button.addEventListener('click', () => handleChoiceClick({ nextPage: 1 })); // Restart goes to page 1
-         choicesElement.appendChild(button);
-    } else {
-        // Handle dead ends where no options are defined and it's not game over
-        choicesElement.innerHTML = '<p><i>There are no further paths from here.</i></p>';
-         const button = document.createElement('button');
-         button.classList.add('choice-button');
-         button.textContent = "Restart Adventure";
-         button.addEventListener('click', () => handleChoiceClick({ nextPage: 1 })); // Restart goes to page 1
-         choicesElement.appendChild(button);
+function startGame() {
+    // Try loading character first
+    if (!loadCharacter()) {
+        // If no save found, initialize with defaults (already done by gameState definition)
+        console.log("No saved character found, starting new.");
     }
+    // Ensure compatibility if loaded save is old/missing fields
+     gameState.character = {
+         ...{ // Define ALL default fields here
+             name: "Hero", race: "Human", alignment: "Neutral Good", class: "Fighter",
+             level: 1, xp: 0, xpToNextLevel: 100, statPointsPerLevel: 1, availableStatPoints: 0,
+             stats: { strength: 7, intelligence: 5, wisdom: 5, dexterity: 6, constitution: 6, charisma: 5, hp: 30, maxHp: 30 },
+             inventory: []
+         },
+         ...gameState.character // Loaded data overrides defaults
+     };
+     // Ensure stats object has all keys after loading potentially partial data
+     gameState.character.stats = {
+          strength: 7, intelligence: 5, wisdom: 5, dexterity: 6, constitution: 6, charisma: 5, hp: 30, maxHp: 30, // Defaults first
+          ...(gameState.character.stats || {}) // Loaded stats override defaults
+     }
 
-
-    // Update 3D Scene
-    updateScene(page.illustration || 'default');
+    gameState.currentPageId = 1; // Always start at page 1
+    renderCharacterSheet(); // Initial render of the sheet
+    renderPage(gameState.currentPageId); // Render the story page
 }
 
-
-// Modified handleChoiceClick to accept an object
 function handleChoiceClick(choiceData) {
-    const nextPageId = parseInt(choiceData.nextPage); // Ensure it's a number
+    const nextPageId = parseInt(choiceData.nextPage);
     const itemToAdd = choiceData.addItem;
-    // Add other potential effects from choiceData here (e.g., stat changes tied to the *choice itself*)
 
     if (isNaN(nextPageId)) {
-        console.error("Invalid nextPageId:", choiceData.nextPage);
-        return;
+        console.error("Invalid nextPageId:", choiceData.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);
+    // Process Choice Effects
+    if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) {
+        gameState.character.inventory.push(itemToAdd); // Add to character inventory
         console.log("Added item:", itemToAdd);
+        // Limit inventory size?
+        // if (gameState.character.inventory.length > 15) { /* Handle overflow */ }
     }
-    // Add stat changes/hp loss *linked to the choice itself* here if needed
 
-    // --- Move to Next Page and Process Landing Effects ---
+    // Process Landing Page 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;
+            gameState.character.stats.hp -= nextPageData.hpLoss; // Update character HP
             console.log(`Lost ${nextPageData.hpLoss} HP.`);
-            if (gameState.stats.hp <= 0) {
+            if (gameState.character.stats.hp <= 0) {
+                 gameState.character.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
+                renderCharacterSheet(); // Update sheet before showing game over
+                renderPage(99); // Go to game over page
+                return;
             }
         }
-        // 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}.`);
+
+        // --- Apply Rewards (New) ---
+        if (nextPageData.reward) {
+            if (nextPageData.reward.xp) {
+                gameState.character.xp += nextPageData.reward.xp;
+                console.log(`✨ Gained ${nextPageData.reward.xp} XP!`);
             }
+            if (nextPageData.reward.statIncrease) {
+                const stat = nextPageData.reward.statIncrease.stat;
+                const amount = nextPageData.reward.statIncrease.amount;
+                if (gameState.character.stats.hasOwnProperty(stat)) {
+                    gameState.character.stats[stat] += amount;
+                    console.log(`📈 Stat ${stat} increased by ${amount}!`);
+                     // Update derived stats if needed (e.g., CON -> HP)
+                     if (stat === 'constitution') { /* ... update maxHP ... */ }
+                }
+            }
+             // Add other reward types here (e.g., items, stat points)
+             if(nextPageData.reward.addItem && !gameState.character.inventory.includes(nextPageData.reward.addItem)){
+                 gameState.character.inventory.push(nextPageData.reward.addItem);
+                 console.log(`🎁 Found item: ${nextPageData.reward.addItem}`);
+             }
+        }
+
+        // Check if landing page is game over
+        if (nextPageData.gameOver) {
+            console.log("Reached Game Over page.");
+            renderCharacterSheet(); // Update sheet one last time
+            renderPage(nextPageId);
+            return;
         }
-         // 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
+        renderCharacterSheet();
+        renderPage(99); // Fallback to game over
         return;
     }
 
-
-    // Render the new page
+    // Render the character sheet (updates XP, stats, inventory) BEFORE rendering page
+    renderCharacterSheet();
+    // Render the new story 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);
-
-    // 1. Remove the old assembly if it exists
-    if (currentAssemblyGroup) {
-        scene.remove(currentAssemblyGroup);
-        // Optional: Dispose of geometries and materials if scenes get complex
-        // currentAssemblyGroup.traverse(child => {
-        //     if (child.isMesh) {
-        //         if(child.geometry) child.geometry.dispose();
-        //         // Dispose materials carefully if they are shared!
-        //         // If not shared: if(child.material) child.material.dispose();
-        //     }
-        // });
-    }
-    currentAssemblyGroup = null; // Reset the reference
-
-    // 2. Select the generation function based on the key
-    let assemblyFunction;
-    switch (illustrationKey) {
-        case 'city-gates': assemblyFunction = createCityGatesAssembly; break;
-        case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
-        case 'temple': assemblyFunction = createTempleAssembly; break;
-        case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break;
-        case 'shadowwood-forest': assemblyFunction = createForestAssembly; break;
-        case 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break;
-        case 'forest-edge': assemblyFunction = createForestEdgeAssembly; break;
-        case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
-        case 'game-over': assemblyFunction = createGameOverAssembly; break;
-        case 'error': assemblyFunction = createErrorAssembly; break;
-
-        // --- Add cases for new/missing scenes ---
-        // case 'river-spirit': assemblyFunction = createRiverSpiritAssembly; break; // TODO
-        // case 'ancient-ruins': assemblyFunction = createRuinsAssembly; break; // TODO
-        // case 'fortress-plains': assemblyFunction = createFortressPlainsAssembly; break; // TODO
-
-        default:
-            console.warn(`No specific assembly function found for key: ${illustrationKey}. Using default.`);
-            assemblyFunction = createDefaultAssembly;
-            break;
-    }
-
-    // 3. Create the new assembly
-    try {
-         currentAssemblyGroup = assemblyFunction();
-    } catch (error) {
-        console.error(`Error creating assembly for key ${illustrationKey}:`, error);
-        currentAssemblyGroup = createErrorAssembly(); // Show error scene on generation failure
-    }
-
-
-    // 4. Add the new assembly to the scene
-    if (currentAssemblyGroup) {
-        scene.add(currentAssemblyGroup);
-         // Optional: Slightly randomize overall rotation/position for non-fixed scenes like forests
-         if (['shadowwood-forest', 'road-ambush', 'forest-edge'].includes(illustrationKey)) {
-             currentAssemblyGroup.rotation.y = Math.random() * 0.1 - 0.05; // Small random Y rotation
-         }
-    } else {
-        console.error(`Assembly function for ${illustrationKey} did not return a group.`);
-        currentAssemblyGroup = createErrorAssembly(); // Fallback
-        scene.add(currentAssemblyGroup);
-    }
-}
-
-
-// --- Initialization ---
-initThreeJS();
-startGame(); // Start the game after setting up Three.js
-
-// Removed global handleChoiceClick - now using event listeners in renderPage
-// window.handleChoiceClick = handleChoiceClick;
+// --- REMOVE/REPLACE Old UI Updates ---
+// Remove the old updateStatsDisplay() and updateInventoryDisplay() functions
+// as renderCharacterSheet() now handles this. Make sure no code is still calling them.