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.
Files changed (106) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +187 -168
  3. package/lib/commonjs/board-annotations.js +8 -8
  4. package/lib/commonjs/board-annotations.js.map +1 -1
  5. package/lib/commonjs/board-arrows.js.map +1 -1
  6. package/lib/commonjs/board-background.js +5 -5
  7. package/lib/commonjs/board-background.js.map +1 -1
  8. package/lib/commonjs/board-coordinates.js +8 -8
  9. package/lib/commonjs/board-coordinates.js.map +1 -1
  10. package/lib/commonjs/board-drag-ghost.js +10 -10
  11. package/lib/commonjs/board-drag-ghost.js.map +1 -1
  12. package/lib/commonjs/board-highlights.js +15 -15
  13. package/lib/commonjs/board-highlights.js.map +1 -1
  14. package/lib/commonjs/board-legal-dots.js +5 -5
  15. package/lib/commonjs/board-legal-dots.js.map +1 -1
  16. package/lib/commonjs/board-piece.js +25 -25
  17. package/lib/commonjs/board-piece.js.map +1 -1
  18. package/lib/commonjs/board-pieces.js +6 -6
  19. package/lib/commonjs/board-pieces.js.map +1 -1
  20. package/lib/commonjs/board.js +68 -63
  21. package/lib/commonjs/board.js.map +1 -1
  22. package/lib/commonjs/constants.js.map +1 -1
  23. package/lib/commonjs/index.js.map +1 -1
  24. package/lib/commonjs/pieces/default-pieces.js.map +1 -1
  25. package/lib/commonjs/pieces/index.js.map +1 -1
  26. package/lib/commonjs/promotion-picker.js +9 -9
  27. package/lib/commonjs/promotion-picker.js.map +1 -1
  28. package/lib/commonjs/static-board.js +7 -7
  29. package/lib/commonjs/static-board.js.map +1 -1
  30. package/lib/commonjs/themes.js.map +1 -1
  31. package/lib/commonjs/types.js.map +1 -1
  32. package/lib/commonjs/use-board-gesture.js +26 -26
  33. package/lib/commonjs/use-board-gesture.js.map +1 -1
  34. package/lib/commonjs/use-board-pieces.js +15 -15
  35. package/lib/commonjs/use-board-pieces.js.map +1 -1
  36. package/lib/commonjs/use-board-state.js +21 -12
  37. package/lib/commonjs/use-board-state.js.map +1 -1
  38. package/lib/commonjs/use-premove.js +12 -12
  39. package/lib/commonjs/use-premove.js.map +1 -1
  40. package/lib/module/board-annotations.js +8 -8
  41. package/lib/module/board-annotations.js.map +1 -1
  42. package/lib/module/board-arrows.js.map +1 -1
  43. package/lib/module/board-background.js +5 -5
  44. package/lib/module/board-background.js.map +1 -1
  45. package/lib/module/board-coordinates.js +8 -8
  46. package/lib/module/board-coordinates.js.map +1 -1
  47. package/lib/module/board-drag-ghost.js +10 -10
  48. package/lib/module/board-drag-ghost.js.map +1 -1
  49. package/lib/module/board-highlights.js +15 -15
  50. package/lib/module/board-highlights.js.map +1 -1
  51. package/lib/module/board-legal-dots.js +5 -5
  52. package/lib/module/board-legal-dots.js.map +1 -1
  53. package/lib/module/board-piece.js +25 -25
  54. package/lib/module/board-piece.js.map +1 -1
  55. package/lib/module/board-pieces.js +6 -6
  56. package/lib/module/board-pieces.js.map +1 -1
  57. package/lib/module/board.js +68 -63
  58. package/lib/module/board.js.map +1 -1
  59. package/lib/module/constants.js.map +1 -1
  60. package/lib/module/index.js.map +1 -1
  61. package/lib/module/pieces/default-pieces.js.map +1 -1
  62. package/lib/module/pieces/index.js.map +1 -1
  63. package/lib/module/promotion-picker.js +9 -9
  64. package/lib/module/promotion-picker.js.map +1 -1
  65. package/lib/module/static-board.js +7 -7
  66. package/lib/module/static-board.js.map +1 -1
  67. package/lib/module/themes.js.map +1 -1
  68. package/lib/module/types.js.map +1 -1
  69. package/lib/module/use-board-gesture.js +26 -26
  70. package/lib/module/use-board-gesture.js.map +1 -1
  71. package/lib/module/use-board-pieces.js +15 -15
  72. package/lib/module/use-board-pieces.js.map +1 -1
  73. package/lib/module/use-board-state.js +21 -12
  74. package/lib/module/use-board-state.js.map +1 -1
  75. package/lib/module/use-premove.js +12 -12
  76. package/lib/module/use-premove.js.map +1 -1
  77. package/lib/typescript/board-coordinates.d.ts.map +1 -1
  78. package/lib/typescript/board.d.ts.map +1 -1
  79. package/lib/typescript/promotion-picker.d.ts.map +1 -1
  80. package/lib/typescript/static-board.d.ts.map +1 -1
  81. package/lib/typescript/types.d.ts +12 -2
  82. package/lib/typescript/types.d.ts.map +1 -1
  83. package/lib/typescript/use-board-gesture.d.ts.map +1 -1
  84. package/lib/typescript/use-board-state.d.ts.map +1 -1
  85. package/package.json +23 -3
  86. package/src/board-annotations.tsx +147 -147
  87. package/src/board-background.tsx +46 -46
  88. package/src/board-coordinates.tsx +192 -192
  89. package/src/board-drag-ghost.tsx +132 -132
  90. package/src/board-highlights.tsx +226 -226
  91. package/src/board-legal-dots.tsx +73 -73
  92. package/src/board-piece.tsx +160 -160
  93. package/src/board-pieces.tsx +63 -63
  94. package/src/board.tsx +688 -685
  95. package/src/constants.ts +103 -103
  96. package/src/index.ts +101 -101
  97. package/src/pieces/default-pieces.tsx +383 -383
  98. package/src/pieces/index.ts +1 -1
  99. package/src/promotion-picker.tsx +147 -147
  100. package/src/static-board.tsx +186 -187
  101. package/src/themes.ts +129 -129
  102. package/src/types.ts +394 -373
  103. package/src/use-board-gesture.ts +459 -429
  104. package/src/use-board-pieces.ts +158 -158
  105. package/src/use-board-state.ts +120 -111
  106. package/src/use-premove.ts +59 -59
@@ -1 +1 @@
1
- export { DefaultPieceSet } from './default-pieces';
1
+ export { DefaultPieceSet } from './default-pieces';
@@ -1,147 +1,147 @@
1
- import React, { useCallback } from 'react';
2
- import { View, Pressable } from 'react-native';
3
-
4
- import type { ChessColor, PromotionPiece, PieceSetMap } 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
- };
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
+ };