From 0b50b26445d9865f29a01027872792b33591a6a1 Mon Sep 17 00:00:00 2001
From: David Malchin <malchin459@gmail.com>
Date: Tue, 10 Sep 2024 21:23:00 +0300
Subject: [PATCH] Refactor dev menu to be runtime generated

---
 CHANGELOG.md                        |   1 +
 html/assets/icons/arrow_back.svg    |   1 +
 html/dev.css                        | 113 ++++----
 html/index.html                     | 409 +++-------------------------
 html/js/config/generator.js         |  70 -----
 html/js/config/index.js             |   2 -
 html/js/config/style.js             |  35 ++-
 html/js/dev/elements/config.js      |  90 ------
 html/js/dev/elements/events.js      | 102 -------
 html/js/dev/elements/menu.js        |   9 -
 html/js/dev/elements/variables.js   |   6 -
 html/js/dev/event-handlers.js       | 128 +++++++++
 html/js/dev/events/custom-events.js |   6 +
 html/js/dev/events/events.js        | 144 ++++++++++
 html/js/dev/handlers/config.js      | 209 --------------
 html/js/dev/handlers/events.js      | 172 ------------
 html/js/dev/handlers/index.js       |  84 ------
 html/js/dev/handlers/variables.js   |  22 --
 html/js/dev/index.js                |  71 ++++-
 html/js/dev/value-handlers.js       | 122 +++++++++
 html/js/util/elements.js            |  43 +++
 21 files changed, 635 insertions(+), 1204 deletions(-)
 create mode 100644 html/assets/icons/arrow_back.svg
 delete mode 100644 html/js/config/generator.js
 delete mode 100644 html/js/dev/elements/config.js
 delete mode 100644 html/js/dev/elements/events.js
 delete mode 100644 html/js/dev/elements/menu.js
 delete mode 100644 html/js/dev/elements/variables.js
 create mode 100644 html/js/dev/event-handlers.js
 create mode 100644 html/js/dev/events/custom-events.js
 create mode 100644 html/js/dev/events/events.js
 delete mode 100644 html/js/dev/handlers/config.js
 delete mode 100644 html/js/dev/handlers/events.js
 delete mode 100644 html/js/dev/handlers/index.js
 delete mode 100644 html/js/dev/handlers/variables.js
 create mode 100644 html/js/dev/value-handlers.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dbc2fc..6166605 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/html/assets/icons/arrow_back.svg b/html/assets/icons/arrow_back.svg
new file mode 100644
index 0000000..16aa612
--- /dev/null
+++ b/html/assets/icons/arrow_back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>
\ No newline at end of file
diff --git a/html/dev.css b/html/dev.css
index c8babd8..e2aef2b 100644
--- a/html/dev.css
+++ b/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;
+}
diff --git a/html/index.html b/html/index.html
index d31d800..c4f1780 100644
--- a/html/index.html
+++ b/html/index.html
@@ -86,23 +86,36 @@ <h1 id="finishing-message"></h1>
 
     <button id="dev-open" class="hover" style="display: none">Dev Menu</button>
     <div id="dev-menu" class="hover" style="display: none">
-        <header class="row">
+        <header>
             <h2>Dev Menu</h2>
             <button id="dev-close" class="hover">Close</button>
         </header>
 
-        <h3>Variables</h3>
-        <div class="col">
-            <h4>Player Name</h4>
-            <input id="dev-player-name" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Server Name</h4>
-            <input id="dev-server-name" class="hover grow" type="text" />
-        </div>
+        <button id="dev-back" class="hover" style="display: none">Back</button>
+
+        <main id="dev-options">
+            <div id="dev-variables">
+                <h3>Variables</h3>
+                <img src="./assets/icons/arrow_forward.svg" />
+            </div>
+
+            <div id="dev-config">
+                <h3>Config</h3>
+                <img src="./assets/icons/arrow_forward.svg" />
+            </div>
+
+            <div id="dev-events">
+                <h3>Events</h3>
+                <img src="./assets/icons/arrow_forward.svg" />
+            </div>
+
+            <div id="dev-custom-events">
+                <h3>Custom Events</h3>
+                <img src="./assets/icons/arrow_forward.svg" />
+            </div>
+        </main>
 
-        <h3>Config</h3>
-        <div class="col">
+        <div id="dev-cfg-wrapper">
             <h4>Generated Cfg</h4>
             <textarea
                 id="dev-generated-cfg"
@@ -111,366 +124,26 @@ <h4>Generated Cfg</h4>
                 wrap="off"
             ></textarea>
         </div>
-        <div class="col">
-            <h4>Style</h4>
-            <div class="row">
-                <input
-                    id="dev-style"
-                    class="hover grow"
-                    type="text"
-                    list="styles"
-                />
-                <button id="dev-style-button" class="icon hover">
-                    <img src="./assets/icons/arrow_forward.svg" />
-                </button>
-            </div>
-        </div>
-        <div class="col">
-            <h4>Background</h4>
-            <input
-                id="dev-background"
-                class="hover grow"
-                type="text"
-                list="backgrounds"
-            />
-        </div>
-        <div class="col">
-            <h4>Background Brightness</h4>
-            <input
-                id="dev-background-brightness"
-                class="hover grow"
-                type="number"
-            />
-        </div>
-        <div class="col">
-            <h4>Text Color</h4>
-            <input id="dev-text-color" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Primary Color</h4>
-            <input id="dev-primary-color" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Secondary Color</h4>
-            <input id="dev-secondary-color" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Shadow Color</h4>
-            <input id="dev-shadow-color" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Font Family</h4>
-            <input id="dev-font-family" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Logo</h4>
-            <input id="dev-logo" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Server Message</h4>
-            <input id="dev-server-message" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Primary Bar</h4>
-            <input id="dev-primary-bar" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Secondary Bar</h4>
-            <input id="dev-secondary-bar" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Loading Action</h4>
-            <input id="dev-loading-action" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Finishing Message</h4>
-            <input id="dev-finishing-message" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Log Line</h4>
-            <input id="dev-log-line" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Finished Message</h4>
-            <input id="dev-finished-message" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Finished Line</h4>
-            <input id="dev-finished-line" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Audio Controls</h4>
-            <input id="dev-audio-controls" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Remember Volume</h4>
-            <input id="dev-remember-volume" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Error Log</h4>
-            <input id="dev-error-log" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Initial Audio Volume</h4>
-            <input
-                id="dev-initial-audio-volume"
-                class="hover grow"
-                type="number"
-            />
-        </div>
-        <div class="col">
-            <h4>Music</h4>
-            <input id="dev-music" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Music Shuffle</h4>
-            <input id="dev-music-shuffle" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Image Rate</h4>
-            <input id="dev-image-rate" class="hover grow" type="number" />
-        </div>
-        <div class="col">
-            <h4>Image Shuffle</h4>
-            <input id="dev-image-shuffle" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Video Shuffle</h4>
-            <input id="dev-video-shuffle" class="shrink" type="checkbox" />
-        </div>
-        <div class="col">
-            <h4>Embed Link</h4>
-            <input id="dev-embed-link" class="hover grow" type="text" />
-        </div>
-        <div class="col">
-            <h4>Embed Access</h4>
-            <input id="dev-embed-access" class="shrink" type="checkbox" />
-        </div>
+    </div>
 
