Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Ducking. Refined UI.

Browse Source
This commit is contained in:
Georg Tomitsch
2026-05-14 23:18:30 +02:00
parent b5829ed773
commit 9a6bb009f2
10 changed files with 224 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/ui-display-handler-module.js
+14 -33
View File
@@ -33,7 +33,6 @@ class UIDisplayHandlerModule extends BaseModule {
'initializeContainers',
'displayText',
'renderSentence',
'renderHeading',
'handleDeferredMediaBlock',
'rerenderStory',
'clear',
@@ -356,9 +355,6 @@ class UIDisplayHandlerModule extends BaseModule {
*/
async renderSentence(sentence) {
if (!sentence || !sentence.layout) {
if (sentence && sentence.kind === 'heading') {
return this.renderHeading(sentence);
}
if (sentence && (sentence.kind === 'image' || sentence.kind === 'music')) {
return this.handleDeferredMediaBlock(sentence);
}
@@ -387,7 +383,7 @@ class UIDisplayHandlerModule extends BaseModule {
// Store element reference in sentence
sentence.element = paragraphElement;
this.renderedItems.push({
type: 'paragraph',
type: sentence.kind === 'heading' ? 'heading' : 'paragraph',
id: sentence.id,
text: sentence.text,
metadata: {
@@ -401,7 +397,7 @@ class UIDisplayHandlerModule extends BaseModule {
}
});
// Start coordinated playback (animation + TTS)
// Start coordinated playback (animation + TTS), including chapter headings.
await this.playbackCoordinator.play(sentence);
// Scroll to bottom
@@ -422,29 +418,6 @@ class UIDisplayHandlerModule extends BaseModule {
}
}
async renderHeading(sentence) {
const heading = document.createElement('p');
heading.id = sentence.id;
heading.className = 'story-chapter-heading';
heading.innerHTML = sentence.metadata?.layoutText || sentence.text;
this.renderedItems.push({
type: 'heading',
id: sentence.id,
text: sentence.text,
layoutText: sentence.metadata?.layoutText || sentence.text
});
if (this.paragraphContainer) {
this.paragraphContainer.appendChild(heading);
}
if (sentence.onComplete) {
sentence.onComplete();
}
return heading;
}
async rerenderStory() {
if (!this.paragraphContainer || this.renderedItems.length === 0) return;
@@ -457,10 +430,16 @@ class UIDisplayHandlerModule extends BaseModule {
for (const item of this.renderedItems) {
if (item.type === 'heading') {
const heading = document.createElement('p');
heading.id = item.id;
heading.className = 'story-chapter-heading';
heading.innerHTML = item.layoutText || item.text;
const layout = await sentenceQueue.prepareLayout(item.text, item.metadata || {});
const heading = this.layoutRenderer.renderParagraph(layout, { id: item.id });
heading.querySelectorAll('.word').forEach(word => {
word.style.transition = 'none';
word.style.animation = 'none';
word.style.visibility = 'visible';
word.style.opacity = '1';
word.style.transform = 'translateY(0)';
word.style.clipPath = 'inset(0 0 0 0)';
});
this.paragraphContainer.appendChild(heading);
continue;
}
@@ -471,9 +450,11 @@ class UIDisplayHandlerModule extends BaseModule {
const paragraph = this.layoutRenderer.renderParagraph(layout, { id: item.id });
paragraph.querySelectorAll('.word').forEach(word => {
word.style.transition = 'none';
word.style.animation = 'none';
word.style.visibility = 'visible';
word.style.opacity = '1';
word.style.transform = 'translateY(0)';
word.style.clipPath = 'inset(0 0 0 0)';
});
this.paragraphContainer.appendChild(paragraph);
}