squiffy-runtime 6.0.0-alpha.5 → 6.0.0-alpha.6

package/dist/squiffy.runtime.d.ts

@@ -10,6 +10,7 @@ interface SquiffyApi {
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
     clickLink: (link: HTMLElement) => void;
+    update: (story: Story) => void;
 }
 interface SquiffyJsFunctionApi {
     get: (attribute: string) => any;

package/dist/squiffy.runtime.js

@@ -2,6 +2,7 @@ export const init = (options) => {
     let story;
     let currentSection;
     let currentSectionElement;
+    let currentBlockOutputElement;
     let scrollPosition = 0;
     let outputElement;
     let settings;
@@ -42,7 +43,7 @@ export const init = (options) => {
             set('_turncount', get('_turncount') + 1);
             passage = processLink(passage);
             if (passage) {
-                currentSectionElement?.appendChild(document.createElement('hr'));
+                newBlockOutputElement();
                 showPassage(passage);
             }
             const turnPassage = '@' + get('_turncount');
@@ -56,7 +57,6 @@ export const init = (options) => {
             }
         }
         else if (section) {
-            currentSectionElement?.appendChild(document.createElement('hr'));
             disableLink(link);
             section = processLink(section);
             if (section) {
@@ -201,24 +201,24 @@ export const init = (options) => {
         }, { once: true });
         labelElement.classList.add('fade-out');
     }
-    function go(section) {
+    function go(sectionName) {
         set('_transition', null);
-        newSection();
-        currentSection = story.sections[section];
+        newSection(sectionName);
+        currentSection = story.sections[sectionName];
         if (!currentSection)
             return;
-        set('_section', section);
-        setSeen(section);
+        set('_section', sectionName);
+        setSeen(sectionName);
         const master = story.sections[''];
         if (master) {
             run(master);
-            ui.write(master.text || '');
+            ui.write(master.text || '', "[[]]");
         }
         run(currentSection);
         // The JS might have changed which section we're in
-        if (get('_section') == section) {
+        if (get('_section') == sectionName) {
             set('_turncount', 0);
-            ui.write(currentSection.text || '');
+            ui.write(currentSection.text || '', `[[${sectionName}]]`);
             save();
         }
     }
@@ -255,16 +255,16 @@ export const init = (options) => {
             const masterPassage = masterSection.passages[''];
             if (masterPassage) {
                 run(masterPassage);
-                ui.write(masterPassage.text || '');
+                ui.write(masterPassage.text || '', `[[]][]`);
             }
         }
         const master = currentSection.passages && currentSection.passages[''];
         if (master) {
             run(master);
-            ui.write(master.text || '');
+            ui.write(master.text || '', `[[${get("_section")}]][]`);
         }
         run(passage);
-        ui.write(passage.text || '');
+        ui.write(passage.text || '', `[[${get("_section")}]][${passageName}]`);
         save();
     }
     function processAttributes(attributes) {
@@ -305,10 +305,8 @@ export const init = (options) => {
         if (!output)
             return false;
         outputElement.innerHTML = output;
-        const element = document.getElementById(get('_output-section'));
-        if (!element)
-            return false;
-        currentSectionElement = element;
+        currentSectionElement = outputElement.querySelector('.squiffy-output-section:last-child');
+        currentBlockOutputElement = outputElement.querySelector('.squiffy-output-block:last-child');
         currentSection = story.sections[get('_section')];
         const transition = get('_transition');
         if (transition) {
@@ -331,7 +329,12 @@ export const init = (options) => {
             return false;
         return (seenSections.indexOf(sectionName) > -1);
     }
-    function newSection() {
+    function newBlockOutputElement() {
+        currentBlockOutputElement = document.createElement('div');
+        currentBlockOutputElement.classList.add('squiffy-output-block');
+        currentSectionElement?.appendChild(currentBlockOutputElement);
+    }
+    function newSection(sectionName) {
         if (currentSectionElement) {
             disableLinks(currentSectionElement.querySelectorAll('.squiffy-link'));
             currentSectionElement.querySelectorAll('input').forEach(el => {
@@ -357,23 +360,30 @@ export const init = (options) => {
         set('_section-count', sectionCount);
         const id = 'squiffy-section-' + sectionCount;
         currentSectionElement = document.createElement('div');
+        currentSectionElement.classList.add('squiffy-output-section');
         currentSectionElement.id = id;
+        if (sectionName) {
+            currentSectionElement.setAttribute('data-section', `${sectionName}`);
+        }
         outputElement.appendChild(currentSectionElement);
-        set('_output-section', id);
+        newBlockOutputElement();
     }
     const ui = {
-        write: (text) => {
-            if (!currentSectionElement)
+        write: (text, source) => {
+            if (!currentBlockOutputElement)
                 return;
             scrollPosition = outputElement.scrollHeight;
             const div = document.createElement('div');
-            currentSectionElement.appendChild(div);
+            if (source) {
+                div.setAttribute('data-source', source);
+            }
+            currentBlockOutputElement.appendChild(div);
             div.innerHTML = ui.processText(text);
             ui.scrollToEnd();
         },
         clearScreen: () => {
             outputElement.innerHTML = '';
-            newSection();
+            newSection(null);
         },
         scrollToEnd: () => {
             if (settings.scroll === 'element') {
@@ -573,6 +583,54 @@ export const init = (options) => {
             remaining += ':' + current;
         return [next, remaining];
     }
+    function getSectionContent(section) {
+        return outputElement.querySelectorAll(`[data-source='[[${section}]]']`);
+    }
+    function getPassageContent(section, passage) {
+        return outputElement.querySelectorAll(`[data-source='[[${section}]][${passage}]']`);
+    }
+    function update(newStory) {
+        // TODO: Re-disable clicked links after update
+        for (const existingSection of Object.keys(story.sections)) {
+            const elements = getSectionContent(existingSection);
+            if (elements.length) {
+                const newSection = newStory.sections[existingSection];
+                if (!newSection) {
+                    // section has been deleted
+                    for (const element of elements) {
+                        element.remove();
+                    }
+                }
+                else if (newSection.text && newSection.text != story.sections[existingSection].text) {
+                    // section has been updated
+                    for (const element of elements) {
+                        element.innerHTML = ui.processText(newSection.text);
+                    }
+                }
+            }
+            if (!story.sections[existingSection].passages)
+                continue;
+            for (const existingPassage of Object.keys(story.sections[existingSection].passages)) {
+                const elements = getPassageContent(existingSection, existingPassage);
+                if (!elements.length)
+                    continue;
+                const newPassage = newStory.sections[existingSection]?.passages && newStory.sections[existingSection]?.passages[existingPassage];
+                if (!newPassage) {
+                    // passage has been deleted
+                    for (const element of elements) {
+                        element.remove();
+                    }
+                }
+                else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
+                    // passage has been updated
+                    for (const element of elements) {
+                        element.innerHTML = ui.processText(newPassage.text);
+                    }
+                }
+            }
+        }
+        story = newStory;
+    }
     outputElement = options.element;
     story = options.story;
     settings = {
@@ -598,6 +656,7 @@ export const init = (options) => {
         restart: restart,
         get: get,
         set: set,
-        clickLink: handleLink
+        clickLink: handleLink,
+        update: update,
     };
 };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.6",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {
     "test": "vitest",
-    "build": "tsc"
+    "build": "tsc",
+    "prepublishOnly": "npm run build && npm run test"
   },
   "author": "Alex Warren",
   "contributors": [