Add: config for controlling debug overlay visibility of tauri

frontend/tauri-ui/src/main.tsx

@@ -48,6 +48,7 @@ async function fitWindowForScale(pack: UiSpritePack, scale: number): Promise<voi
 function App(): JSX.Element {
   const [snapshot, setSnapshot] = React.useState<UiSnapshot | null>(null);
   const [error, setError] = React.useState<string | null>(null);
+  const [debugOverlayVisible, setDebugOverlayVisible] = React.useState(false);
   const hostRef = React.useRef<HTMLDivElement | null>(null);
   const rendererRef = React.useRef<PixiPetRenderer | null>(null);
   const scaleFitRef = React.useRef<number | null>(null);
@@ -58,13 +59,15 @@ function App(): JSX.Element {
     let activePack: UiSpritePack | null = null;
     Promise.all([
       invoke<UiSpritePack>("load_active_sprite_pack"),
-      invoke<UiSnapshot>("current_state")
+      invoke<UiSnapshot>("current_state"),
+      invoke<boolean>("debug_overlay_visible")
     ])
-      .then(async ([pack, initialSnapshot]) => {
+      .then(async ([pack, initialSnapshot, showDebug]) => {
         if (!mounted) {
           return;
         }
         activePack = pack;
+        setDebugOverlayVisible(showDebug);
         setSnapshot(initialSnapshot);
         if (hostRef.current !== null) {
           rendererRef.current = await PixiPetRenderer.create(
@@ -115,6 +118,32 @@ function App(): JSX.Element {
     };
   }, []);
 
+  const toggleDebugOverlay = React.useCallback(async () => {
+    try {
+      const next = !debugOverlayVisible;
+      const persisted = await invoke<boolean>("set_debug_overlay_visible", {
+        visible: next
+      });
+      setDebugOverlayVisible(persisted);
+    } catch (err) {
+      setError(String(err));
+    }
+  }, [debugOverlayVisible]);
+
+  React.useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (!event.ctrlKey || !event.shiftKey || event.code !== "KeyD") {
+        return;
+      }
+      event.preventDefault();
+      void toggleDebugOverlay();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [toggleDebugOverlay]);
+
   const onMouseDown = React.useCallback((event: React.MouseEvent<HTMLElement>) => {
     if (event.button !== 0) {
       return;
@@ -127,28 +156,32 @@ function App(): JSX.Element {
   return (
     <main className="app" onMouseDown={onMouseDown}>
       <div className="canvas-host" ref={hostRef} />
-      <section className="debug-panel">
-        <h1>sprimo-tauri</h1>
-        {error !== null ? <p className="error">{error}</p> : null}
-        {snapshot === null ? (
-          <p>Loading snapshot...</p>
-        ) : (
-          <dl>
-            <dt>state</dt>
-            <dd>{snapshot.state}</dd>
-            <dt>animation</dt>
-            <dd>{snapshot.current_animation}</dd>
-            <dt>pack</dt>
-            <dd>{snapshot.active_sprite_pack}</dd>
-            <dt>position</dt>
-            <dd>
-              {snapshot.x}, {snapshot.y}
-            </dd>
-            <dt>scale</dt>
-            <dd>{snapshot.scale}</dd>
-          </dl>
-        )}
-      </section>
+      {error !== null && !debugOverlayVisible ? <p className="error-banner">{error}</p> : null}
+      {debugOverlayVisible ? (
+        <section className="debug-panel">
+          <h1>sprimo-tauri</h1>
+          <p className="hint">Toggle: Ctrl+Shift+D</p>
+          {error !== null ? <p className="error">{error}</p> : null}
+          {snapshot === null ? (
+            <p>Loading snapshot...</p>
+          ) : (
+            <dl>
+              <dt>state</dt>
+              <dd>{snapshot.state}</dd>
+              <dt>animation</dt>
+              <dd>{snapshot.current_animation}</dd>
+              <dt>pack</dt>
+              <dd>{snapshot.active_sprite_pack}</dd>
+              <dt>position</dt>
+              <dd>
+                {snapshot.x}, {snapshot.y}
+              </dd>
+              <dt>scale</dt>
+              <dd>{snapshot.scale}</dd>
+            </dl>
+          )}
+        </section>
+      ) : null}
     </main>
   );
 }