emoemu 0.1.0

package/src/ui/GamepadContext/index.tsx

@@ -0,0 +1,295 @@
+/**
+ * Gamepad Context for Shared Input Management
+ *
+ * Provides a single GamepadManager instance shared across all UI components.
+ * Uses a focus stack to determine which component receives input - the most
+ * recently mounted component with gamepad handlers takes priority.
+ */
+
+import { createContext, useContext, useEffect, useRef, useCallback, useMemo, type ReactNode } from 'react';
+import { GamepadManager } from '../../input/GamepadManager';
+import { StandardButton } from '../../core/button';
+import {
+  INITIAL_DELAY_MS,
+  INITIAL_REPEAT_MS,
+  MIN_REPEAT_MS,
+  ACCELERATION_TIME_MS,
+  EASE_CUBIC_FACTOR,
+  EASE_CUBIC_DIVISOR,
+} from './consts';
+
+export * from './consts';
+
+export interface GamepadCallbacks {
+  onUp?: () => void;
+  onDown?: () => void;
+  onLeft?: () => void;
+  onRight?: () => void;
+  onConfirm?: () => void;  // A button
+  onCancel?: () => void;   // B button
+  onStart?: () => void;    // Start button
+  onGuide?: () => void;    // Guide/Xbox/Home button
+}
+
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+const DIRECTION_CALLBACKS: Record<Direction, keyof Pick<GamepadCallbacks, 'onUp' | 'onDown' | 'onLeft' | 'onRight'>> = {
+  up: 'onUp',
+  down: 'onDown',
+  left: 'onLeft',
+  right: 'onRight',
+};
+
+const fireDirectionalCallback = (callbacks: GamepadCallbacks, direction: Direction): void => {
+  callbacks[DIRECTION_CALLBACKS[direction]]?.();
+};
+
+interface RepeatState {
+  direction: Direction;
+  startTime: number;
+  timeoutId: ReturnType<typeof setTimeout> | null;
+}
+
+interface GamepadContextValue {
+  register: (id: string, callbacks: GamepadCallbacks) => void;
+  unregister: (id: string) => void;
+}
+
+const GamepadContext = createContext<GamepadContextValue | null>(null);
+
+// Counter for generating unique IDs
+let idCounter = 0;
+const generateId = (): string => `gamepad-handler-${++idCounter}`;
+
+interface GamepadProviderProps {
+  children: ReactNode;
+  enabled?: boolean;
+}
+
+/**
+ * GamepadProvider - Wraps the app to provide shared gamepad input
+ *
+ * Maintains a stack of registered handlers. The most recently registered
+ * handler (top of stack) receives all input events.
+ */
+export const GamepadProvider = ({ children, enabled = true }: GamepadProviderProps) => {
+  const managerRef = useRef<GamepadManager | null>(null);
+  const handlersRef = useRef<Map<string, GamepadCallbacks>>(new Map());
+  const stackRef = useRef<string[]>([]);
+  const repeatStateRef = useRef<RepeatState | null>(null);
+
+  // Get the currently active callbacks (top of stack)
+  const getActiveCallbacks = useCallback((): GamepadCallbacks | null => {
+    const stack = stackRef.current;
+    if (stack.length === 0) {return null;}
+    const activeId = stack[stack.length - 1];
+    return handlersRef.current.get(activeId) ?? null;
+  }, []);
+
+  // Calculate repeat interval based on hold duration
+  const getRepeatInterval = useCallback((heldDuration: number): number => {
+    if (heldDuration < INITIAL_DELAY_MS) {
+      return INITIAL_DELAY_MS - heldDuration;
+    }
+    const accelerationProgress = Math.min(
+      1,
+      (heldDuration - INITIAL_DELAY_MS) / ACCELERATION_TIME_MS
+    );
+    const easedProgress = accelerationProgress * accelerationProgress *
+      (EASE_CUBIC_FACTOR - EASE_CUBIC_DIVISOR * accelerationProgress);
+    return INITIAL_REPEAT_MS - (INITIAL_REPEAT_MS - MIN_REPEAT_MS) * easedProgress;
+  }, []);
+
+  // Fire callback for direction and schedule next repeat
+  const fireAndSchedule = useCallback((direction: Direction) => {
+    const state = repeatStateRef.current;
+    if (!state || state.direction !== direction) {return;}
+
+    const cb = getActiveCallbacks();
+    if (cb) {
+      fireDirectionalCallback(cb, direction);
+    }
+
+    const heldDuration = Date.now() - state.startTime;
+    const interval = getRepeatInterval(heldDuration);
+    state.timeoutId = setTimeout(() => fireAndSchedule(direction), interval);
+  }, [getActiveCallbacks, getRepeatInterval]);
+
+  // Start repeat for a direction
+  const startRepeat = useCallback((direction: Direction) => {
+    // Cancel any existing repeat
+    const state = repeatStateRef.current;
+    if (state?.timeoutId) {
+      clearTimeout(state.timeoutId);
+    }
+
+    // Fire callback immediately
+    const cb = getActiveCallbacks();
+    if (cb) {
+      fireDirectionalCallback(cb, direction);
+    }
+
+    // Start repeat state
+    repeatStateRef.current = {
+      direction,
+      startTime: Date.now(),
+      timeoutId: setTimeout(() => fireAndSchedule(direction), INITIAL_DELAY_MS),
+    };
+  }, [getActiveCallbacks, fireAndSchedule]);
+
+  // Stop any active repeat
+  const stopRepeat = useCallback(() => {
+    const state = repeatStateRef.current;
+    if (state?.timeoutId) {
+      clearTimeout(state.timeoutId);
+    }
+    repeatStateRef.current = null;
+  }, []);
+
+  // Map button to direction
+  const buttonToDirection = useCallback((button: StandardButton): Direction | null => {
+    switch (button) {
+      case StandardButton.Up:
+      case StandardButton.LeftStickUp:
+        return 'up';
+      case StandardButton.Down:
+      case StandardButton.LeftStickDown:
+        return 'down';
+      case StandardButton.Left:
+      case StandardButton.LeftStickLeft:
+        return 'left';
+      case StandardButton.Right:
+      case StandardButton.LeftStickRight:
+        return 'right';
+      default:
+        return null;
+    }
+  }, []);
+
+  // Initialize GamepadManager
+  useEffect(() => {
+    if (!enabled) {return;}
+
+    const manager = new GamepadManager();
+    managerRef.current = manager;
+
+    manager.onButtonChange = (_port, button, pressed) => {
+      const direction = buttonToDirection(button);
+
+      if (direction) {
+        if (pressed) {
+          startRepeat(direction);
+        } else if (repeatStateRef.current?.direction === direction) {
+          stopRepeat();
+        }
+      } else if (pressed) {
+        const cb = getActiveCallbacks();
+        if (cb) {
+          switch (button) {
+            case StandardButton.A:
+              cb.onConfirm?.();
+              break;
+            case StandardButton.B:
+              cb.onCancel?.();
+              break;
+            case StandardButton.Start:
+              cb.onStart?.();
+              break;
+            case StandardButton.Guide:
+              cb.onGuide?.();
+              break;
+          }
+        }
+      }
+    };
+
+    manager.start();
+
+    return () => {
+      stopRepeat();
+      manager.stop();
+      managerRef.current = null;
+    };
+  }, [enabled, buttonToDirection, startRepeat, stopRepeat, getActiveCallbacks]);
+
+  // Register a new handler (pushes to top of stack)
+  const register = useCallback((id: string, callbacks: GamepadCallbacks) => {
+    handlersRef.current.set(id, callbacks);
+    // Remove from stack if already present, then add to top
+    stackRef.current = stackRef.current.filter(i => i !== id);
+    stackRef.current.push(id);
+  }, []);
+
+  // Unregister a handler (removes from stack)
+  const unregister = useCallback((id: string) => {
+    handlersRef.current.delete(id);
+    stackRef.current = stackRef.current.filter(i => i !== id);
+    // Stop repeat if the active handler was removed
+    stopRepeat();
+  }, [stopRepeat]);
+
+  // Memoize context value to prevent unnecessary effect re-runs in consumers
+  const contextValue = useMemo<GamepadContextValue>(() => ({
+    register,
+    unregister,
+  }), [register, unregister]);
+
+  return (
+    <GamepadContext.Provider value={contextValue}>
+      {children}
+    </GamepadContext.Provider>
+  );
+};
+
+/**
+ * useGamepadContext - Hook for components to receive gamepad input
+ *
+ * Automatically registers on mount and unregisters on unmount.
+ * The most recently mounted component receives input (focus stack).
+ *
+ * @param callbacks Object with callback functions for different inputs
+ * @param enabled Whether this handler should be active (default: true)
+ */
+export const useGamepadContext = (callbacks: GamepadCallbacks, enabled: boolean = true): void => {
+  const context = useContext(GamepadContext);
+  const idRef = useRef<string>(generateId());
+  const callbacksRef = useRef(callbacks);
+
+  // Keep callbacks ref up to date
+  callbacksRef.current = callbacks;
+
+  useEffect(() => {
+    if (!context || !enabled) {return;}
+
+    const id = idRef.current;
+
+    // Create a wrapper that always calls the latest callbacks
+    const wrappedCallbacks: GamepadCallbacks = {
+      onUp: () => callbacksRef.current.onUp?.(),
+      onDown: () => callbacksRef.current.onDown?.(),
+      onLeft: () => callbacksRef.current.onLeft?.(),
+      onRight: () => callbacksRef.current.onRight?.(),
+      onConfirm: () => callbacksRef.current.onConfirm?.(),
+      onCancel: () => callbacksRef.current.onCancel?.(),
+      onStart: () => callbacksRef.current.onStart?.(),
+      onGuide: () => callbacksRef.current.onGuide?.(),
+    };
+
+    context.register(id, wrappedCallbacks);
+
+    return () => {
+      context.unregister(id);
+    };
+  }, [context, enabled]);
+};
+
+/**
+ * Note on usage:
+ *
+ * - Components rendered within the main App tree (RomBrowser, SettingsPanel,
+ *   ConfirmResetDialog, DirectoryInput) should use useGamepadContext.
+ *
+ * - Standalone dialogs that create their own Ink render() call (CoreSelector,
+ *   SaveStateDialog, CorruptedStateDialog) should continue using the original
+ *   useGamepad hook from useGamepad.ts, as they're outside the context tree.
+ */

