*

1 files changed, 44 insertions, 0 deletions

diff --git a/html/story-teller/js/renderer.js b/html/story-teller/js/renderer.js
new file mode 100644
index 0000000..82ab004
--- /dev/null
+++ b/html/story-teller/js/renderer.js
@@ -0,0 +1,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);
+  });
+};