react-native-chess-kit 0.1.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-annotations.js +131 -0
- package/lib/commonjs/board-annotations.js.map +1 -0
- package/lib/commonjs/board-arrows.js +164 -0
- package/lib/commonjs/board-arrows.js.map +1 -0
- package/lib/commonjs/board-highlights.js +212 -0
- package/lib/commonjs/board-highlights.js.map +1 -0
- package/lib/commonjs/board-piece.js +71 -25
- package/lib/commonjs/board-piece.js.map +1 -1
- package/lib/commonjs/board-pieces.js +2 -0
- package/lib/commonjs/board-pieces.js.map +1 -1
- package/lib/commonjs/board.js +392 -42
- package/lib/commonjs/board.js.map +1 -1
- package/lib/commonjs/constants.js +104 -0
- package/lib/commonjs/constants.js.map +1 -0
- package/lib/commonjs/index.js +128 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/pieces/default-pieces.js +536 -0
- package/lib/commonjs/pieces/default-pieces.js.map +1 -0
- package/lib/commonjs/pieces/index.js +13 -0
- package/lib/commonjs/pieces/index.js.map +1 -0
- package/lib/commonjs/promotion-picker.js +129 -0
- package/lib/commonjs/promotion-picker.js.map +1 -0
- package/lib/commonjs/static-board.js +150 -0
- package/lib/commonjs/static-board.js.map +1 -0
- package/lib/commonjs/themes.js +175 -0
- package/lib/commonjs/themes.js.map +1 -0
- package/lib/commonjs/use-board-gesture.js +184 -11
- package/lib/commonjs/use-board-gesture.js.map +1 -1
- package/lib/commonjs/use-premove.js +44 -0
- package/lib/commonjs/use-premove.js.map +1 -0
- package/lib/module/board-annotations.js +126 -0
- package/lib/module/board-annotations.js.map +1 -0
- package/lib/module/board-arrows.js +161 -0
- package/lib/module/board-arrows.js.map +1 -0
- package/lib/module/board-highlights.js +206 -0
- package/lib/module/board-highlights.js.map +1 -0
- package/lib/module/board-piece.js +72 -26
- package/lib/module/board-piece.js.map +1 -1
- package/lib/module/board-pieces.js +2 -0
- package/lib/module/board-pieces.js.map +1 -1
- package/lib/module/board.js +395 -44
- package/lib/module/board.js.map +1 -1
- package/lib/module/constants.js +100 -0
- package/lib/module/constants.js.map +1 -0
- package/lib/module/index.js +29 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/pieces/default-pieces.js +530 -0
- package/lib/module/pieces/default-pieces.js.map +1 -0
- package/lib/module/pieces/index.js +4 -0
- package/lib/module/pieces/index.js.map +1 -0
- package/lib/module/promotion-picker.js +124 -0
- package/lib/module/promotion-picker.js.map +1 -0
- package/lib/module/static-board.js +146 -0
- package/lib/module/static-board.js.map +1 -0
- package/lib/module/themes.js +171 -0
- package/lib/module/themes.js.map +1 -0
- package/lib/module/use-board-gesture.js +185 -11
- package/lib/module/use-board-gesture.js.map +1 -1
- package/lib/module/use-premove.js +40 -0
- package/lib/module/use-premove.js.map +1 -0
- package/lib/typescript/board-annotations.d.ts +30 -0
- package/lib/typescript/board-annotations.d.ts.map +1 -0
- package/lib/typescript/board-arrows.d.ts +27 -0
- package/lib/typescript/board-arrows.d.ts.map +1 -0
- package/lib/typescript/board-highlights.d.ts +65 -0
- package/lib/typescript/board-highlights.d.ts.map +1 -0
- package/lib/typescript/board-piece.d.ts +19 -9
- package/lib/typescript/board-piece.d.ts.map +1 -1
- package/lib/typescript/board-pieces.d.ts +2 -1
- package/lib/typescript/board-pieces.d.ts.map +1 -1
- package/lib/typescript/board.d.ts +11 -2
- package/lib/typescript/board.d.ts.map +1 -1
- package/lib/typescript/constants.d.ts +54 -0
- package/lib/typescript/constants.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +9 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/lib/typescript/pieces/default-pieces.d.ts +3 -0
- package/lib/typescript/pieces/default-pieces.d.ts.map +1 -0
- package/lib/typescript/pieces/index.d.ts +2 -0
- package/lib/typescript/pieces/index.d.ts.map +1 -0
- package/lib/typescript/promotion-picker.d.ts +30 -0
- package/lib/typescript/promotion-picker.d.ts.map +1 -0
- package/lib/typescript/static-board.d.ts +12 -0
- package/lib/typescript/static-board.d.ts.map +1 -0
- package/lib/typescript/themes.d.ts +15 -0
- package/lib/typescript/themes.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +194 -24
- package/lib/typescript/types.d.ts.map +1 -1
- package/lib/typescript/use-board-gesture.d.ts +28 -2
- package/lib/typescript/use-board-gesture.d.ts.map +1 -1
- package/lib/typescript/use-premove.d.ts +31 -0
- package/lib/typescript/use-premove.d.ts.map +1 -0
- package/package.json +4 -2
- package/src/board-annotations.tsx +147 -0
- package/src/board-arrows.tsx +197 -0
- package/src/board-highlights.tsx +226 -0
- package/src/board-piece.tsx +77 -29
- package/src/board-pieces.tsx +4 -1
- package/src/board.tsx +462 -46
- package/src/constants.ts +100 -0
- package/src/index.ts +62 -1
- package/src/pieces/default-pieces.tsx +383 -0
- package/src/pieces/index.ts +1 -0
- package/src/promotion-picker.tsx +147 -0
- package/src/static-board.tsx +150 -0
- package/src/themes.ts +129 -0
- package/src/types.ts +251 -25
- package/src/use-board-gesture.ts +219 -8
- package/src/use-premove.ts +59 -0
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import Svg, { Line, Polygon, Circle as SvgCircle } from 'react-native-svg';
|
|
6
|
+
import { DEFAULT_ARROW_COLOR, DEFAULT_SHAPE_COLOR, ARROW_STROKE_WIDTH, ARROW_HEAD_SIZE, ARROW_SHORTEN_BY } from './constants';
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
// Coordinate utilities (percentage-based viewBox 0-100)
|
|
10
|
+
// ---------------------------------------------------------------------------
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
|
+
function squareToViewBoxCenter(square, orientation) {
|
|
13
|
+
const fileIdx = square.charCodeAt(0) - 97;
|
|
14
|
+
const rankIdx = parseInt(square[1], 10) - 1;
|
|
15
|
+
const col = orientation === 'white' ? fileIdx : 7 - fileIdx;
|
|
16
|
+
const row = orientation === 'white' ? 7 - rankIdx : rankIdx;
|
|
17
|
+
return {
|
|
18
|
+
x: (col + 0.5) * 12.5,
|
|
19
|
+
y: (row + 0.5) * 12.5
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
function calculateArrowPath(from, to, shortenBy) {
|
|
23
|
+
const dx = to.x - from.x;
|
|
24
|
+
const dy = to.y - from.y;
|
|
25
|
+
const len = Math.sqrt(dx * dx + dy * dy);
|
|
26
|
+
if (len === 0) return {
|
|
27
|
+
x1: from.x,
|
|
28
|
+
y1: from.y,
|
|
29
|
+
x2: to.x,
|
|
30
|
+
y2: to.y
|
|
31
|
+
};
|
|
32
|
+
const ux = dx / len;
|
|
33
|
+
const uy = dy / len;
|
|
34
|
+
return {
|
|
35
|
+
x1: from.x + ux * shortenBy,
|
|
36
|
+
y1: from.y + uy * shortenBy,
|
|
37
|
+
x2: to.x - ux * shortenBy,
|
|
38
|
+
y2: to.y - uy * shortenBy
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// ---------------------------------------------------------------------------
|
|
43
|
+
// Props
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
|
|
46
|
+
// ---------------------------------------------------------------------------
|
|
47
|
+
// Combined arrows + shapes SVG layer
|
|
48
|
+
// ---------------------------------------------------------------------------
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* SVG overlay for arrows and shapes drawn on the board.
|
|
52
|
+
*
|
|
53
|
+
* Uses a percentage-based 100x100 viewBox so coordinates map cleanly
|
|
54
|
+
* to the 8x8 grid (each square = 12.5 x 12.5 units).
|
|
55
|
+
*
|
|
56
|
+
* Renders above the pieces layer so arrows are always visible.
|
|
57
|
+
*/
|
|
58
|
+
export const BoardArrows = /*#__PURE__*/React.memo(function BoardArrows({
|
|
59
|
+
boardSize,
|
|
60
|
+
orientation,
|
|
61
|
+
arrows,
|
|
62
|
+
shapes
|
|
63
|
+
}) {
|
|
64
|
+
const hasArrows = arrows && arrows.length > 0;
|
|
65
|
+
const hasShapes = shapes && shapes.length > 0;
|
|
66
|
+
if (!hasArrows && !hasShapes) return null;
|
|
67
|
+
return /*#__PURE__*/_jsx(View, {
|
|
68
|
+
style: {
|
|
69
|
+
position: 'absolute',
|
|
70
|
+
width: boardSize,
|
|
71
|
+
height: boardSize
|
|
72
|
+
},
|
|
73
|
+
pointerEvents: "none",
|
|
74
|
+
children: /*#__PURE__*/_jsxs(Svg, {
|
|
75
|
+
viewBox: "0 0 100 100",
|
|
76
|
+
width: boardSize,
|
|
77
|
+
height: boardSize,
|
|
78
|
+
children: [hasShapes && shapes.map((shape, i) => {
|
|
79
|
+
if (shape.type === 'circle') {
|
|
80
|
+
const center = squareToViewBoxCenter(shape.square, orientation);
|
|
81
|
+
const color = shape.color ?? DEFAULT_SHAPE_COLOR;
|
|
82
|
+
return /*#__PURE__*/_jsx(SvgCircle, {
|
|
83
|
+
cx: center.x,
|
|
84
|
+
cy: center.y,
|
|
85
|
+
r: 5.5,
|
|
86
|
+
fill: "none",
|
|
87
|
+
stroke: color,
|
|
88
|
+
strokeWidth: 1.2,
|
|
89
|
+
opacity: 0.85
|
|
90
|
+
}, `circle-${shape.square}-${i}`);
|
|
91
|
+
}
|
|
92
|
+
return null;
|
|
93
|
+
}), hasArrows && arrows.map((arrow, i) => /*#__PURE__*/_jsx(ArrowSvg, {
|
|
94
|
+
from: arrow.from,
|
|
95
|
+
to: arrow.to,
|
|
96
|
+
color: arrow.color ?? DEFAULT_ARROW_COLOR,
|
|
97
|
+
width: arrow.width ?? ARROW_STROKE_WIDTH,
|
|
98
|
+
orientation: orientation
|
|
99
|
+
}, `arrow-${arrow.from}-${arrow.to}-${i}`))]
|
|
100
|
+
})
|
|
101
|
+
});
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
// ---------------------------------------------------------------------------
|
|
105
|
+
// Single arrow SVG element
|
|
106
|
+
// ---------------------------------------------------------------------------
|
|
107
|
+
|
|
108
|
+
const ArrowSvg = /*#__PURE__*/React.memo(function ArrowSvg({
|
|
109
|
+
from,
|
|
110
|
+
to,
|
|
111
|
+
color,
|
|
112
|
+
width,
|
|
113
|
+
orientation
|
|
114
|
+
}) {
|
|
115
|
+
const fromCoord = squareToViewBoxCenter(from, orientation);
|
|
116
|
+
const toCoord = squareToViewBoxCenter(to, orientation);
|
|
117
|
+
const path = calculateArrowPath(fromCoord, toCoord, ARROW_SHORTEN_BY);
|
|
118
|
+
const dx = path.x2 - path.x1;
|
|
119
|
+
const dy = path.y2 - path.y1;
|
|
120
|
+
const len = Math.sqrt(dx * dx + dy * dy);
|
|
121
|
+
if (len === 0) return null;
|
|
122
|
+
const ux = dx / len;
|
|
123
|
+
const uy = dy / len;
|
|
124
|
+
const headSize = ARROW_HEAD_SIZE;
|
|
125
|
+
const tip = {
|
|
126
|
+
x: path.x2,
|
|
127
|
+
y: path.y2
|
|
128
|
+
};
|
|
129
|
+
const baseLeft = {
|
|
130
|
+
x: path.x2 - ux * headSize * 2 + uy * headSize,
|
|
131
|
+
y: path.y2 - uy * headSize * 2 - ux * headSize
|
|
132
|
+
};
|
|
133
|
+
const baseRight = {
|
|
134
|
+
x: path.x2 - ux * headSize * 2 - uy * headSize,
|
|
135
|
+
y: path.y2 - uy * headSize * 2 + ux * headSize
|
|
136
|
+
};
|
|
137
|
+
const arrowPoints = `${tip.x},${tip.y} ${baseLeft.x},${baseLeft.y} ${baseRight.x},${baseRight.y}`;
|
|
138
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
139
|
+
children: [/*#__PURE__*/_jsx(Line, {
|
|
140
|
+
x1: path.x1,
|
|
141
|
+
y1: path.y1,
|
|
142
|
+
x2: path.x2,
|
|
143
|
+
y2: path.y2,
|
|
144
|
+
stroke: color,
|
|
145
|
+
strokeWidth: width,
|
|
146
|
+
strokeLinecap: "round",
|
|
147
|
+
opacity: 0.85
|
|
148
|
+
}), /*#__PURE__*/_jsx(Polygon, {
|
|
149
|
+
points: arrowPoints,
|
|
150
|
+
fill: color,
|
|
151
|
+
opacity: 0.85
|
|
152
|
+
})]
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
// ---------------------------------------------------------------------------
|
|
157
|
+
// Standalone exports for advanced consumers
|
|
158
|
+
// ---------------------------------------------------------------------------
|
|
159
|
+
|
|
160
|
+
export { ArrowSvg as Arrow };
|
|
161
|
+
//# sourceMappingURL=board-arrows.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","Svg","Line","Polygon","Circle","SvgCircle","DEFAULT_ARROW_COLOR","DEFAULT_SHAPE_COLOR","ARROW_STROKE_WIDTH","ARROW_HEAD_SIZE","ARROW_SHORTEN_BY","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","squareToViewBoxCenter","square","orientation","fileIdx","charCodeAt","rankIdx","parseInt","col","row","x","y","calculateArrowPath","from","to","shortenBy","dx","dy","len","Math","sqrt","x1","y1","x2","y2","ux","uy","BoardArrows","memo","boardSize","arrows","shapes","hasArrows","length","hasShapes","style","position","width","height","pointerEvents","children","viewBox","map","shape","i","type","center","color","cx","cy","r","fill","stroke","strokeWidth","opacity","arrow","ArrowSvg","fromCoord","toCoord","path","headSize","tip","baseLeft","baseRight","arrowPoints","strokeLinecap","points","Arrow"],"sourceRoot":"..\\..\\src","sources":["board-arrows.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
6
|
+
import { squareToXY } from './use-board-pieces';
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
// Props
|
|
10
|
+
// ---------------------------------------------------------------------------
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
// ---------------------------------------------------------------------------
|
|
13
|
+
// Static highlights (View-based, no animation needed)
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Renders all board square highlights as a single layer.
|
|
18
|
+
*
|
|
19
|
+
* Combines multiple highlight sources (last move, check, selected piece,
|
|
20
|
+
* premoves, custom, and imperative) into one flat list of colored rectangles.
|
|
21
|
+
* Rendered between the background and pieces layers.
|
|
22
|
+
*
|
|
23
|
+
* Uses plain Views (not Animated) because highlights change discretely
|
|
24
|
+
* on move events, not during animation frames.
|
|
25
|
+
*/
|
|
26
|
+
export const BoardHighlights = /*#__PURE__*/React.memo(function BoardHighlights({
|
|
27
|
+
boardSize,
|
|
28
|
+
orientation,
|
|
29
|
+
squareSize,
|
|
30
|
+
lastMove,
|
|
31
|
+
lastMoveColor,
|
|
32
|
+
checkSquare,
|
|
33
|
+
checkColor,
|
|
34
|
+
selectedSquare,
|
|
35
|
+
selectedColor,
|
|
36
|
+
premoveSquares,
|
|
37
|
+
premoveColor,
|
|
38
|
+
highlights,
|
|
39
|
+
imperativeHighlights
|
|
40
|
+
}) {
|
|
41
|
+
// Collect all highlights into a flat array (ordered by visual priority: bottom to top)
|
|
42
|
+
const allHighlights = [];
|
|
43
|
+
|
|
44
|
+
// Last move (lowest priority -- drawn first, underneath everything)
|
|
45
|
+
if (lastMove) {
|
|
46
|
+
allHighlights.push({
|
|
47
|
+
square: lastMove.from,
|
|
48
|
+
color: lastMoveColor
|
|
49
|
+
});
|
|
50
|
+
allHighlights.push({
|
|
51
|
+
square: lastMove.to,
|
|
52
|
+
color: lastMoveColor
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Premove highlights
|
|
57
|
+
if (premoveSquares) {
|
|
58
|
+
allHighlights.push({
|
|
59
|
+
square: premoveSquares.from,
|
|
60
|
+
color: premoveColor
|
|
61
|
+
});
|
|
62
|
+
allHighlights.push({
|
|
63
|
+
square: premoveSquares.to,
|
|
64
|
+
color: premoveColor
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Selected piece square
|
|
69
|
+
if (selectedSquare) {
|
|
70
|
+
allHighlights.push({
|
|
71
|
+
square: selectedSquare,
|
|
72
|
+
color: selectedColor
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Check indicator (king square)
|
|
77
|
+
if (checkSquare) {
|
|
78
|
+
allHighlights.push({
|
|
79
|
+
square: checkSquare,
|
|
80
|
+
color: checkColor
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Consumer-provided custom highlights
|
|
85
|
+
if (highlights) {
|
|
86
|
+
for (const h of highlights) {
|
|
87
|
+
allHighlights.push(h);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Imperative highlights (from ref.highlight() calls)
|
|
92
|
+
if (imperativeHighlights) {
|
|
93
|
+
for (const h of imperativeHighlights) {
|
|
94
|
+
allHighlights.push(h);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
if (allHighlights.length === 0) return null;
|
|
98
|
+
return /*#__PURE__*/_jsx(View, {
|
|
99
|
+
style: {
|
|
100
|
+
position: 'absolute',
|
|
101
|
+
width: boardSize,
|
|
102
|
+
height: boardSize
|
|
103
|
+
},
|
|
104
|
+
pointerEvents: "none",
|
|
105
|
+
children: allHighlights.map((h, i) => {
|
|
106
|
+
const {
|
|
107
|
+
x,
|
|
108
|
+
y
|
|
109
|
+
} = squareToXY(h.square, squareSize, orientation);
|
|
110
|
+
return /*#__PURE__*/_jsx(View, {
|
|
111
|
+
style: {
|
|
112
|
+
position: 'absolute',
|
|
113
|
+
left: x,
|
|
114
|
+
top: y,
|
|
115
|
+
width: squareSize,
|
|
116
|
+
height: squareSize,
|
|
117
|
+
backgroundColor: h.color
|
|
118
|
+
}
|
|
119
|
+
}, `${h.square}-${h.color}-${i}`);
|
|
120
|
+
})
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
// ---------------------------------------------------------------------------
|
|
125
|
+
// Drag target highlight (Animated, updates on UI thread during drag)
|
|
126
|
+
// ---------------------------------------------------------------------------
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Highlight on the square currently under the dragged piece.
|
|
130
|
+
* Uses Reanimated shared values for zero-JS-bridge updates during drag.
|
|
131
|
+
*/
|
|
132
|
+
export const DragTargetHighlight = /*#__PURE__*/React.memo(function DragTargetHighlight({
|
|
133
|
+
squareSize,
|
|
134
|
+
orientation,
|
|
135
|
+
dragTargetSquare,
|
|
136
|
+
color
|
|
137
|
+
}) {
|
|
138
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
139
|
+
const square = dragTargetSquare.value;
|
|
140
|
+
if (!square) {
|
|
141
|
+
return {
|
|
142
|
+
opacity: 0,
|
|
143
|
+
transform: [{
|
|
144
|
+
translateX: 0
|
|
145
|
+
}, {
|
|
146
|
+
translateY: 0
|
|
147
|
+
}]
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Inline coordinate calculation (worklet-safe, no function call)
|
|
152
|
+
const fileIdx = square.charCodeAt(0) - 97;
|
|
153
|
+
const rankIdx = parseInt(square[1], 10) - 1;
|
|
154
|
+
const col = orientation === 'white' ? fileIdx : 7 - fileIdx;
|
|
155
|
+
const row = orientation === 'white' ? 7 - rankIdx : rankIdx;
|
|
156
|
+
return {
|
|
157
|
+
opacity: 1,
|
|
158
|
+
transform: [{
|
|
159
|
+
translateX: col * squareSize
|
|
160
|
+
}, {
|
|
161
|
+
translateY: row * squareSize
|
|
162
|
+
}]
|
|
163
|
+
};
|
|
164
|
+
});
|
|
165
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
166
|
+
style: [{
|
|
167
|
+
position: 'absolute',
|
|
168
|
+
width: squareSize,
|
|
169
|
+
height: squareSize,
|
|
170
|
+
backgroundColor: color
|
|
171
|
+
}, animatedStyle],
|
|
172
|
+
pointerEvents: "none"
|
|
173
|
+
});
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
// ---------------------------------------------------------------------------
|
|
177
|
+
// Standalone SquareHighlight (exported for advanced consumers)
|
|
178
|
+
// ---------------------------------------------------------------------------
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Single square highlight component.
|
|
182
|
+
* Exported for consumers who build their own overlay layers.
|
|
183
|
+
*/
|
|
184
|
+
export const SquareHighlight = /*#__PURE__*/React.memo(function SquareHighlight({
|
|
185
|
+
square,
|
|
186
|
+
color,
|
|
187
|
+
squareSize,
|
|
188
|
+
orientation
|
|
189
|
+
}) {
|
|
190
|
+
const {
|
|
191
|
+
x,
|
|
192
|
+
y
|
|
193
|
+
} = squareToXY(square, squareSize, orientation);
|
|
194
|
+
return /*#__PURE__*/_jsx(View, {
|
|
195
|
+
style: {
|
|
196
|
+
position: 'absolute',
|
|
197
|
+
left: x,
|
|
198
|
+
top: y,
|
|
199
|
+
width: squareSize,
|
|
200
|
+
height: squareSize,
|
|
201
|
+
backgroundColor: color
|
|
202
|
+
},
|
|
203
|
+
pointerEvents: "none"
|
|
204
|
+
});
|
|
205
|
+
});
|
|
206
|
+
//# sourceMappingURL=board-highlights.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","Animated","useAnimatedStyle","squareToXY","jsx","_jsx","BoardHighlights","memo","boardSize","orientation","squareSize","lastMove","lastMoveColor","checkSquare","checkColor","selectedSquare","selectedColor","premoveSquares","premoveColor","highlights","imperativeHighlights","allHighlights","push","square","from","color","to","h","length","style","position","width","height","pointerEvents","children","map","i","x","y","left","top","backgroundColor","DragTargetHighlight","dragTargetSquare","animatedStyle","value","opacity","transform","translateX","translateY","fileIdx","charCodeAt","rankIdx","parseInt","col","row","SquareHighlight"],"sourceRoot":"..\\..\\src","sources":["board-highlights.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,27 +1,61 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { useEffect } from 'react';
|
|
4
|
-
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
|
+
import Animated, { useAnimatedStyle, useSharedValue, withTiming, withSpring, FadeOut } from 'react-native-reanimated';
|
|
5
|
+
import { DEFAULT_MOVE_DURATION, CAPTURE_FADE_DURATION } from './constants';
|
|
5
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
/**
|
|
8
|
+
* Animate a shared value using the provided AnimationConfig.
|
|
9
|
+
* Falls back to withTiming with moveDuration for backwards compatibility.
|
|
10
|
+
*/
|
|
11
|
+
function animateValue(target, config, moveDuration) {
|
|
12
|
+
if (config) {
|
|
13
|
+
if (config.type === 'spring') {
|
|
14
|
+
return withSpring(target, {
|
|
15
|
+
damping: config.damping ?? 15,
|
|
16
|
+
stiffness: config.stiffness ?? 200,
|
|
17
|
+
mass: config.mass ?? 1
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
// timing
|
|
21
|
+
return withTiming(target, {
|
|
22
|
+
duration: config.duration ?? DEFAULT_MOVE_DURATION
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
const duration = moveDuration ?? DEFAULT_MOVE_DURATION;
|
|
26
|
+
if (duration <= 0) return target;
|
|
27
|
+
return withTiming(target, {
|
|
28
|
+
duration
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
6
32
|
/**
|
|
7
33
|
* A single animated chess piece.
|
|
8
34
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
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.
|
|
12
44
|
*
|
|
13
45
|
* During drag:
|
|
14
|
-
* -
|
|
15
|
-
* - No position changes on the original piece during drag
|
|
46
|
+
* - Inner view hides (opacity: 0) — the drag ghost shows instead
|
|
16
47
|
*
|
|
17
48
|
* After a move:
|
|
18
|
-
* -
|
|
19
|
-
*
|
|
49
|
+
* - Outer view snaps to new position via withTiming/withSpring
|
|
50
|
+
*
|
|
51
|
+
* On capture (unmount):
|
|
52
|
+
* - Outer view fades out via exiting FadeOut (no conflict with inner opacity)
|
|
20
53
|
*/
|
|
21
54
|
export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
22
55
|
targetX,
|
|
23
56
|
targetY,
|
|
24
57
|
squareSize,
|
|
58
|
+
animationConfig,
|
|
25
59
|
moveDuration,
|
|
26
60
|
children,
|
|
27
61
|
activeSquare,
|
|
@@ -36,22 +70,24 @@ export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
|
36
70
|
// useEffect is the correct pattern for reacting to JS prop changes —
|
|
37
71
|
// useDerivedValue is meant for shared-value-to-shared-value derivation.
|
|
38
72
|
useEffect(() => {
|
|
39
|
-
currentX.value =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
73
|
+
currentX.value = animateValue(targetX, animationConfig, moveDuration);
|
|
74
|
+
currentY.value = animateValue(targetY, animationConfig, moveDuration);
|
|
75
|
+
}, [targetX, targetY, animationConfig, moveDuration, currentX, currentY]);
|
|
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(() => {
|
|
47
89
|
const isBeingDragged = isDragging.value && activeSquare.value === square;
|
|
48
90
|
return {
|
|
49
|
-
transform: [{
|
|
50
|
-
translateX: currentX.value
|
|
51
|
-
}, {
|
|
52
|
-
translateY: currentY.value
|
|
53
|
-
}],
|
|
54
|
-
// Hide original piece during drag — drag ghost renders on top
|
|
55
91
|
opacity: isBeingDragged ? 0 : 1
|
|
56
92
|
};
|
|
57
93
|
});
|
|
@@ -60,10 +96,20 @@ export const BoardPieceView = /*#__PURE__*/React.memo(function BoardPieceView({
|
|
|
60
96
|
position: 'absolute',
|
|
61
97
|
width: squareSize,
|
|
62
98
|
height: squareSize
|
|
63
|
-
},
|
|
64
|
-
|
|
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.
|
|
103
|
+
,
|
|
104
|
+
exiting: FadeOut.duration(CAPTURE_FADE_DURATION),
|
|
105
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
106
|
+
style: [{
|
|
107
|
+
flex: 1
|
|
108
|
+
}, opacityStyle],
|
|
109
|
+
children: children
|
|
110
|
+
})
|
|
65
111
|
});
|
|
66
112
|
},
|
|
67
|
-
// Custom comparator: only re-render when position or
|
|
68
|
-
(prev, next) => prev.targetX === next.targetX && prev.targetY === next.targetY && prev.square === next.square && prev.squareSize === next.squareSize && prev.moveDuration === next.moveDuration && prev.children === next.children);
|
|
113
|
+
// Custom comparator: only re-render when position, square, or animation config changes
|
|
114
|
+
(prev, next) => prev.targetX === next.targetX && prev.targetY === next.targetY && prev.square === next.square && prev.squareSize === next.squareSize && prev.moveDuration === next.moveDuration && prev.animationConfig === next.animationConfig && prev.children === next.children);
|
|
69
115
|
//# sourceMappingURL=board-piece.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","Animated","useAnimatedStyle","useSharedValue","withTiming","jsx","_jsx","BoardPieceView","memo","targetX","targetY","squareSize","
|
|
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":[]}
|
|
@@ -16,6 +16,7 @@ export const BoardPiecesLayer = /*#__PURE__*/React.memo(function BoardPiecesLaye
|
|
|
16
16
|
squareSize,
|
|
17
17
|
orientation,
|
|
18
18
|
moveDuration,
|
|
19
|
+
animationConfig,
|
|
19
20
|
renderPiece,
|
|
20
21
|
activeSquare,
|
|
21
22
|
isDragging
|
|
@@ -31,6 +32,7 @@ export const BoardPiecesLayer = /*#__PURE__*/React.memo(function BoardPiecesLaye
|
|
|
31
32
|
targetY: y,
|
|
32
33
|
squareSize: squareSize,
|
|
33
34
|
moveDuration: moveDuration,
|
|
35
|
+
animationConfig: animationConfig,
|
|
34
36
|
activeSquare: activeSquare,
|
|
35
37
|
isDragging: isDragging,
|
|
36
38
|
square: piece.square,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","BoardPieceView","squareToXY","jsx","_jsx","Fragment","_Fragment","BoardPiecesLayer","memo","pieces","squareSize","orientation","moveDuration","renderPiece","activeSquare","isDragging","children","map","piece","x","y","square","targetX","targetY","code","id"],"sourceRoot":"..\\..\\src","sources":["board-pieces.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;
|
|
1
|
+
{"version":3,"names":["React","BoardPieceView","squareToXY","jsx","_jsx","Fragment","_Fragment","BoardPiecesLayer","memo","pieces","squareSize","orientation","moveDuration","animationConfig","renderPiece","activeSquare","isDragging","children","map","piece","x","y","square","targetX","targetY","code","id"],"sourceRoot":"..\\..\\src","sources":["board-pieces.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAahD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,gBAAGP,KAAK,CAACQ,IAAI,CAAC,SAASD,gBAAgBA,CAAC;EACnEE,MAAM;EACNC,UAAU;EACVC,WAAW;EACXC,YAAY;EACZC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC;AACgB,CAAC,EAAE;EACnB,oBACEZ,IAAA,CAAAE,SAAA;IAAAW,QAAA,EACGR,MAAM,CAACS,GAAG,CAAEC,KAAK,IAAK;MACrB,MAAM;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGnB,UAAU,CAACiB,KAAK,CAACG,MAAM,EAAEZ,UAAU,EAAEC,WAAW,CAAC;MAElE,oBACEP,IAAA,CAACH,cAAc;QAEbsB,OAAO,EAAEH,CAAE;QACXI,OAAO,EAAEH,CAAE;QACXX,UAAU,EAAEA,UAAW;QACvBE,YAAY,EAAEA,YAAa;QAC3BC,eAAe,EAAEA,eAAgB;QACjCE,YAAY,EAAEA,YAAa;QAC3BC,UAAU,EAAEA,UAAW;QACvBM,MAAM,EAAEH,KAAK,CAACG,MAAO;QAAAL,QAAA,EAEpBH,WAAW,CAACK,KAAK,CAACM,IAAI,EAAEf,UAAU;MAAC,GAV/BS,KAAK,CAACO,EAWG,CAAC;IAErB,CAAC;EAAC,CACF,CAAC;AAEP,CAAC,CAAC","ignoreList":[]}
|