Add sample song IDs

index.css

@@ -412,3 +412,34 @@ body.bottom #time {
 	float: right;
 	margin-left: 1em;
 }
+
+#settings .debugSongIdRow {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5em;
+}
+
+#debugSongIdInput {
+	flex: 0 0 10rem;
+	width: 10rem;
+	max-width: 50%;
+}
+
+/* One wrapper sets weight; inner <button> uses font: inherit (avoids UA bold + body 600). */
+.debugSongIdHint {
+	font-weight: normal;
+}
+
+.debugSongIdHint button {
+	font: inherit;
+	padding: 0;
+	border: none;
+	background: none;
+	color: #a8d4ff;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.debugSongIdHint button:hover {
+	color: #cfe9ff;
+}

index.html

@@ -81,7 +81,10 @@
 				</select></label>
 			<label>Scale (%): <input id="scaleInput" type="number" min="10" max="1000" step="5"></label>
 			<label>Fade (ms): <input id="fadeInput" type="number" min="0" max="5000" step="10"></label>
-			<label>Debug Song ID (BSR): <input id="debugSongIdInput" type="text" placeholder="e.g. 4f4e4 or 40-char hash" spellcheck="false" autocomplete="off"></label>
+			<label>Debug BSR ID: <span class="debugSongIdRow">
+					<span class="debugSongIdHint">e.g. <button type="button" id="debugSongIdExample" title="Fill with next example BSR id (cycles)">43239</button></span>
+					<input id="debugSongIdInput" class="debugSongIdInput" type="text" placeholder="e.g. 4f4e4 or 40-char hash" spellcheck="false" autocomplete="off">
+				</span></label>
 			<br>
 			<strong>About</strong>
 			<a href="https://github.com/ibillingsley/BeatSaber-Overlay" target="_blank">This is a fork of Iza's overlay</a>

index.js

@@ -580,6 +580,18 @@ window.onhashchange = () => {
 };
 var MAX_REQUESTS = 10;
 var REQUEST_POLL_MS = 5e3;
+var DEBUG_BSR_EXAMPLE_IDS = [
+  "43239",
+  "4b55e",
+  "49201",
+  "35a5e",
+  "2c25a",
+  "3864b",
+  "2d205",
+  "41d08",
+  "e298"
+];
+var debugBsrExampleIndex = 0;
 var requestListEl = must("requestList");
 var requestOverlayEl = must("requestOverlay");
 var requestEmptyEl = must("requestEmpty");
@@ -742,6 +754,20 @@ async function bootstrap() {
       void applyDebugSong();
     }
   };
+  const debugSongIdExampleBtn = must("debugSongIdExample");
+  const syncDebugBsrExampleButton = () => {
+    debugSongIdExampleBtn.textContent = DEBUG_BSR_EXAMPLE_IDS[debugBsrExampleIndex];
+  };
+  syncDebugBsrExampleButton();
+  debugSongIdExampleBtn.onclick = () => {
+    const id = DEBUG_BSR_EXAMPLE_IDS[debugBsrExampleIndex];
+    debugBsrExampleIndex = (debugBsrExampleIndex + 1) % DEBUG_BSR_EXAMPLE_IDS.length;
+    debugSongIdInput.value = id;
+    debugSongIdInput.dispatchEvent(new Event("input", {
+      bubbles: true
+    }));
+    syncDebugBsrExampleButton();
+  };
   document.documentElement.onclick = () => document.body.classList.toggle("preview");
   must("settings").onclick = (e) => e.stopPropagation();
   void loadRequestQueue();

src/client/index.ts

@@ -480,6 +480,21 @@ window.onhashchange = () => {
 
 const MAX_REQUESTS = 10;
 const REQUEST_POLL_MS = 5000;
+
+/** BeatSaver map keys for the debug “example” control (cycles on each click). */
+const DEBUG_BSR_EXAMPLE_IDS = [
+	"43239",
+	"4b55e",
+	"49201",
+	"35a5e",
+	"2c25a",
+	"3864b",
+	"2d205",
+	"41d08",
+	"e298",
+] as const;
+let debugBsrExampleIndex = 0;
+
 const requestListEl = must<HTMLOListElement>("requestList");
 const requestOverlayEl = must<HTMLElement>("requestOverlay");
 const requestEmptyEl = must<HTMLElement>("requestEmpty");
@@ -641,6 +656,18 @@ async function bootstrap() {
 			void applyDebugSong();
 		}
 	};
+	const debugSongIdExampleBtn = must<HTMLButtonElement>("debugSongIdExample");
+	const syncDebugBsrExampleButton = () => {
+		debugSongIdExampleBtn.textContent = DEBUG_BSR_EXAMPLE_IDS[debugBsrExampleIndex];
+	};
+	syncDebugBsrExampleButton();
+	debugSongIdExampleBtn.onclick = () => {
+		const id = DEBUG_BSR_EXAMPLE_IDS[debugBsrExampleIndex];
+		debugBsrExampleIndex = (debugBsrExampleIndex + 1) % DEBUG_BSR_EXAMPLE_IDS.length;
+		debugSongIdInput.value = id;
+		debugSongIdInput.dispatchEvent(new Event("input", { bubbles: true }));
+		syncDebugBsrExampleButton();
+	};
 
 	document.documentElement.onclick = () => document.body.classList.toggle("preview");
 	must<HTMLElement>("settings").onclick = (e: MouseEvent) => e.stopPropagation();