squiffy-runtime 6.0.0-alpha.1 → 6.0.0-alpha.11

package/src/squiffy.runtime.ts

@@ -1,54 +1,19 @@
-interface SquiffyInitOptions {
-    element: HTMLElement;
-    story: Story;
-    scroll?: string,
-    persist?: boolean,
-    onSet?: (attribute: string, value: any) => void,
-}
-
-interface SquiffySettings {
-    scroll: string,
-    persist: boolean,
-    onSet: (attribute: string, value: any) => void,
-}
-
-interface SquiffyApi {
-    restart: () => void;
-    get: (attribute: string) => any;
-    set: (attribute: string, value: any) => void;
-}
-
-interface Story {
-    js: (() => void)[];
-    start: string;
-    id?: string | null;
-    sections: Record<string, Section>;
-}
-
-interface Section {
-    text?: string;
-    clear?: boolean;
-    attributes?: string[],
-    jsIndex?: number;
-    passages?: Record<string, Passage>;
-    passageCount?: number;
-}
-
-interface Passage {
-    text?: string;
-    clear?: boolean;
-    attributes?: string[];
-    jsIndex?: number;
-}
+import { SquiffyApi, SquiffyInitOptions, SquiffySettings, Story, Section } from './types.js';
+import { startsWith, rotate } from "./utils.js";
+import { TextProcessor } from './textProcessor.js';
+import { Emitter, SquiffyEventMap } from './events.js';
 
 export const init = (options: SquiffyInitOptions): SquiffyApi => {
     let story: Story;
     let currentSection: Section;
     let currentSectionElement: HTMLElement;
+    let currentBlockOutputElement: HTMLElement;
     let scrollPosition = 0;
     let outputElement: HTMLElement;
     let settings: SquiffySettings;
     let storageFallback: Record<string, string> = {};
+    let textProcessor: TextProcessor;
+    const emitter = new Emitter<SquiffyEventMap>();
     
     function set(attribute: string, value: any) {
         if (typeof value === 'undefined') value = true;
@@ -73,68 +38,75 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         return JSON.parse(result);
     }
     
-    function initLinkHandler() {
-        function handleLink(link: HTMLElement) {
-            if (link.classList.contains('disabled')) return;
-            let passage = link.getAttribute('data-passage');
-            let section = link.getAttribute('data-section');
-            const rotateAttr = link.getAttribute('data-rotate');
-            const sequenceAttr = link.getAttribute('data-sequence');
-            const rotateOrSequenceAttr = rotateAttr || sequenceAttr;
+    function handleLink(link: HTMLElement): boolean {
+        const outputSection = link.closest('.squiffy-output-section');
+        if (outputSection !== currentSectionElement) return false;
+
+        if (link.classList.contains('disabled')) return false;
+
+        let passage = link.getAttribute('data-passage');
+        let section = link.getAttribute('data-section');
+        const rotateAttr = link.getAttribute('data-rotate');
+        const sequenceAttr = link.getAttribute('data-sequence');
+        const rotateOrSequenceAttr = rotateAttr || sequenceAttr;
+        if (passage) {
+            disableLink(link);
+            set('_turncount', get('_turncount') + 1);
+            passage = processLink(passage);
             if (passage) {
-                disableLink(link);
-                set('_turncount', get('_turncount') + 1);
-                passage = processLink(passage);
-                if (passage) {
-                    currentSectionElement?.appendChild(document.createElement('hr'));
-                    showPassage(passage);
+                newBlockOutputElement();
+                showPassage(passage);
+            }
+            const turnPassage = '@' + get('_turncount');
+            if (currentSection.passages) {
+                if (turnPassage in currentSection.passages) {
+                    showPassage(turnPassage);
                 }
-                const turnPassage = '@' + get('_turncount');
-                if (currentSection.passages) {
-                    if (turnPassage in currentSection.passages) {
-                        showPassage(turnPassage);
-                    }
-                    if ('@last' in currentSection.passages && get('_turncount') >= (currentSection.passageCount || 0)) {
-                        showPassage('@last');
-                    }
+                if ('@last' in currentSection.passages && get('_turncount') >= (currentSection.passageCount || 0)) {
+                    showPassage('@last');
                 }
             }
-            else if (section) {
-                currentSectionElement?.appendChild(document.createElement('hr'));
+
+            emitter.emit('linkClick', { linkType: 'passage' });
+            return true;
+        }
+        
+        if (section) {
+            section = processLink(section);
+            if (section) {
+                go(section);
+            }
+
+            emitter.emit('linkClick', { linkType: 'section' });
+            return true;
+        }
+        
+        if (rotateOrSequenceAttr) {
+            const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
+            link.innerHTML = result[0]!.replace(/&quot;/g, '"').replace(/&#39;/g, '\'');
+            const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
+            link.setAttribute(dataAttribute, result[1] || '');
+            if (!result[1]) {
                 disableLink(link);
-                section = processLink(section);
-                if (section) {
-                    go(section);
-                }
             }
-            else if (rotateOrSequenceAttr) {
-                const result = rotate(rotateOrSequenceAttr, rotateAttr ? link.innerText : '');
-                link.innerHTML = result[0]!.replace(/&quot;/g, '"').replace(/&#39;/g, '\'');
-                const dataAttribute = rotateAttr ? 'data-rotate' : 'data-sequence';
-                link.setAttribute(dataAttribute, result[1] || '');
-                if (!result[1]) {
-                    disableLink(link);
-                }
-                const attribute = link.getAttribute('data-attribute');
-                if (attribute) {
-                    set(attribute, result[0]);
-                }
-                save();
+            const attribute = link.getAttribute('data-attribute');
+            if (attribute) {
+                set(attribute, result[0]);
             }
+            save();
+
+            emitter.emit('linkClick', { linkType: rotateAttr ? 'rotate' : 'sequence' });
+            return true;
         }
-    
-        function handleClick(event: Event) {
-            const target = event.target as HTMLElement;
-            if (target.classList.contains('squiffy-link')) {
-                handleLink(target);
-            }
+
+        return false;
+    }
+
+    function handleClick(event: Event) {
+        const target = event.target as HTMLElement;
+        if (target.classList.contains('squiffy-link')) {
+            handleLink(target);
         }
-    
-        document.addEventListener('click', handleClick);
-        document.addEventListener('keypress', function (event) {
-            if (event.key !== "Enter") return;
-            handleClick(event);
-        });
     }
     
     function disableLink(link: Element) {
@@ -142,10 +114,6 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         link.setAttribute('tabindex', '-1');
     }
     
-    function disableLinks(links: NodeListOf<Element>) {
-        links.forEach(disableLink);
-    }
-    
     function begin() {
         if (!load()) {
             go(story.start);
@@ -260,23 +228,23 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         labelElement.classList.add('fade-out');
     }
     
-    function go(section: string) {
+    function go(sectionName: string) {
         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();
         }
     }
@@ -289,7 +257,17 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             processAttributes(section.attributes.map(line => line.replace(/^random\s*:\s*(\w+)\s*=\s*(.+)/i, (line, attr, options) => (options = options.split("|")) ? attr + " = " + options[Math.floor(Math.random() * options.length)] : line)));
         }
         if (section.jsIndex !== undefined) {
-            story.js[section.jsIndex]();
+            const squiffy = {
+                get: get,
+                set: set,
+                ui: {
+                    transition: ui.transition,
+                },
+                story: {
+                    go: go,
+                },
+            };
+            story.js[section.jsIndex](squiffy, get, set);
         }
     }
     
@@ -297,22 +275,24 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         let passage = currentSection.passages && currentSection.passages[passageName];
         const masterSection = story.sections[''];
         if (!passage && masterSection && masterSection.passages) passage = masterSection.passages[passageName];
-        if (!passage) return;
+        if (!passage) {
+            throw `No passage named ${passageName} in the current section or master section`;
+        }
         setSeen(passageName);
         if (masterSection && masterSection.passages) {
             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();
     }
     
@@ -356,9 +336,10 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         const output = get('_output');
         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) {
@@ -381,10 +362,15 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         if (!seenSections) return false;
         return (seenSections.indexOf(sectionName) > -1);
     }
+
+    function newBlockOutputElement() {
+        currentBlockOutputElement = document.createElement('div');
+        currentBlockOutputElement.classList.add('squiffy-output-block');
+        currentSectionElement?.appendChild(currentBlockOutputElement);
+    }
     
-    function newSection() {
+    function newSection(sectionName: string | null) {
         if (currentSectionElement) {
-            disableLinks(currentSectionElement.querySelectorAll('.squiffy-link'));
             currentSectionElement.querySelectorAll('input').forEach(el => {
                 const attribute = el.getAttribute('data-attribute') || el.id;
                 if (attribute) set(attribute, el.value);
@@ -409,26 +395,32 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         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: string) => {
-            if (!currentSectionElement) return;
+        write: (text: string, source: string) => {
+            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') {
@@ -449,196 +441,91 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
             }
         },
         processText: (text: string) => {
-            function process(text: string, data: any) {
-                let containsUnprocessedSection = false;
-                const open = text.indexOf('{');
-                let close;
-    
-                if (open > -1) {
-                    let nestCount = 1;
-                    let searchStart = open + 1;
-                    let finished = false;
-    
-                    while (!finished) {
-                        const nextOpen = text.indexOf('{', searchStart);
-                        const nextClose = text.indexOf('}', searchStart);
-    
-                        if (nextClose > -1) {
-                            if (nextOpen > -1 && nextOpen < nextClose) {
-                                nestCount++;
-                                searchStart = nextOpen + 1;
-                            }
-                            else {
-                                nestCount--;
-                                searchStart = nextClose + 1;
-                                if (nestCount === 0) {
-                                    close = nextClose;
-                                    containsUnprocessedSection = true;
-                                    finished = true;
-                                }
-                            }
-                        }
-                        else {
-                            finished = true;
-                        }
-                    }
-                }
-    
-                if (containsUnprocessedSection) {
-                    const section = text.substring(open + 1, close);
-                    const value = processTextCommand(section, data);
-                    text = text.substring(0, open) + value + process(text.substring(close! + 1), data);
-                }
-    
-                return (text);
-            }
-    
-            function processTextCommand(text: string, data: any) {
-                if (startsWith(text, 'if ')) {
-                    return processTextCommand_If(text, data);
-                }
-                else if (startsWith(text, 'else:')) {
-                    return processTextCommand_Else(text, data);
-                }
-                else if (startsWith(text, 'label:')) {
-                    return processTextCommand_Label(text, data);
-                }
-                else if (/^rotate[: ]/.test(text)) {
-                    return processTextCommand_Rotate('rotate', text);
-                }
-                else if (/^sequence[: ]/.test(text)) {
-                    return processTextCommand_Rotate('sequence', text);
-                }
-                else if (currentSection.passages && text in currentSection.passages) {
-                    return process(currentSection.passages[text].text || '', data);
-                }
-                else if (text in story.sections) {
-                    return process(story.sections[text].text || '', data);
-                }
-                else if (startsWith(text, '@') && !startsWith(text, '@replace')) {
-                    processAttributes(text.substring(1).split(","));
-                    return "";
-                }
-                return get(text);
-            }
-    
-            function processTextCommand_If(section: string, data: any) {
-                const command = section.substring(3);
-                const colon = command.indexOf(':');
-                if (colon == -1) {
-                    return ('{if ' + command + '}');
-                }
-    
-                const text = command.substring(colon + 1);
-                let condition = command.substring(0, colon);
-                condition = condition.replace("<", "&lt;");
-                const operatorRegex = /([\w ]*)(=|&lt;=|&gt;=|&lt;&gt;|&lt;|&gt;)(.*)/;
-                const match = operatorRegex.exec(condition);
-    
-                let result = false;
-    
-                if (match) {
-                    const lhs = get(match[1]);
-                    const op = match[2];
-                    let rhs = match[3];
-    
-                    if (startsWith(rhs, '@')) rhs = get(rhs.substring(1));
-    
-                    if (op == '=' && lhs == rhs) result = true;
-                    if (op == '&lt;&gt;' && lhs != rhs) result = true;
-                    if (op == '&gt;' && lhs > rhs) result = true;
-                    if (op == '&lt;' && lhs < rhs) result = true;
-                    if (op == '&gt;=' && lhs >= rhs) result = true;
-                    if (op == '&lt;=' && lhs <= rhs) result = true;
-                }
-                else {
-                    let checkValue = true;
-                    if (startsWith(condition, 'not ')) {
-                        condition = condition.substring(4);
-                        checkValue = false;
-                    }
-    
-                    if (startsWith(condition, 'seen ')) {
-                        result = (seen(condition.substring(5)) == checkValue);
-                    }
-                    else {
-                        let value = get(condition);
-                        if (value === null) value = false;
-                        result = (value == checkValue);
-                    }
-                }
-    
-                const textResult = result ? process(text, data) : '';
-    
-                data.lastIf = result;
-                return textResult;
-            }
-    
-            function processTextCommand_Else(section: string, data: any) {
-                if (!('lastIf' in data) || data.lastIf) return '';
-                const text = section.substring(5);
-                return process(text, data);
-            }
-    
-            function processTextCommand_Label(section: string, data: any) {
-                const command = section.substring(6);
-                const eq = command.indexOf('=');
-                if (eq == -1) {
-                    return ('{label:' + command + '}');
-                }
-    
-                const text = command.substring(eq + 1);
-                const label = command.substring(0, eq);
-    
-                return '<span class="squiffy-label-' + label + '">' + process(text, data) + '</span>';
-            }
-    
-            function processTextCommand_Rotate(type: string, section: string) {
-                let options;
-                let attribute = '';
-                if (section.substring(type.length, type.length + 1) == ' ') {
-                    const colon = section.indexOf(':');
-                    if (colon == -1) {
-                        return '{' + section + '}';
-                    }
-                    options = section.substring(colon + 1);
-                    attribute = section.substring(type.length + 1, colon);
-                }
-                else {
-                    options = section.substring(type.length + 1);
-                }
-                // TODO: Check - previously there was no second parameter here
-                const rotation = rotate(options.replace(/"/g, '&quot;').replace(/'/g, '&#39;'), null);
-                if (attribute) {
-                    set(attribute, rotation[0]);
-                }
-                return '<a class="squiffy-link" data-' + type + '="' + rotation[1] + '" data-attribute="' + attribute + '" role="link">' + rotation[0] + '</a>';
-            }
-    
             const data = {
                 fulltext: text
             };
-            return process(text, data);
+            return textProcessor.process(text, data);
         },
         transition: function (f: any) {
             set('_transition', f.toString());
             f();
         },
     };
-    
-    function startsWith(string: string, prefix: string) {
-        return string.substring(0, prefix.length) === prefix;
+
+    function safeQuerySelector(name: string) {
+        return name.replace(/'/g, "\\'");
     }
-    
-    function rotate(options: string, current: string | null) {
-        const colon = options.indexOf(':');
-        if (colon == -1) {
-            return [options, current];
-        }
-        const next = options.substring(0, colon);
-        let remaining = options.substring(colon + 1);
-        if (current) remaining += ':' + current;
-        return [next, remaining];
+
+    function getSectionContent(section: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${safeQuerySelector(section)}]]']`);
+    }
+
+    function getPassageContent(section: string, passage: string) {
+        return outputElement.querySelectorAll(`[data-source='[[${safeQuerySelector(section)}]][${safeQuerySelector(passage)}]']`);
+    }
+
+    function updateElementTextPreservingDisabledPassageLinks(element: Element, text: string) {
+        // Record which passage links are disabled
+        const disabledPassages = Array.from(element
+            .querySelectorAll("a.link-passage.disabled"))
+            .map((el: HTMLElement) => el.getAttribute("data-passage"));
+
+        element.innerHTML = text;
+
+        // Re-disable links that were disabled before the update
+        for (const passage of disabledPassages) {
+            const link = element.querySelector(`a.link-passage[data-passage="${passage}"]`);
+            if (link) disableLink(link);
+        }
+    }
+
+    function update(newStory: Story) {
+        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) {
+                        const parentOutputSection = element.closest('.squiffy-output-section');
+                        parentOutputSection.remove();
+                    }
+                }
+                else if (newSection.text && newSection.text != story.sections[existingSection].text) {
+                    // section has been updated
+                    for (const element of elements) {
+                        updateElementTextPreservingDisabledPassageLinks(element, 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) {
+                        const parentOutputBlock = element.closest('.squiffy-output-block');
+                        parentOutputBlock.remove();
+                    }
+                }
+                else if (newPassage.text && newPassage.text != story.sections[existingSection].passages[existingPassage].text) {
+                    // passage has been updated
+                    for (const element of elements) {
+                        updateElementTextPreservingDisabledPassageLinks(element, newPassage.text);
+                    }
+                }
+            }
+        }
+
+        story = newStory;
+        currentSectionElement = outputElement.querySelector('.squiffy-output-section:last-child');
+        const sectionName = currentSectionElement.getAttribute('data-section');
+        currentSection = story.sections[sectionName];
     }
 
     outputElement = options.element;
@@ -659,12 +546,24 @@ export const init = (options: SquiffyInitOptions): SquiffyApi => {
         outputElement.style.overflowY = 'auto';
     }
 
-    initLinkHandler();
+    outputElement.addEventListener('click', handleClick);
+    outputElement.addEventListener('keypress', function (event) {
+        if (event.key !== "Enter") return;
+        handleClick(event);
+    });
+
+    textProcessor = new TextProcessor(get, set, story, ui, seen, processAttributes);
+    
     begin();
 
     return {
         restart: restart,
         get: get,
         set: set,
+        clickLink: handleLink,
+        update: update,
+        on: (e, h) => emitter.on(e, h),
+        off: (e, h) => emitter.off(e, h),
+        once: (e, h) => emitter.once(e, h),
     };
 };