Method displayNvlDialog

src/actions/Dialog.ts:288–359

(dialog: string, clearDialog: string, character: string, animation: boolean)

	}

	displayNvlDialog(dialog: string, clearDialog: string, character: string, animation: boolean): void {
		const textBox = this.engine.element().find('[data-component="text-box"]').get(0) as any;

		if (!textBox) {
			this.engine.debug.error('Text box component not found');
			return;
		}

		if (textBox.props?.mode !== 'nvl') {
			Dialog.reset();
			// NOTE: setProps does NOT trigger a re-render — it only updates the
			// mode attribute so CSS (text-box[mode="nvl"]) applies. The ADV-mode
			// type-writer element persists and serves as the container for NVL
			// dialog entries appended to [data-ui="say"].
			textBox.setProps({ mode: 'nvl' });

			// We need to re-apply any custom classes here because the reset clears them
			this._handleCustomClasses(textBox);
		}

		// Remove contents from the dialog area.
		const previous = this.engine.element().find('[data-component="text-box"]').data('speaking');
		this.engine.element().find('[data-component="text-box"]').data('speaking', character);

		// Determine if we should animate (respects NVLTypeAnimation setting)
		const shouldAnimate = animation && this.engine.setting('NVLTypeAnimation') === true;

		// Build the dialog entry HTML
		if (character !== '_narrator') {
			const charData = this.engine.character(character);
			if (previous !== character) {
				this.engine.element().find('[data-ui="say"] [data-spoke]').last().addClass('nvl-dialog-footer');
				this.engine.element().find('[data-ui="say"]').append(`<div data-spoke="${character}" class='named'><span style='color:${charData?.color ?? ''};'>${this.engine.replaceVariables(charData?.name ?? '')}: </span><type-writer></type-writer></div>`);
			} else {
				this.engine.element().find('[data-ui="say"]').append(`<div data-spoke="${character}"><type-writer></type-writer></div>`);
			}
		} else {
			if (previous !== character) {
				this.engine.element().find('[data-ui="say"] [data-spoke]').last().addClass('nvl-dialog-footer');
			}
			this.engine.element().find('[data-ui="say"]').append(`<div data-spoke="${character}" class='unnamed'><type-writer></type-writer></div>`);
		}

		// Wait for the new type-writer component to be fully mounted before
		// setting its content. Using ready() is more reliable than
		// requestAnimationFrame since Pandora's connectedCallback is async.
		const elements = $_('[data-ui="say"] [data-spoke] type-writer');
		const last = elements.last().get(0) as TypeWriter | undefined;

		if (last && typeof (last as any).ready === 'function') {
			(last as any).ready(() => {
				last.setContent(dialog, shouldAnimate);
			});
		} else if (last) {
			last.setContent(dialog, shouldAnimate);
		}

		const text_box = this.engine.element().find('[data-component="text-box"]');