Hugging Face's logo

Spaces:
awacke1
/
ChooseYourOwnAdventure
Running

App Files Community
awacke1 commited on
Commit
4b76367
·
verified ·
1 Parent(s): 58c0666

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +260 -199
index.html CHANGED
@@ -3,36 +3,119 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Choose Your Own Procedural Adventure (Stable Base)</title>
7
  <style>
8
- body{font-family:'Courier New',monospace;background-color:#222;color:#eee;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;height:100vh}
9
- #game-container{display:flex;flex-grow:1;overflow:hidden}
10
- #scene-container{flex-grow:3;position:relative;border-right:2px solid #555;min-width:200px;background-color:#1a1a1a;height:100%;box-sizing:border-box}
11
- #ui-container{flex-grow:2;padding:20px;overflow-y:auto;background-color:#333;min-width:280px;height:100%;box-sizing:border-box;display:flex;flex-direction:column}
12
- #scene-container canvas{display:block}
13
- #story-title{color:#ffcc66;margin-top:0;margin-bottom:15px;border-bottom:1px solid #555;padding-bottom:10px;font-size:1.4em}
14
- #story-content{margin-bottom:20px;line-height:1.6;flex-grow:1}
15
- #story-content p{margin-bottom:1em}
16
- #story-content p:last-child{margin-bottom:0}
17
- #stats-inventory-container{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #555;font-size:0.9em}
18
- #stats-display, #inventory-display{margin-bottom:10px;line-height:1.8}
19
- #stats-display span, #inventory-display span{display:inline-block;background-color:#444;padding:3px 8px;border-radius:15px;margin-right:8px;margin-bottom:5px;border:1px solid #666;white-space:nowrap}
20
- #stats-display strong, #inventory-display strong{color:#aaa;margin-right:5px}
21
- #inventory-display em{color:#888;font-style:normal}
22
- #inventory-display .item-quest{background-color:#666030;border-color:#999048}
23
- #inventory-display .item-weapon{background-color:#663030;border-color:#994848}
24
- #inventory-display .item-armor{background-color:#306630;border-color:#489948}
25
- #inventory-display .item-spell{background-color:#303066;border-color:#484899}
26
- #inventory-display .item-unknown{background-color:#555;border-color:#777}
27
- #choices-container{margin-top:auto;padding-top:15px;border-top:1px solid #555}
28
- #choices-container h3{margin-top:0;margin-bottom:10px;color:#aaa}
29
- #choices{display:flex;flex-direction:column;gap:10px}
30
- .choice-button{display:block;width:100%;padding:10px 12px;margin-bottom:0;background-color:#555;color:#eee;border:1px solid #777;border-radius:5px;cursor:pointer;text-align:left;font-family:'Courier New',monospace;font-size:1em;transition:background-color 0.2s,border-color 0.2s;box-sizing:border-box}
31
- .choice-button:hover:not(:disabled){background-color:#d4a017;color:#222;border-color:#b8860b}
32
- .choice-button:disabled{background-color:#444;color:#888;cursor:not-allowed;border-color:#666;opacity:0.7}
33
- .roll-success{color:#7f7;border-left:3px solid #4a4;padding-left:8px;margin-bottom:1em;font-size:0.9em}
34
- .roll-failure{color:#f77;border-left:3px solid #a44;padding-left:8px;margin-bottom:1em;font-size:0.9em}
35
- .xp-gain{color:#7af;font-style:italic;font-size:0.9em;display:block;margin-top:0.5em;} /* Style for XP messages */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </style>
37
  </head>
38
  <body>
@@ -66,6 +149,8 @@
66
 
67
  <script type="module">
68
  import * as THREE from 'three';
 
 
69
 
70
  const sceneContainer = document.getElementById('scene-container');
71
  const storyTitleElement = document.getElementById('story-title');
@@ -86,27 +171,31 @@
86
  const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
87
  const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 });
88
  const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
89
- // Added materials for forest variation from previous step, keep them
90
- const pineLeafMaterial = new THREE.MeshStandardMaterial({ color: 0x1A5A2A, roughness: 0.7, metalness: 0 });
91
- const gnarledWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x6B4F3A, roughness: 0.85, metalness: 0 });
92
 
93
  function initThreeJS() {
94
  if (!sceneContainer) { console.error("Scene container not found!"); return; }
95
  scene = new THREE.Scene();
96
  scene.background = new THREE.Color(0x222222);
97
- const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight;
 
98
  camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
99
- camera.position.set(0, 2.5, 7); camera.lookAt(0, 0.5, 0);
 
100
  renderer = new THREE.WebGLRenderer({ antialias: true });
101
  renderer.setSize(width || 400, height || 300);
102
- renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
103
  sceneContainer.appendChild(renderer.domElement);
104
- const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight);
 
105
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
106
- directionalLight.position.set(8, 15, 10); directionalLight.castShadow = true;
107
- directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024;
108
- directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
109
- const shadowCamSize = 15;
 
 
 
110
  directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize;
111
  directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize;
112
  scene.add(directionalLight);
@@ -117,18 +206,28 @@
117
 
118
  function onWindowResize() {
119
  if (!renderer || !camera || !sceneContainer) return;
120
- const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight;
121
- if (width > 0 && height > 0) { camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }
 
 
 
 
 
122
  }
123
 
124
  function animate() {
125
  requestAnimationFrame(animate);
126
- if (renderer && scene && camera) { renderer.render(scene, camera); }
 
 
 
127
  }
128
 
129
  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 }) {
130
  const mesh = new THREE.Mesh(geometry, material);
131
- 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);
 
 
132
  mesh.castShadow = true; mesh.receiveShadow = true;
133
  return mesh;
134
  }
@@ -141,70 +240,56 @@
141
  return ground;
142
  }
143
 
144
- // --- Procedural Generation Functions (Using simpler, non-parameterized versions first) ---
145
  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; }
