Add web demo instructions, clean up confusing inputs in streamer rom

joeyparrish · Oct 18, 2024 · 0abfd82 · 0abfd82
1 parent 04e6f46
commit 0abfd82
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/emulator-patches/web-demo.html b/emulator-patches/web-demo.html
@@ -38,19 +38,30 @@
   background: black;
 }
 
-#clickToStart {
+#clickToStart, #instructions {
   background: black;
   color: white;
   border: none;
 
   font-family: "Kode Mono";
   font-optical-sizing: auto;
   font-weight: bold;
-  font-style: italic;
 
   font-size: calc(min(6vw, 20vh));
   display: block;
   margin: auto;
+  margin-top: 1em;
+}
+
+#clickToStart {
+  border: 1px white solid;
+  padding: 0.5em;
+  font-style: italic;
+}
+
+#instructions {
+  font-size: calc(min(5vw, 16vh));
+  padding: 1em;
 }
 
     </style>
@@ -65,6 +76,14 @@
 async function main() {
   // Change the click-to-start label to a loading indicator.
   clickToStart.innerText = 'Loading...'
+  clickToStart.disabled = true;
+
+  // We haven't finished loading JS, try again in 1s.
+  if (!window.Nostalgist) {
+    console.log('Waiting for Nostalgist...');
+    setTimeout(main, 1000);
+    return;
+  }
 
   // Launch the emulator, which will create its own canvas.
   const nostalgist = await Nostalgist.launch({
@@ -75,8 +94,9 @@
     },
     rom: 'kinetoscope-streamer.rom',
     onLaunch: () => {
-      // Once loaded, hide the click-to-start button.
+      // Once loaded, hide the click-to-start button and instructions.
       clickToStart.style.display = 'none';
+      instructions.style.display = 'none';
     },
   });
 
@@ -108,6 +128,15 @@
   </script>
 
   <body>
-    <button id="clickToStart" onclick="main()">Click to start<br>Kinetoscope Emulator</button>
+    <button id="clickToStart" onclick="main()">Click here to start<br>Kinetoscope Emulator</button>
+    <div id="instructions">
+      <ul>
+        <li>up: ↑ / swipe up</li>
+        <li>down: ↓ / swipe down</li>
+        <li>start: enter / tap</li>
+        <li>pause: enter / tap</li>
+        <li>stop: X / swipe left</li>
+      </ul>
+    </div>
   </body>
 </html>
diff --git a/software/stream-with-special-hardware/src/main.c b/software/stream-with-special-hardware/src/main.c
@@ -15,8 +15,8 @@
 
 static void onJoystickEvent(u16 joystick, u16 changed, u16 state) {
   if (segavideo_getState() == Error) {
-    // Error: press start|A|B|C to continue.
-    if (state & (BUTTON_START | BUTTON_A | BUTTON_B | BUTTON_C)) {
+    // Error: press start|A to continue.
+    if (state & (BUTTON_START | BUTTON_A)) {
       segavideo_menu_clearError();
     }
   } else if (segavideo_getState() == Player) {
@@ -28,8 +28,8 @@ static void onJoystickEvent(u16 joystick, u16 changed, u16 state) {
       segavideo_stop();
     }
   } else if (segavideo_getState() == Menu) {
-    // Menu: press start|A|B|C to choose, up/down to navigate.
-    if (state & (BUTTON_START | BUTTON_A | BUTTON_B | BUTTON_C)) {
+    // Menu: press start|A to choose, up/down to navigate.
+    if (state & (BUTTON_START | BUTTON_A)) {
       segavideo_menu_select(/* loop= */ false);
     }
     if (state & BUTTON_UP) {