diff --git a/package.json b/package.json index 9586f44..d9661db 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-super-tilemap", "license": "MIT", - "version": "0.0.1", + "version": "0.0.2", "private": false, "description": "React implementation of a low-level 2D tilemap board optimized for high-performance rendering in web browsers", "author": "Carlos Cuadra", diff --git a/src/components/Camera/ManualCamera/ManualCamera.tsx b/src/components/Camera/ManualCamera/ManualCamera.tsx index de43dcb..03fa28f 100644 --- a/src/components/Camera/ManualCamera/ManualCamera.tsx +++ b/src/components/Camera/ManualCamera/ManualCamera.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; import { CameraEventListener } from '../CameraEventListener/CameraEventListener'; -import { ManualCameraProps } from './ManualCamera.types'; +import { ManualCameraSettings } from './ManualCamera.types'; import { useHandlers } from './ManualCamera.useHandlers'; import { useSyncPosition } from './ManualCamera.useSyncPosition'; @@ -13,7 +13,7 @@ import { useSyncPosition } from './ManualCamera.useSyncPosition'; * * @param props ManualCameraProps */ -export const ManualCamera: FunctionComponent = (props) => { +export const ManualCamera: FunctionComponent = (props) => { useSyncPosition(props.position, props.zoom); const clickable = props.clickable ?? true; diff --git a/src/components/Camera/ManualCamera/ManualCamera.types.ts b/src/components/Camera/ManualCamera/ManualCamera.types.ts index 02c016a..5047fda 100644 --- a/src/components/Camera/ManualCamera/ManualCamera.types.ts +++ b/src/components/Camera/ManualCamera/ManualCamera.types.ts @@ -1,6 +1,7 @@ +import { ReactNode } from 'react'; import { TilePosition } from '../../../types/TilePosition'; -export type ManualCameraProps = { +export type ManualCameraSettings = { /** * Camera position */ @@ -14,3 +15,7 @@ export type ManualCameraProps = { */ clickable?: boolean; }; + +export type ManualCameraProps = ManualCameraSettings & { + children?: ReactNode; +}; diff --git a/src/components/Camera/ManualCamera/ManualCamera.useSyncPosition.ts b/src/components/Camera/ManualCamera/ManualCamera.useSyncPosition.ts index 28c1ddd..3d4c784 100644 --- a/src/components/Camera/ManualCamera/ManualCamera.useSyncPosition.ts +++ b/src/components/Camera/ManualCamera/ManualCamera.useSyncPosition.ts @@ -1,10 +1,10 @@ import { useEffect } from 'react'; import { useTilemapContext } from '../../Tilemap/TilemapContext/useTilemapContext'; -import { ManualCameraProps } from './ManualCamera.types'; +import { ManualCameraSettings } from './ManualCamera.types'; export function useSyncPosition( - position: ManualCameraProps['position'], - zoom: ManualCameraProps['zoom'] + position: ManualCameraSettings['position'], + zoom: ManualCameraSettings['zoom'] ) { const { state, actions } = useTilemapContext(); diff --git a/src/components/Camera/ThirdPersonCamera/ThirdPersonCamera.types.ts b/src/components/Camera/ThirdPersonCamera/ThirdPersonCamera.types.ts index f98220e..91ce649 100644 --- a/src/components/Camera/ThirdPersonCamera/ThirdPersonCamera.types.ts +++ b/src/components/Camera/ThirdPersonCamera/ThirdPersonCamera.types.ts @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import { RecenterCameraMotion } from '../../../types/Motions'; import { TilePosition } from '../../../types/TilePosition'; @@ -68,4 +69,7 @@ export type ThirdPersonCameraEvents = { onZoomMotionEnd?: () => void; }; -export type ThirdPersonCameraProps = ThirdPersonCameraSettings & ThirdPersonCameraEvents; +export type ThirdPersonCameraProps = ThirdPersonCameraSettings & + ThirdPersonCameraEvents & { + children?: ReactNode; + }; diff --git a/src/components/Elements/ManualElement/ElementSync/ElementSync.tsx b/src/components/Elements/ManualElement/ElementSync/ElementSync.tsx index eceb08e..f18c082 100644 --- a/src/components/Elements/ManualElement/ElementSync/ElementSync.tsx +++ b/src/components/Elements/ManualElement/ElementSync/ElementSync.tsx @@ -2,16 +2,16 @@ import React from 'react'; import { TilemapElement } from '../../../../types/TilemapElement'; import { isEqual } from '../../../../utils/deepCompare'; import { TilemapContext } from '../../../Tilemap/TilemapContext/TilemapContext'; -import { ManualElementProps } from '../ManualElement.types'; +import { ManualElementSettings } from '../ManualElement.types'; /** * Syncs the element with the tilemap context. */ -export class ElementSync extends React.PureComponent { +export class ElementSync extends React.PureComponent { static contextType = TilemapContext; context!: React.ContextType; - componentDidUpdate(prevProps: Readonly): void { + componentDidUpdate(prevProps: Readonly): void { const prevElement: TilemapElement = { tilePosition: prevProps.tilePosition, spriteKey: prevProps.spriteKey, diff --git a/src/components/Elements/ManualElement/ManualElement.types.ts b/src/components/Elements/ManualElement/ManualElement.types.ts index 3fb57a9..9d28316 100644 --- a/src/components/Elements/ManualElement/ManualElement.types.ts +++ b/src/components/Elements/ManualElement/ManualElement.types.ts @@ -1,6 +1,7 @@ +import { ReactNode } from 'react'; import { TilePosition } from '../../../types/TilePosition'; -export type ManualElementProps = { +export type ManualElementSettings = { /** * The position of the element in the tilemap. */ @@ -18,3 +19,7 @@ export type ManualElementProps = { */ elementKey: string; }; + +export type ManualElementProps = ManualElementSettings & { + children?: ReactNode; +}; diff --git a/src/components/Elements/MotionableElement/MotionableElement.types.ts b/src/components/Elements/MotionableElement/MotionableElement.types.ts index 9b2fa7b..5afee46 100644 --- a/src/components/Elements/MotionableElement/MotionableElement.types.ts +++ b/src/components/Elements/MotionableElement/MotionableElement.types.ts @@ -1,7 +1,8 @@ +import { ReactNode } from 'react'; import { MotionSettings } from '../../../types/Motions'; -import { ManualElementProps } from '../ManualElement/ManualElement.types'; +import { ManualElementSettings } from '../ManualElement/ManualElement.types'; -export type MotionableElementSettings = ManualElementProps & { +export type MotionableElementSettings = ManualElementSettings & { spriteKeyNorthMotion?: string; spriteKeySouthMotion?: string; spriteKeyEastMotion?: string; @@ -13,4 +14,7 @@ export type MotionableElementEvents = { onMotionComplete?: () => void; }; -export type MotionableElementProps = MotionableElementSettings & MotionableElementEvents; +export type MotionableElementProps = MotionableElementSettings & + MotionableElementEvents & { + children?: ReactNode; + }; diff --git a/src/components/Tilemap/Tilemap.types.ts b/src/components/Tilemap/Tilemap.types.ts index 702837e..ebf4b8e 100644 --- a/src/components/Tilemap/Tilemap.types.ts +++ b/src/components/Tilemap/Tilemap.types.ts @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import { SpriteDefinition } from '../../types/SpriteDefinition'; import { TilePosition } from '../../types/TilePosition'; @@ -108,4 +109,7 @@ export type TilemapSettings = { * * @public */ -export type TilemapProps = TilemapSettings & TilemapEvents; +export type TilemapProps = TilemapSettings & + TilemapEvents & { + children?: ReactNode; + };