package/src/ui/NativeDialog/index.tsx

@@ -0,0 +1,120 @@
+/**
+ * Native Dialog Utilities
+ *
+ * Renders Ink dialogs in native window mode using the shared NativeWindowManager
+ * streams. In terminal mode, renders to the standard terminal.
+ */
+import { render, type Instance } from 'ink';
+import type { ReactNode } from 'react';
+import { getWindowManager, isFensterAvailable } from '../../rendering/nativeUi';
+import { logger } from '../../utils/logger';
+import { cleanupInkInstance } from '../../utils/terminal';
+
+export interface DialogRenderOptions {
+  /** Whether to use native window mode (default: auto-detect from video driver) */
+  nativeMode?: boolean;
+  /** Dialog title (for the native window) */
+  title?: string;
+  /** Scale factor for native mode (null = auto-detect from display) */
+  scaleFactor?: number | null;
+}
+
+interface NativeDialogContext {
+  instance: Instance;
+  cleanup: () => void;
+}
+
+export const isNativeModeAvailable = (): boolean => {
+  return isFensterAvailable();
+};
+
+export const renderDialog = (
+  component: ReactNode,
+  options: DialogRenderOptions = {},
+): Promise<NativeDialogContext> => {
+  const useNative = options.nativeMode && isNativeModeAvailable();
+  if (useNative) {
+    return renderDialogNative(component, options);
+  }
+  const instance = render(component);
+  return Promise.resolve({
+    instance,
+    cleanup: () => {
+      // Terminal mode cleanup is handled by Ink
+    },
+  });
+};
+
+const renderDialogNative = (
+  component: ReactNode,
+  options: DialogRenderOptions,
+): Promise<NativeDialogContext> => {
+  return new Promise((resolve, reject) => {
+    try {
+      const windowManager = getWindowManager();
+      if (!windowManager.isInitialized()) {
+        windowManager.init({ title: options.title ?? 'emoemu', scaleFactor: options.scaleFactor });
+      }
+      windowManager.setMode('ui');
+
+      const stdin = windowManager.getStdin();
+      const stdout = windowManager.getStdout();
+      const window = windowManager.getWindow();
+
+      // Clear before rendering to avoid artifacts from the previous view.
+      windowManager.clearScreen();
+
+      const onClose = () => {
+        stdin.push('\x1b'); // Send escape to trigger exit
+      };
+      window.on('close', onClose);
+
+      logger.info('Native dialog mode enabled (shared window)', 'Native-UI');
+
+      const instance = render(component, {
+        exitOnCtrlC: false,
+        stdout: stdout as unknown as NodeJS.WriteStream,
+        stdin: stdin as unknown as NodeJS.ReadStream,
+      });
+
+      const cleanup = () => {
+        // Detach this dialog's close listener; DO NOT close the shared window.
+        window.off('close', onClose);
+        windowManager.getRenderer().reset();
+      };
+
+      resolve({ instance, cleanup });
+    } catch (error) {
+      logger.warn(`Native dialog failed: ${error}`, 'Native-UI');
+      reject(error);
+    }
+  });
+};
+
+export const showDialog = async (
+  component: ReactNode,
+  options: DialogRenderOptions = {},
+): Promise<Instance> => {
+  const { instance, cleanup } = await renderDialog(component, options);
+  void instance.waitUntilExit().then(() => {
+    cleanup();
+  });
+  return instance;
+};
+
+export const launchDialog = <T,>(
+  createComponent: (onChoice: (value: T) => void) => ReactNode,
+  defaultValue: T,
+  options: DialogRenderOptions = {},
+): Promise<T> => new Promise((resolve) => {
+  let choice = defaultValue;
+  const component = createComponent((value) => {
+    choice = value;
+  });
+  void renderDialog(component, options).then(({ instance, cleanup }) => {
+    void instance.waitUntilExit().then(() => {
+      cleanup();
+      cleanupInkInstance(instance, resolve, choice);
+    });
+  });
+});

