From d2d7dc8735eeca379c5b5d450de30e4b96e3967e Mon Sep 17 00:00:00 2001
From: Zach Parks <zach@alliware.com>
Date: Tue, 25 Jun 2024 02:16:19 -0500
Subject: [PATCH] checkpoint

---
 WebHostLib/static/assets/options/player.js    |  16 +-
 WebHostLib/static/assets/options/shared.js    |  77 ++-
 WebHostLib/static/styles/globalStyles.css     |   1 +
 WebHostLib/static/styles/options/player.css   | 399 ++++++--------
 .../static/styles/options/player.css.map      |   2 +-
 WebHostLib/static/styles/options/player.scss  | 516 +++++++++++++++---
 WebHostLib/static/styles/options/shared.scss  |  27 +-
 WebHostLib/static/styles/options/weighted.css |  26 +-
 .../static/styles/options/weighted.css.map    |   2 +-
 WebHostLib/templates/pageWrapper.html         |   2 +-
 .../templates/playerOptions/macros.html       | 165 +-----
 .../playerOptions/playerOptions.html          |  52 +-
 12 files changed, 749 insertions(+), 536 deletions(-)

diff --git a/WebHostLib/static/assets/options/player.js b/WebHostLib/static/assets/options/player.js
index 1e1d539c6db1..7b5e7c8a43c2 100644
--- a/WebHostLib/static/assets/options/player.js
+++ b/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');
diff --git a/WebHostLib/static/assets/options/shared.js b/WebHostLib/static/assets/options/shared.js
index 18d8790f8e6a..e2af39eeb029 100644
--- a/WebHostLib/static/assets/options/shared.js
+++ b/WebHostLib/static/assets/options/shared.js
@@ -1,17 +1,26 @@
 /**
- * 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) {
@@ -19,14 +28,11 @@ function createListObserver(element) {
         }
     });
 
-    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;
 }
diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css
index 1a0144830e7c..c30b31fe1cb6 100644
--- a/WebHostLib/static/styles/globalStyles.css
+++ b/WebHostLib/static/styles/globalStyles.css
@@ -111,4 +111,5 @@ h5, h6{
 
 .interactive{
     color: #ffef00;
+    cursor: help;
 }
diff --git a/WebHostLib/static/styles/options/player.css b/WebHostLib/static/styles/options/player.css
index 93383984e0a5..2cba3bf00dea 100644
--- a/WebHostLib/static/styles/options/player.css
+++ b/WebHostLib/static/styles/options/player.css
@@ -1,4 +1,11 @@
 @import "../markdown.css";
+html {
+  background-image: url("../../static/backgrounds/grass.png");
+  background-repeat: repeat;
+  background-size: 650px 650px;
+  overflow-x: hidden;
+}
+
 .nobr {
   white-space: nowrap;
 }
@@ -6,127 +13,163 @@
   white-space: normal;
 }
 
-#player-options .alert, #weighted-options .alert {
-  width: calc(100% - 1rem);
-  border-radius: 4px;
-  background-color: #f3f309;
-  color: #000000;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  text-align: center;
+.interactive {
+  position: absolute;
 }
-#player-options .alert:empty, #weighted-options .alert:empty {
-  display: none;
+.interactive .tooltip-container {
+  z-index: 99999;
 }
-#player-options #options-button-row, #weighted-options #options-button-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  margin-top: 1rem;
-  gap: 1rem;
+
+#player-options {
+  max-width: 1024px;
+  border-radius: 0;
+  box-sizing: border-box;
+  word-break: break-word;
+  color: #eeffeb;
+  font-size: 1.25rem;
 }
-#player-options #meta-options, #weighted-options #meta-options {
-  margin-bottom: 1rem;
-  column-count: 2;
-  column-gap: 1rem;
+#player-options * {
+  box-sizing: border-box;
 }
-#player-options #options-header, #weighted-options #options-header {
+#player-options #options-header {
   margin-bottom: 1.5rem;
 }
-#player-options #options-header p, #player-options #options-header ul, #weighted-options #options-header p, #weighted-options #options-header ul {
-  font-size: 1.25rem;
-  text-align: justify;
-}
-#player-options #options-header h1, #weighted-options #options-header h1 {
-  font-size: 3rem;
+#player-options #options-header h1 {
+  font-size: 3.75rem;
+  line-height: 3rem;
   font-weight: normal;
-  width: 100%;
-  text-shadow: 1px 1px 4px #000000;
-  margin-bottom: 0;
-  padding-bottom: 0;
+  text-shadow: 1px 1px 4px black;
+  margin: 0;
 }
-#player-options #options-header h2, #weighted-options #options-header h2 {
+#player-options #options-header h2 {
   font-family: LondrinaSolid-Regular, sans-serif;
   text-transform: uppercase;
-  font-size: 1.4rem;
-  margin-top: -8px;
-  margin-bottom: 0.5rem;
+  font-size: 2rem;
+  margin: 0;
 }
-#player-options .group-container, #weighted-options .group-container {
-  padding: 0;
+#player-options #options-header p, #player-options #options-header ul {
+  margin: 1rem 0;
+  text-align: justify;
+}
+#player-options #options-meta, #player-options .options {
+  column-count: 1;
+  column-gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+#player-options .group-container {
   margin: 0;
+  padding: 0;
 }
-#player-options .group-container summary, #weighted-options .group-container summary {
+#player-options .group-container summary {
+  font-size: 3rem;
   cursor: pointer;
-  font-size: 2rem;
   color: var(--accent-color);
   text-shadow: 1px 1px 2px #000000;
-  padding-bottom: 0.5rem;
+  padding-bottom: 1rem;
 }
-#player-options .group-container h3, #weighted-options .group-container h3 {
-  color: var(--accent-color);
-  font-size: 2rem;
+#player-options .group-container h3 {
   display: inline;
+  margin: 0;
+  width: 100%;
   font-family: LondrinaSolid-Light, sans-serif;
-  text-transform: none;
   font-weight: normal;
-  width: 100%;
-  user-select: none;
-  margin: 0;
-}
-#player-options .group-container .interactive, #weighted-options .group-container .interactive {
-  cursor: help;
+  font-size: 3rem;
+  text-transform: capitalize;
+  color: var(--accent-color);
 }
-#player-options .option-container, #weighted-options .option-container {
-  margin-bottom: 0.5rem;
+#player-options .option-container {
   display: grid;
-  grid-template-columns: 4fr minmax(200px, 5fr);
+  grid-template-columns: 1fr;
   grid-gap: 0.5rem;
   grid-auto-rows: min-content;
-  align-items: start;
-  min-width: 480px;
   width: 100%;
+  break-inside: avoid;
+  backface-visibility: hidden;
+  margin-bottom: 0.5rem;
 }
-#player-options .option-container input, #player-options .option-container select, #weighted-options .option-container input, #weighted-options .option-container select {
-  box-sizing: border-box;
-  border: 1px solid #000000;
-  background-color: #ffffff;
-  padding: 3px;
-  border-radius: 3px;
-  height: 24px;
+#player-options .option-container label {
+  min-height: 32px;
+  line-height: 28px;
+  margin-right: 24px;
 }
-#player-options .option-container input[disabled], #player-options .option-container select[disabled], #weighted-options .option-container input[disabled], #weighted-options .option-container select[disabled] {
-  background-color: rgb(211, 211, 211);
+#player-options .option-container .option-subcontainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
-#player-options .option-container input:not([type]), #weighted-options .option-container input:not([type]) {
-  min-width: 150px;
+#player-options .option-container .option-inputs {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
 }
-#player-options .option-container input:not([type]):focus, #weighted-options .option-container input:not([type]):focus {
-  border: 1px solid #ffffff;
+#player-options .option-container .option-inputs input, #player-options .option-container .option-inputs select {
+  border: 1px solid var(--accent-color-muted);
+  border-radius: 3px;
+  background-color: white;
+  height: 32px;
+  padding: 3px 8px;
+  font-size: 1rem;
+  flex-grow: 1;
+  min-width: 0;
+  width: 0;
 }
-#player-options .option-container select, #weighted-options .option-container select {
-  min-width: 150px;
+#player-options .option-container .option-inputs select {
   text-overflow: ellipsis;
 }
-#player-options .option-container label, #weighted-options .option-container label {
-  font-size: 1rem;
-  min-height: 24px;
-  line-height: 24px;
+#player-options .option-container .option-inputs input[disabled], #player-options .option-container .option-inputs select[disabled] {
+  background-color: rgb(211, 211, 211);
 }
-#player-options .option-container:nth-child(2), #weighted-options .option-container:nth-child(2) {
-  flex-grow: 1;
+#player-options .option-container .option-inputs input[type=number], #player-options .option-container .option-inputs input[type=text] {
+  flex-grow: 2;
+}
+#player-options .option-container .option-inputs input[type=range] {
+  flex-grow: 5;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+#player-options .option-container .option-inputs .randomize-button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  font-size: 14px;
+  box-sizing: border-box;
+  border: 1px solid var(--accent-color-muted);
+  border-radius: 3px;
+  background-color: #d3d3d3;
+  user-select: none;
+}
+#player-options .option-container .option-inputs .randomize-button:hover {
+  background-color: #c0c0c0;
+  cursor: pointer;
 }
-#player-options .range-container, #weighted-options .range-container {
+#player-options .option-container .option-inputs .randomize-button label {
   display: flex;
+  justify-content: center;
   align-items: center;
-  flex-direction: row;
-  gap: 0.5rem;
+  line-height: 22px;
+  width: 100%;
+  height: 100%;
 }
-#player-options .range-container input[type=range], #weighted-options .range-container input[type=range] {
-  flex-grow: 1;
-  width: 36px;
+#player-options .option-container .option-inputs .randomize-button label:hover {
+  cursor: pointer;
+}
+#player-options .option-container .option-inputs .randomize-button input[type=checkbox] {
+  display: none;
+}
+#player-options .option-container .option-inputs .randomize-button:has(input[type=checkbox]:checked) {
+  background-color: #ffef00; /* Same as .interactive in globalStyles.css */
+}
+#player-options .option-container .option-inputs .randomize-button:has(input[type=checkbox]:checked):hover {
+  background-color: #eedd27;
+}
+#player-options .option-container .option-inputs .randomize-button[data-tooltip]::after {
+  left: unset;
+  right: 0;
 }
