Added hooks description

README.md

@@ -54,12 +54,12 @@ ui.destroy()
 .
 
 ## Hooks
-#### Get game in component
+#### Get game instance
 ```ts
 useGame(): Phaser.Game
 ```
 
-#### Get scene in component
+#### Get scene
   * Get scene in which interface was created
 ```ts
 useCurrentScene(): Phaser.Game
@@ -97,27 +97,22 @@ useRelativeScale(params: {
 }): React.MutableRefObject<HTMLElement>
 ```
 
-#### Get source texture image
+#### Get texture source image
 ```ts
-useTexture(params: {
-  name: string, 
-  frame?: string | number
-}): HTMLImageElement
+useTexture(key: string): HTMLImageElement
 ```
 
 #### Get actual media query result
 ```ts
-useMatchMedia(
-  query: string
-): boolean
+useMatchMedia(query: string): boolean
 ```
 
-#### Check platform is mobile
+#### Check if platform is mobile
 ```ts
 useMobilePlatform(): boolean
 ```
 
-#### Add adaptive click event for element
+#### Use adaptive click event on target element
 ```ts
 useClick(
   ref: React.RefObject,
@@ -127,7 +122,7 @@ useClick(
 )
 ```
 
-#### Add adaptive click event outside element
+#### Use adaptive click event outside target element
 ```ts
 useClickOutside(
   ref: React.RefObject,
@@ -136,7 +131,7 @@ useClickOutside(
 )
 ```
 
