diff --git a/apps/client/src/scenes/game/input/joystick/common/index.ts b/apps/client/src/scenes/game/input/joystick/common/index.ts index d291850..b13792d 100644 --- a/apps/client/src/scenes/game/input/joystick/common/index.ts +++ b/apps/client/src/scenes/game/input/joystick/common/index.ts @@ -4,7 +4,15 @@ * 呼び出し側のimport先を共通化する */ /** 共有型を再公開する */ -export type { NormalizedInput, Point } from './joystick.types'; +export type { + JoystickPointerEvent, + NormalizedInput, + Point, + UseJoystickControllerProps, + UseJoystickControllerReturn, + UseJoystickStateProps, + UseJoystickStateReturn, +} from './joystick.types'; /** 共有定数を再公開する */ export { MAX_DIST } from './joystick.constants'; diff --git a/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts b/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts index d55577e..bfbd55f 100644 --- a/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts +++ b/apps/client/src/scenes/game/input/joystick/common/joystick.types.ts @@ -4,8 +4,46 @@ * 座標や入力の共通表現を定義する */ +import type React from 'react'; + /** 2D座標の簡易型 */ export type Point = { x: number; y: number }; /** 正規化された入力ベクトル */ export type NormalizedInput = { x: number; y: number }; + +/** ジョイスティックで扱うポインター入力イベント型 */ +export type JoystickPointerEvent = React.TouchEvent | React.MouseEvent; + +/** useJoystickState に渡す設定型 */ +export type UseJoystickStateProps = { + maxDist?: number; +}; + +/** useJoystickState が返すUI向けの状態とハンドラ型 */ +export type UseJoystickStateReturn = { + isMoving: boolean; + center: Point; + knobOffset: Point; + radius: number; + handleStart: (e: JoystickPointerEvent) => void; + handleMove: (e: JoystickPointerEvent) => NormalizedInput | null; + handleEnd: () => void; +}; + +/** useJoystickController に渡す入力設定型 */ +export type UseJoystickControllerProps = { + onInput: (moveX: number, moveY: number) => void; + maxDist?: number; +}; + +/** useJoystickController が返す描画状態と入力ハンドラ型 */ +export type UseJoystickControllerReturn = { + isMoving: boolean; + center: Point; + knobOffset: Point; + radius: number; + handleStart: (e: JoystickPointerEvent) => void; + handleMove: (e: JoystickPointerEvent) => void; + handleEnd: () => void; +}; diff --git a/apps/client/src/scenes/game/input/joystick/useJoystickController.ts b/apps/client/src/scenes/game/input/joystick/useJoystickController.ts index 9d75cd8..c371f7e 100644 --- a/apps/client/src/scenes/game/input/joystick/useJoystickController.ts +++ b/apps/client/src/scenes/game/input/joystick/useJoystickController.ts @@ -4,29 +4,19 @@ * useJoystickState の出力を受けて onInput 通知と終了時リセット通知を統一する */ import { useCallback } from 'react'; -import type React from 'react'; -import type { NormalizedInput, Point } from './common'; +import type { + JoystickPointerEvent, + NormalizedInput, + UseJoystickControllerProps, + UseJoystickControllerReturn, +} from './common'; import { useJoystickState } from './useJoystickState'; -/** フックに渡す入力設定 */ -type Props = { - onInput: (moveX: number, moveY: number) => void; - maxDist?: number; -}; - -/** フックが返す描画状態と入力ハンドラ */ -type UseJoystickControllerReturn = { - isMoving: boolean; - center: Point; - knobOffset: Point; - radius: number; - handleStart: (e: React.TouchEvent | React.MouseEvent) => void; - handleMove: (e: React.TouchEvent | React.MouseEvent) => void; - handleEnd: () => void; -}; - /** 入力イベントと通知処理を仲介するフック */ -export const useJoystickController = ({ onInput, maxDist }: Props): UseJoystickControllerReturn => { +export const useJoystickController = ({ + onInput, + maxDist, +}: UseJoystickControllerProps): UseJoystickControllerReturn => { const { isMoving, center, @@ -45,7 +35,7 @@ ); const handleMove = useCallback( - (e: React.TouchEvent | React.MouseEvent) => { + (e: JoystickPointerEvent) => { const normalized = baseHandleMove(e); if (!normalized) return; emitInput(normalized); diff --git a/apps/client/src/scenes/game/input/joystick/useJoystickState.ts b/apps/client/src/scenes/game/input/joystick/useJoystickState.ts index d149788..261a127 100644 --- a/apps/client/src/scenes/game/input/joystick/useJoystickState.ts +++ b/apps/client/src/scenes/game/input/joystick/useJoystickState.ts @@ -4,29 +4,17 @@ * UI描画に必要な中心点，ノブ位置，半径を保持する */ import { useCallback, useState } from 'react'; -import type React from 'react'; import { MAX_DIST } from './common'; import { computeJoystick } from './JoystickModel'; -import type { NormalizedInput, Point } from './common'; - -/** フックに渡す設定 */ -type Props = { - maxDist?: number; -}; - -/** フックが返すUI向けの状態とハンドラ */ -type UseJoystickStateReturn = { - isMoving: boolean; - center: Point; - knobOffset: Point; - radius: number; - handleStart: (e: React.TouchEvent | React.MouseEvent) => void; - handleMove: (e: React.TouchEvent | React.MouseEvent) => NormalizedInput | null; - handleEnd: () => void; -}; +import type { + JoystickPointerEvent, + Point, + UseJoystickStateProps, + UseJoystickStateReturn, +} from './common'; /** タッチとマウスからクライアント座標を共通化して取得する */ -const getClientPoint = (e: React.TouchEvent | React.MouseEvent): Point | null => { +const getClientPoint = (e: JoystickPointerEvent): Point | null => { if ('touches' in e) { const touch = e.touches[0]; if (!touch) return null; @@ -37,14 +25,14 @@ }; /** ジョイスティック入力状態と入力ハンドラを提供する */ -export const useJoystickState = ({ maxDist }: Props): UseJoystickStateReturn => { +export const useJoystickState = ({ maxDist }: UseJoystickStateProps): UseJoystickStateReturn => { const [isMoving, setIsMoving] = useState(false); const [center, setCenter] = useState({ x: 0, y: 0 }); const [knobOffset, setKnobOffset] = useState({ x: 0, y: 0 }); const radius = maxDist ?? MAX_DIST; // 入力開始時の基準座標をセットする - const handleStart = useCallback((e: React.TouchEvent | React.MouseEvent) => { + const handleStart = useCallback((e: JoystickPointerEvent) => { const point = getClientPoint(e); if (!point) return; @@ -55,7 +43,7 @@ // 入力座標からベクトルを計算し，半径でクランプして正規化する const handleMove = useCallback( - (e: React.TouchEvent | React.MouseEvent) => { + (e: JoystickPointerEvent) => { if (!isMoving) return null; const point = getClientPoint(e); if (!point) return null;