diff --git a/src/Piece/Piece.tsx b/src/Piece/Piece.tsx
index 9bb9de6..1b25c31 100644
--- a/src/Piece/Piece.tsx
+++ b/src/Piece/Piece.tsx
@@ -5,13 +5,14 @@ import Animated, {
withTiming,
} from 'react-native-reanimated';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
-import LottieView from 'lottie-react-native';
+
import styled from 'styled-components/native';
import { getZoneX, getZoneY } from '../Zone/utils';
import { ZONE_TYPE, type ZoneType } from '../Zone/types';
import type { PieceType, PieceBlueprintType } from './types';
import { getPieceStartingCoords, getTargetZoneID } from './utils';
+import PieceAsset from './PieceAsset';
const AnimatedContainer = styled(Animated.View)<{ UI: boolean }>`
${({ UI }) =>
@@ -37,11 +38,6 @@ const PieceContainerPressable = styled.TouchableOpacity<{
height: ${({ height }) => (height ? `${height}px` : '100px')};
`;
-const PieceImage = styled.Image`
- height: 100%;
- width: 100%;
-`;
-
export type PieceProps = PieceType & {
onSelected?: (id: string) => void;
onDragEnd?: (id: string) => void;
@@ -83,11 +79,21 @@ function Piece(props: PieceProps) {
const variantType = PT.variants && variant ? PT.variants[variant] : {};
const pieceData = Object.assign({}, PT, variantType);
- const [pieceState, setPieceState] = useState(pieceData.defaultState || null);
+ function getCurrrPieceAsset() {
+ return (
+ assets[pieceData.states?.[state]?.asset] ||
+ assets[pieceData.asset] ||
+ null
+ );
+ }
+
+ const [pieceCurrAsset, setPieceCurrAsset] = useState(getCurrrPieceAsset());
useEffect(() => {
if (!state) return;
- setPieceState(state);
+ console.log('!!!', pieceData.states?.[state]?.asset);
+ setPieceCurrAsset(getCurrrPieceAsset());
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [state]);
const { x: initX, y: initY } = getPieceStartingCoords({
@@ -217,28 +223,6 @@ function Piece(props: PieceProps) {
}
};
- function RenderAsset() {
- const currAsset = pieceData.states?.[pieceState]?.asset || pieceData.asset;
- if (!currAsset) return null;
- const currAssetObj = assets[currAsset];
- if (currAssetObj.type === 'img') {
- return (
-
- );
- }
- if (currAssetObj.type === 'lottie') {
- return (
-
- );
- }
- return null;
- }
-
return draggable ? (
-
+
@@ -267,11 +251,11 @@ function Piece(props: PieceProps) {
-
+
);
diff --git a/src/Piece/PieceAsset.tsx b/src/Piece/PieceAsset.tsx
new file mode 100644
index 0000000..873b1f7
--- /dev/null
+++ b/src/Piece/PieceAsset.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import LottieView from 'lottie-react-native';
+import styled from 'styled-components/native';
+
+const PieceImage = styled.Image`
+ height: 100%;
+ width: 100%;
+`;
+
+function PieceAsset({ pieceCurrAsset, pieceData }) {
+ if (pieceCurrAsset.type === 'img') {
+ return (
+
+ );
+ }
+ if (pieceCurrAsset.type === 'lottie') {
+ return (
+
+ );
+ }
+ return null;
+}
+
+export default PieceAsset;