Release v0.1.0 2026-07-10

src/components/DualDisplayFrame.tsx

@@ -1,13 +1,51 @@
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { subscribeDisplaySurface, type DisplaySurface } from "../platform/displayRouting";
 
 export function DualDisplayFrame({ top, bottom }: { top: ReactNode; bottom: ReactNode }) {
+  const [activeSurface, setActiveSurface] = useState<DisplaySurface>("top");
+  const activeSurfaceRef = useRef(activeSurface);
+  activeSurfaceRef.current = activeSurface;
+
+  useEffect(() => {
+    if (!document.documentElement.classList.contains("native-platform")) return;
+    let frame = 0;
+    let selectHeld = false;
+    const toggle = () => setActiveSurface((surface) => surface === "top" ? "bottom" : "top");
+    const unsubscribeSurface = subscribeDisplaySurface(setActiveSurface);
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Tab" || event.repeat) return;
+      event.preventDefault();
+      toggle();
+    };
+    const poll = () => {
+      const held = navigator.getGamepads?.()[0]?.buttons[8]?.pressed ?? false;
+      if (held && !selectHeld) toggle();
+      selectHeld = held;
+      frame = requestAnimationFrame(poll);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    frame = requestAnimationFrame(poll);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      unsubscribeSurface();
+      cancelAnimationFrame(frame);
+    };
+  }, []);
+
   return (
-    <div className="device-frame">
+    <div className={`device-frame active-${activeSurface}`}>
       <div className="screen-label"><span>Main viewport</span><small>960 × 540 CSS · 1920 × 1080 · 120Hz</small></div>
-      {top}
+      <div className={`surface-slot top-slot ${activeSurface === "top" ? "is-active" : ""}`}>{top}</div>
       <div className="hinge" aria-hidden="true"><i /><b>AYN THOR</b><i /></div>
       <div className="screen-label bottom-label"><span>Context display</span><small>620 × 540 CSS · 1240 × 1080 · 60Hz</small></div>
-      {bottom}
+      <div className={`surface-slot bottom-slot ${activeSurface === "bottom" ? "is-active" : ""}`}>{bottom}</div>
+      <button
+        className="native-display-switch"
+        onClick={() => setActiveSurface(activeSurfaceRef.current === "top" ? "bottom" : "top")}
+        aria-label={activeSurface === "top" ? "Open tactical display" : "Return to main display"}
+      >
+        <b>{activeSurface === "top" ? "Tactical" : "Main"}</b><small>SELECT / TAB</small>
+      </button>
     </div>
   );
 }

src/components/FrontEnd.tsx

@@ -7,6 +7,7 @@ import { useMenuController, type MenuAction } from "../input/useMenuController";
 import { HEALER_CLASSES, HEALER_CLASS_ORDER } from "../game/healers";
 import { BOSS_DEFINITIONS, BOSS_ORDER } from "../game/bossCatalog";
 import type { BossId } from "../game/types";
+import { requestDisplaySurface } from "../platform/displayRouting";
 import { DualDisplayFrame } from "./DualDisplayFrame";
 
 function FocusButton({
@@ -151,6 +152,11 @@ function SaveScreen() {
   const openCreation = () => {
     setHunterName("");
     setDialog("create");
+    requestDisplaySurface("top");
+  };
+  const openSaveDialog = (nextDialog: "copy" | "delete") => {
+    setDialog(nextDialog);
+    requestDisplaySurface("top");
   };
 
   const actions = useMemo<MenuAction[]>(() => dialog === "create"
@@ -170,8 +176,8 @@ function SaveScreen() {
           { id: hasLocal ? "play" : "create", run: () => hasLocal ? playSlot(selectedSlotId) : openCreation() },
           { id: "upload", run: () => uploadSlot(selectedSlotId), enabled: hasLocal && Boolean(accountId) },
           { id: "download", run: () => downloadSlot(selectedSlotId), enabled: hasOnline && Boolean(accountId) },
-          { id: "copy", run: () => setDialog("copy"), enabled: hasLocal },
-          { id: "delete", run: () => setDialog("delete"), enabled: hasLocal },
+          { id: "copy", run: () => openSaveDialog("copy"), enabled: hasLocal },
+          { id: "delete", run: () => openSaveDialog("delete"), enabled: hasLocal },
           { id: "back", run: () => navigate("login") },
         ], [accountId, copySlot, createSlot, deleteSlot, dialog, downloadSlot, hasLocal, hasOnline, hunterName, navigate, playSlot, selectSlot, selectedSlotId, slots, uploadSlot]);
   const controller = useMenuController(actions, { onBack: () => dialog ? setDialog(null) : navigate("login") });
@@ -261,8 +267,8 @@ function SaveScreen() {
               <FocusButton id="download" focusedId={controller.focusedId} focus={controller.focus} disabled={!hasOnline || !accountId} onClick={() => downloadSlot(selectedSlotId)}>↓ Overwrite with online</FocusButton>
             </div>
             <div className="record-actions">
-              <FocusButton id="copy" focusedId={controller.focusedId} focus={controller.focus} disabled={!hasLocal} onClick={() => setDialog("copy")}>Copy save</FocusButton>
-              <FocusButton id="delete" focusedId={controller.focusedId} focus={controller.focus} disabled={!hasLocal} className="danger-link" onClick={() => setDialog("delete")}>Delete save</FocusButton>
+              <FocusButton id="copy" focusedId={controller.focusedId} focus={controller.focus} disabled={!hasLocal} onClick={() => openSaveDialog("copy")}>Copy save</FocusButton>
+              <FocusButton id="delete" focusedId={controller.focusedId} focus={controller.focus} disabled={!hasLocal} className="danger-link" onClick={() => openSaveDialog("delete")}>Delete save</FocusButton>
               <FocusButton id="back" focusedId={controller.focusedId} focus={controller.focus} onClick={() => navigate("login")}>Back</FocusButton>
             </div>
           </div>