146
  function createCityGatesAssembly() { const group = new THREE.Group(); const gh=4, gw=1.5, gd=0.8, ah=1, aw=3; const tlGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(tlGeo, stoneMaterial, { x:-(aw/2+gw/2), y:gh/2, z:0 })); const trGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(trGeo, stoneMaterial, { x:(aw/2+gw/2), y:gh/2, z:0 })); const aGeo = new THREE.BoxGeometry(aw, ah, gd); group.add(createMesh(aGeo, stoneMaterial, { x:0, y:gh-ah/2, z:0 })); const cs=0.4; const cg = new THREE.BoxGeometry(cs, cs, gd*1.1); for(let i=-1; i<=1; i+=2){ group.add(createMesh(cg.clone(), stoneMaterial, { x:-(aw/2+gw/2)+i*cs*0.7, y:gh+cs/2, z:0 })); group.add(createMesh(cg.clone(), stoneMaterial, { x:(aw/2+gw/2)+i*cs*0.7, y:gh+cs/2, z:0 })); } group.add(createMesh(cg.clone(), stoneMaterial, { x:0, y:gh+ah-cs/2, z:0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
147
  function createWeaponsmithAssembly() { const group = new THREE.Group(); const bw=3, bh=2.5, bd=3.5; const bGeo = new THREE.BoxGeometry(bw, bh, bd); group.add(createMesh(bGeo, darkWoodMaterial, { x:0, y:bh/2, z:0 })); const ch=3.5; const cGeo = new THREE.CylinderGeometry(0.3, 0.4, ch, 8); group.add(createMesh(cGeo, stoneMaterial, { x:bw*0.3, y:ch/2, z:-bd*0.3 })); group.add(createGroundPlane()); return group; }
148
  function createTempleAssembly() { const group = new THREE.Group(); const bs=5, bsh=0.5, ch=3, cr=0.25, rh=0.5; const bGeo = new THREE.BoxGeometry(bs, bsh, bs); group.add(createMesh(bGeo, templeMaterial, { x:0, y:bsh/2, z:0 })); const cGeo = new THREE.CylinderGeometry(cr, cr, ch, 12); const cPos = [{x:-bs/3, z:-bs/3}, {x:bs/3, z:-bs/3}, {x:-bs/3, z:bs/3}, {x:bs/3, z:bs/3}]; cPos.forEach(p=>group.add(createMesh(cGeo.clone(), templeMaterial, { x:p.x, y:bsh+ch/2, z:p.z }))); const rGeo = new THREE.BoxGeometry(bs*0.9, rh, bs*0.9); group.add(createMesh(rGeo, templeMaterial, { x:0, y:bsh+ch+rh/2, z:0 })); group.add(createGroundPlane()); return group; }
149
  function createResistanceMeetingAssembly() { const group = new THREE.Group(); const tw=2, th=0.8, td=1, tt=0.1; const ttg = new THREE.BoxGeometry(tw, tt, td); group.add(createMesh(ttg, woodMaterial, { x:0, y:th-tt/2, z:0 })); const lh=th-tt, ls=0.1; const lg=new THREE.BoxGeometry(ls, lh, ls); const lofW=tw/2-ls*1.5; const lofD=td/2-ls*1.5; group.add(createMesh(lg, woodMaterial, { x:-lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:-lofW, y:lh/2, z:lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:lofD })); const ss=0.4; const sg=new THREE.BoxGeometry(ss, ss*0.8, ss); group.add(createMesh(sg, darkWoodMaterial, { x:-tw*0.6, y:ss*0.4, z:0 })); group.add(createMesh(sg.clone(), darkWoodMaterial, { x:tw*0.6, y:ss*0.4, z:0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
150
- function createForestAssembly(params = {}) { // Kept params for potential future use, but using defaults now
151
- const group = new THREE.Group(); const tc=10, a=10; // Use fixed values
152
- const cT=(x,z)=>{ const tg=new THREE.Group(); const th=Math.random()*1.5+2; const tr=Math.random()*0.1+0.1; const tGeo=new THREE.CylinderGeometry(tr*0.7, tr, th, 8); tg.add(createMesh(tGeo, woodMaterial, {x:0, y:th/2, z:0})); const fr=th*0.4+0.2; const fGeo=new THREE.SphereGeometry(fr, 8, 6); tg.add(createMesh(fGeo, leafMaterial, {x:0, y:th*0.9, z:0})); tg.position.set(x,0,z); return tg; };
153
- for(let i=0; i<tc; i++){ const x=(Math.random()-0.5)*a; const z=(Math.random()-0.5)*a; if(Math.sqrt(x*x+z*z)>1.0) group.add(cT(x,z)); } group.add(createGroundPlane(groundMaterial, a*1.1)); return group;
154
- }
155
- function createRoadAmbushAssembly() { const group = new THREE.Group(); const a=12; const fg = createForestAssembly(); group.add(fg); const rw=3, rl=a*1.2; const rGeo=new THREE.PlaneGeometry(rw, rl); const rMat=new THREE.MeshStandardMaterial({color:0x966F33, roughness:0.9}); const r=createMesh(rGeo, rMat, {x:0, y:0.01, z:0}, {x:-Math.PI/2}); r.receiveShadow=true; group.add(r); const rkGeo=new THREE.SphereGeometry(0.5, 5, 4); const rkMat=new THREE.MeshStandardMaterial({color:0x666666, roughness:0.8}); group.add(createMesh(rkGeo, rkMat, {x:rw*0.7, y:0.25, z:1}, {y:Math.random()*Math.PI})); group.add(createMesh(rkGeo.clone().scale(0.8,0.8,0.8), rkMat, {x:-rw*0.8, y:0.2, z:-2}, {y:Math.random()*Math.PI})); return group; }
156
- function createForestEdgeAssembly() { const group = new THREE.Group(); const a=15; const fg = createForestAssembly(); const ttr=[]; fg.children.forEach(c => { if(c.type === 'Group' && c.position.x > 0) ttr.push(c); }); ttr.forEach(t => fg.remove(t)); group.add(fg); return group; }
157
  function createPrisonerCellAssembly() { const group = new THREE.Group(); const cs=3, wh=2.5, wt=0.2, br=0.05, bsp=0.25; const cfMat=stoneMaterial.clone(); cfMat.color.setHex(0x555555); group.add(createGroundPlane(cfMat, cs)); const wbGeo=new THREE.BoxGeometry(cs, wh, wt); group.add(createMesh(wbGeo, stoneMaterial, {x:0, y:wh/2, z:-cs/2})); const wsGeo=new THREE.BoxGeometry(wt, wh, cs); group.add(createMesh(wsGeo, stoneMaterial, {x:-cs/2, y:wh/2, z:0})); group.add(createMesh(wsGeo.clone(), stoneMaterial, {x:cs/2, y:wh/2, z:0})); const bGeo=new THREE.CylinderGeometry(br, br, wh, 8); const nb=Math.floor(cs/bsp); for(let i=0; i<nb; i++){ const xp=-cs/2+(i+0.5)*bsp; group.add(createMesh(bGeo.clone(), metalMaterial, {x:xp, y:wh/2, z:cs/2})); } return group; }
158
  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}))); return group; }
159
  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; }
160
 
161
  // --- Game Data ---
162
- const itemsData = { "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"}, "Crude Dagger":{type:"weapon", description:"A roughly made dagger."}, "Scout's Pouch":{type:"quest", description:"Contains odds and ends."}, "Healing Poultice":{type:"spell", description:"Soothes wounds, heals 5 HP."} };
163
- const gameData = { // Using the expanded game data with ~20 pages and checks
164
- "1": { title: "The Crossroads", content: `<p>Dust swirls... Which path calls to you?</p>`, options: [ { text: "Enter the Shadowwood Forest (North)", next: 5 }, { text: "Head towards the Rolling Hills (East)", next: 2 }, { text: "Investigate the Coastal Cliffs (West)", next: 3 } ], illustration: "crossroads-signpost-sunny" },
165
- "2": { title: "Rolling Hills", content: `<p>Verdant hills stretch before you...</p>`, options: [ { text: "Follow the narrow path", next: 4 }, { text: "Head back to the crossroads", next: 1 } ], illustration: "rolling-green-hills-shepherd-distance" },
166
- "3": { title: "Coastal Cliffs Edge", content: `<p>You stand atop windswept cliffs...</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 }, { text: "Scan the cliff face for easier routes (Wisdom Check)", check: { stat: 'wisdom', dc: 11, onFailure: 32 }, next: 33 }, { text: "Return to the crossroads", next: 1 } ], illustration: "windy-sea-cliffs-crashing-waves-path-down" },
167
- "4": { title: "Hill Path Overlook", content: `<p>The path crests a hill... you see a small, overgrown shrine...</p>`, options: [ { text: "Investigate the overgrown shrine", next: 40 }, { text: "Continue towards the badlands", next: 41 }, { text: "Go back", next: 2 } ], illustration: "hilltop-view-overgrown-shrine-wildflowers" },
168
- "5": { title: "Shadowwood Entrance", content: `<p>Sunlight struggles to pierce the dense canopy... How do you proceed?</p>`, options: [ { text: "Follow the main, albeit overgrown, path", next: 6 }, { text: "Try to navigate through the lighter undergrowth", next: 7 }, { text: "Look for animal trails or signs of passage (Wisdom Check)", check: { stat: 'wisdom', dc: 10, onFailure: 6 }, next: 8 } ], illustration: "dark-forest-entrance-gnarled-roots-filtered-light" },
169
- "6": { title: "Overgrown Forest Path", content: `<p>The path is barely visible... You hear a twig snap nearby!</p>`, options: [ { text: "Ready your weapon and investigate", next: 10 }, { text: "Attempt to hide quietly (Dexterity Check)", check: { stat: 'dexterity', dc: 11, onFailure: 10 }, next: 11 }, { text: "Call out cautiously", next: 10 } ], illustration: "overgrown-forest-path-glowing-fungi-vines" },
170
- "7": { title: "Tangled Undergrowth", content: `<p>Pushing through ferns... You stumble upon a small clearing containing a moss-covered, weathered stone statue...</p>`, options: [ { text: "Examine the statue closely (Intelligence Check)", check: { stat: 'intelligence', dc: 13, onFailure: 71 }, next: 70 }, { text: "Ignore the statue and press on", next: 72 }, { text: "Leave a small offering (if possible)", next: 73 } ], illustration: "forest-clearing-mossy-statue-weathered-stone" },
171
- "8": { title: "Hidden Game Trail", content: `<p>Your sharp eyes spot a faint trail... It leads towards a ravine spanned by a rickety rope bridge.</p><p class="xp-gain">(+20 XP)</p>`, options: [ { text: "Risk crossing the rope bridge (Dexterity Check)", check: { stat: 'dexterity', dc: 10, onFailure: 81 }, next: 80 }, { text: "Search for another way across the ravine", next: 82 } ], illustration: "narrow-game-trail-forest-rope-bridge-ravine", reward: { xp: 20 } },
172
- "10": { title: "Goblin Ambush!", content: `<p>Two scraggly goblins leap out, brandishing crude spears!</p>`, options: [ { text: "Fight the goblins!", next: 12 }, { text: "Attempt to dodge past them (Dexterity Check)", check: { stat: 'dexterity', dc: 13, onFailure: 101 }, next: 13 } ], illustration: "two-goblins-ambush-forest-path-spears" },
173
- "11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p><p class="xp-gain">(+30 XP)</p>`, options: [ { text: "Continue cautiously", next: 14 } ], illustration: "forest-shadows-hiding-goblins-walking-past", reward: { xp: 30 } },
174
- "12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p><p class="xp-gain">(+50 XP)</p>`, options: [ { text: "Press onward", next: 14 } ], illustration: "defeated-goblins-forest-path-loot", reward: { xp: 50, addItem: "Crude Dagger" } },
175
- "13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</p><p class="xp-gain">(+25 XP)</p>`, options: [ { text: "Keep running!", next: 14 } ], illustration: "blurred-motion-running-past-goblins-forest", reward: { xp: 25 } },
176
- "14": { title: "Forest Stream Crossing", content: `<p>The path leads to a clear, shallow stream...</p>`, options: [ { text: "Wade across the stream", next: 16 }, { text: "Look for a drier crossing point (fallen log?)", next: 15 } ], illustration: "forest-stream-crossing-dappled-sunlight-stones"},
177
  "15": { title: "Log Bridge", content: `<p>Further upstream, a large, mossy log spans the stream.</p>`, options: [ { text: "Cross carefully on the log (Dexterity Check)", check: { stat: 'dexterity', dc: 9, onFailure: 151 }, next: 16 }, { text: "Go back and wade instead", next: 14 } ], illustration: "mossy-log-bridge-over-forest-stream" },
178
  "151": { title: "Splash!", content: `<p>You slip on the mossy log and tumble into the cold stream! You're soaked but unharmed.</p>`, options: [ { text: "Shake yourself off and continue", next: 16 } ], illustration: "character-splashing-into-stream-from-log" },
179
  "16": { title: "Edge of the Woods", content: `<p>You emerge from the Shadowwood... Before you lie rocky foothills...</p>`, options: [ { text: "Begin the ascent into the foothills", next: 17 }, { text: "Scan the fortress from afar (Wisdom Check)", check: { stat: 'wisdom', dc: 14, onFailure: 17 }, next: 18 } ], illustration: "forest-edge-view-rocky-foothills-distant-mountain-fortress" },
180
  "17": { title: "Rocky Foothills Path", content: `<p>The climb is arduous... The fortress looms larger now.</p>`, options: [ { text: "Continue the direct ascent", next: 19 }, { text: "Look for signs of a hidden trail (Wisdom Check)", check: { stat: 'wisdom', dc: 15, onFailure: 19 }, next: 20 } ], illustration: "climbing-rocky-foothills-path-fortress-closer" },
181
- "18": { title: "Distant Observation", content: `<p>You notice what might be a less-guarded approach along the western ridge...</p><p class="xp-gain">(+30 XP)</p>`, options: [ { text: "Take the main path into the foothills", next: 17 }, { text: "Attempt the western ridge approach", next: 21 } ], illustration: "zoomed-view-mountain-fortress-western-ridge", reward: { xp: 30 } },
182
  "19": { title: "Blocked Pass", content: `<p>The main path is blocked by a recent rockslide!</p>`, options: [ { text: "Try to climb over (Strength Check)", check: { stat: 'strength', dc: 14, onFailure: 191 }, next: 190 }, { text: "Search for another way around", next: 192 } ], illustration: "rockslide-blocking-mountain-path-boulders" },
183
- "20": { title: "Goat Trail", content: `<p>You discover a narrow trail barely wide enough for a mountain goat...</p><p class="xp-gain">(+40 XP)</p>`, options: [ { text: "Follow the precarious goat trail", next: 22 } ], illustration: "narrow-goat-trail-mountainside-fortress-view", reward: { xp: 40 } },
184
- "30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p><p class="xp-gain">(+25 XP)</p>`, options: [ { text: "Explore the dark cave", next: 35 } ], illustration: "hidden-cove-beach-dark-cave-entrance", reward: { xp: 25 } },
185
- "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard... You lose 5 HP. A dark cave entrance beckons.</p>`, options: [ { text: "Gingerly explore the dark cave", next: 35 } ], illustration: "character-fallen-at-bottom-of-cliff-path-cove", hpLoss: 5 },
186
- "32": { title: "No Easier Path", content: `<p>You scan the cliffs intently but find no obviously easier routes.</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 }, { text: "Return to crossroads", next: 1} ], illustration: "scanning-sea-cliffs-no-other-paths-visible" },
187
- "33": { title: "Smuggler's Steps?", content: `<p>Your keen eyes spot a series of barely visible handholds and steps carved into the rock...</p><p class="xp-gain">(+15 XP)</p>`, options: [ { text: "Use the hidden steps (Easier Dex Check)", check: { stat: 'dexterity', dc: 8, onFailure: 31 }, next: 30 } ], illustration: "close-up-handholds-carved-in-cliff-face", reward: { xp: 15 } },
188
- "35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay...</p>`, options: [{ text: "Press deeper into the darkness (End)", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" },
189
- "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine...</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 }, { text: "Leave it be", next: 4 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
190
- "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth...</p>`, options: [{ text: "Scout ahead (End)", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" },
191
- "70": { title: "Statue Examined", content: `<p>The statue depicts a forgotten nature deity. You notice a small compartment at its base.</p><p class="xp-gain">(+10 XP)</p>`, options: [{text:"Try to open compartment (Strength Check?)", check:{stat:'strength', dc: 10, onFailure: 71}, next: 700}], illustration:"close-up-mossy-statue-compartment", reward:{xp:10}},
192
- "71": { title: "Statue Unyielding", content: `<p>You examine the statue but learn little. It remains an imposing enigma.</p>`, options: [{text:"Press onward", next: 72}], illustration:"forest-clearing-mossy-statue-weathered-stone-shrug"},
193
- "72": { title: "Deeper Woods", content: `<p>Leaving the statue behind, you push further into the increasingly dense woods.</p>`, options: [{text:"Continue", next: 14}], illustration:"dense-forest-undergrowth-shadows" },
194
- "73": { title: "Offering Made", content: `<p>You leave a small token. For a moment, you think you feel a sense of ancient approval.</p>`, options: [{text:"Press onward", next: 72}], illustration:"offering-at-base-of-mossy-statue"},
195
- "80": { title: "Bridge Crossed", content: `<p>You make it across the swaying bridge, your heart pounding.</p><p class="xp-gain">(+15 XP)</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"view-from-end-of-rope-bridge-forest", reward:{xp:15}},
196
- "81": { title: "Bridge Collapse!", content: `<p>A frayed rope snaps! You plummet into the shallow ravine below, losing 8 HP!</p>`, options: [{text:"Climb out and find another way", next: 82}], illustration:"character-falling-from-broken-rope-bridge", hpLoss:8},
197
- "82": { title: "Ravine Detour", content: `<p>You find a place where the ravine narrows and manage to climb down and back up the other side.</p><p class="xp-gain">(+5 XP)</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"climbing-out-of-shallow-ravine-forest", reward:{xp:5}},
198
- "101": { title:"Failed Dodge", content:"<p>You try to dodge, but a goblin spear trips you! You take 3 damage.</p>", options:[{text:"Get up and Fight!", next: 12}], illustration:"character-tripped-by-goblin-spear", hpLoss: 3},
199
- "190": { title: "Over the Rocks", content:"<p>With considerable effort, you clamber over the rockslide.</p><p class="xp-gain">(+35 XP)</p>`, options: [{text:"Continue up the path", next: 22}], illustration:"character-climbing-over-boulders", reward: {xp:35} },
200
- "191": { title: "Climb Fails", content:"<p>The boulders are too unstable. You cannot climb them safely.</p>`, options: [{text:"Search for another way around", next: 192}], illustration:"character-slipping-on-rockslide-boulders"},
201
- "192": { title: "Detour Found", content:"<p>After some searching, you find a rough path leading around the rockslide.</p>`, options: [{text:"Continue up the path", next: 22}], illustration:"rough-detour-path-around-rockslide"},
202
- "21": { title: "Western Ridge", content:"<p>The ridge path is narrow and exposed, with strong winds...</p>`, options: [{text:"Proceed carefully (Dexterity Check)", check:{stat:'dexterity', dc: 14, onFailure: 211}, next: 22 } ], illustration:"narrow-windy-mountain-ridge-path" },
203
- "22": { title: "Fortress Approach", content:"<p>You've navigated the treacherous paths and now stand near the outer walls...</p>`, options: [{text:"Look for an unguarded entrance (End of Demo)", next: 99}], illustration:"approaching-dark-fortress-walls-guards"},
204
- "211": {title:"Lost Balance", content:"<p>A strong gust sends you tumbling down a steep slope! (-10 HP)</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
205
- "400": {title:"Shrine Secrets", content:"<p>The carvings depict ancient rituals. You find a loose stone revealing a Healing Poultice!</p><p class="xp-gain">(+20 XP)</p>", options:[{text:"Take the poultice and leave", next:4, addItem:"Healing Poultice"}], illustration:"close-up-shrine-carvings-hidden-compartment", reward:{xp:20}},
206
- "401": {title:"Mysterious Carvings", content:"<p>The carvings are worn and indecipherable.</p>", options:[{text:"Leave the shrine", next:4}], illustration:"worn-stone-carvings-shrine"},
207
- "700": {title:"Statue's Gift", content:"<p>The compartment clicks open, revealing a smooth, grey stone that feels strangely warm.</p><p class="xp-gain">(+30 XP)</p>", options:[{text:"Take the stone and press on", next: 72, addItem:"Warm Stone"}], illustration:"hand-holding-warm-grey-stone-statue-base", reward:{xp:30}},
208
 
209
  "99": { title: "Game Over / To Be Continued...", content: "<p>Your adventure ends here (for now).</p>", options: [{ text: "Restart", next: 1 }], illustration: "game-over-generic", gameOver: true }
210
  };
@@ -214,7 +299,7 @@
214
  currentPageId: 1,
215
  character: {
216
  name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
217
- level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, // Stat points for leveling
218
  stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 },
219
  inventory: []
220
  }
@@ -222,93 +307,44 @@
222
 
223
  // --- Game Logic Functions ---
224
  function startGame() {
225
- const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [] };
226
- gameState = { currentPageId: 1, character: { ...defaultChar } };
227
- recalculateMaxHp();
228
- gameState.character.stats.hp = gameState.character.stats.maxHp;
229
  renderPage(gameState.currentPageId);
230
  }
231
 
232
- function levelUpCharacter() {
233
- const char = gameState.character;
234
- if (char.xp < char.xpToNextLevel) return false;
235
- char.level++;
236
- char.xp -= char.xpToNextLevel;
237
- char.xpToNextLevel = Math.floor(char.xpToNextLevel * 1.5 + 50);
238
- char.availableStatPoints += 1; // Gain 1 point
239
- recalculateMaxHp();
240
- char.stats.hp = char.stats.maxHp; // Full heal
241
- console.log(`LEVEL UP! Reached Level ${char.level}.`);
242
- // Later, add UI to spend points. For now, they just accumulate.
243
- updateStatsDisplay(); // Update UI to show new level/XP/HP/Points
244
- return true;
245
- }
246
-
247
- function recalculateMaxHp() {
248
- const char = gameState.character;
249
- const conModifier = Math.floor((char.stats.constitution - 10) / 2);
250
- char.stats.maxHp = 8 + (char.level * Math.max(1, 2 + conModifier)); // Recalculate Max HP
251
- }
252
-
253
  function handleChoiceClick(choiceData) {
254
  const optionNextPageId = parseInt(choiceData.nextPage);
255
  const itemToAdd = choiceData.addItem;
256
  let nextPageId = optionNextPageId;
257
  let rollResultMessage = "";
258
- let gainedXpThisTurn = 0;
259
- const check = choiceData.check;
260
- const effect = choiceData.effect;
261
-
262
- if (isNaN(optionNextPageId) && !check && !effect) { console.error("Invalid choice data:", choiceData); return; }
263
-
264
- // --- Apply direct effects (like resting) ---
265
- if (effect) {
266
- if (effect.hpGain) {
267
- const maxHeal = gameState.character.stats.maxHp - gameState.character.stats.hp;
268
- const actualGain = Math.min(effect.hpGain, maxHeal);
269
- if (actualGain > 0) {
270
- gameState.character.stats.hp += actualGain;
271
- rollResultMessage += `<p class="xp-gain">Rested and recovered ${actualGain} HP.</p>`;
272
- console.log(`Recovered ${actualGain} HP.`);
273
- } else {
274
- rollResultMessage += `<p class="xp-gain">You rest, but gain no HP.</p>`;
275
- }
276
- }
277
- // If effect determines next page, override default
278
- if (effect.setNextPage !== undefined) nextPageId = effect.setNextPage;
279
- // For simple rest, we still want to proceed, so no return here.
280
- }
281
 
282
- // --- Process Stat Check ---
283
  if (check) {
284
  const statValue = gameState.character.stats[check.stat] || 10;
285
  const modifier = Math.floor((statValue - 10) / 2);
286
  const roll = Math.floor(Math.random() * 20) + 1;
287
  const totalResult = roll + modifier;
288
  const dc = check.dc;
289
- const successMargin = totalResult - dc;
290
  console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
291
-
292
- if (totalResult >= dc) { // Success
293
- nextPageId = optionNextPageId;
294
- rollResultMessage += `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
295
- const marginBonus = Math.max(0, Math.floor(successMargin * 1.0)); // XP per point over DC
296
- const oddsBonus = Math.max(0, Math.floor(dc * 0.5)); // XP for difficulty
297
- const checkBonusXp = marginBonus + oddsBonus;
298
- if (checkBonusXp > 0) { gainedXpThisTurn += checkBonusXp; rollResultMessage += `<p class="xp-gain">+${checkBonusXp} bonus XP!</p>`; console.log(`Check bonus XP: ${checkBonusXp}`); }
299
- } else { // Failure
300
- nextPageId = parseInt(check.onFailure);
301
- rollResultMessage += `<p class="roll-failure"><em>Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
302
  if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; }
303
  }
304
  }
305
 
306
- // --- Add immediate item from option ---
307
  if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) {
308
- gameState.character.inventory.push(itemToAdd); console.log("Added item:", itemToAdd);
 
309
  }
310
 
311
- // --- Move to Next Page & Process Landing ---
312
  gameState.currentPageId = nextPageId;
313
  const nextPageData = gameData[nextPageId];
314
 
@@ -316,47 +352,34 @@
316
  if (nextPageData.hpLoss) {
317
  gameState.character.stats.hp -= nextPageData.hpLoss;
318
  console.log(`Lost ${nextPageData.hpLoss} HP.`);
319
- // HP check is done after potential level up healing
320
  }
321
  if (nextPageData.reward) {
322
- if (nextPageData.reward.xp) { gainedXpThisTurn += nextPageData.reward.xp; console.log(`Base reward: +${nextPageData.reward.xp} XP.`); }
323
- 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}.`); recalculateMaxHp(); } } // Recalc HP if CON changes
324
  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}`); }
325
  }
326
-
327
- if (gainedXpThisTurn > 0) {
328
- gameState.character.xp += gainedXpThisTurn;
329
- console.log(`Total XP Gained: ${gainedXpThisTurn}. Current XP: ${gameState.character.xp}`);
330
- if (!rollResultMessage.includes("bonus XP")) { // Avoid double message if check bonus already added
331
- rollResultMessage += `<p class="xp-gain">You gained ${gainedXpThisTurn} XP.</p>`;
332
- }
333
- }
334
-
335
- let leveledUp = false;
336
- while (gameState.character.xp >= gameState.character.xpToNextLevel) {
337
- if (levelUpCharacter()) { leveledUp = true; } else { break; }
338
- }
339
- if (leveledUp) { rollResultMessage += `<p class="level-up">LEVEL UP! You reached Level ${gameState.character.level}!</p>`; }
340
-
341
- recalculateMaxHp(); // Ensure maxHP is current
342
  gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp); // Clamp HP
343
- gameState.character.stats.hp = Math.max(0, gameState.character.stats.hp);
344
 
345
- // Check for death *after* potential healing from level up
346
- if (gameState.character.stats.hp <= 0) {
347
- console.log("Player died!"); nextPageId = 99; // Force redirect
348
- renderPageInternal(99, gameData[99], rollResultMessage + "<p class='roll-failure'><em>Your wounds overwhelm you...</em></p>"); return;
349
  }
350
-
351
- } else { // Invalid next page ID
352
  console.error(`Data for page ${nextPageId} not found!`);
353
- renderPageInternal(99, gameData[99], "<p><em>Error: Next page data missing!</em></p>"); return;
 
354
  }