-#### Add adaptive interaction flow
+#### Use adaptive interaction flow
 ```ts
 useInteraction(
   ref: React.RefObject,

dist/hooks/use-click-outside.d.ts

@@ -1,2 +1,9 @@
 import React from 'react';
+/**
+ * Use adaptive click event outside target element.
+ *
+ * @param ref - Target ref
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
+ */
 export declare function useClickOutside(ref: React.RefObject<HTMLElement>, callback: () => void, depends: any[]): void;

dist/hooks/use-click.d.ts

@@ -1,2 +1,10 @@
 import React from 'react';
+/**
+ * Use adaptive click event on target element.
+ *
+ * @param ref - Target ref
+ * @param type - Event type
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
+ */
 export declare function useClick(ref: React.RefObject<HTMLElement | Document>, type: 'up' | 'down', callback: (event: MouseEvent | TouchEvent) => void, depends: any[]): void;

dist/hooks/use-current-scene.d.ts

@@ -1,2 +1,5 @@
 import type Phaser from 'phaser';
+/**
+ * Get scene in which interface was created.
+ */
 export declare function useCurrentScene<T extends Phaser.Scene>(): T;

dist/hooks/use-game.d.ts

@@ -1,2 +1,5 @@
 import type Phaser from 'phaser';
+/**
+ * Get game instance.
+ */
 export declare function useGame<T extends Phaser.Game>(): T;

dist/hooks/use-interaction.d.ts

@@ -1,12 +1,16 @@
 /// <reference types="react" />
 /**
- * Using adaptive interaction flow.
+ * Use adaptive interaction flow.
  *
  * Desktop:
  * --[ mouse enter (activate) ] --> [ click (use) ] --> [ mouse leave (disactivate) ]
  *
  * Mobile:
  * --[ click (activate) ] --> [ second click (use) ] --> [ auto disactivate ]
  * --[ click (activate) ] --> [ outside click (disactivate) ]
+ *
+ * @param ref - Target ref
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
  */
 export declare function useInteraction(ref: React.RefObject<HTMLElement>, callback?: () => void, depends?: any[]): boolean;

dist/hooks/use-match-media.d.ts

@@ -1 +1,6 @@
+/**
+ * Get actual media query result.
+ *
+ * @param query - Media query
+ */
 export declare function useMatchMedia(query: string): any;

dist/hooks/use-mobile-platform.d.ts

@@ -1 +1,4 @@
+/**
+ * Check if platform is mobile.
+ */
 export declare function useMobilePlatform(): boolean;

dist/hooks/use-relative-position.d.ts

@@ -1,3 +1,11 @@
 /// <reference types="react" />
 import { RelativePositionProps } from '../types/relative-position';
+/**
+ * Position relative to camera.
+ *
+ * @param props
+ * @param props.x - World position X
+ * @param props.y - World position Y
+ * @param props.camera - Camera
+ */
 export declare function useRelativePosition<T extends HTMLElement>({ x, y, camera, }: RelativePositionProps): import("react").MutableRefObject<T>;

dist/hooks/use-relative-scale.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
 import { RelativeScaleProps } from '../types/relative-scale';
+/**
+ * Scale relative to canvas size.
+ *
+ * @param props
+ * @param props.target - Target value
+ * @param props.min - Min scale
+ * @param props.max - Max scale
+ * @param props.round - Rounding
+ */
 export declare function useRelativeScale<T extends HTMLElement>({ target, min, max, round, }: RelativeScaleProps): import("react").MutableRefObject<T>;

dist/hooks/use-scene-update.d.ts

@@ -1,2 +1,9 @@
 import type Phaser from 'phaser';
+/**
+ * Subscribe to scene update.
+ *
+ * @param scene - Scene
+ * @param callback - Update callback
+ * @param depends - Callback dependencies
+ */
 export declare function useSceneUpdate(scene: Phaser.Scene, callback: () => void, depends: any[]): void;

dist/hooks/use-scene.d.ts

@@ -1,2 +1,7 @@
 import type Phaser from 'phaser';
+/**
+ * Get scene by key.
+ *
+ * @param key - Scene key
+ */
 export declare function useScene<T extends Phaser.Scene>(key: string): T;

dist/hooks/use-texture.d.ts

@@ -1 +1,6 @@
-export declare function useTexture(name: string): HTMLImageElement;
+/**
+ * Get texture source image.
+ *
+ * @param key - Texture key
+ */
+export declare function useTexture(key: string): HTMLImageElement;

src/hooks/use-click-outside.ts

@@ -1,6 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
 import { useMobilePlatform } from './use-mobile-platform';
 
+/**
+ * Use adaptive click event outside target element.
+ *
+ * @param ref - Target ref
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
+ */
 export function useClickOutside(
   ref: React.RefObject<HTMLElement>,
   callback: () => void,

src/hooks/use-click.ts

@@ -1,6 +1,14 @@
 import React, { useCallback, useEffect } from 'react';
 import { useMobilePlatform } from './use-mobile-platform';
 
+/**
+ * Use adaptive click event on target element.
+ *
+ * @param ref - Target ref
+ * @param type - Event type
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
+ */
 export function useClick(
   ref: React.RefObject<HTMLElement | Document>,
   type: 'up' | 'down',
@@ -9,14 +17,11 @@ export function useClick(
 ) {
   const isMobile = useMobilePlatform();
 
-  const onClick = useCallback(
-    (event: MouseEvent | TouchEvent) => {
-      callback(event);
-      event.stopPropagation();
-      event.preventDefault();
-    },
-    depends,
-  );
+  const onClick = useCallback((event: MouseEvent | TouchEvent) => {
+    callback(event);
+    event.stopPropagation();
+    event.preventDefault();
+  }, depends);
 
   useEffect(() => {
     const element = ref.current;

src/hooks/use-current-scene.ts

@@ -2,6 +2,9 @@ import type Phaser from 'phaser';
 import { useContext } from 'react';
 import { SceneContext } from '../context/scene';
 
+/**
+ * Get scene in which interface was created.
+ */
 export function useCurrentScene<T extends Phaser.Scene>(): T {
   const scene = useContext(SceneContext) as T;
 

src/hooks/use-game.ts

@@ -2,6 +2,9 @@ import type Phaser from 'phaser';
 import { useContext } from 'react';
 import { SceneContext } from '../context/scene';
 
+/**
+ * Get game instance.
+ */
 export function useGame<T extends Phaser.Game>(): T {
   const scene = useContext(SceneContext);
 

src/hooks/use-interaction.ts

@@ -4,14 +4,18 @@ import { useClick } from './use-click';
 import { useClickOutside } from './use-click-outside';
 
 /**
- * Using adaptive interaction flow.
+ * Use adaptive interaction flow.
  *
  * Desktop:
  * --[ mouse enter (activate) ] --> [ click (use) ] --> [ mouse leave (disactivate) ]
  *
  * Mobile:
  * --[ click (activate) ] --> [ second click (use) ] --> [ auto disactivate ]
  * --[ click (activate) ] --> [ outside click (disactivate) ]
+ *
+ * @param ref - Target ref
+ * @param callback - Event callback
+ * @param depends - Callback dependencies
  */
 export function useInteraction(
   ref: React.RefObject<HTMLElement>,

src/hooks/use-match-media.ts

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
 
+/**
+ * Get actual media query result.
+ *
+ * @param query - Media query
+ */
 export function useMatchMedia(
   query: string,
 ) {

src/hooks/use-mobile-platform.ts

@@ -1,5 +1,8 @@
 import { useGame } from './use-game';
 
+/**
+ * Check if platform is mobile.
+ */
 export function useMobilePlatform() {
   const game = useGame();
 

src/hooks/use-relative-position.ts

@@ -3,6 +3,14 @@ import { useCurrentScene } from './use-current-scene';
 import { useSceneUpdate } from './use-scene-update';
 import { RelativePositionProps } from '../types/relative-position';
 
+/**
+ * Position relative to camera.
+ *
+ * @param props
+ * @param props.x - World position X
+ * @param props.y - World position Y
+ * @param props.camera - Camera
+ */
 export function useRelativePosition<T extends HTMLElement>({
   x,
   y,
@@ -13,20 +21,16 @@ export function useRelativePosition<T extends HTMLElement>({
 
   const refElement = useRef<T>(null);
 
-  useSceneUpdate(
-    currentScene,
-    () => {
-      if (!refElement.current) {
-        return;
-      }
+  useSceneUpdate(currentScene, () => {
+    if (!refElement.current) {
+      return;
+    }
 
-      const rx = Math.round((x - relativeCamera.worldView.x) * relativeCamera.zoom);
-      const ry = Math.round((y - relativeCamera.worldView.y) * relativeCamera.zoom);
+    const rx = Math.round((x - relativeCamera.worldView.x) * relativeCamera.zoom);
+    const ry = Math.round((y - relativeCamera.worldView.y) * relativeCamera.zoom);
 
-      refElement.current.style.transform = `translate(${rx}px, ${ry}px)`;
-    },
-    [x, y, relativeCamera],
-  );
+    refElement.current.style.transform = `translate(${rx}px, ${ry}px)`;
+  }, [x, y, relativeCamera]);
 
   return refElement;
 }

src/hooks/use-relative-scale.ts

@@ -2,6 +2,15 @@ import { useCallback, useEffect, useRef } from 'react';
 import { useGame } from './use-game';
 import { RelativeScaleProps } from '../types/relative-scale';
 
+/**
+ * Scale relative to canvas size.
+ *
+ * @param props
+ * @param props.target - Target value
+ * @param props.min - Min scale
+ * @param props.max - Max scale
+ * @param props.round - Rounding
+ */
 export function useRelativeScale<T extends HTMLElement>({
   target,
   min,

src/hooks/use-scene-update.ts

@@ -1,6 +1,13 @@
 import type Phaser from 'phaser';
 import { useEffect } from 'react';
 
+/**
+ * Subscribe to scene update.
+ *
+ * @param scene - Scene
+ * @param callback - Update callback
+ * @param depends - Callback dependencies
+ */
 export function useSceneUpdate(
   scene: Phaser.Scene,
   callback: () => void,

src/hooks/use-scene.ts

@@ -2,6 +2,11 @@ import type Phaser from 'phaser';
 import { useMemo } from 'react';
 import { useGame } from './use-game';
 
+/**
+ * Get scene by key.
+ *
+ * @param key - Scene key
+ */
 export function useScene<T extends Phaser.Scene>(key: string): T {
   const game = useGame();
 

src/hooks/use-texture.ts

@@ -1,12 +1,17 @@
 import { useMemo } from 'react';
 import { useGame } from './use-game';
 
-export function useTexture(name: string) {
+/**
+ * Get texture source image.
+ *
+ * @param key - Texture key
+ */
+export function useTexture(key: string) {
   const game = useGame();
 
   return useMemo(() => {
-    const texture = game.textures.get(name);
+    const texture = game.textures.get(key);
 
     return texture.getSourceImage() as HTMLImageElement;
-  }, [name]);
+  }, [key]);
 }