Spaces:
Running
Running
Update index.html
Browse files- index.html +285 -244
index.html
CHANGED
@@ -5,117 +5,35 @@
|
|
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 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
}
|
19 |
-
|
20 |
-
#
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
}
|
25 |
-
|
26 |
-
#
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
}
|
35 |
-
|
36 |
-
#
|
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>
|
@@ -130,7 +48,7 @@
|
|
130 |
<div id="stats-inventory-container">
|
131 |
<div id="stats-display"></div>
|
132 |
<div id="inventory-display"></div>
|
133 |
-
|
134 |
<div id="choices-container">
|
135 |
<h3>What will you do?</h3>
|
136 |
<div id="choices"></div>
|
@@ -149,8 +67,6 @@
|
|
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');
|
@@ -162,10 +78,13 @@
|
|
162 |
let scene, camera, renderer;
|
163 |
let currentAssemblyGroup = null;
|
164 |
|
|
|
165 |
const stoneMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1 });
|
166 |
const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7, metalness: 0 });
|
167 |
const darkWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x5C3D20, roughness: 0.7, metalness: 0 });
|
168 |
const leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 });
|
|
|
|
|
169 |
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 });
|
170 |
const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
|
171 |
const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
|
@@ -191,11 +110,9 @@
|
|
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.
|
196 |
-
|
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,28 +123,18 @@
|
|
206 |
|
207 |
function onWindowResize() {
|
208 |
if (!renderer || !camera || !sceneContainer) return;
|
209 |
-
const width = sceneContainer.clientWidth;
|
210 |
-
|
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 |
-
|
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 |
}
|
@@ -242,54 +149,118 @@
|
|
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,
|
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 |
-
|
250 |
-
function
|
251 |
-
|
252 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
260 |
-
|
261 |
-
|
262 |
-
|
263 |
-
|
264 |
-
|
265 |
-
|
266 |
-
|
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:
|
268 |
-
"11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p
|
269 |
-
"12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p
|
270 |
-
"13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</p
|
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
|
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
|
279 |
-
"30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p
|
280 |
-
"31": { title: "Tumbled Down", content: `<p>You lose your footing... landing hard
|
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
|
283 |
-
"35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay
|
284 |
-
"40": { title: "Overgrown Shrine", content: `<p>Wildflowers grow thick around a small stone shrine
|
285 |
-
"41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth
|
286 |
-
|
287 |
-
"
|
288 |
-
"
|
289 |
-
"
|
290 |
-
"
|
291 |
-
"
|
292 |
-
"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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,7 +270,7 @@
|
|
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,79 +278,164 @@
|
|
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 |
-
|
312 |
-
|
313 |
-
|
|
|
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 |
-
|
323 |
-
|
324 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
334 |
-
|
335 |
-
|
336 |
-
|
337 |
-
|
338 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|
351 |
if (nextPageData) {
|
|
|
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
|
356 |
}
|
|
|
|
|
357 |
if (nextPageData.reward) {
|
358 |
-
if (nextPageData.reward.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 |
-
|
363 |
-
|
364 |
-
|
365 |
-
|
366 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
|
|
|
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; }
|
383 |
storyTitleElement.textContent = pageData.title || "Untitled Page";
|
384 |
storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
|
385 |
updateStatsDisplay(); updateInventoryDisplay();
|
@@ -388,9 +444,9 @@
|
|
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]); }
|
@@ -398,8 +454,9 @@
|
|
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 |
-
|
402 |
-
|
|
|
403 |
if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
|
404 |
currentAssemblyGroup = null; let assemblyFunction;
|
405 |
switch (illustrationKey) {
|
@@ -407,53 +464,37 @@
|
|
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;
|
415 |
case 'error': assemblyFunction = createErrorAssembly; break;
|
416 |
-
|
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 |
-
|
454 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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', () => {
|
|
|
5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
<title>Choose Your Own Procedural Adventure</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;}
|
36 |
+
.level-up{color:#ffcc66;font-weight:bold;border:1px dashed #ffcc66;padding:5px;margin-bottom:1em;text-align:center;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
37 |
</style>
|
38 |
</head>
|
39 |
<body>
|
|
|
48 |
<div id="stats-inventory-container">
|
49 |
<div id="stats-display"></div>
|
50 |
<div id="inventory-display"></div>
|
51 |
+
</div>
|
52 |
<div id="choices-container">
|
53 |
<h3>What will you do?</h3>
|
54 |
<div id="choices"></div>
|
|
|
67 |
|
68 |
<script type="module">
|
69 |
import * as THREE from 'three';
|
|
|
|
|
70 |
|
71 |
const sceneContainer = document.getElementById('scene-container');
|
72 |
const storyTitleElement = document.getElementById('story-title');
|
|
|
78 |
let scene, camera, renderer;
|
79 |
let currentAssemblyGroup = null;
|
80 |
|
81 |
+
// --- Shared Materials (Add more as needed) ---
|
82 |
const stoneMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1 });
|
83 |
const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7, metalness: 0 });
|
84 |
const darkWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x5C3D20, roughness: 0.7, metalness: 0 });
|
85 |
const leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 });
|
86 |
+
const pineLeafMaterial = new THREE.MeshStandardMaterial({ color: 0x1A5A2A, roughness: 0.7, metalness: 0 }); // For variation
|
87 |
+
const gnarledWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x6B4F3A, roughness: 0.85, metalness: 0 }); // For variation
|
88 |
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 });
|
89 |
const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
|
90 |
const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
|
|
|
110 |
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
|
111 |
directionalLight.position.set(8, 15, 10);
|
112 |
directionalLight.castShadow = true;
|
113 |
+
directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024;
|
114 |
+
directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
|
115 |
+
const shadowCamSize = 15;
|
|
|
|
|
116 |
directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize;
|
117 |
directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize;
|
118 |
scene.add(directionalLight);
|
|
|
123 |
|
124 |
function onWindowResize() {
|
125 |
if (!renderer || !camera || !sceneContainer) return;
|
126 |
+
const width = sceneContainer.clientWidth; const height = sceneContainer.clientHeight;
|
127 |
+
if (width > 0 && height > 0) { camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }
|
|
|
|
|
|
|
|
|
|
|
128 |
}
|
129 |
|
130 |
function animate() {
|
131 |
requestAnimationFrame(animate);
|
132 |
+
if (renderer && scene && camera) { renderer.render(scene, camera); }
|
|
|
|
|
|
|
133 |
}
|
134 |
|
135 |
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 }) {
|
136 |
const mesh = new THREE.Mesh(geometry, material);
|
137 |
+
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);
|
|
|
|
|
138 |
mesh.castShadow = true; mesh.receiveShadow = true;
|
139 |
return mesh;
|
140 |
}
|
|
|
149 |
|
150 |
// --- Procedural Generation Functions ---
|
151 |
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; }
|
152 |
+
function createCityGatesAssembly(params = {}) { const group = new THREE.Group(); const gh=params.height||4, gw=params.width||1.5, gd=params.depth||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); if(params.crenellations !== false){ 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; }
|
153 |
+
function createWeaponsmithAssembly(params = {}) { const group = new THREE.Group(); const bw=params.size||3, bh=2.5, bd=3.5; const mat = params.material === 'stone' ? stoneMaterial : darkWoodMaterial; const bGeo = new THREE.BoxGeometry(bw, bh, bd); group.add(createMesh(bGeo, mat, { x:0, y:bh/2, z:0 })); if(params.chimney !== false) { 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; }
|
154 |
+
function createTempleAssembly() { /* ... (keep simple version) ... */ 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; }
|
155 |
+
function createResistanceMeetingAssembly() { /* ... (keep simple version) ... */ 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; }
|
156 |
+
// Enhanced Forest Assembly with Parameters
|
157 |
+
function createForestAssembly(params = {}) {
|
158 |
+
const group = new THREE.Group();
|
159 |
+
const treeCount = params.count ?? 10; // Default 10 trees
|
160 |
+
const area = params.area ?? 10; // Default 10x10 area
|
161 |
+
const treeTypes = params.types ?? ['deciduous']; // Default type
|
162 |
+
const avgHeight = params.avgHeight ?? 2.5;
|
163 |
+
const foliageDensity = params.foliageDensity ?? 1.0; // Multiplier for foliage amount/size
|
164 |
+
|
165 |
+
const createTree = (x, z, type) => {
|
166 |
+
const treeGroup = new THREE.Group();
|
167 |
+
let trunkMat = woodMaterial; let leafMat = leafMaterial;
|
168 |
+
let trunkHeight = avgHeight + (Math.random() - 0.5) * avgHeight * 0.4; // +-20% height variation
|
169 |
+
let trunkRadius = trunkHeight * (0.05 + Math.random() * 0.05); // Radius scales slightly with height
|
170 |
+
let foliageRadius = trunkHeight * 0.4 * foliageDensity;
|
171 |
+
|
172 |
+
if (type === 'pine') {
|
173 |
+
leafMat = pineLeafMaterial;
|
174 |
+
trunkHeight *= 1.2; // Pines taller
|
175 |
+
trunkRadius *= 0.8; // Pines thinner
|
176 |
+
foliageRadius = trunkHeight * 0.25 * foliageDensity;
|
177 |
+
} else if (type === 'gnarled') {
|
178 |
+
trunkMat = gnarledWoodMaterial;
|
179 |
+
trunkHeight *= 0.8; // Gnarled shorter
|
180 |
+
trunkRadius *= 1.5; // Gnarled thicker
|
181 |
+
foliageRadius = trunkHeight * 0.5 * foliageDensity;
|
182 |
+
} // Add more types
|
183 |
+
|
184 |
+
const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8);
|
185 |
+
treeGroup.add(createMesh(trunkGeo, trunkMat, { x: 0, y: trunkHeight / 2, z: 0 }));
|
186 |
+
|
187 |
+
if (type === 'pine') { // Pine foliage (cones)
|
188 |
+
const numCones = Math.max(2, Math.floor(3 * foliageDensity));
|
189 |
+
for(let i=0; i<numCones; i++){ const coneR = foliageRadius * (1.5 - i*0.3); const coneH = trunkHeight * 0.4 * (1 - i*0.1); const coneY = trunkHeight * 0.7 + i * coneH * 0.3; const coneGeo = new THREE.ConeGeometry(coneR, coneH, 8); treeGroup.add(createMesh(coneGeo, leafMat, { x: 0, y: coneY, z: 0 })); }
|
190 |
+
} else { // Deciduous/Gnarled foliage (spheres)
|
191 |
+
const foliageCount = Math.max(3, Math.floor((Math.random() * 4 + 4) * foliageDensity));
|
192 |
+
const sphereRadius = foliageRadius * 0.3 + Math.random() * 0.1;
|
193 |
+
const sphereGeo = new THREE.SphereGeometry(sphereRadius, 6, 5);
|
194 |
+
for (let i = 0; i < foliageCount; i++) { const offsetX = (Math.random() - 0.5) * foliageRadius * 1.5; const offsetY = Math.random() * foliageRadius * 0.8; const offsetZ = (Math.random() - 0.5) * foliageRadius * 1.5; treeGroup.add(createMesh(sphereGeo.clone(), leafMat, { x: offsetX, y: trunkHeight * 0.8 + offsetY, z: offsetZ })); }
|
195 |
+
}
|
196 |
+
|
197 |
+
treeGroup.position.set(x, 0, z);
|
198 |
+
treeGroup.rotation.y = Math.random() * Math.PI * 2;
|
199 |
+
return treeGroup;
|
200 |
+
};
|
201 |
+
|
202 |
+
for (let i = 0; i < treeCount; i++) {
|
203 |
+
const x = (Math.random() - 0.5) * area;
|
204 |
+
const z = (Math.random() - 0.5) * area;
|
205 |
+
const type = treeTypes[Math.floor(Math.random() * treeTypes.length)]; // Choose random type from allowed list
|
206 |
+
if (Math.sqrt(x*x + z*z) > 1.0) group.add(createTree(x, z, type));
|
207 |
+
}
|
208 |
+
group.add(createGroundPlane(groundMaterial, area * 1.1));
|
209 |
+
return group;
|
210 |
+
}
|
211 |
+
function createRoadAmbushAssembly(params={}) { const group = new THREE.Group(); const a=12; const fg = createForestAssembly({ count: 8, area: a, types: params.forestTypes ?? ['deciduous', 'pine'] }); 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; }
|
212 |
+
function createForestEdgeAssembly(params={}) { const group = new THREE.Group(); const a=15; const fg = createForestAssembly({ count: 15, area: a, types: params.forestTypes ?? ['deciduous', 'pine'] }); 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; }
|
213 |
+
function createPrisonerCellAssembly() { /* ... (keep simple version) ... */ 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; }
|
214 |
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; }
|
215 |
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; }
|
216 |
|
217 |
// --- Game Data ---
|
218 |
+
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."} };
|
219 |
const gameData = {
|
220 |
+
"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 }, { text: "Rest and gather thoughts", next: 1, effect: { hpGain: 5 } } ], illustration: "crossroads-signpost-sunny" }, // Added Rest option
|
221 |
+
"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" },
|
222 |
+
"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" },
|
223 |
+
"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" },
|
224 |
+
"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", sceneParams: { types: ['deciduous', 'gnarled'], density: 1.2, avgHeight: 3.5 } }, // Example Scene Params
|
225 |
+
"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", sceneParams: { types: ['deciduous', 'gnarled'], density: 1.5 } },
|
226 |
+
"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" },
|
227 |
+
"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>`, 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 } },
|
228 |
+
"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" }, // Failure dodge has consequence
|
229 |
+
"11": { title: "Hidden Evasion", content: `<p>You melt into the shadows as the goblins blunder past.</p>`, options: [ { text: "Continue cautiously", next: 14 } ], illustration: "forest-shadows-hiding-goblins-walking-past", reward: { xp: 30 } },
|
230 |
+
"12": { title: "Ambush Victory!", content: `<p>You defeat the goblins! Found a Crude Dagger.</p>`, options: [ { text: "Press onward", next: 14 } ], illustration: "defeated-goblins-forest-path-loot", reward: { xp: 50, addItem: "Crude Dagger" } },
|
231 |
+
"13": { title: "Daring Escape", content: `<p>With surprising agility, you tumble past the goblins!</p>`, options: [ { text: "Keep running!", next: 14 } ], illustration: "blurred-motion-running-past-goblins-forest", reward: { xp: 25 } },
|
232 |
+
"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", sceneParams: { types: ['deciduous'], density: 0.8, avgHeight: 2.8 } }, // Different forest params
|
233 |
"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" },
|
234 |
"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" },
|
235 |
"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" },
|
236 |
"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" },
|
237 |
+
"18": { title: "Distant Observation", content: `<p>You notice what might be a less-guarded approach along the western ridge...</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 } },
|
238 |
"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" },
|
239 |
+
"20": { title: "Goat Trail", content: `<p>You discover a narrow trail barely wide enough for a mountain goat...</p>`, options: [ { text: "Follow the precarious goat trail", next: 22 } ], illustration: "narrow-goat-trail-mountainside-fortress-view", reward: { xp: 40 } },
|
240 |
+
"30": { title: "Hidden Cove", content: `<p>Your careful descent brings you to a secluded cove. A dark cave entrance is visible...</p>`, options: [ { text: "Explore the dark cave", next: 35 } ], illustration: "hidden-cove-beach-dark-cave-entrance", reward: { xp: 25 } },
|
241 |
+
"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 },
|
242 |
+
"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" },
|
243 |
+
"33": { title: "Smuggler's Steps?", content: `<p>Your keen eyes spot a series of barely visible handholds and steps carved into the rock...</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 } },
|
244 |
+
"35": { title: "Dark Cave", content: `<p>The cave smells of salt and decay...</p>`, options: [{ text: "Press deeper", next: 99 } ], illustration: "dark-cave-entrance-dripping-water" },
|
245 |
+
"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" },
|
246 |
+
"41": { title: "Rocky Badlands", content: `<p>The green hills give way to cracked earth...</p>`, options: [{ text: "Scout ahead", next: 99 } ], illustration: "rocky-badlands-cracked-earth-harsh-sun" },
|
247 |
+
"70": { title: "Statue Examined", content: `<p>The statue depicts a forgotten nature deity. You notice a small compartment at its base.</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}},
|
248 |
+
"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"},
|
249 |
+
"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" }, // Connect back to main path
|
250 |
+
"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"}, // Needs item check logic later
|
251 |
+
"80": { title: "Bridge Crossed", content: `<p>You make it across the swaying bridge, your heart pounding.</p>`, options: [{text:"Continue on the trail", next: 16}], illustration:"view-from-end-of-rope-bridge-forest", reward:{xp:15}}, // Connect to Level 3 start
|
252 |
+
"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},
|
253 |
+
"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>`, options: [{text:"Continue on the trail", next: 16}], illustration:"climbing-out-of-shallow-ravine-forest", reward:{xp:5}}, // Connect to Level 3 start
|
254 |
+
"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}, // Consequence for failed dodge
|
255 |
+
"190": { title: "Over the Rocks", content:"<p>With considerable effort, you clamber over the rockslide.</p>`, options: [{text:"Continue up the path", next: 22}], illustration:"character-climbing-over-boulders", reward: {xp:35} },
|
256 |
+
"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"},
|
257 |
+
"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"},
|
258 |
+
"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" },
|
259 |
+
"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"},
|
260 |
+
"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},
|
261 |
+
"400": {title:"Shrine Secrets", content:"<p>The carvings depict ancient rituals. You find a loose stone revealing a Healing Poultice!</p>", options:[{text:"Take the poultice and leave", next:4, addItem:"Healing Poultice"}], illustration:"close-up-shrine-carvings-hidden-compartment", reward:{xp:20}},
|
262 |
+
"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"},
|
263 |
+
"700": {title:"Statue's Gift", content:"<p>The compartment clicks open, revealing a smooth, grey stone that feels strangely warm.</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}},
|
264 |
|
265 |
"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 }
|
266 |
};
|
|
|
270 |
currentPageId: 1,
|
271 |
character: {
|
272 |
name: "Hero", race: "Human", alignment: "Neutral Good", class: "Adventurer",
|
273 |
+
level: 1, xp: 0, xpToNextLevel: 100, availableStatPoints: 0, // Added points back
|
274 |
stats: { strength: 8, intelligence: 10, wisdom: 10, dexterity: 10, constitution: 10, charisma: 8, hp: 12, maxHp: 12 },
|
275 |
inventory: []
|
276 |
}
|
|
|
278 |
|
279 |
// --- Game Logic Functions ---
|
280 |
function startGame() {
|
281 |
+
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: [] };
|
282 |
+
// TODO: Implement loadCharacter() here if needed
|
283 |
+
gameState = { currentPageId: 1, character: { ...defaultChar } };
|
284 |
+
recalculateMaxHp(); // Calculate initial HP correctly
|
285 |
+
gameState.character.stats.hp = gameState.character.stats.maxHp; // Start at full HP
|
286 |
renderPage(gameState.currentPageId);
|
287 |
}
|
288 |
|
289 |
+
function levelUpCharacter() {
|
290 |
+
const char = gameState.character;
|
291 |
+
if (char.xp < char.xpToNextLevel) return false; // Can't level up
|
292 |
+
|
293 |
+
char.level++;
|
294 |
+
char.xp -= char.xpToNextLevel;
|
295 |
+
char.xpToNextLevel = Math.floor(char.xpToNextLevel * 1.5 + 50); // Increase cost
|
296 |
+
char.availableStatPoints += 1; // Grant 1 stat point per level (adjust as needed)
|
297 |
+
|
298 |
+
recalculateMaxHp(); // Recalculate max HP based on new level/CON
|
299 |
+
char.stats.hp = char.stats.maxHp; // Full heal on level up
|
300 |
+
|
301 |
+
console.log(`LEVEL UP! Reached Level ${char.level}. Gained 1 stat point. HP fully restored.`);
|
302 |
+
// Return true to indicate level up happened
|
303 |
+
return true;
|
304 |
+
}
|
305 |
+
|
306 |
+
function recalculateMaxHp() {
|
307 |
+
const char = gameState.character;
|
308 |
+
const conModifier = Math.floor((char.stats.constitution - 10) / 2);
|
309 |
+
// Example: 8 Base HP + (Level * (2 + CON Modifier))
|
310 |
+
char.stats.maxHp = 8 + (char.level * Math.max(1, 2 + conModifier)); // Ensure at least 1 HP per level gain + base
|
311 |
+
}
|
312 |
+
|
313 |
function handleChoiceClick(choiceData) {
|
314 |
const optionNextPageId = parseInt(choiceData.nextPage);
|
315 |
const itemToAdd = choiceData.addItem;
|
316 |
let nextPageId = optionNextPageId;
|
317 |
let rollResultMessage = "";
|
318 |
+
let gainedXpThisTurn = 0;
|
319 |
+
const check = choiceData.check;
|
320 |
+
const effect = choiceData.effect; // For simple effects like resting
|
321 |
+
|
322 |
+
if (isNaN(optionNextPageId) && !check && !effect) { console.error("Invalid choice data:", choiceData); return; }
|
323 |
+
|
324 |
+
// Apply simple effects first (like resting)
|
325 |
+
if (effect) {
|
326 |
+
if (effect.hpGain) {
|
327 |
+
const actualGain = Math.min(effect.hpGain, gameState.character.stats.maxHp - gameState.character.stats.hp);
|
328 |
+
if (actualGain > 0) {
|
329 |
+
gameState.character.stats.hp += actualGain;
|
330 |
+
rollResultMessage += `<p class="xp-gain">Rested and recovered ${actualGain} HP.</p>`; // Use xp-gain style
|
331 |
+
console.log(`Recovered ${actualGain} HP.`);
|
332 |
+
} else {
|
333 |
+
rollResultMessage += `<p class="xp-gain">You rest, but are already at full health.</p>`;
|
334 |
+
}
|
335 |
+
}
|
336 |
+
// If effect determines the next page, set it
|
337 |
+
if (effect.setNextPage) nextPageId = effect.setNextPage;
|
338 |
+
// If the effect should prevent further check/transition (e.g. use item UI) return here
|
339 |
+
// For resting, we still want to proceed to renderPageInternal
|
340 |
+
}
|
341 |
|
342 |
+
// Process Stat Check if defined
|
343 |
if (check) {
|
344 |
const statValue = gameState.character.stats[check.stat] || 10;
|
345 |
const modifier = Math.floor((statValue - 10) / 2);
|
346 |
const roll = Math.floor(Math.random() * 20) + 1;
|
347 |
const totalResult = roll + modifier;
|
348 |
const dc = check.dc;
|
349 |
+
const successMargin = totalResult - dc;
|
350 |
+
|
351 |
console.log(`Check: ${check.stat} (DC ${dc}) | Roll: ${roll} + Mod: ${modifier} = ${totalResult}`);
|
352 |
+
|
353 |
+
if (totalResult >= dc) { // --- SUCCESS ---
|
354 |
+
nextPageId = optionNextPageId;
|
355 |
+
rollResultMessage += `<p class="roll-success"><em>Check Success! (${totalResult} vs DC ${dc})</em></p>`;
|
356 |
+
// Calculate Bonus XP based on margin and difficulty
|
357 |
+
const marginBonus = Math.max(0, Math.floor(successMargin * 1.0)); // e.g., 1 XP per point over DC
|
358 |
+
const oddsBonus = Math.max(0, Math.floor(dc * 0.5)); // e.g., 0.5 XP per DC point (beating odds)
|
359 |
+
const checkBonusXp = marginBonus + oddsBonus;
|
360 |
+
if (checkBonusXp > 0) {
|
361 |
+
gainedXpThisTurn += checkBonusXp;
|
362 |
+
rollResultMessage += `<p class="xp-gain">+${checkBonusXp} bonus XP for succeeding the check!</p>`;
|
363 |
+
console.log(`Check success bonus XP: ${checkBonusXp}`);
|
364 |
+
}
|
365 |
+
} else { // --- FAILURE ---
|
366 |
+
nextPageId = parseInt(check.onFailure);
|
367 |
+
rollResultMessage += `<p class="roll-failure"><em>Check Failed! (${totalResult} vs DC ${dc})</em></p>`;
|
368 |
if (isNaN(nextPageId)) { console.error("Invalid onFailure ID:", check.onFailure); nextPageId = 99; }
|
369 |
}
|
370 |
}
|
371 |
|
372 |
+
// Add immediate item if specified by the *option* itself
|
373 |
if (itemToAdd && !gameState.character.inventory.includes(itemToAdd)) {
|
374 |
gameState.character.inventory.push(itemToAdd);
|
375 |
console.log("Added item:", itemToAdd);
|
376 |
}
|
377 |
|
378 |
+
// --- Move to Next Page and Process Landing Effects ---
|
379 |
gameState.currentPageId = nextPageId;
|
380 |
const nextPageData = gameData[nextPageId];
|
381 |
|
382 |
if (nextPageData) {
|
383 |
+
// Apply HP loss from landing page
|
384 |
if (nextPageData.hpLoss) {
|
385 |
gameState.character.stats.hp -= nextPageData.hpLoss;
|
386 |
console.log(`Lost ${nextPageData.hpLoss} HP.`);
|
387 |
+
if (gameState.character.stats.hp <= 0) { gameState.character.stats.hp = 0; console.log("Player died!"); nextPageId = 99; /* Force redirect */ }
|
388 |
}
|
389 |
+
|
390 |
+
// Apply Rewards from landing page
|
391 |
if (nextPageData.reward) {
|
392 |
+
if (nextPageData.reward.xp) { gainedXpThisTurn += nextPageData.reward.xp; console.log(`Base reward: +${nextPageData.reward.xp} XP.`); }
|
393 |
+
if (nextPageData.reward.statIncrease) { /* ... handle stat increase ... */ 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
|
394 |
+
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}`); }
|
395 |
}
|
396 |
+
|
397 |
+
// Grant total accumulated XP for the turn
|
398 |
+
if (gainedXpThisTurn > 0) {
|
399 |
+
gameState.character.xp += gainedXpThisTurn;
|
400 |
+
console.log(`Total XP Gained this turn: ${gainedXpThisTurn}. Current XP: ${gameState.character.xp}`);
|
401 |
+
rollResultMessage += `<p class="xp-gain">You gained ${gainedXpThisTurn} XP.</p>`;
|
402 |
+
}
|
403 |
+
|
404 |
+
// Check for Level Up
|
405 |
+
let leveledUp = false;
|
406 |
+
while (gameState.character.xp >= gameState.character.xpToNextLevel) {
|
407 |
+
if (levelUpCharacter()) {
|
408 |
+
leveledUp = true;
|
409 |
+
} else {
|
410 |
+
break; // Should not happen if check is correct, but safety break
|
411 |
+
}
|
412 |
+
}
|
413 |
+
if (leveledUp) {
|
414 |
+
rollResultMessage += `<p class="level-up">LEVEL UP! You reached Level ${gameState.character.level}!</p>`;
|
415 |
+
}
|
416 |
+
|
417 |
+
|
418 |
+
// Clamp HP after potential losses/level up healing/CON changes
|
419 |
+
recalculateMaxHp(); // Ensure maxHP is up-to-date
|
420 |
+
gameState.character.stats.hp = Math.min(gameState.character.stats.hp, gameState.character.stats.maxHp);
|
421 |
+
gameState.character.stats.hp = Math.max(0, gameState.character.stats.hp); // Ensure HP isn't negative
|
422 |
|
423 |
// Handle forced game over from HP loss
|
424 |
if (nextPageId === 99 && gameState.character.stats.hp <= 0) {
|
425 |
renderPageInternal(99, gameData[99], rollResultMessage);
|
426 |
return;
|
427 |
}
|
428 |
+
|
429 |
+
} else { // Invalid next page ID
|
430 |
console.error(`Data for page ${nextPageId} not found!`);
|
431 |
renderPageInternal(99, gameData[99], "<p><em>Error: Next page data missing!</em></p>");
|
432 |
return;
|
433 |
}
|
434 |
+
renderPageInternal(nextPageId, gameData[nextPageId] || gameData["99"], rollResultMessage); // Use loaded pageData or fallback to 99
|
435 |
}
|
436 |
|
437 |
function renderPageInternal(pageId, pageData, message = "") {
|
438 |
+
if (!pageData) { console.error(`Render Error: No data for page ${pageId}`); return; }
|
439 |
storyTitleElement.textContent = pageData.title || "Untitled Page";
|
440 |
storyContentElement.innerHTML = message + (pageData.content || "<p>...</p>");
|
441 |
updateStatsDisplay(); updateInventoryDisplay();
|
|
|
444 |
pageData.options.forEach(option => {
|
445 |
const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true;
|
446 |
if (option.requireItem && !gameState.character.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
|
447 |
+
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); });
|
448 |
} 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>'); }
|
449 |
+
updateScene(pageData.illustration || 'default', pageData.sceneParams); // Pass sceneParams
|
450 |
}
|
451 |
|
452 |
function renderPage(pageId) { renderPageInternal(pageId, gameData[pageId]); }
|
|
|
454 |
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>`; }
|
455 |
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; }
|
456 |
|
457 |
+
// Update Scene to accept parameters
|
458 |
+
function updateScene(illustrationKey, sceneParams = {}) { // Added sceneParams argument
|
459 |
+
// console.log(`Updating scene to: ${illustrationKey} with params:`, sceneParams);
|
460 |
if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); }
|
461 |
currentAssemblyGroup = null; let assemblyFunction;
|
462 |
switch (illustrationKey) {
|
|
|
464 |
case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
|
465 |
case 'temple': assemblyFunction = createTempleAssembly; break;
|
466 |
case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break;
|
467 |
+
case 'shadowwood-forest': assemblyFunction = createForestAssembly; break; // Uses params
|
468 |
+
case 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break; // Uses params
|
469 |
+
case 'forest-edge': assemblyFunction = createForestEdgeAssembly; break; // Uses params
|
470 |
case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
|
471 |
+
case 'game-over': case 'game-over-generic': assemblyFunction = createGameOverAssembly; break;
|
472 |
case 'error': assemblyFunction = createErrorAssembly; break;
|
473 |
+
// Add other specific keys here if they need unique assemblies
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
474 |
default:
|
475 |
+
// Check if key matches a generic type that can use params
|
476 |
+
if (illustrationKey.includes('forest')) {
|
477 |
+
assemblyFunction = createForestAssembly;
|
478 |
+
} else if (illustrationKey.includes('hills')) {
|
479 |
+
// Could create a createHillsAssembly(params) function
|
480 |
+
assemblyFunction = createDefaultAssembly; // Fallback for now
|
481 |
+
} else if (illustrationKey.includes('cliffs')) {
|
482 |
+
// Could create createCliffsAssembly(params)
|
483 |
+
assemblyFunction = createDefaultAssembly; // Fallback for now
|
484 |
+
}
|
485 |
+
else { // Truly unknown or simple keys use default
|
486 |
+
assemblyFunction = createDefaultAssembly;
|
487 |
+
}
|
488 |
+
// console.warn(`Using default/generic assembly for key: "${illustrationKey}".`);
|
489 |
+
break;
|
490 |
+
}
|
491 |
+
try {
|
492 |
+
currentAssemblyGroup = assemblyFunction(sceneParams); // Pass params to function
|
493 |
+
scene.add(currentAssemblyGroup);
|
494 |
+
} catch (error) {
|
495 |
+
console.error(`Error creating assembly for ${illustrationKey}:`, error);
|
496 |
+
currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup);
|
497 |
}
|
|
|
498 |
}
|
499 |
|
500 |
document.addEventListener('DOMContentLoaded', () => {
|