355
- renderPageInternal(nextPageId, gameData[nextPageId] || gameData["99"], rollResultMessage);
356
  }
357
 
358
  function renderPageInternal(pageId, pageData, message = "") {
359
- if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; }
360
  storyTitleElement.textContent = pageData.title || "Untitled Page";
361
  storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
362
  updateStatsDisplay(); updateInventoryDisplay();
@@ -365,38 +388,76 @@
365
  pageData.options.forEach(option => {
366
  const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true;
367
  if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
368
- if (requirementMet) { const choiceData = { nextPage: option.next, addItem: option.addItem, check: option.check, effect: option.effect }; button.onclick = () => handleChoiceClick(choiceData); } else { button.classList.add('disabled'); } choicesElement.appendChild(button); });
369
  } else { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = pageData.gameOver ? "Restart Adventure" : "The End"; button.onclick = () => handleChoiceClick({ nextPage: pageData.gameOver ? 1 : 99 }); choicesElement.appendChild(button); if (!pageData.gameOver) choicesElement.insertAdjacentHTML('afterbegin', '<p><i>The path ends here.</i></p>'); }
370
- updateScene(pageData.illustration || 'default', pageData.sceneParams);
371
  }
372
 
373
  function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
374
 
375
- function updateStatsDisplay() { const char=gameState.character; statsElement.innerHTML = `<strong>Stats:</strong> <span>Lvl: ${char.level}</span> <span>XP: ${char.xp}/${char.xpToNextLevel}</span> <span>HP: ${char.stats.hp}/${char.stats.maxHp}</span> <span title="Strength">Str: ${char.stats.strength}</span> <span title="Intelligence">Int: ${char.stats.intelligence}</span> <span title="Wisdom">Wis: ${char.stats.wisdom}</span> <span title="Dexterity">Dex: ${char.stats.dexterity}</span> <span title="Constitution">Con: ${char.stats.constitution}</span> <span title="Charisma">Cha: ${char.stats.charisma}</span>`; } // Added titles
376
  function updateInventoryDisplay() { let h='<strong>Inventory:</strong> '; if(gameState.character.inventory.length === 0){ h+='<em>Empty</em>'; } else { gameState.character.inventory.forEach(i=>{ const d=itemsData[i]||{type:'unknown',description:'???'}; const c=`item-${d.type||'unknown'}`; h+=`<span class="${c}" title="${d.description}">${i}</span>`; }); } inventoryElement.innerHTML = h; }
