checkpoint

WebHostLib/static/assets/options/player.js

@@ -37,13 +37,13 @@ window.addEventListener('load', async () => {
             setNamedRange(option, range.value);
             slider.value = range.value;
 
-            range.addEventListener('change', (event) => {
+            range.addEventListener('input', (event) => {
                 range.setCustomValidity('');
                 slider.value = event.target.value;
                 setNamedRange(option, range.value);
                 validateNamedRange(option);
             });
-            slider.addEventListener('change', (event) => {
+            slider.addEventListener('input', (event) => {
                 range.setCustomValidity('');
                 range.value = event.target.value;
                 setNamedRange(option, range.value);
@@ -59,11 +59,11 @@ window.addEventListener('load', async () => {
         } else {
             slider.value = range.value;
 
-            range.addEventListener('change', (event) => {
+            range.addEventListener('input', (event) => {
                 range.setCustomValidity('');
                 slider.value = event.target.value;
             });
-            slider.addEventListener('change', (event) => {
+            slider.addEventListener('input', (event) => {
                 range.setCustomValidity('');
                 range.value = event.target.value;
             });
@@ -213,12 +213,12 @@ const fetchOptions = async () => {
     presets = data.presets;
     console.log(data);
 
-    for (const optionListElement of document.querySelectorAll(".option-list")) {
-        const option = optionListElement.id.substring(0, optionListElement.id.indexOf("-container"));
+    for (const element of document.querySelectorAll("[data-keys-type=list], [data-keys-type=dict]")) {
+        const option = element.id.substring(0, element.id.indexOf("-container"));
+        const type = element.getAttribute("data-keys-type");
         options[option].loaded = 0;
 
-        loadItems(option, optionListElement, 50);
-        createListObserver(optionListElement);
+        createListObserver(element, type);
     }
 
     // const presetSelect = document.getElementById('game-options-preset');

WebHostLib/static/assets/options/shared.js

@@ -1,32 +1,38 @@
 /**
- * Creates an event handler for scroll events to lazy load list elements and save them to memory.
+ * Creates an event handler for scroll events to lazy load elements and save them to memory.
  * @param element {HTMLElement}
+ * @param type {'list' | 'dict'}
  */
-function createListObserver(element) {
+function createListObserver(element, type) {
+    if (type !== 'list' && type !== 'dict') {
+        console.error(`Invalid container type: ${type}`);
+        return;
+    }
+
     const option = element.id.substring(0, element.id.indexOf("-container"));
     const observer = new IntersectionObserver((entries) => {
-        console.log("Called observer", option)
         if (entries[0].intersectionRatio <= 0) {
             return;
         }
 
         observer.unobserve(document.getElementById(`${option}-eol`));
-        loadItems(option, element, 50);
+        if (type === 'list') {
+            loadListItems(option, element, 50);
+        } else {
+            loadDictItems(option, element, 50);
+        }
 
         const eol = document.getElementById(`${option}-eol`);
         if (eol) {
             observer.observe(eol);
         }
     });
 
-    const eol = document.getElementById(`${option}-eol`);
-    if (eol) {
-        observer.observe(eol);
-    }
+    element.innerHTML = `<div id="${option}-eol">&nbsp;</div>`;
+    observer.observe(document.getElementById(`${option}-eol`));
 }
 
-function loadItems(option, element, number) {
-    console.log(option, number, element);
+function loadListItems(option, element, number) {
     /** @type {number} */
     const loaded = options[option]["loaded"];
     /** @type {number} */
@@ -48,8 +54,6 @@ function loadItems(option, element, number) {
     const keys = options[option]["valid_keys"].slice(loaded, max);
 
     options[option]["loaded"] = max;
-    // TODO: If you see this in version control for the PR, reject it and dunk on me to do this properly. I only used
-    // this for testing and I better not have left it in. -Phar
     let html = "";
     for (const value of keys) {
         html += `
@@ -66,10 +70,55 @@ function loadItems(option, element, number) {
         `;
     }
 
+    // End of list target. Don't create if we are at the end of our list.
     if (options[option]["loaded"] < length) {
-        html += `<div id="${option}-eol">Loading...</div>`;
+        html += `<div id="${option}-eol">&nbsp;</div>`;
     }
 
     element.innerHTML += html;
-    console.log(`Loaded: ${options[option]["loaded"]}`, `Children: ${element.children.length}`);
+}
+
+function loadDictItems(option, container, number) {
+    /** @type {number} */
+    const loaded = options[option]["loaded"];
+    /** @type {number} */
+    const length = options[option]["valid_keys"].length;
+
+    // All items are already loaded, return.
+    if (loaded >= length) {
+        return;
+    }
+
+    // Remove the "load-more" element.
+    if (container.children.length !== 0) {
+        container.children[container.children.length - 1].remove();
+    }
+
+    const max = Math.min(loaded + 50, length);
+
+    /** @type {string[]} */
+    const keys = options[option]["valid_keys"].slice(loaded, max);
+
+    options[option]["loaded"] = max;
+    let html = "";
+    for (const value of keys) {
+        html += `
+            <div class="option-entry">                
+                <label for="${option}-${value}-qty">${value}</label>
+                <input
+                    type="number"
+                    id="${option}-${value}-qty"
+                    name="${option}||${value}||qty"
+                    placeholder="0"
+                >
+            </div>
+        `;
+    }
+
+    // End of list target. Don't create if we are at the end of our list.
+    if (options[option]["loaded"] < length) {
+        html += `<div id="${option}-eol">&nbsp;</div>`;
+    }
+
+    container.innerHTML += html;
 }

WebHostLib/static/styles/globalStyles.css

@@ -111,4 +111,5 @@ h5, h6{
 
 .interactive{
     color: #ffef00;
+    cursor: help;
 }