react-native-chess-kit 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/board-piece.js +35 -18
- package/lib/commonjs/board-piece.js.map +1 -1
- package/lib/module/board-piece.js +35 -18
- package/lib/module/board-piece.js.map +1 -1
- package/lib/typescript/board-piece.d.ts +12 -8
- package/lib/typescript/board-piece.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/board-piece.tsx +31 -21
|
@@ -37,20 +37,24 @@ function animateValue(target, config, moveDuration) {
|
|
|
37
37
|
/**
|
|
38
38
|
* A single animated chess piece.
|
|
39
39
|
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
40
|
+
* Uses two nested Animated.Views to avoid the Reanimated warning
|
|
41
|
+
* "Property opacity may be overwritten by a layout animation":
|
|
42
|
+
*
|
|
43
|
+
* Outer view: position (transform) + exiting layout animation (FadeOut)
|
|
44
|
+
* Inner view: drag-hide opacity
|
|
45
|
+
*
|
|
46
|
+
* Only `transform` and `opacity` are animated — Reanimated's fast path
|
|
47
|
+
* on Android. No layout properties (top/left/width/height), avoiding
|
|
48
|
+
* costly layout recalculations on low-end devices.
|
|
43
49
|
*
|
|
44
50
|
* During drag:
|
|
45
|
-
* -
|
|
46
|
-
* - No position changes on the original piece during drag
|
|
51
|
+
* - Inner view hides (opacity: 0) — the drag ghost shows instead
|
|
47
52
|
*
|
|
48
53
|
* After a move:
|
|
49
|
-
* -
|
|
50
|
-
* - Animation style controlled by user's animationConfig or moveDuration
|
|
54
|
+
* - Outer view snaps to new position via withTiming/withSpring
|
|
51
55
|
*
|
|
52
56
|
* On capture (unmount):
|
|
53
|
-
* -
|
|
57
|
+
* - Outer view fades out via exiting FadeOut (no conflict with inner opacity)
|
|
54
58
|
*/
|
|
55
59
|
const BoardPieceView = exports.BoardPieceView = /*#__PURE__*/_react.default.memo(function BoardPieceView({
|
|
56
60
|
targetX,
|
|
@@ -74,15 +78,21 @@ const BoardPieceView = exports.BoardPieceView = /*#__PURE__*/_react.default.memo
|
|
|
74
78
|
currentX.value = animateValue(targetX, animationConfig, moveDuration);
|
|
75
79
|
currentY.value = animateValue(targetY, animationConfig, moveDuration);
|
|
76
80
|
}, [targetX, targetY, animationConfig, moveDuration, currentX, currentY]);
|
|
77
|
-
|
|
81
|
+
|
|
82
|
+
// Position style on outer view — no opacity here to avoid conflict
|
|
83
|
+
// with the FadeOut exiting layout animation
|
|
84
|
+
const positionStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
85
|
+
transform: [{
|
|
86
|
+
translateX: currentX.value
|
|
87
|
+
}, {
|
|
88
|
+
translateY: currentY.value
|
|
89
|
+
}]
|
|
90
|
+
}));
|
|
91
|
+
|
|
92
|
+
// Drag-hide opacity on inner view — separate from the exiting animation
|
|
93
|
+
const opacityStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
|
|
78
94
|
const isBeingDragged = isDragging.value && activeSquare.value === square;
|
|
79
95
|
return {
|
|
80
|
-
transform: [{
|
|
81
|
-
translateX: currentX.value
|
|
82
|
-
}, {
|
|
83
|
-
translateY: currentY.value
|
|
84
|
-
}],
|
|
85
|
-
// Hide original piece during drag — drag ghost renders on top
|
|
86
96
|
opacity: isBeingDragged ? 0 : 1
|
|
87
97
|
};
|
|
88
98
|
});
|
|
@@ -91,11 +101,18 @@ const BoardPieceView = exports.BoardPieceView = /*#__PURE__*/_react.default.memo
|
|
|
91
101
|
position: 'absolute',
|
|
92
102
|
width: squareSize,
|
|
93
103
|
height: squareSize
|
|
94
|
-
},
|
|
95
|
-
// Fade out when this piece is captured (removed from the piece list)
|
|
104
|
+
}, positionStyle]
|
|
105
|
+
// Fade out when this piece is captured (removed from the piece list).
|
|
106
|
+
// Lives on the outer view so it doesn't conflict with the
|
|
107
|
+
// drag-hide opacity on the inner view.
|
|
96
108
|
,
|
|
97
109
|
exiting: _reactNativeReanimated.FadeOut.duration(_constants.CAPTURE_FADE_DURATION),
|
|
98
|
-
children:
|
|
110
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
111
|
+
style: [{
|
|
112
|
+
flex: 1
|
|
113
|
+
}, opacityStyle],
|
|
114
|
+
children: children
|
|
115
|
+
})
|
|
99
116
|
});
|
|
100
117
|
},
|
|
101
118
|
// Custom comparator: only re-render when position, square, or animation config changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_constants","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","animateValue","target","config","moveDuration","type","withSpring","damping","stiffness","mass","withTiming","duration","DEFAULT_MOVE_DURATION","BoardPieceView","exports","React","memo","targetX","targetY","squareSize","animationConfig","children","activeSquare","isDragging","square","currentX","useSharedValue","currentY","useEffect","value","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeReanimated","_constants","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","animateValue","target","config","moveDuration","type","withSpring","damping","stiffness","mass","withTiming","duration","DEFAULT_MOVE_DURATION","BoardPieceView","exports","React","memo","targetX","targetY","squareSize","animationConfig","children","activeSquare","isDragging","square","currentX","useSharedValue","currentY","useEffect","value","positionStyle","useAnimatedStyle","transform","translateX","translateY","opacityStyle","isBeingDragged","opacity","jsx","View","style","position","width","height","exiting","FadeOut","CAPTURE_FADE_DURATION","flex","prev","next"],"sourceRoot":"..\\..\\src","sources":["board-piece.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,20 +32,24 @@ function animateValue(target, config, moveDuration) {
|
|
|
32
32
|
/**
|
|
33
33
|
* A single animated chess piece.
|
|
34
34
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
35
|
+
* Uses two nested Animated.Views to avoid the Reanimated warning
|
|
36
|
+
* "Property opacity may be overwritten by a layout animation":
|
|
37
|
+
*
|
|
38
|
+
* Outer view: position (transform) + exiting layout animation (FadeOut)
|
|
39
|
+
* Inner view: drag-hide opacity
|
|
40
|
+
*
|
|
41
|
+
* Only `transform` and `opacity` are animated — Reanimated's fast path
|
|
42
|
+
* on Android. No layout properties (top/left/width/height), avoiding
|
|
43
|
+
* costly layout recalculations on low-end devices.
|
|
38
44
|
*
|
|
39
45
|
* During drag:
|
|
40
|
-
* -
|
|
41
|
-
* - No position changes on the original piece during drag
|
|
46
|
+
* - Inner view hides (opacity: 0) — the drag ghost shows instead
|
|
42
47
|
*
|
|
43
48
|
* After a move:
|
|
44
|
-
* -
|
|
45
|
-
* - Animation style controlled by user's animationConfig or moveDuration
|
|
49
|
+
* - Outer view snaps to new position via withTiming/withSpring
|
|
46
50
|
*
|
|
47
51
|
* On capture (unmount):
|
|
48
|
-
* -
|
|
52
|
+
* - Outer view fades out via exiting FadeOut (no conflict with inner opacity)
|
|
49
53
|
*/
|
|
50
54
|
export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
51
55
|
targetX,
|
|
@@ -69,15 +73,21 @@ export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
|
69
73
|
currentX.value = animateValue(targetX, animationConfig, moveDuration);
|
|
70
74
|
currentY.value = animateValue(targetY, animationConfig, moveDuration);
|
|
71
75
|
}, [targetX, targetY, animationConfig, moveDuration, currentX, currentY]);
|
|
72
|
-
|
|
76
|
+
|
|
77
|
+
// Position style on outer view — no opacity here to avoid conflict
|
|
78
|
+
// with the FadeOut exiting layout animation
|
|
79
|
+
const positionStyle = useAnimatedStyle(() => ({
|
|
80
|
+
transform: [{
|
|
81
|
+
translateX: currentX.value
|
|
82
|
+
}, {
|
|
83
|
+
translateY: currentY.value
|
|
84
|
+
}]
|
|
85
|
+
}));
|
|
86
|
+
|
|
87
|
+
// Drag-hide opacity on inner view — separate from the exiting animation
|
|
88
|
+
const opacityStyle = useAnimatedStyle(() => {
|
|
73
89
|
const isBeingDragged = isDragging.value && activeSquare.value === square;
|
|
74
90
|
return {
|
|
75
|
-
transform: [{
|
|
76
|
-
translateX: currentX.value
|
|
77
|
-
}, {
|
|
78
|
-
translateY: currentY.value
|
|
79
|
-
}],
|
|
80
|
-
// Hide original piece during drag — drag ghost renders on top
|
|
81
91
|
opacity: isBeingDragged ? 0 : 1
|
|
82
92
|
};
|
|
83
93
|
});
|
|
@@ -86,11 +96,18 @@ export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
|
86
96
|
position: 'absolute',
|
|
87
97
|
width: squareSize,
|
|
88
98
|
height: squareSize
|
|
89
|
-
},
|
|
90
|
-
// Fade out when this piece is captured (removed from the piece list)
|
|
99
|
+
}, positionStyle]
|
|
100
|
+
// Fade out when this piece is captured (removed from the piece list).
|
|
101
|
+
// Lives on the outer view so it doesn't conflict with the
|
|
102
|
+
// drag-hide opacity on the inner view.
|
|
91
103
|
,
|
|
92
104
|
exiting: FadeOut.duration(CAPTURE_FADE_DURATION),
|
|
93
|
-
children:
|
|
105
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
106
|
+
style: [{
|
|
107
|
+
flex: 1
|
|
108
|
+
}, opacityStyle],
|
|
109
|
+
children: children
|
|
110
|
+
})
|
|
94
111
|
});
|
|
95
112
|
},
|
|
96
113
|
// Custom comparator: only re-render when position, square, or animation config changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Animated","useAnimatedStyle","useSharedValue","withTiming","withSpring","FadeOut","DEFAULT_MOVE_DURATION","CAPTURE_FADE_DURATION","jsx","_jsx","animateValue","target","config","moveDuration","type","damping","stiffness","mass","duration","BoardPieceView","memo","targetX","targetY","squareSize","animationConfig","children","activeSquare","isDragging","square","currentX","currentY","value","
|
|
1
|
+
{"version":3,"names":["React","useEffect","Animated","useAnimatedStyle","useSharedValue","withTiming","withSpring","FadeOut","DEFAULT_MOVE_DURATION","CAPTURE_FADE_DURATION","jsx","_jsx","animateValue","target","config","moveDuration","type","damping","stiffness","mass","duration","BoardPieceView","memo","targetX","targetY","squareSize","animationConfig","children","activeSquare","isDragging","square","currentX","currentY","value","positionStyle","transform","translateX","translateY","opacityStyle","isBeingDragged","opacity","View","style","position","width","height","exiting","flex","prev","next"],"sourceRoot":"..\\..\\src","sources":["board-piece.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,20 +22,24 @@ type BoardPieceProps = {
|
|
|
22
22
|
/**
|
|
23
23
|
* A single animated chess piece.
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
25
|
+
* Uses two nested Animated.Views to avoid the Reanimated warning
|
|
26
|
+
* "Property opacity may be overwritten by a layout animation":
|
|
27
|
+
*
|
|
28
|
+
* Outer view: position (transform) + exiting layout animation (FadeOut)
|
|
29
|
+
* Inner view: drag-hide opacity
|
|
30
|
+
*
|
|
31
|
+
* Only `transform` and `opacity` are animated — Reanimated's fast path
|
|
32
|
+
* on Android. No layout properties (top/left/width/height), avoiding
|
|
33
|
+
* costly layout recalculations on low-end devices.
|
|
28
34
|
*
|
|
29
35
|
* During drag:
|
|
30
|
-
* -
|
|
31
|
-
* - No position changes on the original piece during drag
|
|
36
|
+
* - Inner view hides (opacity: 0) — the drag ghost shows instead
|
|
32
37
|
*
|
|
33
38
|
* After a move:
|
|
34
|
-
* -
|
|
35
|
-
* - Animation style controlled by user's animationConfig or moveDuration
|
|
39
|
+
* - Outer view snaps to new position via withTiming/withSpring
|
|
36
40
|
*
|
|
37
41
|
* On capture (unmount):
|
|
38
|
-
* -
|
|
42
|
+
* - Outer view fades out via exiting FadeOut (no conflict with inner opacity)
|
|
39
43
|
*/
|
|
40
44
|
export declare const BoardPieceView: React.NamedExoticComponent<BoardPieceProps>;
|
|
41
45
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"board-piece.d.ts","sourceRoot":"","sources":["../../src/board-piece.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAiB,EAMf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,KAAK,eAAe,GAAG;IACrB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,4DAA4D;IAC5D,YAAY,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AA8BF
|
|
1
|
+
{"version":3,"file":"board-piece.d.ts","sourceRoot":"","sources":["../../src/board-piece.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAiB,EAMf,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,KAAK,eAAe,GAAG;IACrB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,4DAA4D;IAC5D,YAAY,EAAE,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzC,UAAU,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AA8BF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc,6CAqE1B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-chess-kit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "High-performance chess board for React Native. Single gesture handler, ~40 components, 0 re-renders during drag. Built on Reanimated + Gesture Handler.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
package/src/board-piece.tsx
CHANGED
|
@@ -61,20 +61,24 @@ function animateValue(
|
|
|
61
61
|
/**
|
|
62
62
|
* A single animated chess piece.
|
|
63
63
|
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
64
|
+
* Uses two nested Animated.Views to avoid the Reanimated warning
|
|
65
|
+
* "Property opacity may be overwritten by a layout animation":
|
|
66
|
+
*
|
|
67
|
+
* Outer view: position (transform) + exiting layout animation (FadeOut)
|
|
68
|
+
* Inner view: drag-hide opacity
|
|
69
|
+
*
|
|
70
|
+
* Only `transform` and `opacity` are animated — Reanimated's fast path
|
|
71
|
+
* on Android. No layout properties (top/left/width/height), avoiding
|
|
72
|
+
* costly layout recalculations on low-end devices.
|
|
67
73
|
*
|
|
68
74
|
* During drag:
|
|
69
|
-
* -
|
|
70
|
-
* - No position changes on the original piece during drag
|
|
75
|
+
* - Inner view hides (opacity: 0) — the drag ghost shows instead
|
|
71
76
|
*
|
|
72
77
|
* After a move:
|
|
73
|
-
* -
|
|
74
|
-
* - Animation style controlled by user's animationConfig or moveDuration
|
|
78
|
+
* - Outer view snaps to new position via withTiming/withSpring
|
|
75
79
|
*
|
|
76
80
|
* On capture (unmount):
|
|
77
|
-
* -
|
|
81
|
+
* - Outer view fades out via exiting FadeOut (no conflict with inner opacity)
|
|
78
82
|
*/
|
|
79
83
|
export const BoardPieceView = React.memo(
|
|
80
84
|
function BoardPieceView({
|
|
@@ -100,17 +104,19 @@ export const BoardPieceView = React.memo(
|
|
|
100
104
|
currentY.value = animateValue(targetY, animationConfig, moveDuration);
|
|
101
105
|
}, [targetX, targetY, animationConfig, moveDuration, currentX, currentY]);
|
|
102
106
|
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
// Position style on outer view — no opacity here to avoid conflict
|
|
108
|
+
// with the FadeOut exiting layout animation
|
|
109
|
+
const positionStyle = useAnimatedStyle(() => ({
|
|
110
|
+
transform: [
|
|
111
|
+
{ translateX: currentX.value },
|
|
112
|
+
{ translateY: currentY.value },
|
|
113
|
+
],
|
|
114
|
+
}));
|
|
105
115
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
],
|
|
111
|
-
// Hide original piece during drag — drag ghost renders on top
|
|
112
|
-
opacity: isBeingDragged ? 0 : 1,
|
|
113
|
-
};
|
|
116
|
+
// Drag-hide opacity on inner view — separate from the exiting animation
|
|
117
|
+
const opacityStyle = useAnimatedStyle(() => {
|
|
118
|
+
const isBeingDragged = isDragging.value && activeSquare.value === square;
|
|
119
|
+
return { opacity: isBeingDragged ? 0 : 1 };
|
|
114
120
|
});
|
|
115
121
|
|
|
116
122
|
return (
|
|
@@ -121,12 +127,16 @@ export const BoardPieceView = React.memo(
|
|
|
121
127
|
width: squareSize,
|
|
122
128
|
height: squareSize,
|
|
123
129
|
},
|
|
124
|
-
|
|
130
|
+
positionStyle,
|
|
125
131
|
]}
|
|
126
|
-
// Fade out when this piece is captured (removed from the piece list)
|
|
132
|
+
// Fade out when this piece is captured (removed from the piece list).
|
|
133
|
+
// Lives on the outer view so it doesn't conflict with the
|
|
134
|
+
// drag-hide opacity on the inner view.
|
|
127
135
|
exiting={FadeOut.duration(CAPTURE_FADE_DURATION)}
|
|
128
136
|
>
|
|
129
|
-
{
|
|
137
|
+
<Animated.View style={[{ flex: 1 }, opacityStyle]}>
|
|
138
|
+
{children}
|
|
139
|
+
</Animated.View>
|
|
130
140
|
</Animated.View>
|
|
131
141
|
);
|
|
132
142
|
},
|