377
 
378
- function updateScene(illustrationKey, sceneParams = {}) {
 
379
  if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
380
  currentAssemblyGroup = null; let assemblyFunction;
381
- // Simple routing for now, using default for most new keys
382
  switch (illustrationKey) {
383
  case 'city-gates': assemblyFunction = createCityGatesAssembly; break;
384
  case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
385
  case 'temple': assemblyFunction = createTempleAssembly; break;
386
  case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break;
387
- case 'shadowwood-forest': case 'dark-forest-entrance-gnarled-roots-filtered-light': case 'overgrown-forest-path-glowing-fungi-vines': case 'forest-clearing-mossy-statue-weathered-stone': case 'narrow-game-trail-forest-rope-bridge-ravine': case 'forest-stream-crossing-dappled-sunlight-stones': case 'mossy-log-bridge-over-forest-stream': case 'dense-forest-undergrowth-shadows': assemblyFunction = createForestAssembly; break; // Group forest keys
388
- case 'road-ambush': case 'two-goblins-ambush-forest-path-spears': assemblyFunction = createRoadAmbushAssembly; break; // Group ambush keys
389
- case 'forest-edge': case 'forest-edge-view-rocky-foothills-distant-mountain-fortress': assemblyFunction = createForestEdgeAssembly; break; // Group edge keys
390
  case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
391
- case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break;
392
  case 'error': assemblyFunction = createErrorAssembly; break;
393
- // Add more specific assignments if needed
394
- default: assemblyFunction = createDefaultAssembly; break;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  }
396
- try { currentAssemblyGroup = assemblyFunction(sceneParams); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
397
  }
398
 
399
  document.addEventListener('DOMContentLoaded', () => {
 
400
  try { initThreeJS(); startGame(); } catch (error) { console.error("Init failed:", error); storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = `<p>Init Error. Check console.</p><pre>${error}</pre>`; }
401
  });
402
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Choose Your Own Procedural Adventure</title>
7
  <style>
8
+ body {
9
+ font-family: 'Courier New', monospace;
10
+ background-color: #222;
11
+ color: #eee;
12
+ margin: 0;
13
+ padding: 0;
14
+ overflow: hidden;
15
+ display: flex;
16
+ flex-direction: column;
17
+ height: 100vh;
18
+ }
19
+
20
+ #game-container {
21
+ display: flex;
22
+ flex-grow: 1;
23
+ overflow: hidden;
24
+ }
25
+
26
+ #scene-container {
27
+ flex-grow: 3;
28
+ position: relative;
29
+ border-right: 2px solid #555;
30
+ min-width: 200px;
31
+ background-color: #1a1a1a;
32
+ height: 100%;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+ #ui-container {
37
+ flex-grow: 2;
38
+ padding: 20px;
39
+ overflow-y: auto;
40
+ background-color: #333;
41
+ min-width: 280px;
42
+ height: 100%;
43
+ box-sizing: border-box;
44
+ display: flex;
45
+ flex-direction: column;
46
+ }
47
+
48
+ #scene-container canvas { display: block; }
49
+
50
+ #story-title {
51
+ color: #ffcc66;
52
+ margin-top: 0;
53
+ margin-bottom: 15px;
54
+ border-bottom: 1px solid #555;
55
+ padding-bottom: 10px;
56
+ font-size: 1.4em;
57
+ }
58
+
59
+ #story-content {
60
+ margin-bottom: 20px;
61
+ line-height: 1.6;
62
+ flex-grow: 1;
63
+ }
64
+ #story-content p { margin-bottom: 1em; }
65
+ #story-content p:last-child { margin-bottom: 0; }
66
+
67
+ #stats-inventory-container {
68
+ margin-bottom: 20px;
69
+ padding-bottom: 15px;
70
+ border-bottom: 1px solid #555;
71
+ font-size: 0.9em;
72
+ }
73
+ #stats-display, #inventory-display {
74
+ margin-bottom: 10px;
75
+ line-height: 1.8;
76
+ }
77
+ #stats-display span, #inventory-display span {
78
+ display: inline-block;
79
+ background-color: #444;
80
+ padding: 3px 8px;
81
+ border-radius: 15px;
82
+ margin-right: 8px;
83
+ margin-bottom: 5px;
84
+ border: 1px solid #666;
85
+ white-space: nowrap;
86
+ }
87
+ #stats-display strong, #inventory-display strong { color: #aaa; margin-right: 5px; }
88
+ #inventory-display em { color: #888; font-style: normal; }
89
+
90
+ #inventory-display .item-quest { background-color: #666030; border-color: #999048;}
91
+ #inventory-display .item-weapon { background-color: #663030; border-color: #994848;}
92
+ #inventory-display .item-armor { background-color: #306630; border-color: #489948;}
93
+ #inventory-display .item-spell { background-color: #303066; border-color: #484899;}
94
+ #inventory-display .item-unknown { background-color: #555; border-color: #777;}
95
+
96
+ #choices-container {
97
+ margin-top: auto;
98
+ padding-top: 15px;
99
+ border-top: 1px solid #555;
100
+ }
101
+ #choices-container h3 { margin-top: 0; margin-bottom: 10px; color: #aaa; }
102
+ #choices { display: flex; flex-direction: column; gap: 10px; }
103
+
104
+ .choice-button {
105
+ display: block; width: 100%; padding: 10px 12px; margin-bottom: 0;
106
+ background-color: #555; color: #eee; border: 1px solid #777;
107
+ border-radius: 5px; cursor: pointer; text-align: left;
108
+ font-family: 'Courier New', monospace; font-size: 1em;
109
+ transition: background-color 0.2s, border-color 0.2s;
110
+ box-sizing: border-box;
111
+ }
112
+ .choice-button:hover:not(:disabled) { background-color: #d4a017; color: #222; border-color: #b8860b; }
113
+ .choice-button:disabled { background-color: #444; color: #888; cursor: not-allowed; border-color: #666; opacity: 0.7; }
114
+
115
+ /* Optional Roll Result Styling */
116
+ .roll-success { color: #7f7; border-left: 3px solid #4a4; padding-left: 8px; margin-bottom: 1em; font-size: 0.9em; }
117
+ .roll-failure { color: #f77; border-left: 3px solid #a44; padding-left: 8px; margin-bottom: 1em; font-size: 0.9em; }
118
+
119
  </style>
120
  </head>
121
  <body>
 
149
 
150
  <script type="module">
151
  import * as THREE from 'three';
152
+ // Optional: Add OrbitControls for debugging/viewing scene
153
+ // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
154
 
155
  const sceneContainer = document.getElementById('scene-container');
156
  const storyTitleElement = document.getElementById('story-title');
 
171
  const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
172
  const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 });
173
  const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
 
 
 
174
 
175
  function initThreeJS() {
176
  if (!sceneContainer) { console.error("Scene container not found!"); return; }
177
  scene = new THREE.Scene();
178
  scene.background = new THREE.Color(0x222222);
179
+ const width = sceneContainer.clientWidth;
180
+ const height = sceneContainer.clientHeight;
181
  camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
182
+ camera.position.set(0, 2.5, 7);
183
+ camera.lookAt(0, 0.5, 0);
184
  renderer = new THREE.WebGLRenderer({ antialias: true });
185
  renderer.setSize(width || 400, height || 300);
186
+ renderer.shadowMap.enabled = true;
187
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
188
  sceneContainer.appendChild(renderer.domElement);
189
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
190
+ scene.add(ambientLight);
191
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
192
+ directionalLight.position.set(8, 15, 10);
193
+ directionalLight.castShadow = true;
194
+ directionalLight.shadow.mapSize.width = 1024;
195
+ directionalLight.shadow.mapSize.height = 1024;
196
+ directionalLight.shadow.camera.near = 0.5;
197
+ directionalLight.shadow.camera.far = 50;
198
+ const shadowCamSize = 15;
199
  directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize;
200
  directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize;
201
  scene.add(directionalLight);
 
206
 
207
  function onWindowResize() {
208
  if (!renderer || !camera || !sceneContainer) return;
209
+ const width = sceneContainer.clientWidth;
210
+ const height = sceneContainer.clientHeight;
211
+ if (width > 0 && height > 0) {
212
+ camera.aspect = width / height;
213
+ camera.updateProjectionMatrix();
214
+ renderer.setSize(width, height);
215
+ }
216
  }
217
 
218
  function animate() {
219
  requestAnimationFrame(animate);
220
+ // if (currentAssemblyGroup) { currentAssemblyGroup.rotation.y += 0.0005; } // Optional rotation
221
+ if (renderer && scene && camera) {
222
+ renderer.render(scene, camera);
223
+ }
224
  }
225
 
226
  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 }) {
227
  const mesh = new THREE.Mesh(geometry, material);
228
+ mesh.position.set(position.x, position.y, position.z);
229
+ mesh.rotation.set(rotation.x, rotation.y, rotation.z);
230
+ mesh.scale.set(scale.x, scale.y, scale.z);
231
  mesh.castShadow = true; mesh.receiveShadow = true;
232
  return mesh;
233
  }
 
240
  return ground;
241
  }
