Add dev menu

CHANGELOG.md

@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - Convars for changing the screen colors & CSS background.
 - Convar option for setting a custom font family.
 - Convar option for setting the background brightness.
+- Dev menu when the screen is opened in regular browsers.
 
 ### Changed
 
@@ -37,6 +38,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   - Added GitHub workflows for testing the code and for publishing a GitHub release.
   - Reorganized the HTML.
   - Refactored some of the JS code.
+  - Moved some type declarations into separate files.
 
 ### Removed
 

html/dev.css

@@ -0,0 +1,141 @@
+#dev-open {
+    position: fixed;
+    top: 1.75rem;
+    right: 1.75rem;
+    background-color: black !important;
+}
+
+#dev-menu h3 {
+    padding-top: 1rem;
+}
+
+#dev-menu h3::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    transform: translateY(-1rem);
+    width: 100%;
+    height: 1rem;
+    border-top: 1px solid var(--secondary-color);
+}
+
+#dev-open,
+#dev-menu button {
+    background-color: transparent;
+    color: white;
+    padding: 0.5rem;
+    transition: var(--hover-transition);
+
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--border-round);
+}
+
+#dev-open:hover,
+#dev-menu button:hover {
+    cursor: pointer;
+}
+
+#dev-menu input[type='text'],
+#dev-menu input[type='number'] {
+    background-color: transparent;
+    color: white;
+    padding: 0.5rem;
+
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--border-round);
+}
+
+#dev-menu input[type='color'] {
+    width: 100%;
+    background-color: transparent;
+    color: white;
+}
+
+#dev-menu input[type='checkbox'] {
+    width: min-content;
+}
+
+#dev-menu input:checked {
+    background-color: white;
+}
+
+#dev-menu input:focus {
+    outline: none;
+}
+
+::-webkit-inner-spin-button {
+    appearance: none;
+}
+
+#dev-menu {
+    position: fixed;
+    right: 1rem;
+    top: 1rem;
+    overflow-y: scroll;
+
+    width: 18rem;
+    height: calc(100vh - 4rem);
+    padding: 1rem;
+
+    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);
+}
+
+#dev-menu > header {
+    width: 100%;
+}
+
+#dev-menu .col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+#dev-menu .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+}
+
+#dev-menu .grow {
+    flex-grow: 1;
+}
+
+#dev-menu .icon {
+    width: 2.1rem;
+    height: 2.1rem;
+    background-color: transparent;
+    color: white;
+    padding: 0.5rem;
+    transition: var(--hover-transition);
+
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--border-round);
+}
+
+#dev-menu .icon img {
+    width: 100%;
+    height: 100%;
+}
+
+#dev-menu .event {
+    padding: 0.75rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    border: 1px solid var(--secondary-color);
+    border-radius: var(--border-round);
+}