Add UI for manual stage control

croque-scp · Sep 20, 2024 · 51bc42f · 51bc42f
1 parent a3d1014
commit 51bc42f
Showing 1 changed file with 90 additions and 6 deletions.
diff --git a/source/scp-head/src/controller.html b/source/scp-head/src/controller.html
@@ -6,8 +6,44 @@
       #resizer-container {
         display: block !important;
       }
+
+      #manual-control {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+      }
+      #manual-control h2 {
+        flex: 1 0 100%;
+        font-size: 1rem;
+        line-height: 1;
+        margin: 0.5rem 0;
+      }
+      #manual-control a {
+        border: thin solid black;
+        background: white;
+        color: black;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 1rem;
+        width: 1rem;
+        opacity: 0.3;
+      }
+      #manual-control a.active {
+        background: black;
+        color: white;
+      }
+      #manual-control a.registered {
+        opacity: 1;
+      }
     </style>
     <script src="https://interwiki.scpwiki.com/resizeIframe.js" defer></script>
+  </head>
+
+  <body>
+    <main id="manual-control"></main>
+
     <script>
       "use strict";
       window.isController = true;
@@ -66,7 +102,26 @@
           this.#activeAssertion = this.minId;
 
           /** @type {Set.<number>} */
-          this.knownUpcomingStages = new Set();
+          this.knownStages = new Set();
+
+          // Create a manual control section for this channel
+          const controlSection = document.getElementById("manual-control");
+          controlSection.appendChild(
+            Object.assign(document.createElement("h2"), {
+              textContent: `Channel ${this.name}`,
+            })
+          );
+          for (let stageId = this.minId; stageId <= this.maxId; stageId++) {
+            const stageControl = document.createElement("a");
+            stageControl.textContent = stageId;
+            stageControl.dataset.channelName = this.name;
+            stageControl.dataset.stageId = stageId;
+            stageControl.addEventListener(
+              "click",
+              () => (this.activeAssertion = stageId)
+            );
+            controlSection.appendChild(stageControl);
+          }
         }
 
         /** @param {number} value */
@@ -76,6 +131,7 @@
               `Assertion ID ${value} is out of range for channel ${this.name}`
             );
           this.#activeAssertion = value;
+          this.setManualControlStyles();
         }
 
         /** @returns {number} */
@@ -85,12 +141,42 @@
 
         /** @returns {number | null} */
         get expectedNextAssertion() {
-          const upcomingAssertions = [...this.knownUpcomingStages].filter(
+          const upcomingAssertions = [...this.knownStages].filter(
             (n) => n > this.#activeAssertion
           );
           if (upcomingAssertions.length === 0) return null;
           return Math.min(...upcomingAssertions);
         }
+
+        addKnownStage(stageId) {
+          this.knownStages.add(stageId);
+          this.setManualControlStyles();
+        }
+
+        setManualControlStyles() {
+          // Wipe all stages
+          document
+            .querySelectorAll(`[data-channel-name='${this.name}']`)
+            .forEach((stageControl) => stageControl.classList.remove("active"));
+
+          // Set active stage
+          document
+            .querySelector(
+              `[data-channel-name='${this.name}'][data-stage-id='${
+                this.#activeAssertion
+              }']`
+            )
+            .classList.add("active");
+
+          // Set known stages
+          this.knownStages.forEach((stageId) =>
+            document
+              .querySelector(
+                `[data-channel-name='${this.name}'][data-stage-id='${stageId}']`
+              )
+              .classList.add("registered")
+          );
+        }
       };
 
       /** @type {Object.<string, AssertionChannel>} */
@@ -371,7 +457,7 @@
             c.conditionId,
             c.conditionChannelName
           );
-          assertionChannels[contradiction.channel.name].knownUpcomingStages.add(
+          assertionChannels[contradiction.channel.name].addKnownStage(
             contradiction.id
           );
         }
@@ -497,7 +583,5 @@
         } else preloadNextAssertionState();
       });
     </script>
-  </head>
-
-  <body></body>
+  </body>
 </html>