242
 
243
+ // --- Procedural Generation Functions ---
244
  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; }
245
  function createCityGatesAssembly() { const group = new THREE.Group(); const gh=4, gw=1.5, gd=0.8, ah=1, aw=3; const tlGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(tlGeo, stoneMaterial, { x:-(aw/2+gw/2), y:gh/2, z:0 })); const trGeo = new THREE.BoxGeometry(gw, gh, gd); group.add(createMesh(trGeo, stoneMaterial, { x:(aw/2+gw/2), y:gh/2, z:0 })); const aGeo = new THREE.BoxGeometry(aw, ah, gd); group.add(createMesh(aGeo, stoneMaterial, { x:0, y:gh-ah/2, z:0 })); const cs=0.4; const cg = new THREE.BoxGeometry(cs, cs, gd*1.1); for(let i=-1; i<=1; i+=2){ group.add(createMesh(cg.clone(), stoneMaterial, { x:-(aw/2+gw/2)+i*cs*0.7, y:gh+cs/2, z:0 })); group.add(createMesh(cg.clone(), stoneMaterial, { x:(aw/2+gw/2)+i*cs*0.7, y:gh+cs/2, z:0 })); } group.add(createMesh(cg.clone(), stoneMaterial, { x:0, y:gh+ah-cs/2, z:0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
246
  function createWeaponsmithAssembly() { const group = new THREE.Group(); const bw=3, bh=2.5, bd=3.5; const bGeo = new THREE.BoxGeometry(bw, bh, bd); group.add(createMesh(bGeo, darkWoodMaterial, { x:0, y:bh/2, z:0 })); const ch=3.5; const cGeo = new THREE.CylinderGeometry(0.3, 0.4, ch, 8); group.add(createMesh(cGeo, stoneMaterial, { x:bw*0.3, y:ch/2, z:-bd*0.3 })); group.add(createGroundPlane()); return group; }
247
  function createTempleAssembly() { const group = new THREE.Group(); const bs=5, bsh=0.5, ch=3, cr=0.25, rh=0.5; const bGeo = new THREE.BoxGeometry(bs, bsh, bs); group.add(createMesh(bGeo, templeMaterial, { x:0, y:bsh/2, z:0 })); const cGeo = new THREE.CylinderGeometry(cr, cr, ch, 12); const cPos = [{x:-bs/3, z:-bs/3}, {x:bs/3, z:-bs/3}, {x:-bs/3, z:bs/3}, {x:bs/3, z:bs/3}]; cPos.forEach(p=>group.add(createMesh(cGeo.clone(), templeMaterial, { x:p.x, y:bsh+ch/2, z:p.z }))); const rGeo = new THREE.BoxGeometry(bs*0.9, rh, bs*0.9); group.add(createMesh(rGeo, templeMaterial, { x:0, y:bsh+ch+rh/2, z:0 })); group.add(createGroundPlane()); return group; }
248
  function createResistanceMeetingAssembly() { const group = new THREE.Group(); const tw=2, th=0.8, td=1, tt=0.1; const ttg = new THREE.BoxGeometry(tw, tt, td); group.add(createMesh(ttg, woodMaterial, { x:0, y:th-tt/2, z:0 })); const lh=th-tt, ls=0.1; const lg=new THREE.BoxGeometry(ls, lh, ls); const lofW=tw/2-ls*1.5; const lofD=td/2-ls*1.5; group.add(createMesh(lg, woodMaterial, { x:-lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:-lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:-lofW, y:lh/2, z:lofD })); group.add(createMesh(lg.clone(), woodMaterial, { x:lofW, y:lh/2, z:lofD })); const ss=0.4; const sg=new THREE.BoxGeometry(ss, ss*0.8, ss); group.add(createMesh(sg, darkWoodMaterial, { x:-tw*0.6, y:ss*0.4, z:0 })); group.add(createMesh(sg.clone(), darkWoodMaterial, { x:tw*0.6, y:ss*0.4, z:0 })); group.add(createGroundPlane(stoneMaterial)); return group; }
249
+ function createForestAssembly(tc=10, a=10) { const group = new THREE.Group(); const cT=(x,z)=>{ const tg=new THREE.Group(); const th=Math.random()*1.5+2; const tr=Math.random()*0.1+0.1; const tGeo = new THREE.CylinderGeometry(tr*0.7, tr, th, 8); tg.add(createMesh(tGeo, woodMaterial, {x:0, y:th/2, z:0})); const fr=th*0.4+0.2; const fGeo=new THREE.SphereGeometry(fr, 8, 6); tg.add(createMesh(fGeo, leafMaterial, {x:0, y:th*0.9, z:0})); tg.position.set(x,0,z); return tg; }; for(let i=0; i<tc; i++){ const x=(Math.random()-0.5)*a; const z=(Math.random()-0.5)*a; if(Math.sqrt(x*x+z*z)>1.0) group.add(cT(x,z)); } group.add(createGroundPlane(groundMaterial, a*1.1)); return group; }
250
+ function createRoadAmbushAssembly() { const group = new THREE.Group(); const a=12; const fg = createForestAssembly(8, a); group.add(fg); const rw=3, rl=a*1.2; const rGeo=new THREE.PlaneGeometry(rw, rl); const rMat=new THREE.MeshStandardMaterial({color:0x966F33, roughness:0.9}); const r=createMesh(rGeo, rMat, {x:0, y:0.01, z:0}, {x:-Math.PI/2}); r.receiveShadow=true; group.add(r); const rkGeo=new THREE.SphereGeometry(0.5, 5, 4); const rkMat=new THREE.MeshStandardMaterial({color:0x666666, roughness:0.8}); group.add(createMesh(rkGeo, rkMat, {x:rw*0.7, y:0.25, z:1}, {y:Math.random()*Math.PI})); group.add(createMesh(rkGeo.clone().scale(0.8,0.8,0.8), rkMat, {x:-rw*0.8, y:0.2, z:-2}, {y:Math.random()*Math.PI})); return group; }
251
+ function createForestEdgeAssembly() { const group = new THREE.Group(); const a=15; const fg = createForestAssembly(15, a); const ttr=[]; fg.children.forEach(c => { if(c.type === 'Group' && c.position.x > 0) ttr.push(c); }); ttr.forEach(t => fg.remove(t)); group.add(fg); return group; }
 
 
 
 
252
  function createPrisonerCellAssembly() { const group = new THREE.Group(); const cs=3, wh=2.5, wt=0.2, br=0.05, bsp=0.25; const cfMat=stoneMaterial.clone(); cfMat.color.setHex(0x555555); group.add(createGroundPlane(cfMat, cs)); const wbGeo=new THREE.BoxGeometry(cs, wh, wt); group.add(createMesh(wbGeo, stoneMaterial, {x:0, y:wh/2, z:-cs/2})); const wsGeo=new THREE.BoxGeometry(wt, wh, cs); group.add(createMesh(wsGeo, stoneMaterial, {x:-cs/2, y:wh/2, z:0})); group.add(createMesh(wsGeo.clone(), stoneMaterial, {x:cs/2, y:wh/2, z:0})); const bGeo=new THREE.CylinderGeometry(br, br, wh, 8); const nb=Math.floor(cs/bsp); for(let i=0; i<nb; i++){ const xp=-cs/2+(i+0.5)*bsp; group.add(createMesh(bGeo.clone(), metalMaterial, {x:xp, y:wh/2, z:cs/2})); } return group; }
253
  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}))); return group; }
