Implement WebGL page reserve navigation

public/js/options-ui-module.js

@@ -50,6 +50,9 @@ class OptionsUIModule extends BaseModule {
             'setupApiUrlFields',
             'setupInitialState',
             'dispatchApiChangeEvent',
+            'getMetadataNumber',
+            'hasFixedBookPageCount',
+            'hasFixedPageReserve',
             'getPreference',
             'updatePreference',
             'updateUIText',
@@ -92,6 +95,25 @@ class OptionsUIModule extends BaseModule {
             detail: { provider, [valueType]: value }
         }));
     }
+
+    getMetadataNumber(keys = []) {
+        const gameConfig = this.getModule('game-config');
+        const metadata = gameConfig?.getMetadata?.() || {};
+        for (const key of keys) {
+            if (!Object.prototype.hasOwnProperty.call(metadata, key)) continue;
+            const value = Number(metadata[key]);
+            if (Number.isFinite(value)) return value;
+        }
+        return null;
+    }
+
+    hasFixedBookPageCount() {
+        return Number.isFinite(this.getMetadataNumber(['bookPageCount', 'defaultBookPageCount', 'webglBookPageCount']));
+    }
+
+    hasFixedPageReserve() {
+        return Number.isFinite(this.getMetadataNumber(['pageReserve', 'defaultPageReserve', 'webglPageReserve']));
+    }
     
     /**
      * Gets a preference from the persistence manager
@@ -302,32 +324,36 @@ class OptionsUIModule extends BaseModule {
             'data-pref-transform': 'integer:40,500'
         }, null, bookSizeContainer);
         this.elements.webglBookSize.addEventListener('input', () => this.updateWebGLDisplays());
-        webglSection.appendChild(bookSizeContainer);
+        if (!this.hasFixedBookPageCount()) {
+            webglSection.appendChild(bookSizeContainer);
+        }
 
-        const bookProgressContainer = document.createElement('div');
-        bookProgressContainer.className = 'option-item';
+        const pageReserveContainer = document.createElement('div');
+        pageReserveContainer.className = 'option-item';
 
-        const bookProgressLabel = document.createElement('label');
-        bookProgressLabel.textContent = this.t('options.bookProgress') + ':';
-        bookProgressContainer.appendChild(bookProgressLabel);
+        const pageReserveLabel = document.createElement('label');
+        pageReserveLabel.textContent = this.t('options.pageReserve') + ':';
+        pageReserveContainer.appendChild(pageReserveLabel);
 
-        const bookProgressValue = document.createElement('span');
-        bookProgressValue.className = 'slider-value';
-        bookProgressValue.textContent = '50%';
-        this.elements.webglBookProgressValue = bookProgressValue;
-        bookProgressContainer.appendChild(bookProgressValue);
+        const pageReserveValue = document.createElement('span');
+        pageReserveValue.className = 'slider-value';
+        pageReserveValue.textContent = '50';
+        this.elements.webglPageReserveValue = pageReserveValue;
+        pageReserveContainer.appendChild(pageReserveValue);
 
-        this.elements.webglBookProgress = createUIElement('input', {
+        this.elements.webglPageReserve = createUIElement('input', {
             type: 'range',
             min: 0,
-            max: 100,
+            max: 500,
             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);
+            'data-pref-bind': 'webgl.pageReserve',
+            'data-pref-transform': 'integer:0,500'
+        }, null, pageReserveContainer);
+        this.elements.webglPageReserve.addEventListener('input', () => this.updateWebGLDisplays());
+        if (!this.hasFixedPageReserve()) {
+            webglSection.appendChild(pageReserveContainer);
+        }
 
         body.appendChild(webglSection);
         
@@ -1246,8 +1272,14 @@ class OptionsUIModule extends BaseModule {
         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}%`;
+        if (this.elements.webglPageReserve && this.elements.webglPageReserveValue) {
+            const bookSize = Number(this.elements.webglBookSize?.value || this.getPreference('webgl', 'bookPageCount', 300));
+            const maxReserve = Number.isFinite(bookSize) ? Math.max(0, Math.floor(bookSize)) : 500;
+            this.elements.webglPageReserve.max = String(maxReserve);
+            if (Number(this.elements.webglPageReserve.value) > maxReserve) {
+                this.elements.webglPageReserve.value = String(maxReserve);
+            }
+            this.elements.webglPageReserveValue.textContent = String(this.elements.webglPageReserve.value);
         }
     }
 }