Merge pull request #13 from QADRAX/fix/TilePosition

Fix/tile position

Author: QADRAX

README.md

@@ -309,8 +309,8 @@ const YourComponent = () => {
                 spriteKey="armyIdle"
                 layer={1}
                 tilePosition={{
-                    col: 0,
-                    row: 0,
+                    x: 0,
+                    y: 0,
                 }} 
             />
         </Tilemap>
@@ -338,8 +338,8 @@ const YourComponent = () => {
             <ThirdPersonCamera />
                   <MotionableElement
                     tilePosition={{
-                        col: elementCol,
-                        row: elementRow,
+                        x: elementCol,
+                        y: elementRow,
                     }}
                     spriteKey={elementSprite}
                     layer={1}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-super-tilemap",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "React implementation of a low-level 2D tilemap board optimized for high-performance rendering in web browsers",
   "author": "Carlos Cuadra",

src/__stories__/ManualCamera.stories.tsx

@@ -6,15 +6,15 @@ export default {
   title: 'Manual Camera demo',
   component: DemoManualCamera,
   argTypes: {
-    col: {
+    y: {
       table: {
         type: {
           summary: 'number',
         },
       },
       control: 'number',
     },
-    row: {
+    x: {
       table: {
         type: {
           summary: 'number',
@@ -44,7 +44,7 @@ const Template: ComponentStory<typeof DemoManualCamera> = (args) => <DemoManualC
 export const ManualCameraDemo = Template.bind({});
 
 ManualCameraDemo.args = {
-  col: 2,
-  row: 2,
+  y: 2,
+  x: 2,
   zoom: 15,
 };

src/__stories__/ManualElement.stories.tsx

@@ -41,15 +41,15 @@ export default {
       options: [...SecondLayerSprites],
       control: 'select',
     },
-    elementCol: {
+    elementY: {
       table: {
         type: {
           summary: 'number',
         },
       },
       control: 'number',
     },
-    elementRow: {
+    elementX: {
       table: {
         type: {
           summary: 'number',
@@ -80,6 +80,6 @@ ManualElementExample.args = {
   cols: 20,
   baseSprite: SpriteName.grass,
   elementSprite: SpriteName.armyIdle,
-  elementCol: 10,
-  elementRow: 10,
+  elementY: 10,
+  elementX: 10,
 };

src/__stories__/MotionableElement.stories.tsx

@@ -78,15 +78,15 @@ export default {
       options: [...SecondLayerSprites],
       control: 'select',
     },
-    elementCol: {
+    elementY: {
       table: {
         type: {
           summary: 'number',
         },
       },
       control: 'number',
     },
-    elementRow: {
+    elementX: {
       table: {
         type: {
           summary: 'number',
@@ -155,8 +155,8 @@ MotionableElementDemo.args = {
   elementSpriteSouth: SpriteName.armyWalkSouth,
   elementSpriteEast: SpriteName.armyWalkEast,
   elementSpriteWest: SpriteName.armyWalkWest,
-  elementCol: 10,
-  elementRow: 10,
+  elementY: 10,
+  elementX: 10,
   motionSpeed: 0.001,
   easing: 'linear',
 };

src/__stories__/Tilemap.stories.tsx

@@ -87,7 +87,7 @@ const Template: Story<TilemapProps> = (args) => (
     onTileHover={args.onTileHover}
     onTileHoverOut={args.onTileHoverOut}
   >
-    <ManualCamera position={{ col: 2, row: 2 }} zoom={15} />
+    <ManualCamera position={{ y: 2, x: 2 }} zoom={15} />
   </Tilemap>
 );
 

src/__stories__/__Sprites__.ts

@@ -164,8 +164,8 @@ export const spritesDefinition: SpriteDefinition[] = [
       height: 2,
     },
     offset: {
-      col: -0.5,
-      row: 0.5,
+      y: -0.5,
+      x: 0.5,
     },
   },
   {
@@ -177,8 +177,8 @@ export const spritesDefinition: SpriteDefinition[] = [
       height: 1.5,
     },
     offset: {
-      col: -0.25,
-      row: 0,
+      y: -0.25,
+      x: 0,
     },
   },
   {
@@ -190,8 +190,8 @@ export const spritesDefinition: SpriteDefinition[] = [
       height: 1.5,
     },
     offset: {
-      col: -0.25,
-      row: 0,
+      y: -0.25,
+      x: 0,
     },
   },
   {
@@ -203,8 +203,8 @@ export const spritesDefinition: SpriteDefinition[] = [
       height: 1.5,
     },
     offset: {
-      col: 0,
-      row: 0,
+      y: 0,
+      x: 0,
     },
   },
   {
@@ -216,8 +216,8 @@ export const spritesDefinition: SpriteDefinition[] = [
       height: 1.5,
     },
     offset: {
-      col: -0.5,
-      row: 0,
+      y: -0.5,
+      x: 0,
     },
   },
 ];

src/__stories__/demos/cameras/DemoManualCamera.tsx

@@ -22,15 +22,15 @@ const scheme: string[][][] = [
 ];
 
 export type DemoManualCameraProps = {
-  col: number;
-  row: number;
+  y: number;
+  x: number;
   zoom: number;
 };
 
 export const DemoManualCamera: FunctionComponent<DemoManualCameraProps> = (props) => {
   return (
     <Tilemap tilmapScheme={scheme} spriteDefinition={sprites}>
-      <ManualCamera position={{ col: props.col, row: props.row }} zoom={props.zoom} />
+      <ManualCamera position={{ y: props.y, x: props.x }} zoom={props.zoom} />
     </Tilemap>
   );
 };

src/__stories__/demos/cameras/DemoThirdPersonCameraContext.tsx

@@ -4,8 +4,9 @@ import { ThirdPersonCamera, Tilemap, useThirdPersonCameraContext } from '../../.
 import { EasingType } from '../../../types/EasingType';
 import { MotionSettings } from '../../../types/Motions';
 import { SpriteDefinition } from '../../../types/SpriteDefinition';
-import { TilePosition } from '../../../types/TilePosition';
 import { grass, mountain } from '../../__Sprites__';
+import { Position } from '../../../types/Position';
+import { useTilemapContext } from '../../../components/Tilemap/TilemapContext/useTilemapContext';
 
 export type DemoThirdPersonCameraContextProps = {
   cameraMotionEasingType: EasingType;
@@ -30,15 +31,15 @@ const sprites: SpriteDefinition[] = [
 ];
 
 const scheme: string[][][] = [
-  [['grass'], ['grass'], ['grass']],
-  [['grass'], ['mountain'], ['grass']],
-  [['grass'], ['grass'], ['grass']],
+  [['grass'], ['grass'], ['grass'], ['grass']],
+  [['grass'], ['mountain'], ['grass'], ['grass']],
+  [['grass'], ['grass'], ['grass'], ['grass']],
 ];
 
 const initialZoom = 20;
 
 const ContextButtons = (props: {
-  focusedTile: TilePosition | null;
+  focusedTile: Position | null;
   cameraMotionEasingType: EasingType;
   cameraMotionSpeed: number;
   cameraMotionMinDuration?: number;
@@ -48,7 +49,8 @@ const ContextButtons = (props: {
   zoomMotionMinDuration?: number;
   zoomMotionMaxDuration?: number;
 }) => {
-  const { zoom, addCameraMotion, addZoomMotion } = useThirdPersonCameraContext();
+  const { computed } = useTilemapContext();
+  const { zoom, addCameraMotion, addZoomMotion, currentCameraMotion } = useThirdPersonCameraContext();
 
   const cameraMotion: MotionSettings = {
     speed: props.cameraMotionSpeed,
@@ -134,16 +136,28 @@ const ContextButtons = (props: {
       >
         ZoomOut
       </button>
+      <p>
+        Dimensions: {computed.mapDimensions.rows} rows / {computed.mapDimensions.cols} cols
+      </p>
+      <p>
+        isResizing: {computed.isResizing ? 'true' : 'false'}
+      </p>
+      <p>
+        isZoomin: {computed.isZooming ? 'true' : 'false'}
+      </p>
+      <p>
+        isCameraMotion: {currentCameraMotion != undefined ? 'true': 'false'}
+      </p>
     </>
   );
 };
 
 export const DemoThirdPersonCameraContext: FunctionComponent<DemoThirdPersonCameraContextProps> = (
   props
 ) => {
-  const [focusedTile, setFocusedTile] = React.useState<TilePosition | null>(null);
+  const [focusedTile, setFocusedTile] = React.useState<Position | null>(null);
 
-  const handleTileClick = (tilePos: TilePosition) => {
+  const handleTileClick = (tilePos: Position) => {
     setFocusedTile(tilePos);
   };
 

src/__stories__/demos/elements/DemoManualElement.tsx

@@ -9,8 +9,8 @@ export type DemoManualElementProps = {
   cols: number;
   baseSprite: string;
   elementSprite: string;
-  elementCol: number;
-  elementRow: number;
+  elementY: number;
+  elementX: number;
 };
 
 export const DemoManualElement: FunctionComponent<DemoManualElementProps> = (props) => {
@@ -27,8 +27,8 @@ export const DemoManualElement: FunctionComponent<DemoManualElementProps> = (pro
       <ThirdPersonCamera {...defaulThridPersonCameraArgs}></ThirdPersonCamera>
       <ManualElement
         tilePosition={{
-          col: props.elementCol,
-          row: props.elementRow,
+          y: props.elementY,
+          x: props.elementX,
         }}
         spriteKey={props.elementSprite}
         layer={1}