-#player-options .option-list, #weighted-options .option-list {
+#player-options .option-container .option-list {
   display: flex;
   flex-direction: column;
   background-color: rgba(0, 0, 0, 0.25);
@@ -139,196 +182,98 @@
   overflow-y: auto;
   resize: vertical;
 }
-#player-options .option-list .loading, #weighted-options .option-list .loading {
+#player-options .option-container .option-list .loading {
   padding: 1rem;
   font-size: 1rem;
   text-align: center;
   align-self: center;
 }
-#player-options .option-list .option-divider, #weighted-options .option-list .option-divider {
+#player-options .option-container .option-list .option-divider {
   width: 100%;
   height: 2px;
   background-color: var(--accent-color-muted);
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
-#player-options .option-list .option-entry, #weighted-options .option-list .option-entry {
+#player-options .option-container .option-list .option-entry {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   user-select: none;
   padding: 0.125rem 0.25rem;
 }
-#player-options .option-list .option-entry:hover, #weighted-options .option-list .option-entry:hover {
+#player-options .option-container .option-list .option-entry:hover {
   background-color: var(--accent-color-muted);
 }
-#player-options .option-list .option-entry input[type=checkbox], #weighted-options .option-list .option-entry input[type=checkbox] {
+#player-options .option-container .option-list .option-entry input[type=checkbox] {
   margin-right: 0.25rem;
   height: 20px;
 }
-#player-options .option-list .option-entry input[type=number], #weighted-options .option-list .option-entry input[type=number] {
+#player-options .option-container .option-list .option-entry input[type=number] {
   max-width: 2rem;
   margin-left: 0.125rem;
   text-align: center;
   /* Hide arrows on input[type=number] fields */
   -moz-appearance: textfield;
 }
-#player-options .option-list .option-entry input[type=number]::-webkit-outer-spin-button, #player-options .option-list .option-entry input[type=number]::-webkit-inner-spin-button, #weighted-options .option-list .option-entry input[type=number]::-webkit-outer-spin-button, #weighted-options .option-list .option-entry input[type=number]::-webkit-inner-spin-button {
+#player-options .option-container .option-list .option-entry input[type=number]::-webkit-outer-spin-button, #player-options .option-container .option-list .option-entry input[type=number]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-#player-options .option-list .option-entry label, #weighted-options .option-list .option-entry label {
+#player-options .option-container .option-list .option-entry label {
   flex-grow: 1;
   margin-left: 0.25rem;
   min-height: 20px;
 }
+#player-options #options-button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1rem;
+  gap: 1rem;
+}
 
-@media all and (max-width: 1024px) {
-  #player-options #meta-options, #weighted-options #meta-options {
-    column-count: 1;
+@media all and (min-width: 600px) {
+  #player-options #options-meta, #player-options .options {
+    grid-gap: 0.5rem 1rem;
   }
-  #player-options .option-container, #weighted-options .option-container {
-    grid-template-columns: 4fr 5fr;
+  #player-options .option-container {
+    grid-template-columns: 4fr minmax(200px, 5fr);
   }
