react-native-chess-kit 0.5.2 → 0.5.3
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/LICENSE +21 -21
- package/README.md +187 -168
- package/lib/commonjs/board-annotations.js +8 -8
- package/lib/commonjs/board-annotations.js.map +1 -1
- package/lib/commonjs/board-arrows.js.map +1 -1
- package/lib/commonjs/board-background.js +5 -5
- package/lib/commonjs/board-background.js.map +1 -1
- package/lib/commonjs/board-coordinates.js +8 -8
- package/lib/commonjs/board-coordinates.js.map +1 -1
- package/lib/commonjs/board-drag-ghost.js +10 -10
- package/lib/commonjs/board-drag-ghost.js.map +1 -1
- package/lib/commonjs/board-highlights.js +15 -15
- package/lib/commonjs/board-highlights.js.map +1 -1
- package/lib/commonjs/board-legal-dots.js +5 -5
- package/lib/commonjs/board-legal-dots.js.map +1 -1
- package/lib/commonjs/board-piece.js +25 -25
- package/lib/commonjs/board-piece.js.map +1 -1
- package/lib/commonjs/board-pieces.js +6 -6
- package/lib/commonjs/board-pieces.js.map +1 -1
- package/lib/commonjs/board.js +68 -63
- package/lib/commonjs/board.js.map +1 -1
- package/lib/commonjs/constants.js.map +1 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/pieces/default-pieces.js.map +1 -1
- package/lib/commonjs/pieces/index.js.map +1 -1
- package/lib/commonjs/promotion-picker.js +9 -9
- package/lib/commonjs/promotion-picker.js.map +1 -1
- package/lib/commonjs/static-board.js +7 -7
- package/lib/commonjs/static-board.js.map +1 -1
- package/lib/commonjs/themes.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/commonjs/use-board-gesture.js +26 -26
- package/lib/commonjs/use-board-gesture.js.map +1 -1
- package/lib/commonjs/use-board-pieces.js +15 -15
- package/lib/commonjs/use-board-pieces.js.map +1 -1
- package/lib/commonjs/use-board-state.js +21 -12
- package/lib/commonjs/use-board-state.js.map +1 -1
- package/lib/commonjs/use-premove.js +12 -12
- package/lib/commonjs/use-premove.js.map +1 -1
- package/lib/module/board-annotations.js +8 -8
- package/lib/module/board-annotations.js.map +1 -1
- package/lib/module/board-arrows.js.map +1 -1
- package/lib/module/board-background.js +5 -5
- package/lib/module/board-background.js.map +1 -1
- package/lib/module/board-coordinates.js +8 -8
- package/lib/module/board-coordinates.js.map +1 -1
- package/lib/module/board-drag-ghost.js +10 -10
- package/lib/module/board-drag-ghost.js.map +1 -1
- package/lib/module/board-highlights.js +15 -15
- package/lib/module/board-highlights.js.map +1 -1
- package/lib/module/board-legal-dots.js +5 -5
- package/lib/module/board-legal-dots.js.map +1 -1
- package/lib/module/board-piece.js +25 -25
- package/lib/module/board-piece.js.map +1 -1
- package/lib/module/board-pieces.js +6 -6
- package/lib/module/board-pieces.js.map +1 -1
- package/lib/module/board.js +68 -63
- package/lib/module/board.js.map +1 -1
- package/lib/module/constants.js.map +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/pieces/default-pieces.js.map +1 -1
- package/lib/module/pieces/index.js.map +1 -1
- package/lib/module/promotion-picker.js +9 -9
- package/lib/module/promotion-picker.js.map +1 -1
- package/lib/module/static-board.js +7 -7
- package/lib/module/static-board.js.map +1 -1
- package/lib/module/themes.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/module/use-board-gesture.js +26 -26
- package/lib/module/use-board-gesture.js.map +1 -1
- package/lib/module/use-board-pieces.js +15 -15
- package/lib/module/use-board-pieces.js.map +1 -1
- package/lib/module/use-board-state.js +21 -12
- package/lib/module/use-board-state.js.map +1 -1
- package/lib/module/use-premove.js +12 -12
- package/lib/module/use-premove.js.map +1 -1
- package/lib/typescript/board-coordinates.d.ts.map +1 -1
- package/lib/typescript/board.d.ts.map +1 -1
- package/lib/typescript/promotion-picker.d.ts.map +1 -1
- package/lib/typescript/static-board.d.ts.map +1 -1
- package/lib/typescript/types.d.ts +12 -2
- package/lib/typescript/types.d.ts.map +1 -1
- package/lib/typescript/use-board-gesture.d.ts.map +1 -1
- package/lib/typescript/use-board-state.d.ts.map +1 -1
- package/package.json +23 -3
- package/src/board-annotations.tsx +147 -147
- package/src/board-background.tsx +46 -46
- package/src/board-coordinates.tsx +192 -192
- package/src/board-drag-ghost.tsx +132 -132
- package/src/board-highlights.tsx +226 -226
- package/src/board-legal-dots.tsx +73 -73
- package/src/board-piece.tsx +160 -160
- package/src/board-pieces.tsx +63 -63
- package/src/board.tsx +688 -685
- package/src/constants.ts +103 -103
- package/src/index.ts +101 -101
- package/src/pieces/default-pieces.tsx +383 -383
- package/src/pieces/index.ts +1 -1
- package/src/promotion-picker.tsx +147 -147
- package/src/static-board.tsx +186 -187
- package/src/themes.ts +129 -129
- package/src/types.ts +394 -373
- package/src/use-board-gesture.ts +459 -429
- package/src/use-board-pieces.ts +158 -158
- package/src/use-board-state.ts +120 -111
- package/src/use-premove.ts +59 -59
package/src/pieces/index.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { DefaultPieceSet } from './default-pieces';
|
|
1
|
+
export { DefaultPieceSet } from './default-pieces';
|
package/src/promotion-picker.tsx
CHANGED
|
@@ -1,147 +1,147 @@
|
|
|
1
|
-
import React, { useCallback } from 'react';
|
|
2
|
-
import { View, Pressable } from 'react-native';
|
|
3
|
-
|
|
4
|
-
import type { ChessColor, PromotionPiece
|
|
5
|
-
import { squareToXY } from './use-board-pieces';
|
|
6
|
-
import { PROMOTION_PIECE_PADDING } from './constants';
|
|
7
|
-
|
|
8
|
-
// ---------------------------------------------------------------------------
|
|
9
|
-
// Props
|
|
10
|
-
// ---------------------------------------------------------------------------
|
|
11
|
-
|
|
12
|
-
type PromotionPickerProps = {
|
|
13
|
-
/** Square the pawn is promoting on */
|
|
14
|
-
square: string;
|
|
15
|
-
/** Color of the promoting pawn */
|
|
16
|
-
pieceColor: 'w' | 'b';
|
|
17
|
-
/** Board size in pixels */
|
|
18
|
-
boardSize: number;
|
|
19
|
-
squareSize: number;
|
|
20
|
-
orientation: ChessColor;
|
|
21
|
-
/** Piece renderer (from renderPiece prop or pieceSet) */
|
|
22
|
-
renderPiece: (code: string, size: number) => React.ReactElement;
|
|
23
|
-
/** Called when user picks a promotion piece */
|
|
24
|
-
onSelect: (piece: PromotionPiece) => void;
|
|
25
|
-
/** Called when user cancels (taps outside) */
|
|
26
|
-
onCancel: () => void;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
// ---------------------------------------------------------------------------
|
|
30
|
-
// Promotion pieces in order
|
|
31
|
-
// ---------------------------------------------------------------------------
|
|
32
|
-
|
|
33
|
-
const PROMOTION_PIECES: PromotionPiece[] = ['q', 'r', 'b', 'n'];
|
|
34
|
-
|
|
35
|
-
function promotionPieceCode(color: 'w' | 'b', piece: PromotionPiece): string {
|
|
36
|
-
return `${color}${piece}`;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// ---------------------------------------------------------------------------
|
|
40
|
-
// Component
|
|
41
|
-
// ---------------------------------------------------------------------------
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Promotion piece picker overlay.
|
|
45
|
-
*
|
|
46
|
-
* Appears as a vertical column of 4 pieces (Q, R, B, N) anchored to the
|
|
47
|
-
* promotion square. Expands downward when promoting on the top edge,
|
|
48
|
-
* upward when promoting on the bottom edge.
|
|
49
|
-
*
|
|
50
|
-
* A semi-transparent backdrop covers the board. Tapping outside cancels.
|
|
51
|
-
*/
|
|
52
|
-
export const PromotionPicker = React.memo(function PromotionPicker({
|
|
53
|
-
square,
|
|
54
|
-
pieceColor,
|
|
55
|
-
boardSize,
|
|
56
|
-
squareSize,
|
|
57
|
-
orientation,
|
|
58
|
-
renderPiece,
|
|
59
|
-
onSelect,
|
|
60
|
-
onCancel,
|
|
61
|
-
}: PromotionPickerProps) {
|
|
62
|
-
const { x, y } = squareToXY(square, squareSize, orientation);
|
|
63
|
-
const pieceSize = squareSize * (1 - PROMOTION_PIECE_PADDING * 2);
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
// Determine if the picker should expand downward or upward
|
|
67
|
-
// If the promotion square is in the top half, expand downward
|
|
68
|
-
const expandDown = y < boardSize / 2;
|
|
69
|
-
|
|
70
|
-
const handleSelect = useCallback(
|
|
71
|
-
(piece: PromotionPiece) => {
|
|
72
|
-
onSelect(piece);
|
|
73
|
-
},
|
|
74
|
-
[onSelect],
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
return (
|
|
78
|
-
<View
|
|
79
|
-
style={{
|
|
80
|
-
position: 'absolute',
|
|
81
|
-
width: boardSize,
|
|
82
|
-
height: boardSize,
|
|
83
|
-
zIndex: 200,
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
{/* Backdrop -- dims the board and captures cancel taps */}
|
|
87
|
-
<Pressable
|
|
88
|
-
style={{
|
|
89
|
-
position: 'absolute',
|
|
90
|
-
width: boardSize,
|
|
91
|
-
height: boardSize,
|
|
92
|
-
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
93
|
-
}}
|
|
94
|
-
onPress={onCancel}
|
|
95
|
-
/>
|
|
96
|
-
|
|
97
|
-
{/* Piece column */}
|
|
98
|
-
<View
|
|
99
|
-
style={{
|
|
100
|
-
position: 'absolute',
|
|
101
|
-
left: x,
|
|
102
|
-
top: expandDown ? y : y - squareSize * 3,
|
|
103
|
-
width: squareSize,
|
|
104
|
-
backgroundColor: '#ffffff',
|
|
105
|
-
borderRadius: 4,
|
|
106
|
-
// Subtle shadow for elevation
|
|
107
|
-
shadowColor: '#000',
|
|
108
|
-
shadowOffset: { width: 0, height: 2 },
|
|
109
|
-
shadowOpacity: 0.25,
|
|
110
|
-
shadowRadius: 4,
|
|
111
|
-
elevation: 8,
|
|
112
|
-
overflow: 'hidden',
|
|
113
|
-
}}
|
|
114
|
-
>
|
|
115
|
-
{PROMOTION_PIECES.map((piece) => {
|
|
116
|
-
const code = promotionPieceCode(pieceColor, piece);
|
|
117
|
-
return (
|
|
118
|
-
<Pressable
|
|
119
|
-
key={piece}
|
|
120
|
-
onPress={() => handleSelect(piece)}
|
|
121
|
-
style={({ pressed }) => ({
|
|
122
|
-
width: squareSize,
|
|
123
|
-
height: squareSize,
|
|
124
|
-
alignItems: 'center',
|
|
125
|
-
justifyContent: 'center',
|
|
126
|
-
backgroundColor: pressed ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
|
|
127
|
-
})}
|
|
128
|
-
accessibilityLabel={`Promote to ${PIECE_NAMES[piece]}`}
|
|
129
|
-
accessibilityRole="button"
|
|
130
|
-
>
|
|
131
|
-
<View style={{ width: pieceSize, height: pieceSize }}>
|
|
132
|
-
{renderPiece(code, pieceSize)}
|
|
133
|
-
</View>
|
|
134
|
-
</Pressable>
|
|
135
|
-
);
|
|
136
|
-
})}
|
|
137
|
-
</View>
|
|
138
|
-
</View>
|
|
139
|
-
);
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
const PIECE_NAMES: Record<PromotionPiece, string> = {
|
|
143
|
-
q: 'Queen',
|
|
144
|
-
r: 'Rook',
|
|
145
|
-
b: 'Bishop',
|
|
146
|
-
n: 'Knight',
|
|
147
|
-
};
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { View, Pressable } from 'react-native';
|
|
3
|
+
|
|
4
|
+
import type { ChessColor, PromotionPiece } from './types';
|
|
5
|
+
import { squareToXY } from './use-board-pieces';
|
|
6
|
+
import { PROMOTION_PIECE_PADDING } from './constants';
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
// Props
|
|
10
|
+
// ---------------------------------------------------------------------------
|
|
11
|
+
|
|
12
|
+
type PromotionPickerProps = {
|
|
13
|
+
/** Square the pawn is promoting on */
|
|
14
|
+
square: string;
|
|
15
|
+
/** Color of the promoting pawn */
|
|
16
|
+
pieceColor: 'w' | 'b';
|
|
17
|
+
/** Board size in pixels */
|
|
18
|
+
boardSize: number;
|
|
19
|
+
squareSize: number;
|
|
20
|
+
orientation: ChessColor;
|
|
21
|
+
/** Piece renderer (from renderPiece prop or pieceSet) */
|
|
22
|
+
renderPiece: (code: string, size: number) => React.ReactElement;
|
|
23
|
+
/** Called when user picks a promotion piece */
|
|
24
|
+
onSelect: (piece: PromotionPiece) => void;
|
|
25
|
+
/** Called when user cancels (taps outside) */
|
|
26
|
+
onCancel: () => void;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
// Promotion pieces in order
|
|
31
|
+
// ---------------------------------------------------------------------------
|
|
32
|
+
|
|
33
|
+
const PROMOTION_PIECES: PromotionPiece[] = ['q', 'r', 'b', 'n'];
|
|
34
|
+
|
|
35
|
+
function promotionPieceCode(color: 'w' | 'b', piece: PromotionPiece): string {
|
|
36
|
+
return `${color}${piece}`;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// ---------------------------------------------------------------------------
|
|
40
|
+
// Component
|
|
41
|
+
// ---------------------------------------------------------------------------
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Promotion piece picker overlay.
|
|
45
|
+
*
|
|
46
|
+
* Appears as a vertical column of 4 pieces (Q, R, B, N) anchored to the
|
|
47
|
+
* promotion square. Expands downward when promoting on the top edge,
|
|
48
|
+
* upward when promoting on the bottom edge.
|
|
49
|
+
*
|
|
50
|
+
* A semi-transparent backdrop covers the board. Tapping outside cancels.
|
|
51
|
+
*/
|
|
52
|
+
export const PromotionPicker = React.memo(function PromotionPicker({
|
|
53
|
+
square,
|
|
54
|
+
pieceColor,
|
|
55
|
+
boardSize,
|
|
56
|
+
squareSize,
|
|
57
|
+
orientation,
|
|
58
|
+
renderPiece,
|
|
59
|
+
onSelect,
|
|
60
|
+
onCancel,
|
|
61
|
+
}: PromotionPickerProps) {
|
|
62
|
+
const { x, y } = squareToXY(square, squareSize, orientation);
|
|
63
|
+
const pieceSize = squareSize * (1 - PROMOTION_PIECE_PADDING * 2);
|
|
64
|
+
const _padding = squareSize * PROMOTION_PIECE_PADDING;
|
|
65
|
+
|
|
66
|
+
// Determine if the picker should expand downward or upward
|
|
67
|
+
// If the promotion square is in the top half, expand downward
|
|
68
|
+
const expandDown = y < boardSize / 2;
|
|
69
|
+
|
|
70
|
+
const handleSelect = useCallback(
|
|
71
|
+
(piece: PromotionPiece) => {
|
|
72
|
+
onSelect(piece);
|
|
73
|
+
},
|
|
74
|
+
[onSelect],
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<View
|
|
79
|
+
style={{
|
|
80
|
+
position: 'absolute',
|
|
81
|
+
width: boardSize,
|
|
82
|
+
height: boardSize,
|
|
83
|
+
zIndex: 200,
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
86
|
+
{/* Backdrop -- dims the board and captures cancel taps */}
|
|
87
|
+
<Pressable
|
|
88
|
+
style={{
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
width: boardSize,
|
|
91
|
+
height: boardSize,
|
|
92
|
+
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
93
|
+
}}
|
|
94
|
+
onPress={onCancel}
|
|
95
|
+
/>
|
|
96
|
+
|
|
97
|
+
{/* Piece column */}
|
|
98
|
+
<View
|
|
99
|
+
style={{
|
|
100
|
+
position: 'absolute',
|
|
101
|
+
left: x,
|
|
102
|
+
top: expandDown ? y : y - squareSize * 3,
|
|
103
|
+
width: squareSize,
|
|
104
|
+
backgroundColor: '#ffffff',
|
|
105
|
+
borderRadius: 4,
|
|
106
|
+
// Subtle shadow for elevation
|
|
107
|
+
shadowColor: '#000',
|
|
108
|
+
shadowOffset: { width: 0, height: 2 },
|
|
109
|
+
shadowOpacity: 0.25,
|
|
110
|
+
shadowRadius: 4,
|
|
111
|
+
elevation: 8,
|
|
112
|
+
overflow: 'hidden',
|
|
113
|
+
}}
|
|
114
|
+
>
|
|
115
|
+
{PROMOTION_PIECES.map((piece) => {
|
|
116
|
+
const code = promotionPieceCode(pieceColor, piece);
|
|
117
|
+
return (
|
|
118
|
+
<Pressable
|
|
119
|
+
key={piece}
|
|
120
|
+
onPress={() => handleSelect(piece)}
|
|
121
|
+
style={({ pressed }) => ({
|
|
122
|
+
width: squareSize,
|
|
123
|
+
height: squareSize,
|
|
124
|
+
alignItems: 'center',
|
|
125
|
+
justifyContent: 'center',
|
|
126
|
+
backgroundColor: pressed ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
|
|
127
|
+
})}
|
|
128
|
+
accessibilityLabel={`Promote to ${PIECE_NAMES[piece]}`}
|
|
129
|
+
accessibilityRole="button"
|
|
130
|
+
>
|
|
131
|
+
<View style={{ width: pieceSize, height: pieceSize }}>
|
|
132
|
+
{renderPiece(code, pieceSize)}
|
|
133
|
+
</View>
|
|
134
|
+
</Pressable>
|
|
135
|
+
);
|
|
136
|
+
})}
|
|
137
|
+
</View>
|
|
138
|
+
</View>
|
|
139
|
+
);
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
const PIECE_NAMES: Record<PromotionPiece, string> = {
|
|
143
|
+
q: 'Queen',
|
|
144
|
+
r: 'Rook',
|
|
145
|
+
b: 'Bishop',
|
|
146
|
+
n: 'Knight',
|
|
147
|
+
};
|