-        <h3>Events</h3>
-        <div class="event">
-            <h4>loadProgress</h4>
-            <div class="col">
-                <div class="row">
-                    <h5>fraction</h5>
-                    <p id="dev-load-progress-fraction-label">0</p>
-                </div>
-                <input
-                    id="dev-load-progress-fraction"
-                    min="0"
-                    max="1"
-                    step="0.01"
-                    value="0"
-                    class="hover grow"
-                    type="range"
-                />
-            </div>
-            <button id="dev-load-progress" class="hover">Emit</button>
+    <template id="dev-value-template">
+        <div class="dev-value">
+            <h4></h4>
+            <input class="hover" />
         </div>
-        <div class="event">
-            <h4>onLogLine</h4>
-            <div class="col">
-                <h5>message</h5>
-                <input
-                    id="dev-on-log-line-message"
-                    class="hover grow"
-                    type="text"
-                    value="Awaiting scripts"
-                />
-            </div>
+    </template>
+
+    <template id="dev-event-template">
+        <div class="dev-event">
+            <h4></h4>
             <button id="dev-on-log-line" class="hover">Emit</button>
         </div>
-        <div class="event">
-            <h4>startDataFileEntries</h4>
-            <div class="col">
-                <h5>count</h5>
-                <input
-                    id="dev-start-data-file-entries-count"
-                    class="hover grow"
-                    type="number"
-                    value="10"
-                />
-            </div>
-            <button id="dev-start-data-file-entries" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>onDataFileEntry</h4>
-            <div class="col">
-                <h5>name</h5>
-                <input
-                    id="dev-on-data-file-entry-name"
-                    class="hover grow"
-                    type="text"
-                    value="file"
-                />
-            </div>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-on-data-file-entry-type"
-                    class="hover grow"
-                    type="number"
-                    value="1"
-                />
-            </div>
-            <div class="col">
-                <h5>isNew</h5>
-                <input
-                    id="dev-on-data-file-entry-is-new"
-                    type="checkbox"
-                    checked
-                />
-            </div>
-            <button id="dev-on-data-file-entry" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>performMapLoadFunction</h4>
-            <div class="col">
-                <h5>idx</h5>
-                <input
-                    id="dev-perform-map-load-function-idx"
-                    class="hover grow"
-                    type="number"
-                    value="47"
-                />
-            </div>
-            <button id="dev-perform-map-load-function" class="hover">
-                Emit
-            </button>
-        </div>
-        <div class="event">
-            <h4>endDataFileEntries</h4>
-            <button id="dev-end-data-file-entries" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>startInitFunction</h4>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-start-init-function-type"
-                    class="hover grow"
-                    type="text"
-                    value="MOCK_FUNCTION"
-                />
-            </div>
-            <button id="dev-start-init-function" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>startInitFunctionOrder</h4>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-start-init-function-order-type"
-                    class="hover grow"
-                    type="text"
-                    value="MOCK_FUNCTION"
-                />
-            </div>
-            <div class="col">
-                <h5>order</h5>
-                <input
-                    id="dev-start-init-function-order-order"
-                    class="hover grow"
-                    type="number"
-                    value="1"
-                />
-            </div>
-            <div class="col">
-                <h5>count</h5>
-                <input
-                    id="dev-start-init-function-order-count"
-                    class="hover grow"
-                    type="number"
-                    value="10"
-                />
-            </div>
-            <button id="dev-start-init-function-order" class="hover">
-                Emit
-            </button>
-        </div>
-        <div class="event">
-            <h4>initFunctionInvoking</h4>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-init-function-invoking-type"
-                    class="hover grow"
-                    type="text"
-                    value="MOCK_FUNCTION"
-                />
-            </div>
-            <div class="col">
-                <h5>name</h5>
-                <input
-                    id="dev-init-function-invoking-name"
-                    class="hover grow"
-                    type="text"
-                    value="helloWorld"
-                />
-            </div>
-            <div class="col">
-                <h5>idx</h5>
-                <input
-                    id="dev-init-function-invoking-idx"
-                    class="hover grow"
-                    type="number"
-                    value="6"
-                />
-            </div>
-            <button id="dev-init-function-invoking" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>initFunctionInvoked</h4>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-init-function-invoked-type"
-                    class="hover grow"
-                    type="text"
-                    value="MOCK_FUNCTION"
-                />
-            </div>
-            <div class="col">
-                <h5>name</h5>
-                <input
-                    id="dev-init-function-invoked-name"
-                    class="hover grow"
-                    type="text"
-                    value="helloWorld"
-                />
-            </div>
-            <button id="dev-init-function-invoked" class="hover">Emit</button>
-        </div>
-        <div class="event">
-            <h4>endInitFunction</h4>
-            <div class="col">
-                <h5>type</h5>
-                <input
-                    id="dev-end-init-function-type"
-                    class="hover grow"
-                    type="text"
-                    value="MOCK_FUNCTION"
-                />
-            </div>
-            <button id="dev-end-init-function" class="hover">Emit</button>
-        </div>
+    </template>
 
-        <h3>Custom Events</h3>
-        <div class="event">
-            <h4>finishedLoading</h4>
-            <button id="dev-finished-loading" class="hover">Emit</button>
+    <template id="dev-event-param-template">
+        <div>
+            <h5></h5>
+            <input class="hover" />
         </div>
-    </div>
-
-    <datalist id="styles">
-        <option value="classic"></option>
-        <option value="minimal"></option>
-        <option value="modern"></option>
-    </datalist>
-
-    <datalist id="backgrounds">
-        <option value="image"></option>
-        <option value="video"></option>
-        <option value="embed"></option>
-    </datalist>
+    </template>
 </html>