-  #player-options .option-container input, #player-options .option-container select, #weighted-options .option-container input, #weighted-options .option-container select {
-    height: 32px;
-    padding: 3px 6px;
-  }
-  #player-options .option-container label, #weighted-options .option-container label {
-    font-size: 1.25rem;
+}
+@media all and (min-width: 1024px) {
+  #player-options {
+    border-radius: 8px;
+    font-size: 14px;
   }
-  #player-options .option-container .randomize-button, #weighted-options .option-container .randomize-button {
-    width: 32px;
-    height: 32px;
+  #player-options #options-header h1 {
+    font-size: 3rem;
+    line-height: 2.25rem;
   }
-  #player-options .option-list, #weighted-options .option-list {
-    min-height: 18rem;
-    height: 18rem;
+  #player-options #options-header h2 {
+    font-size: 1.5rem;
   }
-  #player-options .option-list .option-entry input[type=checkbox], #weighted-options .option-list .option-entry input[type=checkbox] {
-    height: 30px;
+  #player-options #options-header p, #player-options #options-header ul {
+    font-size: 16px;
   }
-  #player-options .option-list .option-entry label, #weighted-options .option-list .option-entry label {
-    flex-grow: 1;
-    margin-left: 0.25rem;
-    min-height: 30px;
+  #player-options #options-meta, #player-options .options {
+    column-count: 2;
   }
-}
-html {
-  background-image: url("../../static/backgrounds/grass.png");
-  background-repeat: repeat;
-  background-size: 650px 650px;
-  overflow-x: hidden;
-}
-
-#player-options {
-  box-sizing: border-box;
-  max-width: 1024px;
-  margin-left: auto;
-  margin-right: auto;
-  background-color: rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  padding: 1rem;
-  color: #eeffeb;
-  word-break: break-word;
-}
-#player-options .game-options {
-  margin-bottom: 1rem;
-  column-count: 2;
-  column-gap: 1rem;
-}
-#player-options .option-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-#player-options .option-subcontainer {
-  display: flex;
-  flex-direction: row;
-}
-#player-options .option-subcontainer > *:not(:last-child) {
-  margin-right: 0.5rem;
-}
-#player-options .option-subcontainer select {
-  flex-grow: 1;
-  width: 0;
-}
-#player-options .option-subcontainer select:disabled {
-  background-color: lightgray;
-}
-#player-options .option-subcontainer input[type=number], #player-options .option-subcontainer input[type=text] {
-  flex-grow: 1;
-  width: 80px;
-  min-width: 80px;
-  box-sizing: border-box;
-}
-#player-options .option-subcontainer input[type=range] {
-  flex-grow: 1;
-  box-sizing: border-box;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-#player-options .randomize-button {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 24px;
-  width: 28px;
-  font-size: 14px;
-  box-sizing: border-box;
-  border: 1px solid black;
-  border-radius: 3px;
-  background-color: #d3d3d3;
-  user-select: none;
-}
-#player-options .randomize-button:hover {
-  background-color: #c0c0c0;
-  cursor: pointer;
-}
-#player-options .randomize-button label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 22px;
-  width: 100%;
-  height: 100%;
-}
-#player-options .randomize-button label:hover {
-  cursor: pointer;
-}
-#player-options .randomize-button input[type=checkbox] {
-  display: none;
-}
-#player-options .randomize-button:has(input[type=checkbox]:checked) {
-  background-color: #ffef00; /* Same as .interactive in globalStyles.css */
-}
-#player-options .randomize-button:has(input[type=checkbox]:checked):hover {
-  background-color: #eedd27;
-}
-#player-options .randomize-button[data-tooltip]::after {
-  left: unset;
-  right: 0;
-}
-#player-options label {
-  display: block;
-  margin-right: 4px;
-  cursor: default;
-  word-break: break-word;
-}
-
-@media all and (max-width: 1024px) {
-  #player-options {
-    border-radius: 0;
-    padding: 2rem;
+  #player-options .group-container summary, #player-options .group-container h3 {
+    font-size: 2rem;
   }
-  #player-options .game-options {
-    column-count: 1;
+  #player-options .option-container label {
+    min-height: 24px;
+    line-height: 20px;
   }
-  #player-options .game-options input, #player-options .game-options select {
-    height: 32px;
+  #player-options .option-container .option-inputs input, #player-options .option-container .option-inputs select {
+    height: 24px;
+    padding: 3px 4px;
+    font-size: 12px;
   }
-  #player-options .option-list .option-entry label {
-    line-height: 34px;
+  #player-options .option-container .option-inputs .randomize-button {
+    height: 24px;
+    width: 24px;
   }
 }
 
diff --git a/WebHostLib/static/styles/options/player.css.map b/WebHostLib/static/styles/options/player.css.map
index df9908aad170..56b469aa0fd2 100644
--- a/WebHostLib/static/styles/options/player.css.map
+++ b/WebHostLib/static/styles/options/player.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["player.scss","shared.scss"],"names":[],"mappings":"AAAQ;ACAR;EACI;;AAEA;EACI;;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;AAEA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;AAMhB;EAEQ;IACI;;EAGJ;IACI;;EAEA;IACI;IACA;;EAGJ;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;;EAGI;IACI;;EAGJ;IACI;IACA;IACA;;;AD5PpB;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;;AAIR;EACI;IACI;IACA;;EAEA;IACI;;EAEA;IACI;;EAIR;IACI","file":"player.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["player.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAIR;EAII;EACA;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;AAEA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA;EACA;;;AAKR;EAEQ;IACI;;EAGJ;IACI;;;AAMZ;EACI;IACI;IACA;;EAGI;IACI;IACA;;EAGJ;IACI;;EAGJ;IACI;;EAIR;IAGI;;EAIA;IACI;;EAKJ;IACI;IACA;;EAIA;IACI;IACA;IACA;;EAGJ;IACI;IACA","file":"player.css"}
\ No newline at end of file
diff --git a/WebHostLib/static/styles/options/player.scss b/WebHostLib/static/styles/options/player.scss
index ac90ea84c49c..6e5dc146007d 100644
--- a/WebHostLib/static/styles/options/player.scss
+++ b/WebHostLib/static/styles/options/player.scss
@@ -1,5 +1,4 @@
 @import "../markdown.css";
