Checkpoint WebGL book renderer work

public/js/options-ui-module.js

@@ -53,7 +53,8 @@ class OptionsUIModule extends BaseModule {
             'getPreference',
             'updatePreference',
             'updateUIText',
-            'renderProviderStatuses'
+            'renderProviderStatuses',
+            'updateWebGLDisplays'
         ]);
     }
 
@@ -249,6 +250,86 @@ class OptionsUIModule extends BaseModule {
         appSettingsSection.appendChild(speedContainer);
         
         body.appendChild(appSettingsSection);
+
+        const webglSection = document.createElement('div');
+        webglSection.className = 'options-section';
+
+        const webglTitle = document.createElement('h3');
+        webglTitle.textContent = this.t('options.bookDisplay');
+        webglSection.appendChild(webglTitle);
+
+        const displayModeContainer = document.createElement('div');
+        displayModeContainer.className = 'option-item';
+
+        const displayModeLabel = document.createElement('label');
+        displayModeLabel.textContent = this.t('options.displayMode') + ':';
+        displayModeContainer.appendChild(displayModeLabel);
+
+        this.elements.webglMode = createUIElement('select', {
+            'data-pref-bind': 'webgl.mode'
+        }, null, displayModeContainer);
+        [
+            { value: '3d', label: this.t('options.displayMode3d') },
+            { value: '2d', label: this.t('options.displayMode2d') }
+        ].forEach((optionConfig) => {
+            const option = document.createElement('option');
+            option.value = optionConfig.value;
+            option.textContent = optionConfig.label;
+            this.elements.webglMode.appendChild(option);
+        });
+        webglSection.appendChild(displayModeContainer);
+
+        const bookSizeContainer = document.createElement('div');
+        bookSizeContainer.className = 'option-item';
+
+        const bookSizeLabel = document.createElement('label');
+        bookSizeLabel.textContent = this.t('options.bookSize') + ':';
+        bookSizeContainer.appendChild(bookSizeLabel);
+
+        const bookSizeValue = document.createElement('span');
+        bookSizeValue.className = 'slider-value';
+        bookSizeValue.textContent = '300';
+        this.elements.webglBookSizeValue = bookSizeValue;
+        bookSizeContainer.appendChild(bookSizeValue);
+
+        this.elements.webglBookSize = createUIElement('input', {
+            type: 'range',
+            min: 40,
+            max: 500,
+            step: 10,
+            value: 300,
+            'data-pref-bind': 'webgl.bookPageCount',
+            'data-pref-transform': 'integer:40,500'
+        }, null, bookSizeContainer);
+        this.elements.webglBookSize.addEventListener('input', () => this.updateWebGLDisplays());
+        webglSection.appendChild(bookSizeContainer);
+
+        const bookProgressContainer = document.createElement('div');
+        bookProgressContainer.className = 'option-item';
+
+        const bookProgressLabel = document.createElement('label');
+        bookProgressLabel.textContent = this.t('options.bookProgress') + ':';
+        bookProgressContainer.appendChild(bookProgressLabel);
+
+        const bookProgressValue = document.createElement('span');
+        bookProgressValue.className = 'slider-value';
+        bookProgressValue.textContent = '50%';
+        this.elements.webglBookProgressValue = bookProgressValue;
+        bookProgressContainer.appendChild(bookProgressValue);
+
+        this.elements.webglBookProgress = createUIElement('input', {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+            value: 50,
+            'data-pref-bind': 'webgl.bookProgress',
+            'data-pref-transform': 'range:0,1'
+        }, null, bookProgressContainer);
+        this.elements.webglBookProgress.addEventListener('input', () => this.updateWebGLDisplays());
+        webglSection.appendChild(bookProgressContainer);
+
+        body.appendChild(webglSection);
         
         // TTS Section
         const ttsSection = document.createElement('div');
@@ -1020,6 +1101,7 @@ class OptionsUIModule extends BaseModule {
         console.log('Options UI: Preference bindings set up', this.bindings.length);
         this.updateSpeedDisplay();
         this.updateVolumeDisplays();
+        this.updateWebGLDisplays();
         
         // Add event listeners for side effects when preferences change
         document.addEventListener('preference-updated', (event) => {
@@ -1115,6 +1197,10 @@ class OptionsUIModule extends BaseModule {
                     this.populateVoices();
                 }
             }
+
+            if (category === 'webgl') {
+                this.updateWebGLDisplays();
+            }
             if (key === 'speed' && this.elements.ttsSpeed) {
                 this.updateSpeedDisplay();
             }
@@ -1155,6 +1241,15 @@ class OptionsUIModule extends BaseModule {
             this.elements.musicDuckingAmountValue.textContent = `${this.elements.musicDuckingAmount.value}%`;
         }
     }
+
+    updateWebGLDisplays() {
+        if (this.elements.webglBookSize && this.elements.webglBookSizeValue) {
+            this.elements.webglBookSizeValue.textContent = String(this.elements.webglBookSize.value);
+        }
+        if (this.elements.webglBookProgress && this.elements.webglBookProgressValue) {
+            this.elements.webglBookProgressValue.textContent = `${this.elements.webglBookProgress.value}%`;
+        }
+    }
 }
 
 // Create the singleton instance