254
  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; }
255
 
256
  // --- Game Data ---
257
+ const itemsData = { "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"}, "Crude Dagger":{type:"weapon", description:"A roughly made dagger."}, "Scout's Pouch":{type:"quest", description:"Contains odds and ends."} };
258
+ const gameData = {
259
+ "1": { title: "The Crossroads", content: `<p>Dust swirls... Which path calls to you?</p>`, options: [ { text: "Enter the Shadowwood Forest (North)", next: 5 }, { text: "Head towards the Rolling Hills (East)", next: 2 }, { text: "Investigate the Coastal Cliffs (West)", next: 3 } ], illustration: "crossroads-signpost-sunny" },
260
+ "2": { title: "Rolling Hills", content: `<p>Verdant hills stretch before you... It feels peaceful...</p>`, options: [ { text: "Follow the narrow path", next: 4 }, { text: "Try to hail the distant shepherd (Charisma Check?)", next: 99 } ], illustration: "rolling-green-hills-shepherd-distance" },
261
+ "3": { title: "Coastal Cliffs Edge", content: `<p>You stand atop windswept cliffs... A precarious-looking path descends...</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 }, { text: "Scan the cliff face for easier routes (Wisdom Check)", check: { stat: 'wisdom', dc: 11, onFailure: 32 }, next: 33 } ], illustration: "windy-sea-cliffs-crashing-waves-path-down" },
262
+ "4": { title: "Hill Path Overlook", content: `<p>The path crests a hill... you see a small, overgrown shrine...</p>`, options: [ { text: "Investigate the overgrown shrine", next: 40 }, { text: "Continue towards the badlands", next: 41 } ], illustration: "hilltop-view-overgrown-shrine-wildflowers" },
263
+ "5": { title: "Shadowwood Entrance", content: `<p>Sunlight struggles to pierce the dense canopy... How do you proceed?</p>`, options: [ { text: "Follow the main, albeit overgrown, path", next: 6 }, { text: "Try to navigate through the lighter undergrowth", next: 7 }, { text: "Look for animal trails or signs of passage (Wisdom Check)", check: { stat: 'wisdom', dc: 10, onFailure: 6 }, next: 8 } ], illustration: "dark-forest-entrance-gnarled-roots-filtered-light" },
264
+ "6": { title: "Overgrown Forest Path", content: `<p>The path is barely visible... You hear a twig snap nearby!</p>`, options: [ { text: "Ready your weapon and investigate", next: 10 }, { text: "Attempt to hide quietly (Dexterity Check)", check: { stat: 'dexterity', dc: 11, onFailure: 10 }, next: 11 }, { text: "Call out cautiously", next: 10 } ], illustration: "overgrown-forest-path-glowing-fungi-vines" },
265
+ "7": { title: "Tangled Undergrowth", content: `<p>Pushing through ferns... You stumble upon a small clearing containing a moss-covered, weathered stone statue...</p>`, options: [ { text: "Examine the statue closely (Intelligence Check)", check: { stat: 'intelligence', dc: 13, onFailure: 71 }, next: 70 }, { text: "Ignore the statue and press on", next: 72 }, { text: "Leave a small offering (if possible)", next: 73 } ], illustration: "forest-clearing-mossy-statue-weathered-stone" },
266
+ "8": { title: "Hidden Game Trail", content: `<p>Your sharp eyes spot a faint trail... It leads towards a ravine spanned by a rickety rope bridge.</p><p>(+20 XP)</p>`, options: [ { text: "Risk crossing the rope bridge (Dexterity Check)", check: { stat: 'dexterity', dc: 10, onFailure: 81 }, next: 80 }, { text: "Search for another way across the ravine", next: 82 } ], illustration: "narrow-game-trail-forest-rope-bridge-ravine", reward: { xp: 20 } },
267
+ "10": { title: "Goblin Ambush!", content: `<p>Two scraggly goblins leap out, brandishing crude spears!</p>`, options: [ { text: "Fight the goblins!", next: 12 }, { text: "Attempt to dodge past them (Dexterity Check)", check: { stat: 'dexterity', dc: 13, onFailure: 10 }, next: 13 } ], illustration: "two-goblins-ambush-forest-path-spears" }, // Simplified options
268
+ "11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p><p>(+30 XP)</p>`, options: [ { text: "Continue cautiously", next: 14 } ], illustration: "forest-shadows-hiding-goblins-walking-past", reward: { xp: 30 } },
269
+ "12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p><p>(+50 XP)</p>`, options: [ { text: "Press onward", next: 14 } ], illustration: "defeated-goblins-forest-path-loot", reward: { xp: 50, addItem: "Crude Dagger" } }, // Added item directly
270
+ "13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</p><p>(+25 XP)</p>`, options: [ { text: "Keep running!", next: 14 } ], illustration: "blurred-motion-running-past-goblins-forest", reward: { xp: 25 } },
271
+ "14": { title: "Forest Stream Crossing", content: `<p>The path leads to a clear, shallow stream...</p>`, options: [ { text: "Wade across the stream", next: 16 }, { text: "Look for a drier crossing point (fallen log?)", next: 15 } ], illustration: "forest-stream-crossing-dappled-sunlight-stones" },
272
  "15": { title: "Log Bridge", content: `<p>Further upstream, a large, mossy log spans the stream.</p>`, options: [ { text: "Cross carefully on the log (Dexterity Check)", check: { stat: 'dexterity', dc: 9, onFailure: 151 }, next: 16 }, { text: "Go back and wade instead", next: 14 } ], illustration: "mossy-log-bridge-over-forest-stream" },
273
  "151": { title: "Splash!", content: `<p>You slip on the mossy log and tumble into the cold stream! You're soaked but unharmed.</p>`, options: [ { text: "Shake yourself off and continue", next: 16 } ], illustration: "character-splashing-into-stream-from-log" },
274
  "16": { title: "Edge of the Woods", content: `<p>You emerge from the Shadowwood... Before you lie rocky foothills...</p>`, options: [ { text: "Begin the ascent into the foothills", next: 17 }, { text: "Scan the fortress from afar (Wisdom Check)", check: { stat: 'wisdom', dc: 14, onFailure: 17 }, next: 18 } ], illustration: "forest-edge-view-rocky-foothills-distant-mountain-fortress" },
275
  "17": { title: "Rocky Foothills Path", content: `<p>The climb is arduous... The fortress looms larger now.</p>`, options: [ { text: "Continue the direct ascent", next: 19 }, { text: "Look for signs of a hidden trail (Wisdom Check)", check: { stat: 'wisdom', dc: 15, onFailure: 19 }, next: 20 } ], illustration: "climbing-rocky-foothills-path-fortress-closer" },
276
+ "18": { title: "Distant Observation", content: `<p>You notice what might be a less-guarded approach along the western ridge...</p><p>(+30 XP)</p>`, options: [ { text: "Take the main path into the foothills", next: 17 }, { text: "Attempt the western ridge approach", next: 21 } ], illustration: "zoomed-view-mountain-fortress-western-ridge", reward: { xp: 30 } },
277
  "19": { title: "Blocked Pass", content: `<p>The main path is blocked by a recent rockslide!</p>`, options: [ { text: "Try to climb over (Strength Check)", check: { stat: 'strength', dc: 14, onFailure: 191 }, next: 190 }, { text: "Search for another way around", next: 192 } ], illustration: "rockslide-blocking-mountain-path-boulders" },
278
+ "20": { title: "Goat Trail", content: `<p>You discover a narrow trail barely wide enough for a mountain goat...</p><p>(+40 XP)</p>`, options: [ { text: "Follow the precarious goat trail", next: 22 } ], illustration: "narrow-goat-trail-mountainside-fortress-view", reward: { xp: 40 } },
279
+ "30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p><p>(+25 XP)</p>`, options: [ { text: "Explore the dark cave", next: 35 } ], illustration: "hidden-cove-beach-dark-cave-entrance", reward: { xp: 25 } },
280
+ "31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard on the sandy cove floor. You lose 5 HP. A dark cave entrance beckons.</p>`, options: [ { text: "Gingerly explore the dark cave", next: 35 } ], illustration: "character-fallen-at-bottom-of-cliff-path-cove", hpLoss: 5 },
281
+ "32": { title: "No Easier Path", content: `<p>You scan the cliffs intently but find no obviously easier routes.</p>`, options: [ { text: "Attempt the precarious descent (Dexterity Check)", check: { stat: 'dexterity', dc: 12, onFailure: 31 }, next: 30 } ], illustration: "scanning-sea-cliffs-no-other-paths-visible" },
282
+ "33": { title: "Smuggler's Steps?", content: `<p>Your keen eyes spot a series of barely visible handholds and steps carved into the rock...</p><p>(+15 XP)</p>`, options: [ { text: "Use the hidden steps (Easier Dex Check)", check: { stat: 'dexterity', dc: 8, onFailure: 31 }, next: 30 } ], illustration: "close-up-handholds-carved-in-cliff-face", reward: { xp: 15 } },
283
+ "35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay. Water drips somewhere within.</p>`, options: [{ text: "Press deeper into the darkness", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" }, // End of this branch for now
284
+ "40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine. It feels ancient and neglected.</p>`, options: [{ text: "Examine the carvings (Intelligence Check)", check:{stat:'intelligence', dc:11, onFailure: 401}, next: 400 } ], illustration: "overgrown-stone-shrine-wildflowers-close" },
285
+ "41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth and jagged rock formations under a harsh sun.</p>`, options: [{ text: "Scout ahead", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" }, // End of this branch
286
+ // Add pages 70-73, 80-82, 190-192, 21, 22, 400, 401 etc.
287
+ "190": { title: "Over the Rocks", content:"<p>With considerable effort, you manage to climb over the rockslide.</p><p>(+35 XP)</p>", options: [{text:"Continue up the path", next: 22}], illustration:"character-climbing-over-boulders", reward: {xp:35} },
288
+ "191": { title: "Climb Fails", content:"<p>The boulders are too unstable or sheer. You cannot climb them safely.</p>", options: [{text:"Search for another way around", next: 192}], illustration:"character-slipping-on-rockslide-boulders"},
289
+ "192": { title: "Detour Found", content:"<p>After some searching, you find a rough path leading around the rockslide, eventually rejoining the main trail.</p>", options: [{text:"Continue up the path", next: 22}], illustration:"rough-detour-path-around-rockslide"},
290
+ "21": { title: "Western Ridge", content:"<p>The ridge path is narrow and exposed, with strong winds threatening to push you off.</p>", options: [{text:"Proceed carefully (Dexterity Check)", check:{stat:'dexterity', dc: 14, onFailure: 211}, next: 22 } ], illustration:"narrow-windy-mountain-ridge-path" },
291
+ "22": { title: "Fortress Approach", content:"<p>You've navigated the treacherous paths and now stand near the outer walls of the dark fortress. Guards patrol the battlements.</p>", options: [{text:"Look for an unguarded entrance", next: 99}], illustration:"approaching-dark-fortress-walls-guards"}, // End for now
292
+ "211": {title:"Lost Balance", content:"<p>A strong gust of wind catches you off guard, sending you tumbling down a steep slope! You lose 10 HP.</p>", options:[{text:"Climb back up and find another way", next: 17}], illustration:"character-falling-off-windy-ridge", hpLoss: 10},
 
 
 
 
 
 
 
 
 
 
293
 