package/src/ui/NetplayDisconnectedDialog/index.tsx

@@ -0,0 +1,93 @@
+/**
+ * Netplay Disconnected Dialog Component
+ *
+ * Shows when netplay connection is lost and offers reconnect option.
+ */
+
+import { Box, Text } from 'ink';
+import { DialogOptionsList } from '../DialogOptionsList';
+import { DialogContainer } from '../DialogContainer';
+import { useDialogNavigation } from '../hooks/useDialogNavigation';
+import { launchDialog, type DialogRenderOptions } from '../NativeDialog';
+
+export interface DisconnectInfo {
+  reason: string;
+  host?: string;
+  port?: number;
+}
+
+export type DisconnectChoice = 'reconnect' | 'menu' | 'exit';
+
+interface NetplayDisconnectedDialogProps {
+  info: DisconnectInfo;
+  onChoice: (choice: DisconnectChoice) => void;
+}
+
+const NetplayDisconnectedDialog = ({ info, onChoice }: NetplayDisconnectedDialogProps) => {
+  const options: { label: string; choice: DisconnectChoice; color: string }[] = [
+    { label: 'Try to Reconnect', choice: 'reconnect', color: 'green' },
+    { label: 'Back to Menu', choice: 'menu', color: 'gray' },
+  ];
+
+  const { selectedIndex } = useDialogNavigation({
+    itemCount: options.length,
+    onSelect: (index) => onChoice(options[index].choice),
+    onCancel: () => onChoice('menu'),
+    onCtrlC: () => onChoice('exit'),
+  });
+
+  // Format host info if available
+  const hostInfo = info.host ? `${info.host}${info.port ? `:${info.port}` : ''}` : null;
+
+  return (
+    <DialogContainer>
+      {(boxWidth) => (
+        <>
+          {/* Header */}
+          <Box
+            flexDirection="column"
+            borderStyle="round"
+            borderColor="red"
+            paddingX={2}
+            paddingY={1}
+            width={boxWidth}
+          >
+            <Box justifyContent="center" marginBottom={1}>
+              <Text bold color="red">{'\u26A0'} Disconnected</Text>
+            </Box>
+
+            {/* Host info if available */}
+            {hostInfo && (
+              <Box marginBottom={1}>
+                <Text color="gray">Host: </Text>
+                <Text color="white">{hostInfo}</Text>
+              </Box>
+            )}
+
+            {/* Disconnect reason */}
+            <Box>
+              <Text color="gray">Reason: </Text>
+              <Text color="yellow">{info.reason}</Text>
+            </Box>
+          </Box>
+
+          <DialogOptionsList options={options} selectedIndex={selectedIndex} boxWidth={boxWidth} escLabel="Back" />
+        </>
+      )}
+    </DialogContainer>
+  );
+};
+
+/**
+ * Show the netplay disconnected dialog and get user's choice
+ */
+export const showNetplayDisconnectedDialog = (
+  info: DisconnectInfo,
+  options: DialogRenderOptions = {}
+): Promise<DisconnectChoice> => launchDialog<DisconnectChoice>(
+  (onChoice) => <NetplayDisconnectedDialog info={info} onChoice={onChoice} />,
+  'menu',
+  { ...options, title: options.title ?? 'emoemu - Disconnected' },
+);
+
+export default NetplayDisconnectedDialog;

