html/story-teller/js/renderer.js


1
2
3
4
5
6
7
8
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
38
39
40
41
42
43
44

import { scenes } from './scenes.js';

export const renderScene = (state, updateState) => {
  const scene = scenes[state.currentScene];
  if (!scene) throw new Error(`Scene "${state.currentScene}" not found`);

  const app = document.getElementById('app');
  app.innerHTML = '';

  const description = document.createElement('p');
  description.textContent = scene.description;
  app.appendChild(description);

  const inventory = document.createElement('div');
  inventory.textContent = `Inventory: ${Array.from(state.inventory).join(', ') || 'None'}`;
  app.appendChild(inventory);

  const log = document.createElement('div');
  log.innerHTML = `<strong>Action Log:</strong><br>${state.actionLog.join('<br>')}`;
  app.appendChild(log);

  scene.choices.forEach((choice) => {
    if (choice.condition && !choice.condition(state)) {
      return; // Skip choices that don't meet their conditions
    }

    const button = document.createElement('button');
    button.textContent = choice.text;
    button.onclick = () => {
      state.actionLog.push(`You chose: "${choice.text}"`);
      if (choice.action) choice.action(state); // Perform any action tied to the choice

      // Consume items if specified
      if (choice.consume) {
        choice.consume.forEach((item) => state.inventory.delete(item));
        state.actionLog.push(`You used: ${choice.consume.join(', ')}`);
      }

      if (choice.nextScene) state.currentScene = choice.nextScene;
      updateState(state); // Re-render after state update
    };
    app.appendChild(button);
  });
};