-@import "./shared.scss";
 
 html {
     background-image: url("../../static/backgrounds/grass.png");
@@ -8,133 +7,476 @@ html {
     overflow-x: hidden;
 }
 
-#player-options {
-    box-sizing: border-box;
-    max-width: 1024px;
-    margin-left: auto;
-    margin-right: auto;
-    background-color: rgba(0, 0, 0, 0.15);
-    border-radius: 8px;
-    padding: 1rem;
-    color: #eeffeb;
-    word-break: break-word;
+.nobr {
+    white-space: nowrap;
 
-    .game-options {
-        margin-bottom: 1rem;
-        column-count: 2;
-        column-gap: 1rem;
+    .tooltip {
+        white-space: normal;
     }
+}
 
-    .option-group {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
+.interactive {
+    position: absolute;
+
+    .tooltip-container {
+        z-index: 99999;
     }
+}
 
-    .option-subcontainer {
-        display: flex;
-        flex-direction: row;
+#player-options {
+    max-width: 1024px;
+    border-radius: 0;
+    box-sizing: border-box;
+    word-break: break-word;
+    color: #eeffeb;
+    font-size: 1.25rem;
 
-        & > *:not(:last-child) {
-            margin-right: 0.5rem;
-        }
+    * {
+        box-sizing: border-box;
+    }
 
-        select {
-            flex-grow: 1;
-            width: 0;
+    #options-header {
+        margin-bottom: 1.5rem;
 
-            &:disabled {
-                background-color: lightgray;
-            }
+        h1 {
+            font-size: 3.75rem;
+            line-height: 3rem;
+            font-weight: normal;
+            text-shadow: 1px 1px 4px black;
+            margin: 0;
         }
 
-        input[type=number], input[type=text] {
-            flex-grow: 1;
-            width: 80px;
-            min-width: 80px;
-            box-sizing: border-box;
+        h2 {
+            font-family: LondrinaSolid-Regular, sans-serif;
+            text-transform: uppercase;
+            font-size: 2rem;
+            margin: 0;
         }
 
-        input[type=range] {
-            flex-grow: 1;
-            box-sizing: border-box;
-            margin-top: 0;
-            margin-bottom: 0;
+        p, ul {
+            margin: 1rem 0;
+            text-align: justify;
         }
     }
 
-    .randomize-button {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        height: 24px;
-        width: 28px;
-        font-size: 14px;
-        box-sizing: border-box;
-        border: 1px solid black;
-        border-radius: 3px;
-        background-color: #d3d3d3;
-        user-select: none;
+    #options-meta, .options {
+        //display: grid;
+        //grid-template-columns: 1fr;
+        //grid-gap: 1.5rem;
+        column-count: 1;
+        column-gap: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
 
-        &:hover {
-            background-color: #c0c0c0;
+    .group-container {
+        margin: 0;
+        padding: 0;
+
+        summary {
+            font-size: 3rem;
             cursor: pointer;
+            color: var(--accent-color);
+            text-shadow: 1px 1px 2px #000000;
+            padding-bottom: 1rem;
         }
 
-        label {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            line-height: 22px;
+        h3 {
+            display: inline;
+            margin: 0;
             width: 100%;
-            height: 100%;
+            font-family: LondrinaSolid-Light, sans-serif;
+            font-weight: normal;
+            font-size: 3rem;
+            text-transform: capitalize;
+            color: var(--accent-color);
+        }
+    }
 
-            &:hover {
-                cursor: pointer;
-            }
+    .option-container {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-gap: 0.5rem;
+        grid-auto-rows: min-content;
+        width: 100%;
+        break-inside: avoid;
+        backface-visibility: hidden;
+        margin-bottom: 0.5rem;
+
+        label {
+            min-height: 32px;
+            line-height: 28px;
+            margin-right: 24px;
         }
 
-        input[type=checkbox] {
-            display: none;
+        .option-subcontainer {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
         }
 
-        &:has(input[type=checkbox]:checked) {
-            background-color: #ffef00; /* Same as .interactive in globalStyles.css */
+        .option-inputs {
+            display: flex;
+            flex-direction: row;
+            gap: 0.5rem;
 
-            &:hover {
-                background-color: #eedd27;
+            input, select {
+                border: 1px solid var(--accent-color-muted);
+                border-radius: 3px;
+                background-color: white;
+                height: 32px;
+                padding: 3px 8px;
+                font-size: 1rem;
+                flex-grow: 1;
+                min-width: 0;
+                width: 0;
+            }
+
+            select {
+                text-overflow: ellipsis;
+            }
+
+            input[disabled], select[disabled] {
+                background-color: rgb(211, 211, 211);
+            }
+
+            input[type=number], input[type=text] {
+                flex-grow: 2;
+            }
+
+            input[type=range] {
+                flex-grow: 5;
+                margin: 0;
+                padding: 0;
+                border: 0;
+            }
+
+            .randomize-button {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                height: 32px;
+                width: 32px;
+                font-size: 14px;
+                box-sizing: border-box;
+                border: 1px solid var(--accent-color-muted);
+                border-radius: 3px;
+                background-color: #d3d3d3;
+                user-select: none;
+
+                &:hover {
+                    background-color: #c0c0c0;
+                    cursor: pointer;
+                }
+
+                label {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    line-height: 22px;
+                    width: 100%;
+                    height: 100%;
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+
+                input[type=checkbox] {
+                    display: none;
+                }
+
+                &:has(input[type=checkbox]:checked) {
+                    background-color: #ffef00; /* Same as .interactive in globalStyles.css */
+
+                    &:hover {
+                        background-color: #eedd27;
+                    }
+                }
+
+                &[data-tooltip]::after {
+                    left: unset;
+                    right: 0;
+                }
             }
         }
 
-        &[data-tooltip]::after {
-            left: unset;
-            right: 0;
+        .option-list {
+            display: flex;
+            flex-direction: column;
+            background-color: rgba(0, 0, 0, 0.25);
+            border: 1px solid var(--accent-color-muted);
+            border-radius: 3px;
+            color: #ffffff;
+            min-height: 10rem;
+            height: 10rem;
+            min-width: 14.5rem;
+            overflow-y: auto;
+            resize: vertical;
+
+            .loading {
+                padding: 1rem;
+                font-size: 1rem;
+                text-align: center;
+                align-self: center;
+            }
+
+            .option-divider {
+                width: 100%;
+                height: 2px;
+                background-color: var(--accent-color-muted);
+                margin-top: 0.125rem;
+                margin-bottom: 0.125rem;
+            }
+
+            .option-entry {
+                display: flex;
+                flex-direction: row;
+                align-items: flex-start;
+                user-select: none;
+                padding: 0.125rem 0.25rem;
+
+                &:hover {
+                    background-color: var(--accent-color-muted);
+                }
+
+                input[type=checkbox] {
+                    margin-right: 0.25rem;
+                    height: 20px;
+                }
+
+                input[type=number] {
+                    max-width: 2rem;
+                    margin-left: 0.125rem;
+                    text-align: center;
+
+                    /* Hide arrows on input[type=number] fields */
+                    -moz-appearance: textfield;
+
+                    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+                        -webkit-appearance: none;
+                        margin: 0;
+                    }
+                }
+
+                label {
+                    flex-grow: 1;
+                    margin-left: 0.25rem;
+                    min-height: 20px;
+                }
+            }
         }
     }
 
-    label {
-        display: block;
-        margin-right: 4px;
-        cursor: default;
-        word-break: break-word;
+    #options-button-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 1rem;
+        gap: 1rem;
+    }
+}
+
+// Medium
+@media all and (min-width: 600px) {
+    #player-options {
+        #options-meta, .options {
+            grid-gap: 0.5rem 1rem;
+        }
+
+        .option-container {
+            grid-template-columns: 4fr minmax(200px, 5fr);
+        }
     }
 }
 
-@media all and (max-width: 1024px) {
+// Desktop
+@media all and (min-width: 1024px) {
     #player-options {
-        border-radius: 0;
-        padding: 2rem;
+        border-radius: 8px;
+        font-size: 14px;
 
-        .game-options {
-            column-count: 1;
+        #options-header {
+            h1 {
+                font-size: 3rem;
+                line-height: 2.25rem;
+            }
 
-            input, select {
-                height: 32px;
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            p, ul {
+                font-size: 16px;
             }
         }
 
-        .option-list .option-entry label {
-            line-height: 34px;
+        #options-meta, .options {
+            //grid-template-columns: 1fr 1fr;
+            //grid-gap: 0.5rem 1.5rem;
+            column-count: 2;
+        }
+
+        .group-container {
+            summary, h3 {
+                font-size: 2rem;
+            }
+        }
+
+        .option-container {
+            label {
+                min-height: 24px;
+                line-height: 20px;
+            }
+
+            .option-inputs {
+                input, select {
+                    height: 24px;
+                    padding: 3px 4px;
+                    font-size: 12px;
+                }
+
+                .randomize-button {
+                    height: 24px;
+                    width: 24px;
+                }
+            }
         }
     }
 }
+
+//#player-options {
+//    box-sizing: border-box;
+//    max-width: 1024px;
+//    margin-left: auto;
+//    margin-right: auto;
+//    background-color: rgba(0, 0, 0, 0.15);
+//    border-radius: 8px;
+//    padding: 1rem;
+//    color: #eeffeb;
+//    word-break: break-word;
+//
+//    .game-options {
+//        display: grid;
+//        grid-template-columns: 1fr 1fr;
+//        gap: 0.5rem 1rem;
+//        margin-bottom: 1rem;
+//    }
+//
+//    .option-group {
+//        display: flex;
+//        flex-direction: column;
+//        gap: 0.5rem;
+//    }
+//
+//    .option-subcontainer {
+//        display: flex;
+//        flex-direction: row;
+//        break-inside: avoid;
+//
+//        & > *:not(:last-child) {
+//            margin-right: 0.5rem;
+//        }
+//
+//        select {
+//            flex-grow: 1;
+//            width: 0;
+//
+//            &:disabled {
+//                background-color: lightgray;
+//            }
+//        }
+//
+//        input[type=number], input[type=text] {
+//            flex-grow: 2;
+//            width: 0;
+//            min-width: 0;
+//            box-sizing: border-box;
+//        }
+//
+//        input[type=range] {
+//            flex-grow: 5;
+//            width: 0;
+//            box-sizing: border-box;
+//            margin-top: 0;
+//            margin-bottom: 0;
+//            padding-left: 0;
+//            padding-right: 0;
+//            border: 0;
+//        }
+//    }
+//
+//    .randomize-button {
+//        display: flex;
+//        flex-direction: column;
+//        justify-content: center;
+//        height: 24px;
+//        width: 28px;
+//        font-size: 14px;
+//        box-sizing: border-box;
+//        border: 1px solid black;
+//        border-radius: 3px;
+//        background-color: #d3d3d3;
+//        user-select: none;
+//
+//        &:hover {
+//            background-color: #c0c0c0;
+//            cursor: pointer;
+//        }
+//
+//        label {
+//            display: flex;
+//            justify-content: center;
+//            align-items: center;
+//            line-height: 22px;
+//            width: 100%;
+//            height: 100%;
+//
+//            &:hover {
+//                cursor: pointer;
+//            }
+//        }
+//
+//        input[type=checkbox] {
+//            display: none;
+//        }
+//
+//        &:has(input[type=checkbox]:checked) {
+//            background-color: #ffef00; /* Same as .interactive in globalStyles.css */
+//
+//            &:hover {
+//                background-color: #eedd27;
+//            }
+//        }
+//
+//        &[data-tooltip]::after {
+//            left: unset;
+//            right: 0;
+//        }
+//    }
+//
+//    label {
+//        display: block;
+//        margin-right: 4px;
+//        cursor: default;
+//        word-break: break-word;
+//    }
+//}
+
+//@media all and (max-width: 1024px) {
+//    #player-options {
+//        border-radius: 0;
+//        padding: 2rem;
+//
+//        .game-options {
+//            column-count: 1;
+//
+//            input, select {
+//                height: 32px;
+//            }
+//        }
+//
+//        .option-list .option-entry label {
+//            line-height: 34px;
+//        }
+//    }
+//}
diff --git a/WebHostLib/static/styles/options/shared.scss b/WebHostLib/static/styles/options/shared.scss
index a908e1c3d15d..05521d48fe8f 100644
--- a/WebHostLib/static/styles/options/shared.scss
+++ b/WebHostLib/static/styles/options/shared.scss
@@ -1,10 +1,3 @@
-.nobr {
-    white-space: nowrap;
-
-    .tooltip {
-        white-space: normal;
-    }
-}
 
 
 #player-options, #weighted-options {
@@ -40,17 +33,17 @@
         margin-bottom: 1.5rem;
 
         p, ul {
-            font-size: 1.25rem;
-            text-align: justify;
+            font-size: 16px;
         }
 
         h1 {
             font-size: 3rem;
+            line-height: 2.5rem;
             font-weight: normal;
             width: 100%;
             text-shadow: 1px 1px 4px #000000;
             margin-bottom: 0;
-            padding-bottom: 0;
+            padding-bottom: 0.5rem;
         }
 
         h2 {
@@ -85,14 +78,9 @@
             user-select: none;
             margin: 0;
         }
-
-        .interactive {
-            cursor: help;
-        }
     }
 
     .option-container {
-        margin-bottom: 0.5rem;
         display: grid;
         grid-template-columns: 4fr minmax(200px, 5fr);
         grid-gap: 0.5rem;
@@ -128,7 +116,7 @@
         }
 
         label {
-            font-size: 1rem;
+            font-size: 16px;
             min-height: 24px;
             line-height: 24px;
         }
@@ -220,7 +208,10 @@
 @media all and (max-width: 1024px) {
     #player-options, #weighted-options {
         #meta-options {
-            column-count: 1;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0.5rem 1rem;
+            margin-bottom: 1rem;
         }
 
         .option-container {
@@ -232,7 +223,7 @@
             }
 
             label {
-                font-size: 1.25rem;
+                font-size: 20px;
             }
 
             .randomize-button {
diff --git a/WebHostLib/static/styles/options/weighted.css b/WebHostLib/static/styles/options/weighted.css
index 4b376cd6e95f..3908230e26a7 100644
--- a/WebHostLib/static/styles/options/weighted.css
+++ b/WebHostLib/static/styles/options/weighted.css
@@ -1,11 +1,4 @@
 @import "../markdown.css";
-.nobr {
-  white-space: nowrap;
-}
-.nobr .tooltip {
-  white-space: normal;
-}
-
 #player-options .alert, #weighted-options .alert {
   width: calc(100% - 1rem);
   border-radius: 4px;
@@ -34,16 +27,16 @@
   margin-bottom: 1.5rem;
 }
 #player-options #options-header p, #player-options #options-header ul, #weighted-options #options-header p, #weighted-options #options-header ul {
-  font-size: 1.25rem;
-  text-align: justify;
+  font-size: 16px;
 }
 #player-options #options-header h1, #weighted-options #options-header h1 {
   font-size: 3rem;
+  line-height: 2.5rem;
   font-weight: normal;
   width: 100%;
   text-shadow: 1px 1px 4px #000000;
   margin-bottom: 0;
-  padding-bottom: 0;
+  padding-bottom: 0.5rem;
 }
 #player-options #options-header h2, #weighted-options #options-header h2 {
   font-family: LondrinaSolid-Regular, sans-serif;
@@ -74,11 +67,7 @@
   user-select: none;
   margin: 0;
 }
-#player-options .group-container .interactive, #weighted-options .group-container .interactive {
-  cursor: help;
-}
 #player-options .option-container, #weighted-options .option-container {
-  margin-bottom: 0.5rem;
   display: grid;
   grid-template-columns: 4fr minmax(200px, 5fr);
   grid-gap: 0.5rem;
@@ -109,7 +98,7 @@
   text-overflow: ellipsis;
 }
 #player-options .option-container label, #weighted-options .option-container label {
-  font-size: 1rem;
+  font-size: 16px;
   min-height: 24px;
   line-height: 24px;
 }
@@ -185,7 +174,10 @@
 
 @media all and (max-width: 1024px) {
   #player-options #meta-options, #weighted-options #meta-options {
-    column-count: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem 1rem;
+    margin-bottom: 1rem;
   }
   #player-options .option-container, #weighted-options .option-container {
     grid-template-columns: 4fr 5fr;
@@ -195,7 +187,7 @@
     padding: 3px 6px;
   }
   #player-options .option-container label, #weighted-options .option-container label {
-    font-size: 1.25rem;
+    font-size: 20px;
   }
   #player-options .option-container .randomize-button, #weighted-options .option-container .randomize-button {
     width: 32px;
diff --git a/WebHostLib/static/styles/options/weighted.css.map b/WebHostLib/static/styles/options/weighted.css.map
index 93193c580296..645c165f941a 100644
--- a/WebHostLib/static/styles/options/weighted.css.map
+++ b/WebHostLib/static/styles/options/weighted.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["weighted.scss","shared.scss"],"names":[],"mappings":"AAAQ;ACAR;EACI;;AAEA;EACI;;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;AAEA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;AAMhB;EAEQ;IACI;;EAGJ;IACI;;EAEA;IACI;IACA;;EAGJ;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;;EAGI;IACI;;EAGJ;IACI;IACA;IACA;;;AD5PpB;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EAEQ;IACI;;EAGJ;IACI;;EAEA;IACI;IACA;;EAGJ;IACI;;EAEA;IACI;;EAGJ;IACI;IACA;;EAKZ;IACI","file":"weighted.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["weighted.scss","shared.scss"],"names":[],"mappings":"AAAQ;ACGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;AAEA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;;AAMhB;EAEQ;IACI;IACA;IACA;IACA;;EAGJ;IACI;;EAEA;IACI;IACA;;EAGJ;IACI;;EAGJ;IACI;IACA;;EAIR;IACI;IACA;;EAGI;IACI;;EAGJ;IACI;IACA;IACA;;;ADnPpB;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGI;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;;AAIR;EACI;;;AAGJ;EAEQ;IACI;;EAGJ;IACI;;EAEA;IACI;IACA;;EAGJ;IACI;;EAEA;IACI;;EAGJ;IACI;IACA;;EAKZ;IACI","file":"weighted.css"}
\ No newline at end of file
diff --git a/WebHostLib/templates/pageWrapper.html b/WebHostLib/templates/pageWrapper.html
index 10ff26e72993..d89cf188c0bb 100644
--- a/WebHostLib/templates/pageWrapper.html
+++ b/WebHostLib/templates/pageWrapper.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-768">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/tooltip.css") }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/cookieNotice.css") }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/globalStyles.css") }}">
diff --git a/WebHostLib/templates/playerOptions/macros.html b/WebHostLib/templates/playerOptions/macros.html
index 8f8e97d130a0..30367c63b557 100644
--- a/WebHostLib/templates/playerOptions/macros.html
+++ b/WebHostLib/templates/playerOptions/macros.html
@@ -1,7 +1,7 @@
 {% macro Toggle(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-subcontainer">
+        <div class="option-inputs">
             <select
                 id="{{ option_name }}"
                 name="{{ option_name }}"
@@ -22,7 +22,7 @@
 {% macro Choice(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-subcontainer">
+        <div class="option-inputs">
             <select
                 id="{{ option_name }}"
                 name="{{ option_name }}"
@@ -45,7 +45,7 @@
 {% macro Range(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-subcontainer">
+        <div class="option-inputs">
             <input
                 type="range"
                 class="js-required"
@@ -73,8 +73,8 @@
 {% macro NamedRange(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-group">
-            <div class="option-subcontainer">
+        <div class="option-subcontainer">
+            <div class="option-inputs">
                 <select class="js-required" id="{{ option_name }}-select">
                     {% set default_in_special_names = False %}
                     {% for key, value in option.special_range_names.items() %}
@@ -89,7 +89,7 @@
                     <option value="custom" hidden {{ "selected" if not default_in_special_names }}>Custom</option>
                 </select>
             </div>
-            <div class="option-subcontainer">
+            <div class="option-inputs">
                 <input
                     type="range"
                     id="{{ option_name }}-range"
@@ -116,7 +116,7 @@
 {% macro FreeText(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-subcontainer">
+        <div class="option-inputs">
             <input
                 type="text"
                 id="{{ option_name }}"
@@ -130,8 +130,8 @@
 {% macro TextChoice(option_name, option) %}
     <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-group">
-            <div class="option-subcontainer">
+        <div class="option-subcontainer">
+            <div class="option-inputs">
                 <select
                     id="{{ option_name }}"
                     name="{{ option_name }}"
@@ -151,163 +151,58 @@
             </select>
             {{ RandomizeButton(option_name, option) }}
             </div>
-            <input
-                type="text"
-                id="{{ option_name }}-custom"
-                name="{{ option_name }}-custom"
-                placeholder="Custom value..."
-                data-option-name="{{ option_name }}"
-                data-option-type="text-choice"
-            >
+            <div class="option-inputs">
+                <input
+                    type="text"
+                    id="{{ option_name }}-custom"
+                    name="{{ option_name }}-custom"
+                    placeholder="Custom value..."
+                    data-option-name="{{ option_name }}"
+                    data-option-type="text-choice"
+                >
+            </div>
         </div>
     </div>
 {% endmacro %}
 
 {% macro ItemDict(option_name, option) %}
-    <div class="option-container js-required">
+    <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-list2"> {# TODO: needs to be handled differently #}
-            {# Elements are created via JavaScript to reduce load on browser for large lists. #}
-{#            {% for item_name in (option.valid_keys | sort if (option.valid_keys | length > 0) else world.item_names | sort) %}#}
-{#                <div class="option-entry">#}
-{#                    <label for="{{ option_name }}-{{ item_name }}-qty">{{ item_name }}</label>#}
-{#                    <input#}
-{#                        type="number"#}
-{#                        id="{{ option_name }}-{{ item_name }}-qty"#}
-{#                        class="option"#}
-{#                        name="{{ option_name }}||{{ item_name }}||qty"#}
-{#                        value="{{ option.default[item_name] | default("0") }}"#}
-{#                        data-option-name="{{ option_name }}"#}
-{#                        data-item-name="{{ item_name }}"#}
-{#                    >#}
-{#                </div>#}
-{#            {% endfor %}#}
-        </div>
+        <div class="option-list" id="{{ option_name }}-container" data-keys-type="dict"></div>
     </div>
 {% endmacro %}
 
 {% macro OptionList(option_name, option) %}
-    <div class="option-container js-required">
+    <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-list" id="{{ option_name }}-container">
-            {# Elements are created via JavaScript to reduce load on browser for large lists. #}
-{#            {% for key in (option.valid_keys if option.valid_keys is ordered else option.valid_keys | sort) %}#}
-{#                <div class="option-entry">#}
-{#                    <input#}
-{#                        type="checkbox"#}
-{#                        id="{{ option_name }}-{{ key }}"#}
-{#                        name="{{ option_name }}"#}
-{#                        value="{{ key }}"#}
-{#                        {{ "checked" if key in option.default }}#}
-{#                    >#}
-{#                    <label for="{{ option_name }}-{{ key }}">{{ key }}</label>#}
-{#                </div>#}
-{#            {% endfor %}#}
-        </div>
+        <div class="option-list" id="{{ option_name }}-container" data-keys-type="list"></div>
     </div>
 {% endmacro %}
 
 {% macro LocationSet(option_name, option) %}
-    <div class="option-container js-required">
+    <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-list" id="{{ option_name }}-container">
-            {# Elements are created via JavaScript to reduce load on browser for large lists. #}
-{#            {% for group_name in world.location_name_groups.keys() | sort %}#}
-{#                {% if group_name != "Everywhere" %}#}
-{#                    <div class="option-entry">#}
-{#                        <input#}
-{#                            type="checkbox"#}
-{#                            id="{{ option_name }}-{{ group_name }}"#}
-{#                            name="{{ option_name }}"#}
-{#                            value="{{ group_name }}"#}
-{#                            {{ "checked" if group_name in option.default }}#}
-{#                        >#}
-{#                        <label for="{{ option_name }}-{{ group_name }}">{{ group_name }}</label>#}
-{#                    </div>#}
-{#                {% endif %}#}
-{#            {% endfor %}#}
-{#            {% if world.location_name_groups.keys() | length > 1 %}#}
-{#                <div class="option-divider">&nbsp;</div>#}
-{#            {% endif %}#}
-{#            {% for location_name in (option.valid_keys | sort if (option.valid_keys | length > 0) else world.location_names | sort) %}#}
-{#                <div class="option-entry">#}
-{#                    <input#}
-{#                        type="checkbox"#}
-{#                        id="{{ option_name }}-{{ location_name }}"#}
-{#                        name="{{ option_name }}"#}
-{#                        value="{{ location_name }}"#}
-{#                        {{ "checked" if location_name in option.default }}#}
-{#                    >#}
-{#                    <label for="{{ option_name }}-{{ location_name }}">{{ location_name }}</label>#}
-{#                </div>#}
-{#            {% endfor %}#}
-        </div>
+        <div class="option-list" id="{{ option_name }}-container" data-keys-type="list"></div>
     </div>
 {% endmacro %}
 
 {% macro ItemSet(option_name, option) %}
-    <div class="option-container js-required">
+    <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-list" id="{{ option_name }}-container">
-            {# Elements are created via JavaScript to reduce load on browser for large lists. #}
-            <div id="{{ option_name }}-eol"></div>
-{#            {% for group_name in world.item_name_groups.keys() | sort %}#}
-{#                {% if group_name != "Everything" %}#}
-{#                    <div class="option-entry">#}
-{#                        <input#}
-{#                            type="checkbox"#}
-{#                            id="{{ option_name }}-{{ group_name }}"#}
-{#                            name="{{ option_name }}"#}
-{#                            value="{{ group_name }}"#}
-{#                            {{ "checked" if group_name in option.default }}#}
-{#                        >#}
-{#                        <label for="{{ option_name }}-{{ group_name }}">{{ group_name }}</label>#}
-{#                    </div>#}
-{#                {% endif %}#}
-{#            {% endfor %}#}
-{#            {% if world.item_name_groups.keys() | length > 1 %}#}
-{#                <div class="option-divider">&nbsp;</div>#}
-{#            {% endif %}#}
-{#            {% for item_name in (option.valid_keys | sort if (option.valid_keys | length > 0) else world.item_names | sort) %}#}
-{#                <div class="option-entry">#}
-{#                    <input#}
-{#                        type="checkbox"#}
-{#                        id="{{ option_name }}-{{ item_name }}"#}
-{#                        name="{{ option_name }}"#}
-{#                        value="{{ item_name }}"#}
-{#                        {{ "checked" if item_name in option.default }}#}
-{#                    >#}
-{#                    <label for="{{ option_name }}-{{ item_name }}">{{ item_name }}</label>#}
-{#                </div>#}
-{#            {% endfor %}#}
-        </div>
+        <div class="option-list" id="{{ option_name }}-container" data-keys-type="list"></div>
     </div>
 {% endmacro %}
 
 {% macro OptionSet(option_name, option) %}
-    <div class="option-container js-required">
+    <div class="option-container">
         {{ OptionTitle(option_name, option) }}
-        <div class="option-list" id="{{ option_name }}-container">
-            {# Elements are created via JavaScript to reduce load on browser for large lists. #}
-{#            {% for key in (option.valid_keys if option.valid_keys is ordered else option.valid_keys | sort) %}#}
-{#                <div class="option-entry">#}
-{#                    <input#}
-{#                        type="checkbox"#}
-{#                        id="{{ option_name }}-{{ key }}"#}
-{#                        name="{{ option_name }}"#}
-{#                        value="{{ key }}"#}
-{#                        {{ "checked" if key in option.default }}#}
-{#                    >#}
-{#                    <label for="{{ option_name }}-{{ key }}">{{ key }}</label>#}
-{#                </div>#}
-{#            {% endfor %}#}
-        </div>
+        <div class="option-list" id="{{ option_name }}-container" data-keys-type="list"></div>
     </div>
 {% endmacro %}
 
 {% macro OptionTitle(option_name, option) %}
     <label for="{{ option_name }}">
-        {{ option.display_name | default(option_name) }}<span class="nobr">: <span
+        {{ option.display_name | default(option_name) }}<span class="nobr">:&nbsp;<span
             class="interactive tooltip-container"
             {% if not (option.rich_text_doc | default(world.web.rich_text_options_doc, true)) %}
               data-tooltip="{{ (option.__doc__ | default("Please document me!")) | replace("\n    ", "\n") | escape | trim }}"
diff --git a/WebHostLib/templates/playerOptions/playerOptions.html b/WebHostLib/templates/playerOptions/playerOptions.html
index 6eaae0b52212..ac2390001d34 100644
--- a/WebHostLib/templates/playerOptions/playerOptions.html
+++ b/WebHostLib/templates/playerOptions/playerOptions.html
@@ -38,15 +38,15 @@
 
 {% block body %}
     {% include header_theme %}
-    <div id="player-options" class="markdown" data-game="{{ world_name }}" data-presets="{{ presets }}">
-        <noscript>
-            <div class="alert">
-                This page has reduced functionality without JavaScript.
-            </div>
-        </noscript>
+    <div id="player-options" class="markdown" data-game="{{ world_name }}">
+{#        <noscript>#}
+{#            <div class="alert">#}
+{#                This page has reduced functionality without JavaScript.#}
+{#            </div>#}
+{#        </noscript>#}
 
         {# Used for JS alerts and Flask flash messages. #}
-        <div id="user-message" class="alert">{{ message }}</div>
+{#        <div id="user-message" class="alert">{{ message }}</div>#}
 
         <div id="options-header">
             <h1>{{ world_name }}</h1>
@@ -70,24 +70,21 @@ <h2>Player Options</h2>
         </div>
 
         <form id="options-form" method="post" enctype="application/x-www-form-urlencoded" action="generate-yaml">
-            <div id="meta-options">
+            <div id="options-meta">
                 <div class="option-container">
                     <label for="player-name">
-                        Player Name:
-                        <span
-                            class="interactive tooltip-container"
-                        >
-                            (?)
-                            <div class="tooltip">
-                                 {{ PlayerNameHelp() | safe }}
-                            </div>
+                        Player Name:&nbsp;
+                        <span class="interactive tooltip-container">
+                            (?)<span class="tooltip">{{ PlayerNameHelp() | safe }}</span>
                         </span>
                     </label>
-                    <input id="player-name" placeholder="Player" name="name" required>
+                    <div class="option-inputs">
+                        <input id="player-name" placeholder="Player" name="name" required>
+                    </div>
                 </div>
                 <div class="js-required option-container">
                     <label for="game-options-preset">
-                        Options Preset:
+                        Options Preset:&nbsp;
                         <span
                             class="interactive"
                             data-tooltip="Select from a list of developer-curated presets (if any) or reset all options to their defaults."
@@ -95,13 +92,15 @@ <h2>Player Options</h2>
                             (?)
                         </span>
                     </label>
-                    <select id="game-options-preset" name="game-options-preset">
-                        <option value="default">Default</option>
-                        {% for preset_name in world.web.options_presets %}
-                            <option value="{{ preset_name }}">{{ preset_name }}</option>
-                        {% endfor %}
-                        <option value="custom" hidden>Custom</option>
-                    </select>
+                    <div class="option-inputs">
+                        <select id="game-options-preset" name="game-options-preset">
+                            <option value="default">Default</option>
+                            {% for preset_name in world.web.options_presets %}
+                                <option value="{{ preset_name }}">{{ preset_name }}</option>
+                            {% endfor %}
+                            <option value="custom" hidden>Custom</option>
+                        </select>
+                    </div>
                 </div>
             </div>
 
@@ -109,7 +108,7 @@ <h2>Player Options</h2>
                 {% for group_name, group_options in option_groups.items() %}
                     <details class="group-container" {% if not start_collapsed[group_name] %}open{% endif %}>
                         <summary><h3>{{ group_name }}</h3></summary>
-                        <div class="game-options">
+                        <div class="options">
                             {% for option_name, option in group_options.items() %}
                                 {% if issubclass(option, Options.Toggle) %}
                                     {{ inputs.Toggle(option_name, option) }}
@@ -143,7 +142,6 @@ <h2>Player Options</h2>
 
                                 {% elif issubclass(option, Options.OptionSet) and option.valid_keys %}
                                     {{ inputs.OptionSet(option_name, option) }}
-
                                 {% endif %}
                             {% endfor %}
                         </div>