598 lines
23 KiB
JavaScript
598 lines
23 KiB
JavaScript
/**
|
|
* UI Display Handler Module
|
|
* Manages the display of text and UI elements
|
|
*/
|
|
import { BaseModule } from './base-module.js';
|
|
|
|
class UIDisplayHandlerModule extends BaseModule {
|
|
constructor() {
|
|
super('ui-display-handler', 'UI Display Handler');
|
|
|
|
// Module dependencies
|
|
this.dependencies = ['layout-renderer', 'playback-coordinator'];
|
|
|
|
// DOM elements
|
|
this.container = null;
|
|
this.pageLeft = null;
|
|
this.pageRight = null;
|
|
this.paragraphContainer = null;
|
|
this.renderedItems = [];
|
|
this.resizeTimer = null;
|
|
this.storyResizeObserver = null;
|
|
this.lastStoryMetrics = null;
|
|
|
|
// Resources to preload
|
|
this.cssPath = '/css/style.css';
|
|
this.imagesToPreload = [
|
|
'/images/book-3057904.png',
|
|
'/images/brown-wooden-flooring.jpg'
|
|
];
|
|
|
|
// Bind methods using parent's bindMethods utility
|
|
this.bindMethods([
|
|
'initializeContainers',
|
|
'displayText',
|
|
'renderSentence',
|
|
'handleDeferredMediaBlock',
|
|
'scrollStoryToEnd',
|
|
'rerenderStory',
|
|
'clear',
|
|
'scheduleRerender',
|
|
'measureText',
|
|
'loadCSS',
|
|
'showChoices',
|
|
'preloadImages'
|
|
]);
|
|
|
|
console.log('UIDisplayHandler: Constructor initialized');
|
|
}
|
|
|
|
async initialize() {
|
|
try {
|
|
this.reportProgress(10, "Initializing UI Display Handler");
|
|
|
|
// Load CSS and preload images
|
|
this.reportProgress(20, "Loading CSS and preloading images");
|
|
await this.loadCSS(this.cssPath);
|
|
await this.preloadImages(this.imagesToPreload);
|
|
|
|
this.reportProgress(30, "Getting module dependencies");
|
|
|
|
// Get references to required modules using parent's getModule method
|
|
this.layoutRenderer = this.getModule('layout-renderer');
|
|
this.playbackCoordinator = this.getModule('playback-coordinator');
|
|
|
|
this.reportProgress(50, "Initializing display containers");
|
|
|
|
// Initialize container elements
|
|
this.initializeContainers();
|
|
|
|
this.reportProgress(70, "Setting up typography");
|
|
|
|
this.reportProgress(90, "Setting up event listeners");
|
|
this.addEventListener(document, 'book:resized', () => {
|
|
this.scheduleRerender();
|
|
});
|
|
|
|
if (window.ResizeObserver && this.paragraphContainer) {
|
|
this.storyResizeObserver = new ResizeObserver((entries) => {
|
|
const entry = entries[0];
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
|
|
const computedStyle = window.getComputedStyle(this.paragraphContainer);
|
|
const metrics = {
|
|
width: Math.round(entry.contentRect.width),
|
|
fontSize: computedStyle.fontSize,
|
|
lineHeight: computedStyle.lineHeight
|
|
};
|
|
|
|
if (!this.lastStoryMetrics) {
|
|
this.lastStoryMetrics = metrics;
|
|
return;
|
|
}
|
|
|
|
const changed = metrics.width !== this.lastStoryMetrics.width ||
|
|
metrics.fontSize !== this.lastStoryMetrics.fontSize ||
|
|
metrics.lineHeight !== this.lastStoryMetrics.lineHeight;
|
|
|
|
this.lastStoryMetrics = metrics;
|
|
if (changed) {
|
|
this.scheduleRerender();
|
|
}
|
|
});
|
|
this.storyResizeObserver.observe(this.paragraphContainer);
|
|
}
|
|
|
|
this.reportProgress(100, "UI Display Handler ready");
|
|
return true;
|
|
} catch (error) {
|
|
console.error("Error initializing UI Display Handler:", error);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
scheduleRerender() {
|
|
clearTimeout(this.resizeTimer);
|
|
this.resizeTimer = setTimeout(() => this.rerenderStory(), 80);
|
|
}
|
|
|
|
|
|
/**
|
|
* Load CSS file asynchronously and wait for it to be applied
|
|
* @param {string} cssPath - Path to CSS file
|
|
* @returns {Promise<void>}
|
|
*/
|
|
loadCSS(cssPath) {
|
|
return new Promise((resolve, reject) => {
|
|
// Create link element
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = cssPath;
|
|
|
|
// Set up load and error handlers
|
|
link.onload = () => {
|
|
console.log(`UIDisplayHandler: CSS ${cssPath} loaded successfully`);
|
|
resolve();
|
|
};
|
|
|
|
link.onerror = (error) => {
|
|
console.error(`UIDisplayHandler: Failed to load CSS ${cssPath}:`, error);
|
|
reject(error);
|
|
};
|
|
|
|
// Add to document head
|
|
document.head.appendChild(link);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Preload images to ensure they're in the cache
|
|
* @param {Array<string>} imagePaths - Array of image paths to preload
|
|
* @returns {Promise<void>}
|
|
*/
|
|
preloadImages(imagePaths) {
|
|
if (!imagePaths || imagePaths.length === 0) {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
const promises = imagePaths.map(path => {
|
|
return new Promise((resolve) => {
|
|
const img = new Image();
|
|
img.onload = () => resolve();
|
|
img.onerror = () => {
|
|
console.warn(`UIDisplayHandler: Failed to preload image ${path}`);
|
|
resolve(); // Resolve anyway to not block loading
|
|
};
|
|
img.src = path;
|
|
});
|
|
});
|
|
|
|
return Promise.all(promises);
|
|
}
|
|
|
|
/**
|
|
* Initialize the UI containers
|
|
*/
|
|
initializeContainers() {
|
|
// Check if the book container already exists
|
|
let bookContainer = document.getElementById('book');
|
|
if (!bookContainer) {
|
|
console.log('UIDisplayHandler: Book container not found, creating it');
|
|
bookContainer = document.createElement('div');
|
|
bookContainer.id = 'book';
|
|
document.body.appendChild(bookContainer);
|
|
}
|
|
|
|
// Create or find page_left
|
|
this.pageLeft = document.getElementById('page_left');
|
|
if (!this.pageLeft) {
|
|
console.log('UIDisplayHandler: Left page not found, creating it');
|
|
this.pageLeft = document.createElement('div');
|
|
this.pageLeft.id = 'page_left';
|
|
|
|
// Create header content
|
|
const header = document.createElement('div');
|
|
header.className = 'header';
|
|
header.innerHTML = `
|
|
<h2 class="byline l10n-by">powered by Generative AI</h2>
|
|
<h1 class="title">AI Interactive Fiction</h1>
|
|
<h3 class="subtitle">An open-world text adventure</h3>
|
|
<div class="separator"><double>❦</double></div>
|
|
`;
|
|
this.pageLeft.appendChild(header);
|
|
|
|
// Create controls
|
|
const controls = document.createElement('div');
|
|
controls.id = 'controls';
|
|
controls.className = 'buttons';
|
|
controls.innerHTML = `
|
|
<a class="l10n-speech" id="speech" title="Toggle text to speech">speech</a>
|
|
<span><a id="speed_reset"><span class="l10n-speed">speed<sup>*</sup></span></a><input type="range" min="50" max="150" value="100" id="speed" name="speed" /></span>
|
|
<a class="l10n-restart" id="rewind" title="Start a new game">new game</a>
|
|
<a class="l10n-save" id="save" title="Save progress">save</a>
|
|
<a class="l10n-load" id="reload" title="Reload from save point" disabled="disabled">load</a>
|
|
<a class="l10n-options" id="options" title="Options">options</a>
|
|
`;
|
|
this.pageLeft.appendChild(controls);
|
|
|
|
// Create choices container
|
|
const choicesContainer = document.createElement('div');
|
|
choicesContainer.id = 'choices';
|
|
choicesContainer.className = 'container';
|
|
|
|
// Create command history container
|
|
const commandHistory = document.createElement('div');
|
|
commandHistory.id = 'command_history';
|
|
choicesContainer.appendChild(commandHistory);
|
|
|
|
// Create command input container
|
|
const commandInput = document.createElement('div');
|
|
commandInput.id = 'command_input';
|
|
commandInput.innerHTML = `
|
|
<div class="input-wrapper">
|
|
<textarea id="player_input" placeholder="Enter your command..." rows="1" autofocus></textarea>
|
|
<span id="cursor"></span>
|
|
</div>
|
|
`;
|
|
choicesContainer.appendChild(commandInput);
|
|
|
|
this.pageLeft.appendChild(choicesContainer);
|
|
|
|
// Create remark
|
|
const remark = document.createElement('div');
|
|
remark.id = 'remark';
|
|
remark.className = 'l10n-remark';
|
|
remark.innerHTML = '<i><sup>*</sup>click on page or press spacebar to fast forward text animation</i>';
|
|
this.pageLeft.appendChild(remark);
|
|
|
|
bookContainer.appendChild(this.pageLeft);
|
|
}
|
|
|
|
// Create or find page_right
|
|
this.pageRight = document.getElementById('page_right');
|
|
if (!this.pageRight) {
|
|
console.log('UIDisplayHandler: Right page not found, creating it');
|
|
this.pageRight = document.createElement('div');
|
|
this.pageRight.id = 'page_right';
|
|
bookContainer.appendChild(this.pageRight);
|
|
}
|
|
|
|
// Create or find story container
|
|
this.container = document.getElementById('story');
|
|
if (!this.container) {
|
|
console.log('UIDisplayHandler: Story container not found, creating it');
|
|
this.container = document.createElement('div');
|
|
this.container.id = 'story';
|
|
this.container.className = 'container';
|
|
this.pageRight.appendChild(this.container);
|
|
}
|
|
|
|
if (!document.getElementById('start_prompt')) {
|
|
const startPrompt = document.createElement('div');
|
|
startPrompt.id = 'start_prompt';
|
|
startPrompt.textContent = 'Klick on new game or load to start the game';
|
|
this.pageRight.appendChild(startPrompt);
|
|
}
|
|
|
|
// Create paragraph container inside story container
|
|
this.paragraphContainer = document.getElementById('paragraphs');
|
|
if (!this.paragraphContainer) {
|
|
console.log('UIDisplayHandler: Paragraphs container not found, creating it');
|
|
this.paragraphContainer = document.createElement('div');
|
|
this.paragraphContainer.id = 'paragraphs';
|
|
this.container.appendChild(this.paragraphContainer);
|
|
}
|
|
|
|
// Create ruler for text measurements
|
|
let ruler = document.getElementById('ruler');
|
|
if (!ruler) {
|
|
ruler = document.createElement('div');
|
|
ruler.id = 'ruler';
|
|
document.body.appendChild(ruler);
|
|
}
|
|
|
|
// Create lighting effect
|
|
let lighting = document.getElementById('lighting');
|
|
if (!lighting) {
|
|
lighting = document.createElement('div');
|
|
lighting.id = 'lighting';
|
|
document.body.appendChild(lighting);
|
|
}
|
|
|
|
console.log('UIDisplayHandler: All containers initialized');
|
|
}
|
|
|
|
/**
|
|
* Measure text width using canvas
|
|
* @param {string} text - Text to measure
|
|
* @returns {number} - Width of the text
|
|
*/
|
|
measureText(text) {
|
|
// Use ParagraphLayout's measureText function instead of implementing our own
|
|
if (this.paragraphLayout && typeof this.paragraphLayout.measureText === 'function') {
|
|
return this.paragraphLayout.measureText(text);
|
|
}
|
|
|
|
// Fallback measuring if paragraph layout is not available
|
|
if (!this.canvas) {
|
|
this.canvas = document.createElement('canvas');
|
|
this.context = this.canvas.getContext('2d');
|
|
this.context.font = `${this.config.typography.fontSize} ${this.config.typography.fontFamily}`;
|
|
}
|
|
|
|
return this.context.measureText(text).width;
|
|
}
|
|
|
|
|
|
/**
|
|
* Display text in the UI (backward compatibility)
|
|
* Note: Text should flow through SentenceQueue instead
|
|
* @param {string} text - Text to display
|
|
* @param {Object} options - Display options
|
|
* @returns {Promise<HTMLElement>} - Promise resolving to the displayed paragraph element
|
|
*/
|
|
displayText(text, options = {}) {
|
|
if (!text) return Promise.resolve(null);
|
|
|
|
// For backward compatibility, delegate to sentence queue
|
|
console.warn('UIDisplayHandler.displayText called directly, text should flow through SentenceQueue');
|
|
|
|
const sentenceQueue = this.getModule('sentence-queue');
|
|
if (sentenceQueue) {
|
|
return new Promise(resolve => {
|
|
sentenceQueue.addSentence(text, () => resolve(null));
|
|
});
|
|
}
|
|
|
|
return Promise.resolve(null);
|
|
}
|
|
|
|
/**
|
|
* Render a prepared sentence to the display
|
|
* @param {Object} sentence - Prepared sentence object from SentenceQueue
|
|
* @returns {Promise<HTMLElement>} - Promise resolving to the paragraph element
|
|
*/
|
|
async renderSentence(sentence) {
|
|
if (!sentence || !sentence.layout) {
|
|
if (sentence && (sentence.kind === 'image' || sentence.kind === 'music')) {
|
|
return this.handleDeferredMediaBlock(sentence);
|
|
}
|
|
console.error('UIDisplayHandler: Invalid sentence object');
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
// Render DOM from layout data
|
|
const paragraphElement = this.layoutRenderer.renderParagraph(
|
|
sentence.layout,
|
|
{ id: sentence.id }
|
|
);
|
|
|
|
// Append to container
|
|
if (this.paragraphContainer) {
|
|
this.paragraphContainer.appendChild(paragraphElement);
|
|
if (typeof this.layoutRenderer.adjustJustification === 'function') {
|
|
this.layoutRenderer.adjustJustification(paragraphElement);
|
|
}
|
|
} else {
|
|
console.error('UIDisplayHandler: Paragraph container not found');
|
|
return null;
|
|
}
|
|
|
|
// Store element reference in sentence
|
|
sentence.element = paragraphElement;
|
|
this.renderedItems.push({
|
|
type: sentence.kind === 'heading' ? 'heading' : 'paragraph',
|
|
id: sentence.id,
|
|
text: sentence.text,
|
|
metadata: {
|
|
layoutText: sentence.layout?.sourceLayoutText || sentence.text,
|
|
cueMarkers: sentence.cueMarkers || [],
|
|
role: sentence.role || 'body',
|
|
isFirstParagraphInChapter: sentence.isFirstParagraphInChapter,
|
|
dropCap: sentence.dropCap,
|
|
addTopSpace: sentence.addTopSpace,
|
|
paragraphIndex: sentence.paragraphIndex
|
|
}
|
|
});
|
|
|
|
this.scrollStoryToEnd(true);
|
|
|
|
// Start coordinated playback (animation + TTS), including chapter headings.
|
|
await this.playbackCoordinator.play(sentence);
|
|
|
|
// Call completion callback
|
|
if (sentence.onComplete) {
|
|
sentence.onComplete();
|
|
}
|
|
|
|
return paragraphElement;
|
|
|
|
} catch (error) {
|
|
console.error('UIDisplayHandler: Error rendering sentence:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async rerenderStory() {
|
|
if (!this.paragraphContainer || this.renderedItems.length === 0) return;
|
|
|
|
const sentenceQueue = this.getModule('sentence-queue');
|
|
if (!sentenceQueue || typeof sentenceQueue.prepareLayout !== 'function') return;
|
|
|
|
console.log('UIDisplayHandler: Re-typesetting story after page resize');
|
|
const scrollTop = this.pageRight ? this.pageRight.scrollTop : 0;
|
|
this.paragraphContainer.innerHTML = '';
|
|
|
|
for (const item of this.renderedItems) {
|
|
if (item.type === 'heading') {
|
|
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;
|
|
}
|
|
|
|
if (item.type !== 'paragraph') continue;
|
|
|
|
const layout = await sentenceQueue.prepareLayout(item.text, item.metadata || {});
|
|
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);
|
|
}
|
|
|
|
if (this.pageRight) {
|
|
this.pageRight.scrollTop = scrollTop;
|
|
}
|
|
}
|
|
|
|
scrollStoryToEnd(smooth = true) {
|
|
if (!this.pageRight) {
|
|
return;
|
|
}
|
|
|
|
window.requestAnimationFrame(() => {
|
|
this.pageRight.scrollTo({
|
|
top: Math.max(0, this.pageRight.scrollHeight - this.pageRight.clientHeight),
|
|
behavior: smooth ? 'smooth' : 'auto'
|
|
});
|
|
});
|
|
}
|
|
|
|
async handleDeferredMediaBlock(sentence) {
|
|
document.dispatchEvent(new CustomEvent('story:media-block', {
|
|
detail: {
|
|
id: sentence.id,
|
|
type: sentence.kind,
|
|
...(sentence.metadata || {})
|
|
}
|
|
}));
|
|
|
|
if (sentence.kind === 'music') {
|
|
const leadInSeconds = Number(sentence.metadata?.leadInSeconds || sentence.metadata?.leadIn || 0);
|
|
if (leadInSeconds > 0) {
|
|
console.log(`UIDisplayHandler: Waiting ${leadInSeconds}s before continuing after music block`);
|
|
await new Promise(resolve => setTimeout(resolve, leadInSeconds * 1000));
|
|
}
|
|
}
|
|
|
|
if (sentence.onComplete) {
|
|
sentence.onComplete();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
clear() {
|
|
if (this.container) {
|
|
this.container.innerHTML = '';
|
|
this.paragraphContainer = document.createElement('div');
|
|
this.paragraphContainer.id = 'paragraphs';
|
|
this.container.appendChild(this.paragraphContainer);
|
|
}
|
|
this.renderedItems = [];
|
|
if (this.pageRight) {
|
|
this.pageRight.scrollTop = 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show choices in the UI
|
|
* @param {Array<Object>} choices - Array of choice objects
|
|
* @param {Function} callback - Callback function for choice selection
|
|
* @returns {Promise<HTMLElement>} - Promise resolving to the choices container
|
|
*/
|
|
showChoices(choices, callback) {
|
|
if (!choices || choices.length === 0) {
|
|
return Promise.resolve(null);
|
|
}
|
|
|
|
return new Promise((resolve) => {
|
|
// Find or create choices container
|
|
let choicesContainer = document.getElementById('choices');
|
|
if (!choicesContainer) {
|
|
// UI Input Handler should create this, but if it doesn't exist yet, create it
|
|
choicesContainer = document.createElement('div');
|
|
choicesContainer.id = 'choices';
|
|
choicesContainer.className = 'container';
|
|
this.pageLeft.appendChild(choicesContainer);
|
|
}
|
|
|
|
// Create a dedicated container for this set of choices
|
|
const choicesGroup = document.createElement('div');
|
|
choicesGroup.className = 'choices-group';
|
|
choicesContainer.appendChild(choicesGroup);
|
|
|
|
// Create each choice button
|
|
choices.forEach((choice, index) => {
|
|
const choiceButton = document.createElement('button');
|
|
choiceButton.className = 'choice-button';
|
|
choiceButton.textContent = choice.text;
|
|
|
|
// Add index as data attribute
|
|
choiceButton.dataset.index = index;
|
|
|
|
// Add event listener
|
|
choiceButton.addEventListener('click', () => {
|
|
// Disable all buttons in this group
|
|
Array.from(choicesGroup.querySelectorAll('button')).forEach(btn => {
|
|
btn.disabled = true;
|
|
btn.classList.add('selected');
|
|
});
|
|
|
|
// Highlight the selected button
|
|
choiceButton.classList.add('selected');
|
|
|
|
// Call the callback
|
|
if (typeof callback === 'function') {
|
|
callback(index, choice);
|
|
}
|
|
});
|
|
|
|
choicesGroup.appendChild(choiceButton);
|
|
});
|
|
|
|
// Schedule transition for choices to appear
|
|
setTimeout(() => {
|
|
choicesGroup.classList.add('visible');
|
|
|
|
// Scroll to the choices
|
|
choicesGroup.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
|
|
|
// Resolve the promise with the choices container
|
|
resolve(choicesGroup);
|
|
}, 100);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Create the singleton instance
|
|
const uiDisplayHandler = new UIDisplayHandlerModule();
|
|
|
|
// Export the module
|
|
export { uiDisplayHandler as UIDisplayHandler };
|
|
|
|
// Register with the module registry
|
|
if (window.moduleRegistry) {
|
|
window.moduleRegistry.register(uiDisplayHandler);
|
|
}
|
|
|
|
// Keep a reference in window for loader system
|
|
window.UIDisplayHandler = uiDisplayHandler;
|