@ksteinstudio/game-controller 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,272 @@
+interface Position {
+    x: number;
+    y: number;
+}
+interface ElementStyle {
+    color?: string;
+    opacity?: number;
+    scale?: number;
+    borderColor?: string;
+    borderWidth?: number;
+    fontSize?: number;
+    fontFamily?: string;
+}
+interface BaseElement {
+    id: string;
+    type: 'button' | 'joystick' | 'dpad' | 'slider';
+    position: Position;
+    zIndex: number;
+    style?: ElementStyle;
+}
+interface ButtonElement extends BaseElement {
+    type: 'button';
+    label?: string;
+    shape: 'circle' | 'square';
+    size: number;
+    actionKey: string;
+}
+interface JoystickElement extends BaseElement {
+    type: 'joystick';
+    radius: number;
+    innerStickSize: number;
+    deadzone: number;
+    mode: 'static' | 'floating';
+}
+interface DpadElement extends BaseElement {
+    type: 'dpad';
+    size: number;
+    actionKeys?: {
+        up: string;
+        down: string;
+        left: string;
+        right: string;
+    };
+}
+interface SliderElement extends BaseElement {
+    type: 'slider';
+    length: number;
+    orientation: 'horizontal' | 'vertical';
+    actionKey: string;
+}
+type ControllerElement = ButtonElement | JoystickElement | DpadElement | SliderElement;
+interface CanvasSettings {
+    aspectRatio: string;
+    backgroundColor?: string;
+    gridDensity?: number;
+}
+interface ControllerConfig {
+    version: string;
+    name: string;
+    canvas: CanvasSettings;
+    elements: ControllerElement[];
+}
+
+declare const enum MessageType {
+    CONFIG_LOAD = "CONFIG_LOAD",
+    INPUT_START = "INPUT_START",
+    INPUT_END = "INPUT_END",
+    JOYSTICK_MOVE = "JOYSTICK_MOVE",
+    DPAD_PRESS = "DPAD_PRESS",
+    DPAD_RELEASE = "DPAD_RELEASE",
+    SLIDER_CHANGE = "SLIDER_CHANGE",
+    RENDERER_READY = "RENDERER_READY",
+    CONFIG_UPDATE = "CONFIG_UPDATE"
+}
+interface Vector2D {
+    x: number;
+    y: number;
+}
+interface ConfigLoadMessage {
+    type: MessageType.CONFIG_LOAD;
+    payload: ControllerConfig;
+}
+interface InputStartMessage {
+    type: MessageType.INPUT_START;
+    payload: {
+        elementId: string;
+        actionKey: string;
+        timestamp: number;
+    };
+}
+interface InputEndMessage {
+    type: MessageType.INPUT_END;
+    payload: {
+        elementId: string;
+        actionKey: string;
+        timestamp: number;
+    };
+}
+interface JoystickMoveMessage {
+    type: MessageType.JOYSTICK_MOVE;
+    payload: {
+        elementId: string;
+        vector: Vector2D;
+        angle: number;
+        magnitude: number;
+        timestamp: number;
+    };
+}
+interface DpadPressMessage {
+    type: MessageType.DPAD_PRESS;
+    payload: {
+        elementId: string;
+        direction: 'up' | 'down' | 'left' | 'right';
+        actionKey: string;
+        timestamp: number;
+    };
+}
+interface DpadReleaseMessage {
+    type: MessageType.DPAD_RELEASE;
+    payload: {
+        elementId: string;
+        direction: 'up' | 'down' | 'left' | 'right';
+        actionKey: string;
+        timestamp: number;
+    };
+}
+interface SliderChangeMessage {
+    type: MessageType.SLIDER_CHANGE;
+    payload: {
+        elementId: string;
+        actionKey: string;
+        value: number;
+        timestamp: number;
+    };
+}
+interface RendererReadyMessage {
+    type: MessageType.RENDERER_READY;
+}
+interface ConfigUpdateMessage {
+    type: MessageType.CONFIG_UPDATE;
+    payload: ControllerConfig;
+}
+type ControllerMessage = ConfigLoadMessage | InputStartMessage | InputEndMessage | JoystickMoveMessage | DpadPressMessage | DpadReleaseMessage | SliderChangeMessage | RendererReadyMessage | ConfigUpdateMessage;
+type InputEvent = InputStartMessage | InputEndMessage | JoystickMoveMessage | DpadPressMessage | DpadReleaseMessage | SliderChangeMessage;
+
+type MessageHandler = (message: ControllerMessage) => void;
+declare function createParentBridge(iframe: HTMLIFrameElement): {
+    sendConfig(config: ControllerConfig): void;
+    updateConfig(config: ControllerConfig): void;
+    onMessage(handler: MessageHandler): () => boolean;
+    onInput(handler: (event: InputEvent) => void): () => boolean;
+    destroy(): void;
+};
+declare function createIframeBridge(): {
+    emitControllerEvent(message: ControllerMessage): void;
+    emitInputStart(elementId: string, actionKey: string): void;
+    emitInputEnd(elementId: string, actionKey: string): void;
+    emitJoystickMove(elementId: string, x: number, y: number, angle: number, magnitude: number): void;
+    emitDpadPress(elementId: string, direction: "up" | "down" | "left" | "right", actionKey: string): void;
+    emitDpadRelease(elementId: string, direction: "up" | "down" | "left" | "right", actionKey: string): void;
+    emitSliderChange(elementId: string, actionKey: string, value: number): void;
+    signalReady(): void;
+    onMessage(handler: MessageHandler): () => boolean;
+    destroy(): void;
+};
+type ParentBridge = ReturnType<typeof createParentBridge>;
+type IframeBridge = ReturnType<typeof createIframeBridge>;
+
+declare function snapToGrid(value: number, gridDensity: number): number;
+declare function snapPositionToGrid(position: Position, gridDensity: number): Position;
+declare function pixelToPercentage(pixelValue: number, containerSize: number): number;
+declare function percentageToPixel(percentageValue: number, containerSize: number): number;
+declare function convertPixelPositionToPercentage(pixelX: number, pixelY: number, containerWidth: number, containerHeight: number): Position;
+declare function convertPercentagePositionToPixel(position: Position, containerWidth: number, containerHeight: number): {
+    x: number;
+    y: number;
+};
+declare function clampPercentage(value: number): number;
+declare function clamp(value: number, min: number, max: number): number;
+declare function distance(a: Position, b: Position): number;
+declare function normalizeVector(x: number, y: number): {
+    x: number;
+    y: number;
+    magnitude: number;
+};
+declare function angleFromVector(x: number, y: number): number;
+declare function applyDeadzone(value: number, deadzone: number): number;
+declare function applyDeadzoneToVector(x: number, y: number, deadzone: number): {
+    x: number;
+    y: number;
+};
+declare function parseAspectRatio(aspectRatio: string): {
+    width: number;
+    height: number;
+};
+declare function calculateCanvasDimensions(containerWidth: number, containerHeight: number, aspectRatio: string): {
+    width: number;
+    height: number;
+    offsetX: number;
+    offsetY: number;
+};
+
+interface AlignmentGuide {
+    axis: 'horizontal' | 'vertical';
+    position: number;
+    sourceElementId: string;
+    targetElementId: string;
+}
+interface SnapResult {
+    position: Position;
+    guides: AlignmentGuide[];
+}
+declare function findAlignmentGuides(draggedElement: ControllerElement, dragPosition: Position, otherElements: ControllerElement[], threshold?: number): SnapResult;
+declare function generateGridLines(gridDensity: number): number[];
+
+interface ButtonRenderContext {
+    element: ButtonElement;
+    canvasWidth: number;
+    canvasHeight: number;
+    onInputStart: (elementId: string, actionKey: string) => void;
+    onInputEnd: (elementId: string, actionKey: string) => void;
+}
+declare function createButtonElement(context: ButtonRenderContext): HTMLElement;
+declare function updateButtonElement(container: HTMLElement, element: ButtonElement, canvasWidth: number, canvasHeight: number): void;
+
+interface JoystickRenderContext {
+    element: JoystickElement;
+    canvasWidth: number;
+    canvasHeight: number;
+    onJoystickMove: (elementId: string, vector: Vector2D, angle: number, magnitude: number) => void;
+}
+declare function createJoystickElement(context: JoystickRenderContext): HTMLElement;
+declare function updateJoystickElement(container: HTMLElement, element: JoystickElement, canvasWidth: number, canvasHeight: number): void;
+
+interface DpadRenderContext {
+    element: DpadElement;
+    canvasWidth: number;
+    canvasHeight: number;
+    onDpadPress: (elementId: string, direction: 'up' | 'down' | 'left' | 'right', actionKey: string) => void;
+    onDpadRelease: (elementId: string, direction: 'up' | 'down' | 'left' | 'right', actionKey: string) => void;
+}
+declare function createDpadElement(context: DpadRenderContext): HTMLElement;
+declare function updateDpadElement(container: HTMLElement, element: DpadElement, canvasWidth: number, canvasHeight: number): void;
+
+interface RendererState {
+    config: ControllerConfig | null;
+    canvas: HTMLElement | null;
+    elementMap: Map<string, HTMLElement>;
+    bridge: IframeBridge;
+    resizeObserver: ResizeObserver | null;
+}
+declare function initializeRenderer(rootElement: HTMLElement): RendererState;
+declare function renderControllerFromConfig(rootElement: HTMLElement, config: ControllerConfig): RendererState;
+declare function destroyRenderer(state: RendererState): void;
+
+interface ControllerSDKOptions {
+    config: ControllerConfig;
+    container: HTMLElement;
+    iframeSrc?: string;
+    onInput?: (event: InputEvent) => void;
+    onReady?: () => void;
+    width?: string;
+    height?: string;
+}
+interface ControllerSDKInstance {
+    updateConfig: (config: ControllerConfig) => void;
+    destroy: () => void;
+    getIframe: () => HTMLIFrameElement;
+}
+declare function createControllerSDK(options: ControllerSDKOptions): ControllerSDKInstance;
+
+export { type AlignmentGuide, type BaseElement, type ButtonElement, type ButtonRenderContext, type CanvasSettings, type ConfigLoadMessage, type ConfigUpdateMessage, type ControllerConfig, type ControllerElement, type ControllerMessage, type ControllerSDKInstance, type ControllerSDKOptions, type DpadElement, type DpadPressMessage, type DpadReleaseMessage, type DpadRenderContext, type ElementStyle, type IframeBridge, type InputEndMessage, type InputEvent, type InputStartMessage, type JoystickElement, type JoystickMoveMessage, type JoystickRenderContext, MessageType, type ParentBridge, type Position, type RendererReadyMessage, type SliderChangeMessage, type SliderElement, type SnapResult, type Vector2D, angleFromVector, applyDeadzone, applyDeadzoneToVector, calculateCanvasDimensions, clamp, clampPercentage, convertPercentagePositionToPixel, convertPixelPositionToPercentage, createButtonElement, createControllerSDK, createDpadElement, createIframeBridge, createJoystickElement, createParentBridge, destroyRenderer, distance, findAlignmentGuides, generateGridLines, initializeRenderer, normalizeVector, parseAspectRatio, percentageToPixel, pixelToPercentage, renderControllerFromConfig, snapPositionToGrid, snapToGrid, updateButtonElement, updateDpadElement, updateJoystickElement };