diff --git a/html/js/config/generator.js b/html/js/config/generator.js
deleted file mode 100644
index c1105fb..0000000
--- a/html/js/config/generator.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { devGeneratedCfg } from '../dev/elements/config.js';
-import { isBrowserEnv } from '../util/env.js';
-
-const CONVAR_PREFIX = 'loadscreen:';
-
-/** @param {string} v */
-function str(v) {
-    return `"${v}"`;
-}
-
-/** @param {number} v */
-function int(v) {
-    return `${v}`;
-}
-
-/** @param {number} v */
-function int100(v) {
-    return `${v * 100}`;
-}
-
-/** @param {boolean} v */
-function bool(v) {
-    return v ? 'true' : 'false';
-}
-
-/**
- * @param {NuiHandoverData} handoverData
- */
-export function configGenerator({ config }) {
-    if (!isBrowserEnv()) return;
-
-    /**
-     * @type {{ name: keyof NuiHandoverData['config'], func: (...args: any) => string }[]}
-     */
-    const vars = [
-        { name: 'style', func: str },
-        { name: 'background', func: str },
-        { name: 'backgroundBrightness', func: int100 },
-        { name: 'textColor', func: str },
-        { name: 'primaryColor', func: str },
-        { name: 'secondaryColor', func: str },
-        { name: 'shadowColor', func: str },
-        { name: 'fontFamily', func: str },
-        { name: 'logo', func: bool },
-        { name: 'serverMessage', func: str },
-        { name: 'primaryBar', func: bool },
-        { name: 'secondaryBar', func: bool },
-        { name: 'loadingAction', func: bool },
-        { name: 'finishingMessage', func: str },
-        { name: 'logLine', func: bool },
-        { name: 'audioControls', func: bool },
-        { name: 'rememberVolume', func: bool },
-        { name: 'errorLog', func: bool },
-        { name: 'initialAudioVolume', func: int100 },
-        { name: 'music', func: bool },
-        { name: 'musicShuffle', func: bool },
-        { name: 'imageRate', func: int },
-        { name: 'imageShuffle', func: bool },
-        { name: 'videoShuffle', func: bool },
-        { name: 'embedLink', func: str },
-        { name: 'embedAccess', func: bool },
-    ];
-
-    devGeneratedCfg.value = vars
-        .map(
-            ({ name, func }) =>
-                `set ${CONVAR_PREFIX}${name} ${func(config[name])}`,
-        )
-        .join('\n');
-}
diff --git a/html/js/config/index.js b/html/js/config/index.js
index 1d9b408..b360360 100644
--- a/html/js/config/index.js
+++ b/html/js/config/index.js
@@ -5,7 +5,6 @@ import { configBackgroundMusic } from './background-music.js';
 import { configBackgroundVideos } from './background-videos.js';
 import { configCustomEvents, setupCustomEvents } from './custom-events.js';
 import { configErrorLog, setupErrorLog } from './error-log.js';
-import { configGenerator } from './generator.js';
 import { configMessages } from './messages.js';
 import { configStyle, setupStyle } from './style.js';
 
@@ -29,5 +28,4 @@ export function config(handoverData) {
     configBackgroundEmbed(handoverData);
     configBackgroundMusic(handoverData);
     configAudioControls(handoverData);
-    configGenerator(handoverData);
 }
diff --git a/html/js/config/style.js b/html/js/config/style.js
index 50cc610..9bb9db7 100644
--- a/html/js/config/style.js
+++ b/html/js/config/style.js
@@ -9,24 +9,29 @@ import {
 } from '../util/elements.js';
 import { shouldShowBackgroundCSS } from '../util/handover.js';
 
