Completed options menu and got kokoro to load.
This commit is contained in:
+189
-78
@@ -166,41 +166,102 @@ class UIController extends BaseModule {
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Listen for command events from input handler - use arrow function to preserve context
|
||||
document.addEventListener('ui:command', (event) => {
|
||||
this.handleCommand(event.detail);
|
||||
});
|
||||
// Set up event listeners for menu buttons
|
||||
const saveButton = document.getElementById('save');
|
||||
const loadButton = document.getElementById('reload');
|
||||
const restartButton = document.getElementById('rewind');
|
||||
const speechToggle = document.getElementById('speech');
|
||||
const optionsButton = document.getElementById('options');
|
||||
|
||||
// Listen for text display events - use arrow function to preserve context
|
||||
document.addEventListener('ui:text:complete', (event) => {
|
||||
console.log('UIController: Text complete event received, ready for next text');
|
||||
});
|
||||
// Get persistence manager module
|
||||
const persistenceManager = this.getModule('persistence-manager');
|
||||
|
||||
// Listen for socket connection events
|
||||
document.addEventListener('socket:connected', () => {
|
||||
console.log('UIController: Socket connected');
|
||||
this.updateButtonStates();
|
||||
});
|
||||
// Set up save button
|
||||
if (saveButton) {
|
||||
saveButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:save'));
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('socket:disconnected', () => {
|
||||
console.log('UIController: Socket disconnected');
|
||||
this.updateButtonStates();
|
||||
});
|
||||
// Set up load button
|
||||
if (loadButton) {
|
||||
loadButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:load'));
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for TTS state change events
|
||||
document.addEventListener('tts:stateChange', (event) => {
|
||||
if (event.detail) {
|
||||
if (typeof event.detail.enabled === 'boolean') {
|
||||
this.ttsEnabled = event.detail.enabled;
|
||||
}
|
||||
if (typeof event.detail.available === 'boolean') {
|
||||
this.ttsAvailable = event.detail.available;
|
||||
}
|
||||
// Set up restart button
|
||||
if (restartButton) {
|
||||
restartButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:game:restart'));
|
||||
});
|
||||
}
|
||||
|
||||
// Set up speech toggle button
|
||||
if (speechToggle) {
|
||||
// Initialize ttsEnabled from persistence manager
|
||||
if (persistenceManager) {
|
||||
const prefs = persistenceManager.getAllPreferences();
|
||||
this.ttsEnabled = prefs.tts?.enabled ?? false;
|
||||
|
||||
// Update button state
|
||||
this.updateButtonStates();
|
||||
}
|
||||
|
||||
speechToggle.addEventListener('click', () => {
|
||||
// Toggle TTS state
|
||||
this.ttsEnabled = !this.ttsEnabled;
|
||||
|
||||
// Update UI
|
||||
this.updateButtonStates();
|
||||
|
||||
// Save preference
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'enabled', this.ttsEnabled);
|
||||
}
|
||||
|
||||
// Notify other components
|
||||
document.dispatchEvent(new CustomEvent('ui:tts:toggle', {
|
||||
detail: { enabled: this.ttsEnabled }
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// Set up options button
|
||||
if (optionsButton) {
|
||||
optionsButton.addEventListener('click', () => {
|
||||
document.dispatchEvent(new CustomEvent('ui:options:toggle'));
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for book events
|
||||
document.addEventListener('book:ready', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: true,
|
||||
canRestart: true
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for TTS availability events
|
||||
// Listen for restart events
|
||||
document.addEventListener('story:restart', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: false,
|
||||
canRestart: false
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for save events
|
||||
document.addEventListener('story:save', () => {
|
||||
this.updateButtonStates({
|
||||
canSave: true,
|
||||
canLoad: true,
|
||||
canRestart: true
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for TTS availability changes
|
||||
document.addEventListener('tts:availability', (event) => {
|
||||
if (event.detail && typeof event.detail.available === 'boolean') {
|
||||
this.ttsAvailable = event.detail.available;
|
||||
@@ -208,45 +269,92 @@ class UIController extends BaseModule {
|
||||
}
|
||||
});
|
||||
|
||||
// Add options button to controls section
|
||||
const controlsSection = document.getElementById('controls');
|
||||
if (controlsSection) {
|
||||
// Check if options button already exists
|
||||
if (!document.getElementById('options-button')) {
|
||||
const optionsButton = document.createElement('a');
|
||||
optionsButton.id = 'options-button';
|
||||
optionsButton.href = '#';
|
||||
optionsButton.textContent = 'options';
|
||||
optionsButton.title = 'Show game options';
|
||||
optionsButton.className = 'control-button';
|
||||
optionsButton.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.dispatchEvent(new CustomEvent('ui:showOptions'));
|
||||
});
|
||||
controlsSection.appendChild(optionsButton);
|
||||
}
|
||||
|
||||
// Add speech toggle button
|
||||
const speechToggle = document.getElementById('speech-toggle');
|
||||
if (speechToggle) {
|
||||
speechToggle.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Dispatch an event for the TTS module to handle instead of calling directly
|
||||
document.dispatchEvent(new CustomEvent('tts:toggle'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for window resize events
|
||||
window.addEventListener('resize', () => {
|
||||
this.applyBookSizing();
|
||||
// Listen for TTS engine changes
|
||||
document.addEventListener('tts:engine:change', (event) => {
|
||||
// Update button states since TTS engine changed
|
||||
this.updateButtonStates();
|
||||
});
|
||||
|
||||
// Listen for key events
|
||||
document.addEventListener('keydown', (event) => {
|
||||
// Pass to input handler
|
||||
if (this.inputHandler) {
|
||||
this.inputHandler.handleKeyboardInput(event);
|
||||
// Listen for TTS toggle events from other components
|
||||
document.addEventListener('tts:enabled:change', (event) => {
|
||||
if (event.detail && typeof event.detail.enabled === 'boolean') {
|
||||
this.ttsEnabled = event.detail.enabled;
|
||||
this.updateButtonStates();
|
||||
|
||||
// Ensure persistence is updated
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'enabled', this.ttsEnabled);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Set up speed slider in main UI
|
||||
const speedSlider = document.getElementById('speed');
|
||||
const speedReset = document.getElementById('speed_reset');
|
||||
|
||||
if (speedSlider) {
|
||||
// Initialize speed from persistence manager
|
||||
if (persistenceManager) {
|
||||
const prefs = persistenceManager.getAllPreferences();
|
||||
// Get the unified speed value (0-1 range)
|
||||
const speed = prefs.tts?.speed ?? 0.5;
|
||||
// Convert to slider range (0-100)
|
||||
speedSlider.value = Math.round(speed * 100);
|
||||
}
|
||||
|
||||
speedSlider.addEventListener('input', (e) => {
|
||||
// Convert slider value (0-100) to normalized speed (0-1)
|
||||
const speed = parseInt(e.target.value) / 100;
|
||||
|
||||
// Scale for different TTS engines
|
||||
// This value is used for real-time preview only
|
||||
const rate = this.ttsEnabled ? speed * 2 : 1;
|
||||
|
||||
// Update animation speed
|
||||
document.dispatchEvent(new CustomEvent('animation:speed:change', {
|
||||
detail: { speed: rate }
|
||||
}));
|
||||
|
||||
// Update TTS speed
|
||||
document.dispatchEvent(new CustomEvent('tts:speed:change', {
|
||||
detail: { speed: speed }
|
||||
}));
|
||||
|
||||
// Save preference
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'speed', speed);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (speedReset) {
|
||||
speedReset.addEventListener('click', () => {
|
||||
// Reset to default speed (0.5)
|
||||
if (speedSlider) {
|
||||
// Default value is 0.5 in normalized form (0-1),
|
||||
// which is 50 in slider range (0-100)
|
||||
speedSlider.value = 50;
|
||||
|
||||
// Trigger the input event to update all components
|
||||
speedSlider.dispatchEvent(new Event('input'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for speed change events from other components
|
||||
document.addEventListener('tts:speed:change', (event) => {
|
||||
if (event.detail && typeof event.detail.speed === 'number') {
|
||||
// Update the main UI speed slider
|
||||
const speedSlider = document.getElementById('speed');
|
||||
if (speedSlider) {
|
||||
// Convert normalized speed (0-1) to slider range (0-100)
|
||||
speedSlider.value = Math.round(event.detail.speed * 100);
|
||||
}
|
||||
|
||||
// Save to persistence manager
|
||||
if (persistenceManager) {
|
||||
persistenceManager.updatePreference('tts', 'speed', event.detail.speed);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -342,7 +450,6 @@ class UIController extends BaseModule {
|
||||
|
||||
/**
|
||||
* Update UI button states based on game state
|
||||
* @param {Object} state - Game state information
|
||||
*/
|
||||
updateButtonStates(state = {}) {
|
||||
const { canSave, canLoad, canRestart } = state;
|
||||
@@ -351,7 +458,7 @@ class UIController extends BaseModule {
|
||||
const saveButton = document.getElementById('save');
|
||||
const loadButton = document.getElementById('reload');
|
||||
const restartButton = document.getElementById('rewind');
|
||||
const speechToggle = document.getElementById('speech-toggle');
|
||||
const speechToggle = document.getElementById('speech');
|
||||
|
||||
// Update save button state
|
||||
if (saveButton) {
|
||||
@@ -382,21 +489,25 @@ class UIController extends BaseModule {
|
||||
|
||||
// Update speech toggle button state
|
||||
if (speechToggle) {
|
||||
// Update the button appearance based on TTS state
|
||||
if (this.ttsEnabled) {
|
||||
speechToggle.classList.add('active');
|
||||
speechToggle.title = 'Disable speech';
|
||||
} else {
|
||||
speechToggle.classList.remove('active');
|
||||
speechToggle.title = 'Enable speech';
|
||||
}
|
||||
|
||||
// Disable the button completely if TTS is not available
|
||||
if (this.ttsAvailable === false) {
|
||||
// Update the button appearance based on TTS state using existing styles
|
||||
if (!this.ttsAvailable) {
|
||||
// TTS is not available, disable the button
|
||||
speechToggle.setAttribute('disabled', 'disabled');
|
||||
speechToggle.title = 'Speech not available';
|
||||
speechToggle.title = 'Text-to-speech is not available';
|
||||
} else {
|
||||
// TTS is available, remove disabled attribute
|
||||
speechToggle.removeAttribute('disabled');
|
||||
|
||||
// Update based on whether TTS is enabled
|
||||
if (this.ttsEnabled) {
|
||||
speechToggle.style.fontWeight = 'bold';
|
||||
speechToggle.style.color = '#000';
|
||||
speechToggle.title = 'Disable speech';
|
||||
} else {
|
||||
speechToggle.style.fontWeight = 'normal';
|
||||
speechToggle.style.color = '#999';
|
||||
speechToggle.title = 'Enable speech';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user