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/options-ui-module.js
+24 -4
View File
@@ -286,6 +286,7 @@ class OptionsUIModule extends BaseModule {
const masterVolumeValue = document.createElement('span');
masterVolumeValue.className = 'slider-value';
masterVolumeValue.textContent = '100%';
this.elements.masterVolumeValue = masterVolumeValue;
masterVolumeContainer.appendChild(masterVolumeValue);
this.elements.masterVolume = createUIElement('input', {
@@ -299,7 +300,7 @@ class OptionsUIModule extends BaseModule {
// Update displayed value when slider changes
this.elements.masterVolume.addEventListener('input', () => {
masterVolumeValue.textContent = `${this.elements.masterVolume.value}%`;
this.elements.masterVolumeValue.textContent = `${this.elements.masterVolume.value}%`;
});
audioSection.appendChild(masterVolumeContainer);
@@ -315,6 +316,7 @@ class OptionsUIModule extends BaseModule {
const ttsVolumeValue = document.createElement('span');
ttsVolumeValue.className = 'slider-value';
ttsVolumeValue.textContent = '100%';
this.elements.ttsVolumeValue = ttsVolumeValue;
ttsVolumeContainer.appendChild(ttsVolumeValue);
this.elements.ttsVolume = createUIElement('input', {
@@ -328,7 +330,7 @@ class OptionsUIModule extends BaseModule {
// Update displayed value when slider changes
this.elements.ttsVolume.addEventListener('input', () => {
ttsVolumeValue.textContent = `${this.elements.ttsVolume.value}%`;
this.elements.ttsVolumeValue.textContent = `${this.elements.ttsVolume.value}%`;
});
audioSection.appendChild(ttsVolumeContainer);
@@ -344,6 +346,7 @@ class OptionsUIModule extends BaseModule {
const musicVolumeValue = document.createElement('span');
musicVolumeValue.className = 'slider-value';
musicVolumeValue.textContent = '100%';
this.elements.musicVolumeValue = musicVolumeValue;
musicVolumeContainer.appendChild(musicVolumeValue);
this.elements.musicVolume = createUIElement('input', {
@@ -357,7 +360,7 @@ class OptionsUIModule extends BaseModule {
// Update displayed value when slider changes
this.elements.musicVolume.addEventListener('input', () => {
musicVolumeValue.textContent = `${this.elements.musicVolume.value}%`;
this.elements.musicVolumeValue.textContent = `${this.elements.musicVolume.value}%`;
});
audioSection.appendChild(musicVolumeContainer);
@@ -373,6 +376,7 @@ class OptionsUIModule extends BaseModule {
const sfxVolumeValue = document.createElement('span');
sfxVolumeValue.className = 'slider-value';
sfxVolumeValue.textContent = '100%';
this.elements.sfxVolumeValue = sfxVolumeValue;
sfxVolumeContainer.appendChild(sfxVolumeValue);
this.elements.sfxVolume = createUIElement('input', {
@@ -386,7 +390,7 @@ class OptionsUIModule extends BaseModule {
// Update displayed value when slider changes
this.elements.sfxVolume.addEventListener('input', () => {
sfxVolumeValue.textContent = `${this.elements.sfxVolume.value}%`;
this.elements.sfxVolumeValue.textContent = `${this.elements.sfxVolume.value}%`;
});
audioSection.appendChild(sfxVolumeContainer);
@@ -839,6 +843,7 @@ class OptionsUIModule extends BaseModule {
this.bindings = persistenceManager.setupBindings('#options-modal');
console.log('Options UI: Preference bindings set up', this.bindings.length);
this.updateSpeedDisplay();
this.updateVolumeDisplays();
// Add event listeners for side effects when preferences change
document.addEventListener('preference-updated', (event) => {
@@ -929,6 +934,21 @@ class OptionsUIModule extends BaseModule {
this.elements.ttsSpeedValue.textContent = `${this.elements.ttsSpeed.value}%`;
}
updateVolumeDisplays() {
if (this.elements.masterVolume && this.elements.masterVolumeValue) {
this.elements.masterVolumeValue.textContent = `${this.elements.masterVolume.value}%`;
}
if (this.elements.ttsVolume && this.elements.ttsVolumeValue) {
this.elements.ttsVolumeValue.textContent = `${this.elements.ttsVolume.value}%`;
}
if (this.elements.musicVolume && this.elements.musicVolumeValue) {
this.elements.musicVolumeValue.textContent = `${this.elements.musicVolume.value}%`;
}
if (this.elements.sfxVolume && this.elements.sfxVolumeValue) {
this.elements.sfxVolumeValue.textContent = `${this.elements.sfxVolume.value}%`;
}
}
}
// Create the singleton instance