294
  "99": { title: "Game Over / To Be Continued...", content: "<p>Your adventure ends here (for now).</p>", options: [{ text: "Restart", next: 1 }], illustration: "game-over-generic", gameOver: true }
295
  };
 
299
  currentPageId: 1,
300
  character: {
301
  name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
302
+ level: 1, xp: 0, xpToNextLevel: 100,
303
  stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 },
304
  inventory: []
305
  }
 
307
 
308
  // --- Game Logic Functions ---
309
  function startGame() {
310
+ const defaultChar = { name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer", level: 1, xp: 0, xpToNextLevel: 100, stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 }, inventory: [] };
311
+ gameState = { currentPageId: 1, character: { ...defaultChar } }; // Reset state
312
+ // Potential load logic could go here later:
313
+ // if (loadCharacter()) { console.log("Loaded saved game."); }
314
  renderPage(gameState.currentPageId);
315
  }
316
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
  function handleChoiceClick(choiceData) {
318
  const optionNextPageId = parseInt(choiceData.nextPage);
319
  const itemToAdd = choiceData.addItem;
320
  let nextPageId = optionNextPageId;
321
  let rollResultMessage = "";
322
+ const check = choiceData.check; // Get check data if it exists
323
+
324
+ if (isNaN(optionNextPageId) && !check) { console.error("Invalid choice data:", choiceData); return; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
 
 
326
  if (check) {
327
  const statValue = gameState.character.stats[check.stat] || 10;
328
  const modifier = Math.floor((statValue - 10) / 2);
329
  const roll = Math.floor(Math.random() * 20) + 1;
330
  const totalResult = roll + modifier;
331
  const dc = check.dc;
 
332
  console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
333
+ if (totalResult >= dc) {
334
+ nextPageId = optionNextPageId; // Check succeeds, use original 'next'
335
+ rollResultMessage = `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
336
+ } else {
337
+ nextPageId = parseInt(check.onFailure); // Check fails, use 'onFailure'
338
+ rollResultMessage = `<p class="roll-failure"><em>Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
 
 
 
 
 
339
  if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; }
340
  }
341
  }
342
 
 
343
  if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) {
344
+ gameState.character.inventory.push(itemToAdd);
345
+ console.log("Added item:", itemToAdd);
346
  }
347
 
 
348
  gameState.currentPageId = nextPageId;
349
  const nextPageData = gameData[nextPageId];
350
 
 
352
  if (nextPageData.hpLoss) {
353
  gameState.character.stats.hp -= nextPageData.hpLoss;
354
  console.log(`Lost ${nextPageData.hpLoss} HP.`);
355
+ if (gameState.character.stats.hp <= 0) { gameState.character.stats.hp = 0; console.log("Player died!"); nextPageId = 99; /* Force redirect handled below */ }
356
  }
357
  if (nextPageData.reward) {
358
+ if (nextPageData.reward.xp) { gameState.character.xp += nextPageData.reward.xp; console.log(`Gained ${nextPageData.reward.xp} XP! Total: ${gameState.character.xp}`); }
359
+ 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}.`); } }
360
  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}`); }