-export function setupStyle() {
-    document.querySelectorAll('input').forEach((e) => {
-        if (e.type !== 'range') return;
+/**
+ * @param {HTMLInputElement} element
+ */
+export function setupInputRangeStyle(element) {
+    if (element.type !== 'range') return;
 
-        function update() {
-            const min = parseFloat(e.min);
-            const max = parseFloat(e.max);
-            const num = parseFloat(e.value);
+    function update() {
+        const min = parseFloat(element.min);
+        const max = parseFloat(element.max);
+        const num = parseFloat(element.value);
 
-            e.style.setProperty(
-                '--value',
-                `${((num - min) / (max - min)) * 100}%`,
-            );
-        }
+        element.style.setProperty(
+            '--value',
+            `${((num - min) / (max - min)) * 100}%`,
+        );
+    }
 
-        e.addEventListener('input', update);
-        update();
-    });
+    element.addEventListener('input', update);
+    update();
+}
+
+export function setupStyle() {
+    document.querySelectorAll('input').forEach(setupInputRangeStyle);
 }
 
 /**
diff --git a/html/js/dev/elements/config.js b/html/js/dev/elements/config.js
deleted file mode 100644
index a8cf9a9..0000000
--- a/html/js/dev/elements/config.js
+++ /dev/null
@@ -1,90 +0,0 @@
-export const devGeneratedCfg = /** @type {HTMLTextAreaElement} */ (
-    document.getElementById('dev-generated-cfg')
-);
-export const devStyle = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-style')
-);
-export const devStyleButton = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-style-button')
-);
-export const devBackground = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-background')
-);
-export const devBackgroundBrightness = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-background-brightness')
-);
-export const devTextColor = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-text-color')
-);
-export const devPrimaryColor = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-primary-color')
-);
-export const devSecondaryColor = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-secondary-color')
-);
-export const devShadowColor = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-shadow-color')
-);
-export const devFontFamily = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-font-family')
-);
-export const devLogo = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-logo')
-);
-export const devServerMessage = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-server-message')
-);
-export const devPrimaryBar = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-primary-bar')
-);
-export const devSecondaryBar = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-secondary-bar')
-);
-export const devLoadingAction = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-loading-action')
-);
-export const devFinishingMessage = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-finishing-message')
-);
-export const devLogLine = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-log-line')
-);
-export const devFinishedMessage = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-finished-message')
-);
-export const devFinishedLine = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-finished-line')
-);
-export const devAudioControls = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-audio-controls')
-);
-export const devRememberVolume = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-remember-volume')
-);
-export const devErrorLog = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-error-log')
-);
-export const devInitialAudioVolume = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-initial-audio-volume')
-);
-export const devMusic = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-music')
-);
-export const devMusicShuffle = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-music-shuffle')
-);
-export const devImageRate = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-image-rate')
-);
-export const devImageShuffle = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-image-shuffle')
-);
-export const devVideoShuffle = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-video-shuffle')
-);
-export const devEmbedLink = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-embed-link')
-);
-export const devEmbedAccess = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-embed-access')
-);
diff --git a/html/js/dev/elements/events.js b/html/js/dev/elements/events.js
deleted file mode 100644
index 295a18e..0000000
--- a/html/js/dev/elements/events.js
+++ /dev/null
@@ -1,102 +0,0 @@
-export const devLoadProgressFractionLabel =
-    /** @type {HTMLParagraphElement} */ (
-        document.getElementById('dev-load-progress-fraction-label')
-    );
-export const devLoadProgressFraction = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-load-progress-fraction')
-);
-export const devLoadProgress = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-load-progress')
-);
-
-export const devOnLogLineMessage = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-on-log-line-message')
-);
-export const devOnLogLine = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-on-log-line')
-);
-
-export const devStartDataFileEntriesCount = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-start-data-file-entries-count')
-);
-export const devStartDataFileEntries = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-start-data-file-entries')
-);
-
-export const devOnDataFileEntryName = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-on-data-file-entry-name')
-);
-export const devOnDataFileEntryType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-on-data-file-entry-type')
-);
-export const devOnDataFileEntryIsNew = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-on-data-file-entry-is-new')
-);
-export const devOnDataFileEntry = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-on-data-file-entry')
-);
-
-export const devPerformMapLoadFunctionIdx = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-perform-map-load-function-idx')
-);
-export const devPerformMapLoadFunction = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-perform-map-load-function')
-);
-
-export const devEndDataFileEntries = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-end-data-file-entries')
-);
-
-export const devStartInitFunctionType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-start-init-function-type')
-);
-export const devStartInitFunction = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-start-init-function')
-);
-
-export const devStartInitFunctionOrderType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-start-init-function-order-type')
-);
-export const devStartInitFunctionOrderOrder = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-start-init-function-order-order')
-);
-export const devStartInitFunctionOrderCount = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-start-init-function-order-count')
-);
-export const devStartInitFunctionOrder = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-start-init-function-order')
-);
-
-export const devInitFunctionInvokingType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-init-function-invoking-type')
-);
-export const devInitFunctionInvokingName = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-init-function-invoking-name')
-);
-export const devInitFunctionInvokingIdx = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-init-function-invoking-idx')
-);
-export const devInitFunctionInvoking = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-init-function-invoking')
-);
-
-export const devInitFunctionInvokedType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-init-function-invoked-type')
-);
-export const devInitFunctionInvokedName = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-init-function-invoked-name')
-);
-export const devInitFunctionInvoked = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-init-function-invoked')
-);
-
-export const devEndInitFunctionType = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-end-init-function-type')
-);
-export const devEndInitFunction = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-end-init-function')
-);
-
-export const devFinishedLoading = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-finished-loading')
-);
diff --git a/html/js/dev/elements/menu.js b/html/js/dev/elements/menu.js
deleted file mode 100644
index 83361d1..0000000
--- a/html/js/dev/elements/menu.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const devOpen = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-open')
-);
-export const devMenu = /** @type {HTMLDivElement} */ (
-    document.getElementById('dev-menu')
-);
-export const devClose = /** @type {HTMLButtonElement} */ (
-    document.getElementById('dev-close')
-);
diff --git a/html/js/dev/elements/variables.js b/html/js/dev/elements/variables.js
deleted file mode 100644
index 47e5a2e..0000000
--- a/html/js/dev/elements/variables.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const devPlayerName = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-player-name')
-);
-export const devServerName = /** @type {HTMLInputElement} */ (
-    document.getElementById('dev-server-name')
-);
diff --git a/html/js/dev/event-handlers.js b/html/js/dev/event-handlers.js
new file mode 100644
index 0000000..5ecdcc3
--- /dev/null
+++ b/html/js/dev/event-handlers.js
@@ -0,0 +1,128 @@
+import { setupInputRangeStyle } from '../config/style.js';
+import {
+    devBack,
+    devCfgWrapper,
+    devEventParamTemplate,
+    devEventTemplate,
+    devMenu,
+    devOptions,
+} from '../util/elements.js';
+
+/**
+ * @typedef {Object} DevEventParam
+ * @property {string} name
+ * @property {'text' | 'number' | 'range' | 'checkbox'} type
+ * @property {string} [value]
+ * @property {string} [min]
+ * @property {string} [max]
+ * @property {string} [step]
+ * @property {boolean} [checked]
+ */
+
+/**
+ * @typedef {Object} DevEvent
+ * @property {string} name
+ * @property {DevEventParam[]} [params]
+ */
+
+/**
+ * @typedef {Object} DevEventParamHandler
+ * @property {string} name
+ * @property {() => unknown} getValue
+ */
+
+/**
+ * @param {string} field
+ * @param {DevEvent[]} events
+ * @param {HTMLElement} element
+ */
+export function setupEventHandlers(field, events, element) {
+    const parent = document.createElement('div');
+    parent.id = 'dev-section';
+
+    for (const { name, params } of events) {
+        const clone = /** @type {HTMLDivElement} */ (
+            devEventTemplate.content.cloneNode(true)
+        );
+        const wrapper = /** @type {HTMLDivElement} */ (
+            clone.querySelector('div')
+        );
+        const title = /** @type {HTMLHeadingElement} */ (
+            clone.querySelector('h4')
+        );
+        const button = /** @type {HTMLButtonElement} */ (
+            clone.querySelector('button')
+        );
+
+        title.innerText = name;
+
+        const inputHandlers = /** @type {DevEventParamHandler[]} */ ([]);
+        for (const { name, type, value, min, max, step, checked } of params ??
+            []) {
+            const clone = /** @type {HTMLDivElement} */ (
+                devEventParamTemplate.content.cloneNode(true)
+            );
+            const title = /** @type {HTMLHeadingElement} */ (
+                clone.querySelector('h5')
+            );
+            const input = /** @type {HTMLInputElement} */ (
+                clone.querySelector('input')
+            );
+
+            title.innerText = name;
+            input.type = type;
+            if (typeof value !== 'undefined') input.value = value;
+            if (typeof min !== 'undefined') input.min = min;
+            if (typeof max !== 'undefined') input.max = max;
+            if (typeof step !== 'undefined') input.step = step;
+            if (typeof checked !== 'undefined') input.checked = checked;
+
+            let getValue;
+            switch (type) {
+                case 'checkbox':
+                    getValue = () => input.checked;
+                    break;
+                case 'number':
+                    getValue = () => parseInt(input.value);
+                    break;
+                case 'range':
+                    getValue = () => parseFloat(input.value);
+                    break;
+                default:
+                    getValue = () => input.value;
+                    break;
+            }
+
+            if (type === 'range') {
+                input.addEventListener('input', () => {
+                    title.innerText = `${name} - ${input.value}`;
+                });
+                setupInputRangeStyle(input);
+                input.dispatchEvent(new Event('input'));
+            }
+
+            inputHandlers.push({ name, getValue });
+            wrapper.insertBefore(clone, button);
+        }
+
+        button.addEventListener('click', () => {
+            const data = /** @type {Record<string, unknown>} */ ({});
+            data[field] = name;
+
+            for (const { name, getValue } of inputHandlers) {
+                data[name] = getValue();
+            }
+
+            window.postMessage(data);
+        });
+
+        parent.append(clone);
+    }
+
+    element.addEventListener('click', () => {
+        devBack.style.display = '';
+        devOptions.style.display = 'none';
+        devCfgWrapper.style.display = 'none';
+        devMenu.appendChild(parent);
+    });
+}
diff --git a/html/js/dev/events/custom-events.js b/html/js/dev/events/custom-events.js
new file mode 100644
index 0000000..1ab2fb2
--- /dev/null
+++ b/html/js/dev/events/custom-events.js
@@ -0,0 +1,6 @@
+export const customEvents =
+    /** @type {import("../event-handlers.js").DevEvent[]} */ ([
+        {
+            name: 'finishedLoading',
+        },
+    ]);
diff --git a/html/js/dev/events/events.js b/html/js/dev/events/events.js
new file mode 100644
index 0000000..9f5cfc1
--- /dev/null
+++ b/html/js/dev/events/events.js
@@ -0,0 +1,144 @@
+export const events =
+    /** @type {import("../event-handlers.js").DevEvent[]} */ ([
+        {
+            name: 'loadProgress',
+            params: [
+                {
+                    name: 'loadFraction',
+                    type: 'range',
+                    value: '0',
+                    min: '0',
+                    max: '1',
+                    step: '0.01',
+                },
+            ],
+        },
+        {
+            name: 'onLogLine',
+            params: [
+                {
+                    name: 'message',
+                    type: 'text',
+                    value: 'Awaiting scripts...',
+                },
+            ],
+        },
+        {
+            name: 'startDataFileEntries',
+            params: [
+                {
+                    name: 'count',
+                    type: 'number',
+                    value: '10',
+                },
+            ],
+        },
+        {
+            name: 'onDataFileEntry',
+            params: [
+                {
+                    name: 'name',
+                    type: 'text',
+                    value: 'file',
+                },
+                {
+                    name: 'type',
+                    type: 'number',
+                    value: '1',
+                },
+                {
+                    name: 'isNew',
+                    type: 'checkbox',
+                    checked: true,
+                },
+            ],
+        },
+        {
+            name: 'performMapLoadFunction',
+            params: [
+                {
+                    name: 'idx',
+                    type: 'number',
+                    value: '47',
+                },
+            ],
+        },
+        {
+            name: 'endDataFileEntries',
+        },
+        {
+            name: 'startInitFunction',
+            params: [
+                {
+                    name: 'type',
+                    type: 'text',
+                    value: 'MOCK_FUNCTION',
+                },
+            ],
+        },
+        {
+            name: 'startInitFunctionOrder',
+            params: [
+                {
+                    name: 'type',
+                    type: 'text',
+                    value: 'MOCK_FUNCTION',
+                },
+                {
+                    name: 'order',
+                    type: 'number',
+                    value: '1',
+                },
+                {
+                    name: 'count',
+                    type: 'number',
+                    value: '10',
+                },
+            ],
+        },
+        {
+            name: 'initFunctionInvoking',
+            params: [
+                {
+                    name: 'type',
+                    type: 'text',
+                    value: 'MOCK_FUNCTION',
+                },
+                {
+                    name: 'name',
+                    type: 'text',
+                    value: 'helloWorld',
+                },
+                {
+                    name: 'idx',
+                    type: 'number',
+                    value: '6',
+                },
+            ],
+        },
+        {
+            name: 'initFunctionInvoked',
+            params: [
+                {
+                    name: 'type',
+                    type: 'text',
+                    value: 'MOCK_FUNCTION',
+                },
+                {
+                    name: 'name',
+                    type: 'text',
+                    value: 'helloWorld',
+                },
+            ],
+        },
+        {
+            name: 'endInitFunction',
+            params: [
+                {
+                    name: 'type',
+                    type: 'text',
+                    value: 'MOCK_FUNCTION',
+                },
+            ],
+        },
+    ]);
diff --git a/html/js/dev/handlers/config.js b/html/js/dev/handlers/config.js
deleted file mode 100644
index 0c11464..0000000
--- a/html/js/dev/handlers/config.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import {
-    devAudioControls,
-    devBackground,
-    devBackgroundBrightness,
-    devEmbedAccess,
-    devEmbedLink,
-    devErrorLog,
-    devFinishedLine,
-    devFinishedMessage,
-    devFinishingMessage,
-    devFontFamily,
-    devImageRate,
-    devImageShuffle,
-    devInitialAudioVolume,
-    devLoadingAction,
-    devLogLine,
-    devLogo,
-    devMusic,
-    devMusicShuffle,
-    devPrimaryBar,
-    devPrimaryColor,
-    devRememberVolume,
-    devSecondaryBar,
-    devSecondaryColor,
-    devServerMessage,
-    devShadowColor,
-    devStyle,
-    devStyleButton,
-    devTextColor,
-    devVideoShuffle,
-} from '../elements/config.js';
-import { createInputCheckedHandler, createInputValueHandler } from './index.js';
-
-/**
- * @param {NuiHandoverData} handoverData
- */
-export function setupDevConfigHandlers(handoverData) {
-    const { config } = handoverData;
-
-    createInputValueHandler(
-        handoverData,
-        devStyle,
-        config.style,
-        (v) => (config.style = v),
-        devStyleButton,
-    );
-    createInputValueHandler(
-        handoverData,
-        devBackground,
-        config.background,
-        (v) => (config.background = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devBackgroundBrightness,
-        `${config.backgroundBrightness * 100}`,
-        (v) => (config.backgroundBrightness = parseInt(v) / 100),
-    );
-    createInputValueHandler(
-        handoverData,
-        devTextColor,
-        config.textColor,
-        (v) => (config.textColor = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devPrimaryColor,
-        config.primaryColor,
-        (v) => (config.primaryColor = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devSecondaryColor,
-        config.secondaryColor,
-        (v) => (config.secondaryColor = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devShadowColor,
-        config.shadowColor,
-        (v) => (config.shadowColor = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devFontFamily,
-        config.fontFamily,
-        (v) => (config.fontFamily = v),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devLogo,
-        config.logo,
-        (c) => (config.logo = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devServerMessage,
-        config.serverMessage,
-        (v) => (config.serverMessage = v),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devPrimaryBar,
-        config.primaryBar,
-        (c) => (config.primaryBar = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devSecondaryBar,
-        config.secondaryBar,
-        (c) => (config.secondaryBar = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devLoadingAction,
-        config.loadingAction,
-        (c) => (config.loadingAction = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devFinishingMessage,
-        config.finishingMessage,
-        (v) => (config.finishingMessage = v),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devLogLine,
-        config.logLine,
-        (c) => (config.logLine = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devFinishedMessage,
-        config.finishedMessage,
-        (v) => (config.finishedMessage = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devFinishedLine,
-        config.finishedLine,
-        (v) => (config.finishedLine = v),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devAudioControls,
-        config.audioControls,
-        (c) => (config.audioControls = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devRememberVolume,
-        config.rememberVolume,
-        (c) => (config.rememberVolume = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devErrorLog,
-        config.errorLog,
-        (c) => (config.errorLog = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devInitialAudioVolume,
-        `${config.initialAudioVolume * 100}`,
-        (v) => (config.initialAudioVolume = parseInt(v) / 100),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devMusic,
-        config.music,
-        (c) => (config.music = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devMusicShuffle,
-        config.musicShuffle,
-        (c) => (config.musicShuffle = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devImageRate,
-        `${config.imageRate}`,
-        (v) => (config.imageRate = parseInt(v)),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devImageShuffle,
-        config.imageShuffle,
-        (c) => (config.imageShuffle = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devVideoShuffle,
-        config.videoShuffle,
-        (c) => (config.videoShuffle = c),
-    );
-    createInputValueHandler(
-        handoverData,
-        devEmbedLink,
-        config.embedLink,
-        (c) => (config.embedLink = c),
-    );
-    createInputCheckedHandler(
-        handoverData,
-        devEmbedAccess,
-        config.embedAccess,
-        (c) => (config.embedAccess = c),
-    );
-}
diff --git a/html/js/dev/handlers/events.js b/html/js/dev/handlers/events.js
deleted file mode 100644
index cfc8116..0000000
--- a/html/js/dev/handlers/events.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import {
-    devEndDataFileEntries,
-    devEndInitFunction,
-    devEndInitFunctionType,
-    devFinishedLoading,
-    devInitFunctionInvoked,
-    devInitFunctionInvokedName,
-    devInitFunctionInvokedType,
-    devInitFunctionInvoking,
-    devInitFunctionInvokingIdx,
-    devInitFunctionInvokingName,
-    devInitFunctionInvokingType,
-    devLoadProgress,
-    devLoadProgressFraction,
-    devLoadProgressFractionLabel,
-    devOnDataFileEntry,
-    devOnDataFileEntryIsNew,
-    devOnDataFileEntryName,
-    devOnDataFileEntryType,
-    devOnLogLine,
-    devOnLogLineMessage,
-    devPerformMapLoadFunction,
-    devPerformMapLoadFunctionIdx,
-    devStartDataFileEntries,
-    devStartDataFileEntriesCount,
-    devStartInitFunction,
-    devStartInitFunctionOrder,
-    devStartInitFunctionOrderCount,
-    devStartInitFunctionOrderOrder,
-    devStartInitFunctionOrderType,
-    devStartInitFunctionType,
-} from '../elements/events.js';
-
-/**
- * @template {LoadscreenEvent | CustomEvent} T
- * @param {HTMLButtonElement} button
- * @param {() => T} event
- */
-function setupDevEventHandler(button, event) {
-    button.addEventListener('click', () => window.postMessage(event()));
-}
-
-export function setupDevEventHandlers() {
-    devLoadProgressFraction.addEventListener('input', () => {
-        devLoadProgressFractionLabel.textContent =
-            devLoadProgressFraction.value;
-    });
-
-    setupDevEventHandler(
-        devLoadProgress,
-        () =>
-            /** @satisfies {LoadscreenEvents.LoadProgress} */ ({
-                eventName: 'loadProgress',
-                loadFraction: parseFloat(devLoadProgressFraction.value),
-            }),
-    );
-
-    setupDevEventHandler(
-        devOnLogLine,
-        () =>
-            /** @satisfies {LoadscreenEvents.OnLogLine} */
-            ({
-                eventName: 'onLogLine',
-                message: devOnLogLineMessage.value,
-            }),
-    );
-
-    setupDevEventHandler(
-        devStartDataFileEntries,
-        () =>
-            /** @type {LoadscreenEvents.StartDataFileEntries} */
-            ({
-                eventName: 'startDataFileEntries',
-                count: parseInt(devStartDataFileEntriesCount.value),
-            }),
-    );
-
-    setupDevEventHandler(
-        devOnDataFileEntry,
-        () =>
-            /** @type {LoadscreenEvents.OnDataFileEntry} */
-            ({
-                eventName: 'onDataFileEntry',
-                name: devOnDataFileEntryName.value,
-                type: parseInt(devOnDataFileEntryType.value),
-                isNew: devOnDataFileEntryIsNew.checked,
-            }),
-    );
-
-    setupDevEventHandler(
-        devPerformMapLoadFunction,
-        () =>
-            /** @type {LoadscreenEvents.PerformMapLoadFunction} */
-            ({
-                eventName: 'performMapLoadFunction',
-                idx: parseInt(devPerformMapLoadFunctionIdx.value),
-            }),
-    );
-
-    setupDevEventHandler(
-        devEndDataFileEntries,
-        () =>
-            /** @type {LoadscreenEvents.EndDataFileEntries} */
-            ({
-                eventName: 'endDataFileEntries',
-            }),
-    );
-
-    setupDevEventHandler(
-        devStartInitFunction,
-        () =>
-            /** @type {LoadscreenEvents.StartInitFunction} */
-            ({
-                eventName: 'startInitFunction',
-                type: devStartInitFunctionType.value,
-            }),
-    );
-
-    setupDevEventHandler(
-        devStartInitFunctionOrder,
-        () =>
-            /** @type {LoadscreenEvents.StartInitFunctionOrder} */
-            ({
-                eventName: 'startInitFunctionOrder',
-                type: devStartInitFunctionOrderType.value,
-                order: parseInt(devStartInitFunctionOrderOrder.value),
-                count: parseInt(devStartInitFunctionOrderCount.value),
-            }),
-    );
-
-    setupDevEventHandler(
-        devInitFunctionInvoking,
-        () =>
-            /** @type {LoadscreenEvents.InitFunctionInvoking} */
-            ({
-                eventName: 'initFunctionInvoking',
-                type: devInitFunctionInvokingType.value,
-                name: devInitFunctionInvokingName.value,
-                idx: parseInt(devInitFunctionInvokingIdx.value),
-            }),
-    );
-
-    setupDevEventHandler(
-        devInitFunctionInvoked,
-        () =>
-            /** @type {LoadscreenEvents.InitFunctionInvoked} */
-            ({
-                eventName: 'initFunctionInvoked',
-                type: devInitFunctionInvokedType.value,
-                name: devInitFunctionInvokedName.value,
-            }),
-    );
-
-    setupDevEventHandler(
-        devEndInitFunction,
-        () =>
-            /** @type {LoadscreenEvents.EndInitFunction} */
-            ({
-                eventName: 'endInitFunction',
-                type: devEndInitFunctionType.value,
-            }),
-    );
-
-    setupDevEventHandler(
-        devFinishedLoading,
-        () =>
-            /** @type {CustomEvents.FinishedLoading} */
-            ({
-                customEvent: 'finishedLoading',
-            }),
-    );
-}
diff --git a/html/js/dev/handlers/index.js b/html/js/dev/handlers/index.js
deleted file mode 100644
index 5548a63..0000000
--- a/html/js/dev/handlers/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { config } from '../../config/index.js';
-
-/**
- * @param {NuiHandoverData} handoverData
- * @param {HTMLInputElement} element
- * @param {(element: HTMLInputElement) => void} initial
- * @param {(element: HTMLInputElement) => void} update
- * @param {HTMLButtonElement} [button]
- */
-export function createInputHandler(
-    handoverData,
-    element,
-    initial,
-    update,
-    button,
-) {
-    initial(element);
-    (button || element).addEventListener(
-        typeof button !== 'undefined' ? 'click' : 'input',
-        () => {
-            update(element);
-            config(handoverData);
-        },
-    );
-}
-
-/**
- * @param {NuiHandoverData} handoverData
- * @param {HTMLInputElement} element
- * @param {string} initial
- * @param {(value: string) => void} update
- * @param {HTMLButtonElement} [button]
- */
-export function createInputValueHandler(
-    handoverData,
-    element,
-    initial,
-    update,
-    button,
-) {
-    return createInputHandler(
-        handoverData,
-        element,
-        (e) => (e.value = initial),
-        (e) => update(e.value),
-        button,
-    );
-}
-
-/**
- * @param {NuiHandoverData} handoverData
- * @param {HTMLInputElement} element
- * @param {boolean} initial
- * @param {(checked: boolean) => void} update
- * @param {HTMLButtonElement} [button]
- */
-export function createInputCheckedHandler(
-    handoverData,
-    element,
-    initial,
-    update,
-    button,
-) {
-    return createInputHandler(
-        handoverData,
-        element,
-        (e) => (e.checked = initial),
-        (e) => update(e.checked),
-        button,
-    );
-}
-
-import { setupDevConfigHandlers } from './config.js';
-import { setupDevEventHandlers } from './events.js';
-import { setupDevVariableHandlers } from './variables.js';
-
-/**
- * @param {NuiHandoverData} handoverData
- */
-export function setupDevHandlers(handoverData) {
-    setupDevVariableHandlers(handoverData);
-    setupDevConfigHandlers(handoverData);
-    setupDevEventHandlers();
-}
diff --git a/html/js/dev/handlers/variables.js b/html/js/dev/handlers/variables.js
deleted file mode 100644
index a57f811..0000000
--- a/html/js/dev/handlers/variables.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { devPlayerName, devServerName } from '../elements/variables.js';
-import { createInputValueHandler } from './index.js';
-
-/**
- * @param {NuiHandoverData} handoverData
- */
-export function setupDevVariableHandlers(handoverData) {
-    const { vars } = handoverData;
-
-    createInputValueHandler(
-        handoverData,
-        devPlayerName,
-        vars.playerName,
-        (v) => (vars.playerName = v),
-    );
-    createInputValueHandler(
-        handoverData,
-        devServerName,
-        vars.serverName,
-        (v) => (vars.serverName = v),
-    );
-}
diff --git a/html/js/dev/index.js b/html/js/dev/index.js
index f68d7f3..f4b134d 100644
--- a/html/js/dev/index.js
+++ b/html/js/dev/index.js
@@ -1,10 +1,60 @@
+import {
+    devBack,
+    devCfgWrapper,
+    devClose,
+    devConfig,
+    devCustomEvents,
+    devEvents,
+    devMenu,
+    devOpen,
+    devOptions,
+    devVariables,
+} from '../util/elements.js';
 import { isBrowserEnv } from '../util/env.js';
 import { getHandoverData } from '../util/handover.js';
-import { devClose, devMenu, devOpen } from './elements/menu.js';
-import { setupDevHandlers } from './handlers/index.js';
+import { setupEventHandlers } from './event-handlers.js';
+import { customEvents } from './events/custom-events.js';
+import { events } from './events/events.js';
+import { setupValueHandlers } from './value-handlers.js';
 
 const HIDDEN_REM = '-25rem';
 
+const intHandlers = {
+    /**
+     * @param {number} val
+     * @returns {string}
+     */
+    initial(val) {
+        return `${val}`;
+    },
+
+    /**
+     * @param {string} val
+     * @returns {number}
+     */
+    update(val) {
+        return parseInt(val);
+    },
+};
+
+const fractionHandlers = {
+    /**
+     * @param {number} val
+     * @returns {string}
+     */
+    initial(val) {
+        return `${val * 100}`;
+    },
+
+    /**
+     * @param {string} val
+     * @returns {number}
+     */
+    update(val) {
+        return parseInt(val) / 100;
+    },
+};
+
 if (isBrowserEnv()) {
     const handoverData = getHandoverData();
 
@@ -19,5 +69,20 @@ if (isBrowserEnv()) {
         devMenu.style.right = HIDDEN_REM;
     });
 
-    setupDevHandlers(handoverData);
+    devBack.addEventListener('click', () => {
+        document.getElementById('dev-section')?.remove();
+        devBack.style.display = 'none';
+        devOptions.style.display = '';
+        devCfgWrapper.style.display = '';
+    });
+
+    setupValueHandlers(handoverData, 'vars', devVariables);
+    setupValueHandlers(handoverData, 'config', devConfig, {
+        backgroundBrightness: fractionHandlers,
+        initialAudioVolume: fractionHandlers,
+        imageRate: intHandlers,
+    });
+
+    setupEventHandlers('eventName', events, devEvents);
+    setupEventHandlers('customEvent', customEvents, devCustomEvents);
 }
diff --git a/html/js/dev/value-handlers.js b/html/js/dev/value-handlers.js
new file mode 100644
index 0000000..240d2a5
--- /dev/null
+++ b/html/js/dev/value-handlers.js
@@ -0,0 +1,122 @@
+import { config } from '../config/index.js';
+import {
+    devBack,
+    devCfgWrapper,
+    devGeneratedCfg,
+    devMenu,
+    devOptions,
+    devValueTemplate,
+} from '../util/elements.js';
+
+const CONVAR_PREFIX = 'loadscreen:';
+
+/**
+ * @param {string} t
+ * @param {string} v
+ * @param {boolean} c
+ */
+function toConvarValue(t, v, c) {
+    switch (t) {
+        case 'number':
+            return `${v}`;
+        case 'boolean':
+            return `${c}`;
+        default:
+            return `"${v}"`;
+    }
+}
+
+/**
+ * @template {keyof NuiHandoverData} T
+ * @template {keyof NuiHandoverData[T]} K
+ * @typedef {Object} DevSpecialHandlers
+ * @property {(value: NuiHandoverData[T][K]) => string} initial
+ * @property {(value: string) => NuiHandoverData[T][K]} update
+ */
+
+/**
+ * @template {keyof NuiHandoverData} T
+ * @template {keyof NuiHandoverData[T]} K
+ * @param {NuiHandoverData} handoverData
+ * @param {T} sectionName
+ * @param {HTMLElement} element
+ * @param {Partial<Record<K, DevSpecialHandlers<T, K>>>} [specialHandlers]
+ */
+export function setupValueHandlers(
+    handoverData,
+    sectionName,
+    element,
+    specialHandlers = {},
+) {
+    const section = handoverData[sectionName];
+    const cfg = sectionName === 'config';
+
+    const parent = document.createElement('div');
+    parent.id = 'dev-section';
+
+    for (const [key, val] of Object.entries(section)) {
+        const { initial, update } =
+            specialHandlers[/** @type {keyof NuiHandoverData[T]} */ (key)] ??
+            {};
+
+        const clone = /** @type {HTMLDivElement} */ (
+            devValueTemplate.content.cloneNode(true)
+        );
+        const title = /** @type {HTMLHeadingElement} */ (
+            clone.querySelector('h4')
+        );
+        const input = /** @type {HTMLInputElement} */ (
+            clone.querySelector('input')
+        );
+
+        const convarRegex = new RegExp(`${CONVAR_PREFIX}${key} .*`);
+        const toConvar = () => {
+            return `${CONVAR_PREFIX}${key} ${toConvarValue(typeof val, input.value, input.checked)}`;
+        };
+
+        title.innerText = key;
+        input.value = initial ? initial(val) : val;
+
+        switch (typeof val) {
+            case 'string':
+                input.type = 'text';
+                break;
+            case 'number':
+                input.type = 'number';
+                break;
+            case 'boolean':
+                input.type = 'checkbox';
+                input.checked = val;
+                break;
+        }
+
+        if (cfg) {
+            if (devGeneratedCfg.value) devGeneratedCfg.value += '\n';
+            devGeneratedCfg.value += `set ${toConvar()}`;
+        }
+
+        input.addEventListener('input', () => {
+            if (input.type === 'checkbox') {
+                //@ts-ignore too hard to check
+                section[key] = input.checked;
+            } else {
+                //@ts-ignore too hard to check
+                section[key] = update ? update(input.value) : input.value;
+            }
+            config(handoverData);
+            devGeneratedCfg.value = devGeneratedCfg.value.replace(
+                convarRegex,
+                toConvar(),
+            );
+        });
+
+        parent.append(clone);
+    }
+
+    element.addEventListener('click', () => {
+        devBack.style.display = '';
+        devOptions.style.display = 'none';
+        if (!cfg) devCfgWrapper.style.display = 'none';
+        devMenu.appendChild(parent);
+    });
+}
diff --git a/html/js/util/elements.js b/html/js/util/elements.js
index 6747f6e..f54c57f 100644
--- a/html/js/util/elements.js
+++ b/html/js/util/elements.js
@@ -67,3 +67,46 @@ export const finishingMessage = /** @type {HTMLHeadingElement} */ (
 export const logLine = /** @type {HTMLParagraphElement} */ (
     document.getElementById('log-line')
 );
+
+export const devOpen = /** @type {HTMLButtonElement} */ (
+    document.getElementById('dev-open')
+);
+export const devMenu = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-menu')
+);
+export const devBack = /** @type {HTMLButtonElement} */ (
+    document.getElementById('dev-back')
+);
+export const devOptions = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-options')
+);
+export const devClose = /** @type {HTMLButtonElement} */ (
+    document.getElementById('dev-close')
+);
+export const devVariables = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-variables')
+);
+export const devConfig = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-config')
+);
+export const devEvents = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-events')
+);
+export const devCustomEvents = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-custom-events')
+);
+export const devCfgWrapper = /** @type {HTMLDivElement} */ (
+    document.getElementById('dev-cfg-wrapper')
+);
+export const devGeneratedCfg = /** @type {HTMLTextAreaElement} */ (
+    document.getElementById('dev-generated-cfg')
+);
+export const devValueTemplate = /** @type {HTMLTemplateElement} */ (
+    document.getElementById('dev-value-template')
+);
+export const devEventTemplate = /** @type {HTMLTemplateElement} */ (
+    document.getElementById('dev-event-template')
+);
+export const devEventParamTemplate = /** @type {HTMLTemplateElement} */ (
+    document.getElementById('dev-event-param-template')
+);