Refactor dev menu to be runtime generated

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - Removed some lines of code that don't do anything.
 - Moved the audio controls to the bottom center to avoid conflicts with the`Loading game` prompt in different resolutions.
 - Slightly increased the audio volume slider in width.
+- Refactored the dev menu to be generated on runtime.
 
 ### Fixed
 

html/dev.css

@@ -5,18 +5,28 @@
     background-color: black !important;
 }
 
-#dev-menu h3 {
-    padding-top: 1rem;
-}
+#dev-menu {
+    position: fixed;
+    right: 1rem;
+    top: 1rem;
+    overflow-y: scroll;
 
-#dev-menu h3::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    transform: translateY(-1rem);
-    width: 100%;
-    height: 1rem;
-    border-top: 1px solid var(--secondary-color);
+    width: 18rem;
+    height: calc(100vh - 4rem);
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    background-color: black;
+    color: whitesmoke;
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--border-round);
+
+    transition:
+        right 0.5s ease-in-out,
+        var(--hover-transition);
 }
 
 #dev-open,
@@ -74,69 +84,62 @@
     appearance: none;
 }
 
-#dev-menu {
-    position: fixed;
-    right: 1rem;
-    top: 1rem;
-    overflow-y: scroll;
-
-    width: 18rem;
-    height: calc(100vh - 4rem);
-    padding: 1rem;
-
+#dev-options,
+#dev-cfg-wrapper,
+#dev-section,
+.dev-value {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-
-    background-color: black;
-    color: whitesmoke;
-    border: 1px solid var(--secondary-color);
-    border-radius: var(--border-round);
-
-    transition:
-        right 0.5s ease-in-out,
-        var(--hover-transition);
+    gap: 2rem;
 }
 
-#dev-menu > header {
-    width: 100%;
+#dev-section {
+    gap: 1rem;
+    overflow-y: scroll;
+    min-height: 10rem;
 }
 
-#dev-menu .col {
-    display: flex;
-    flex-direction: column;
+#dev-cfg-wrapper,
+.dev-value {
     gap: 0.25rem;
 }
 
-#dev-menu .row {
+#dev-menu > header,
+#dev-options > div {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.25rem;
 }
 
-#dev-menu .grow {
-    flex-grow: 1;
+#dev-options > div > * {
+    opacity: 0.75;
+    transition: var(--hover-transition);
 }
 
-#dev-menu .icon {
-    width: 2.1rem;
-    height: 2.1rem;
-    background-color: transparent;
-    color: white;
-    padding: 0.5rem;
-    transition: var(--hover-transition);
+#dev-options > div:hover > * {
+    opacity: 1;
+}
 
-    border: 1px solid var(--secondary-color);
-    border-radius: var(--border-round);
+#dev-options > div:hover {
+    cursor: pointer;
+}
+
+#dev-menu > header::after {
+    height: 0.5rem;
 }
 
-#dev-menu .icon img {
+#dev-menu > header::after,
+#dev-options > div::after {
+    opacity: 1.25 !important;
+    content: '';
+    position: absolute;
+    left: 0;
     width: 100%;
-    height: 100%;
+    transform: translateY(1.8rem);
+    border-bottom: 1px solid var(--secondary-color);
 }
 
-#dev-menu .event {
+.dev-event {
     padding: 0.75rem;
 
     display: flex;
@@ -146,3 +149,9 @@
     border: 1px solid var(--secondary-color);
     border-radius: var(--border-round);
 }
+
+.dev-event > div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}