361
  }
362
+ // Recalculate max HP based on CON after potential stat changes
363
+ const conModifier = Math.floor((gameState.character.stats.constitution - 10) / 2);
364
+ // Example Max HP calculation: Base + CON modifier per level
365
+ gameState.character.stats.maxHp = 10 + (conModifier * gameState.character.level); // Adjust base 10 as needed
 
 
 
 
 
 
 
 
 
 
 
 
366
  gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp); // Clamp HP
 
367
 
368
+ // Handle forced game over from HP loss
369
+ if (nextPageId === 99 && gameState.character.stats.hp <= 0) {
370
+ renderPageInternal(99, gameData[99], rollResultMessage);
371
+ return;
372
  }
373
+ } else {
 
374
  console.error(`Data for page ${nextPageId} not found!`);
375
+ renderPageInternal(99, gameData[99], "<p><em>Error: Next page data missing!</em></p>");
376
+ return;
377
  }
378
+ renderPageInternal(nextPageId, gameData[nextPageId], rollResultMessage);
379
  }
380
 
381
  function renderPageInternal(pageId, pageData, message = "") {
382
+ if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; } // Guard clause
383
  storyTitleElement.textContent = pageData.title || "Untitled Page";
384
  storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
385
  updateStatsDisplay(); updateInventoryDisplay();
 
388
  pageData.options.forEach(option => {
389
  const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true;
390
  if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
391
+ if (requirementMet) { const choiceData = { nextPage: option.next, addItem: option.addItem, check: option.check }; button.onclick = () => handleChoiceClick(choiceData); } else { button.classList.add('disabled'); } choicesElement.appendChild(button); });
392
  } else { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = pageData.gameOver ? "Restart Adventure" : "The End"; button.onclick = () => handleChoiceClick({ nextPage: pageData.gameOver ? 1 : 99 }); choicesElement.appendChild(button); if (!pageData.gameOver) choicesElement.insertAdjacentHTML('afterbegin', '<p><i>The path ends here.</i></p>'); }
393
+ updateScene(pageData.illustration || 'default');
394
  }
395
 
396
  function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
397
 
398
+ function updateStatsDisplay() { const char=gameState.character; statsElement.innerHTML = `<strong>Stats:</strong> <span>Lvl: ${char.level}</span> <span>XP: ${char.xp}/${char.xpToNextLevel}</span> <span>HP: ${char.stats.hp}/${char.stats.maxHp}</span> <span>Str: ${char.stats.strength}</span> <span>Int: ${char.stats.intelligence}</span> <span>Wis: ${char.stats.wisdom}</span> <span>Dex: ${char.stats.dexterity}</span> <span>Con: ${char.stats.constitution}</span> <span>Cha: ${char.stats.charisma}</span>`; }
399
  function updateInventoryDisplay() { let h='<strong>Inventory:</strong> '; if(gameState.character.inventory.length === 0){ h+='<em>Empty</em>'; } else { gameState.character.inventory.forEach(i=>{ const d=itemsData[i]||{type:'unknown',description:'???'}; const c=`item-${d.type||'unknown'}`; h+=`<span class="${c}" title="${d.description}">${i}</span>`; }); } inventoryElement.innerHTML = h; }
400
 
401
+ function updateScene(illustrationKey) {
402
+ // console.log(`Updating scene to: ${illustrationKey}`); // Minimal log
403
  if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
404
  currentAssemblyGroup = null; let assemblyFunction;
 
405
  switch (illustrationKey) {
406
  case 'city-gates': assemblyFunction = createCityGatesAssembly; break;
407
  case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
408
  case 'temple': assemblyFunction = createTempleAssembly; break;
409
  case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break;
410
+ case 'shadowwood-forest': assemblyFunction = createForestAssembly; break;
411
+ case 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break;
412
+ case 'forest-edge': assemblyFunction = createForestEdgeAssembly; break;
413
  case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
414
+ case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break; // Added generic key
415
  case 'error': assemblyFunction = createErrorAssembly; break;
416
+ case 'crossroads-signpost-sunny': // New keys added
417
+ case 'rolling-green-hills-shepherd-distance':
418
+ case 'windy-sea-cliffs-crashing-waves-path-down':
419
+ case 'hilltop-view-overgrown-shrine-wildflowers':
420
+ case 'dark-forest-entrance-gnarled-roots-filtered-light':
421
+ case 'overgrown-forest-path-glowing-fungi-vines':
422
+ case 'forest-clearing-mossy-statue-weathered-stone':
423
+ case 'narrow-game-trail-forest-rope-bridge-ravine':
424
+ case 'two-goblins-ambush-forest-path-spears':
425
+ case 'forest-shadows-hiding-goblins-walking-past':
426
+ case 'defeated-goblins-forest-path-loot':
427
+ case 'blurred-motion-running-past-goblins-forest':
428
+ case 'forest-stream-crossing-dappled-sunlight-stones':
429
+ case 'mossy-log-bridge-over-forest-stream':
430
+ case 'character-splashing-into-stream-from-log':
431
+ case 'forest-edge-view-rocky-foothills-distant-mountain-fortress':
432
+ case 'climbing-rocky-foothills-path-fortress-closer':
433
+ case 'zoomed-view-mountain-fortress-western-ridge':
434
+ case 'rockslide-blocking-mountain-path-boulders':
435
+ case 'narrow-goat-trail-mountainside-fortress-view':
436
+ case 'hidden-cove-beach-dark-cave-entrance':
437
+ case 'character-fallen-at-bottom-of-cliff-path-cove':
438
+ case 'scanning-sea-cliffs-no-other-paths-visible':
439
+ case 'close-up-handholds-carved-in-cliff-face':
440
+ case 'dark-cave-entrance-dripping-water':
441
+ case 'overgrown-stone-shrine-wildflowers-close':
442
+ case 'rocky-badlands-cracked-earth-harsh-sun':
443
+ case 'character-climbing-over-boulders':
444
+ case 'character-slipping-on-rockslide-boulders':
445
+ case 'rough-detour-path-around-rockslide':
446
+ case 'narrow-windy-mountain-ridge-path':
447
+ case 'approaching-dark-fortress-walls-guards':
448
+ case 'character-falling-off-windy-ridge':
449
+ // Add specific assembly functions for these later or assign existing ones
450
+ console.warn(`Assembly function not yet defined for: "${illustrationKey}". Using default.`);
451
+ assemblyFunction = createDefaultAssembly; break;
452
+ default:
453
+ console.warn(`Unknown illustration key: "${illustrationKey}". Using default.`);
454
+ assemblyFunction = createDefaultAssembly; break;
455
  }
456
+ try { currentAssemblyGroup = assemblyFunction(); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
457
  }
458
 
459
  document.addEventListener('DOMContentLoaded', () => {
460
+ console.log("DOM Ready.");
461
  try { initThreeJS(); startGame(); } catch (error) { console.error("Init failed:", error); storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = `<p>Init Error. Check console.</p><pre>${error}</pre>`; }
462
  });
463