package/src/ui/NetplayPauseMenu/consts.ts

@@ -0,0 +1,2 @@
+/** Minimum width for the pause menu dialog box */
+export const PAUSE_MENU_MIN_WIDTH = 40;

package/src/ui/NetplayPauseMenu/index.tsx

@@ -0,0 +1,97 @@
+/**
+ * Netplay Pause Menu Component
+ *
+ * Shows when ESC is pressed during netplay connection/gameplay.
+ * Allows user to resume or disconnect from the session.
+ */
+
+import { Box, Text } from 'ink';
+import { DialogOptionsList } from '../DialogOptionsList';
+import { DialogContainer } from '../DialogContainer';
+import { useDialogNavigation } from '../hooks/useDialogNavigation';
+import { launchDialog, type DialogRenderOptions } from '../NativeDialog';
+import { PAUSE_MENU_MIN_WIDTH } from './consts';
+
+export * from './consts';
+
+export type PauseMenuChoice = 'resume' | 'disconnect';
+
+interface NetplayPauseMenuProps {
+  gameName?: string;
+  isConnecting?: boolean;
+  onChoice: (choice: PauseMenuChoice) => void;
+}
+
+const NetplayPauseMenu = ({ gameName, isConnecting, onChoice }: NetplayPauseMenuProps) => {
+  const options: { label: string; choice: PauseMenuChoice; color: string }[] = [
+    { label: isConnecting ? 'Continue Connecting' : 'Resume Game', choice: 'resume', color: 'green' },
+    { label: 'Back to Browser', choice: 'disconnect', color: 'yellow' },
+  ];
+
+  const { selectedIndex } = useDialogNavigation({
+    itemCount: options.length,
+    onSelect: (index) => onChoice(options[index].choice),
+    onCancel: () => onChoice('resume'),
+    onCtrlC: () => onChoice('disconnect'),
+  });
+
+  return (
+    <DialogContainer minWidth={PAUSE_MENU_MIN_WIDTH}>
+      {(boxWidth) => (
+        <>
+          {/* Header */}
+          <Box
+            flexDirection="column"
+            borderStyle="round"
+            borderColor="cyan"
+            paddingX={2}
+            paddingY={1}
+            width={boxWidth}
+          >
+            <Box justifyContent="center" marginBottom={1}>
+              <Text bold color="cyan">{'\u23F8'} Paused</Text>
+            </Box>
+
+            {/* Game name if available */}
+            {gameName && (
+              <Box justifyContent="center">
+                <Text color="white">{gameName}</Text>
+              </Box>
+            )}
+
+            {/* Status */}
+            <Box justifyContent="center" marginTop={1}>
+              <Text color="gray">
+                {isConnecting ? 'Connecting to netplay session...' : 'Netplay session active'}
+              </Text>
+            </Box>
+          </Box>
+
+          <DialogOptionsList options={options} selectedIndex={selectedIndex} boxWidth={boxWidth} prompt={false} escLabel="Resume" />
+        </>
+      )}
+    </DialogContainer>
+  );
+};
+
+export interface PauseMenuOptions extends DialogRenderOptions {
+  gameName?: string;
+  isConnecting?: boolean;
+}
+
+/**
+ * Show the netplay pause menu and get user's choice
+ */
+export const showNetplayPauseMenu = (options: PauseMenuOptions = {}): Promise<PauseMenuChoice> => launchDialog<PauseMenuChoice>(
+  (onChoice) => (
+    <NetplayPauseMenu
+      gameName={options.gameName}
+      isConnecting={options.isConnecting}
+      onChoice={onChoice}
+    />
+  ),
+  'resume',
+  { nativeMode: options.nativeMode, title: options.title ?? 'emoemu - Paused' },
+);
+
+export default NetplayPauseMenu;

package/src/ui/RomBrowser/NetplayPanel/consts.ts

@@ -0,0 +1,24 @@
+// Port number constants
+export const PORT_MAX = 65535;
+export const DECIMAL_BASE = 10;
+
+// Input delay options for netplay
+export const inputDelayOptions = [
+  { value: 0, label: '0 (Lowest latency)' },
+  { value: 1, label: '1' },
+  { value: 2, label: '2 (Recommended)' },
+  { value: 3, label: '3' },
+  { value: 4, label: '4' },
+  { value: 5, label: '5' },
+  { value: 6, label: '6' },
+  { value: 8, label: '8 (High latency)' },
+];
+
+/** Delay before sending first discovery query (ms) */
+export const DISCOVERY_INITIAL_DELAY_MS = 100;
+
+/** Interval for sending discovery queries (ms) */
+export const DISCOVERY_QUERY_INTERVAL_MS = 2000;
+
+/** How long hosts are considered "alive" after last seen (ms) */
+export const DISCOVERY_HOST_MAX_AGE_MS = 10000;