@dxos/react-ui-gameboard 0.8.4-main.ae835ea → 0.8.4-main.bc674ce
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/dist/lib/browser/index.mjs +536 -661
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +536 -661
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/Chessboard/Chessboard.d.ts +1 -1
- package/dist/types/src/components/Chessboard/Chessboard.d.ts.map +1 -1
- package/dist/types/src/components/Chessboard/Chessboard.stories.d.ts +1 -1
- package/dist/types/src/components/Chessboard/Chessboard.stories.d.ts.map +1 -1
- package/dist/types/src/components/Chessboard/chess.d.ts +5 -4
- package/dist/types/src/components/Chessboard/chess.d.ts.map +1 -1
- package/dist/types/src/components/Gameboard/Gameboard.d.ts +5 -5
- package/dist/types/src/components/Gameboard/Gameboard.d.ts.map +1 -1
- package/dist/types/src/components/Gameboard/types.d.ts +2 -3
- package/dist/types/src/components/Gameboard/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +25 -22
- package/src/components/Chessboard/Chessboard.stories.tsx +9 -5
- package/src/components/Chessboard/Chessboard.tsx +10 -4
- package/src/components/Chessboard/chess.ts +13 -10
- package/src/components/Gameboard/Gameboard.tsx +11 -6
- package/src/components/Gameboard/Piece.tsx +1 -1
- package/src/components/Gameboard/Square.tsx +1 -1
- package/src/components/Gameboard/types.ts +2 -3
|
@@ -24,15 +24,13 @@ var getRelativeBounds = (container, element) => {
|
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
// src/components/Gameboard/Gameboard.tsx
|
|
27
|
-
import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
|
|
28
27
|
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
29
28
|
import { createContext } from "@radix-ui/react-context";
|
|
30
29
|
import React3, { forwardRef, useCallback, useEffect as useEffect3, useState as useState3 } from "react";
|
|
31
30
|
import { log as log3 } from "@dxos/log";
|
|
32
|
-
import { mx as mx3 } from "@dxos/
|
|
31
|
+
import { mx as mx3 } from "@dxos/ui-theme";
|
|
33
32
|
|
|
34
33
|
// src/components/Gameboard/Piece.tsx
|
|
35
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
36
34
|
import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
37
35
|
import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer";
|
|
38
36
|
import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
|
|
@@ -41,211 +39,200 @@ import { createPortal } from "react-dom";
|
|
|
41
39
|
import { invariant } from "@dxos/invariant";
|
|
42
40
|
import { log } from "@dxos/log";
|
|
43
41
|
import { useDynamicRef } from "@dxos/react-ui";
|
|
44
|
-
import { mx } from "@dxos/
|
|
42
|
+
import { mx } from "@dxos/ui-theme";
|
|
45
43
|
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Piece.tsx";
|
|
46
44
|
var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, bounds, label, onClick }) => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
location
|
|
106
|
-
}));
|
|
107
|
-
}
|
|
108
|
-
} catch {
|
|
45
|
+
const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName);
|
|
46
|
+
const promotingRef = useDynamicRef(promoting);
|
|
47
|
+
const [dragging, setDragging] = useState(false);
|
|
48
|
+
const [preview, setPreview] = useState();
|
|
49
|
+
const [current, setCurrent] = useState({});
|
|
50
|
+
const ref = useRef(null);
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
if (!model) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const el = ref.current;
|
|
56
|
+
invariant(el, void 0, {
|
|
57
|
+
F: __dxlog_file,
|
|
58
|
+
L: 45,
|
|
59
|
+
S: void 0,
|
|
60
|
+
A: [
|
|
61
|
+
"el",
|
|
62
|
+
""
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
return draggable({
|
|
66
|
+
element: el,
|
|
67
|
+
getInitialData: () => ({
|
|
68
|
+
piece
|
|
69
|
+
}),
|
|
70
|
+
onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
|
|
71
|
+
log("onGenerateDragPreview", {
|
|
72
|
+
source: source.data
|
|
73
|
+
}, {
|
|
74
|
+
F: __dxlog_file,
|
|
75
|
+
L: 51,
|
|
76
|
+
S: void 0,
|
|
77
|
+
C: (f, a) => f(...a)
|
|
78
|
+
});
|
|
79
|
+
setCustomNativeDragPreview({
|
|
80
|
+
getOffset: centerUnderPointer,
|
|
81
|
+
render: ({ container }) => {
|
|
82
|
+
setPreview(container);
|
|
83
|
+
const { width, height } = el.getBoundingClientRect();
|
|
84
|
+
container.style.width = width + "px";
|
|
85
|
+
container.style.height = height + "px";
|
|
86
|
+
return () => {
|
|
87
|
+
setPreview(void 0);
|
|
88
|
+
};
|
|
89
|
+
},
|
|
90
|
+
nativeSetDragImage
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
canDrag: () => !promotingRef.current && !model.readonly && model.turn === piece.side,
|
|
94
|
+
onDragStart: () => setDragging(true),
|
|
95
|
+
onDrop: ({ location: { current: current2 } }) => {
|
|
96
|
+
try {
|
|
97
|
+
const location = current2.dropTargets[0]?.data.location;
|
|
98
|
+
if (isLocation(location)) {
|
|
99
|
+
setCurrent((current3) => ({
|
|
100
|
+
...current3,
|
|
101
|
+
location
|
|
102
|
+
}));
|
|
109
103
|
}
|
|
110
|
-
|
|
104
|
+
} catch {
|
|
111
105
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
106
|
+
setDragging(false);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
}, [
|
|
110
|
+
model,
|
|
111
|
+
piece
|
|
112
|
+
]);
|
|
113
|
+
useEffect(() => {
|
|
114
|
+
requestAnimationFrame(() => {
|
|
115
|
+
if (!ref.current || !bounds) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
if (!current.location || !isEqualLocation(current.location, piece.location)) {
|
|
119
|
+
ref.current.style.transition = "top 250ms ease-out, left 250ms ease-out";
|
|
120
|
+
ref.current.style.top = bounds.top + "px";
|
|
121
|
+
ref.current.style.left = bounds.left + "px";
|
|
122
|
+
setCurrent({
|
|
123
|
+
location: piece.location,
|
|
124
|
+
bounds
|
|
125
|
+
});
|
|
126
|
+
} else if (current.bounds !== bounds) {
|
|
127
|
+
ref.current.style.transition = "none";
|
|
128
|
+
ref.current.style.top = bounds.top + "px";
|
|
129
|
+
ref.current.style.left = bounds.left + "px";
|
|
130
|
+
setCurrent({
|
|
131
|
+
location: piece.location,
|
|
132
|
+
bounds
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
}, [
|
|
137
|
+
current,
|
|
138
|
+
piece.location,
|
|
139
|
+
bounds
|
|
140
|
+
]);
|
|
141
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
142
|
+
ref,
|
|
143
|
+
style: {
|
|
144
|
+
width: bounds?.width,
|
|
145
|
+
height: bounds?.height
|
|
146
|
+
},
|
|
147
|
+
className: mx("absolute", classNames, dragging && "opacity-20", isDragging && "pointer-events-none"),
|
|
148
|
+
onClick
|
|
149
|
+
}, /* @__PURE__ */ React.createElement(Component, {
|
|
150
|
+
className: "grow"
|
|
151
|
+
}), label && /* @__PURE__ */ React.createElement("div", {
|
|
152
|
+
className: "absolute inset-1 text-xs text-black"
|
|
153
|
+
}, label)), preview && /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement("div", {
|
|
154
|
+
className: mx(classNames)
|
|
155
|
+
}, /* @__PURE__ */ React.createElement(Component, {
|
|
156
|
+
className: "grow"
|
|
157
|
+
})), preview));
|
|
165
158
|
});
|
|
166
159
|
Piece.displayName = "Piece";
|
|
167
160
|
|
|
168
161
|
// src/components/Gameboard/Square.tsx
|
|
169
|
-
import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
|
|
170
162
|
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
|
171
163
|
import React2, { memo as memo2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
|
|
172
164
|
import { invariant as invariant2 } from "@dxos/invariant";
|
|
173
165
|
import { log as log2 } from "@dxos/log";
|
|
174
|
-
import { mx as mx2 } from "@dxos/
|
|
166
|
+
import { mx as mx2 } from "@dxos/ui-theme";
|
|
175
167
|
var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Square.tsx";
|
|
176
168
|
var Square = /* @__PURE__ */ memo2(({ location, bounds, label, classNames }) => {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
className: mx2("absolute bottom-1 left-1 text-xs text-neutral-500")
|
|
245
|
-
}, label));
|
|
246
|
-
} finally {
|
|
247
|
-
_effect.f();
|
|
248
|
-
}
|
|
169
|
+
const ref = useRef2(null);
|
|
170
|
+
const [state, setState] = useState2("idle");
|
|
171
|
+
const { model } = useGameboardContext(Square.displayName);
|
|
172
|
+
useEffect2(() => {
|
|
173
|
+
const el = ref.current;
|
|
174
|
+
invariant2(el, void 0, {
|
|
175
|
+
F: __dxlog_file2,
|
|
176
|
+
L: 32,
|
|
177
|
+
S: void 0,
|
|
178
|
+
A: [
|
|
179
|
+
"el",
|
|
180
|
+
""
|
|
181
|
+
]
|
|
182
|
+
});
|
|
183
|
+
return dropTargetForElements({
|
|
184
|
+
element: el,
|
|
185
|
+
getData: () => ({
|
|
186
|
+
location
|
|
187
|
+
}),
|
|
188
|
+
canDrop: ({ source }) => {
|
|
189
|
+
log2("canDrop", {
|
|
190
|
+
source: source.data
|
|
191
|
+
}, {
|
|
192
|
+
F: __dxlog_file2,
|
|
193
|
+
L: 38,
|
|
194
|
+
S: void 0,
|
|
195
|
+
C: (f, a) => f(...a)
|
|
196
|
+
});
|
|
197
|
+
return true;
|
|
198
|
+
},
|
|
199
|
+
onDragEnter: ({ source }) => {
|
|
200
|
+
log2("onDragEnter", {
|
|
201
|
+
source: source.data
|
|
202
|
+
}, {
|
|
203
|
+
F: __dxlog_file2,
|
|
204
|
+
L: 42,
|
|
205
|
+
S: void 0,
|
|
206
|
+
C: (f, a) => f(...a)
|
|
207
|
+
});
|
|
208
|
+
const piece = source.data.piece;
|
|
209
|
+
if (!isPiece(piece)) {
|
|
210
|
+
return;
|
|
211
|
+
}
|
|
212
|
+
if (model?.isValidMove({
|
|
213
|
+
from: piece.location,
|
|
214
|
+
to: location,
|
|
215
|
+
piece: piece.type
|
|
216
|
+
})) {
|
|
217
|
+
setState("validMove");
|
|
218
|
+
} else {
|
|
219
|
+
setState("invalidMove");
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
onDragLeave: () => setState("idle"),
|
|
223
|
+
onDrop: () => setState("idle")
|
|
224
|
+
});
|
|
225
|
+
}, [
|
|
226
|
+
model,
|
|
227
|
+
location
|
|
228
|
+
]);
|
|
229
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
230
|
+
ref,
|
|
231
|
+
style: bounds,
|
|
232
|
+
className: mx2("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent")
|
|
233
|
+
}, label && /* @__PURE__ */ React2.createElement("div", {
|
|
234
|
+
className: mx2("absolute bottom-1 left-1 text-xs text-neutral-500")
|
|
235
|
+
}, label));
|
|
249
236
|
});
|
|
250
237
|
Square.displayName = "Square";
|
|
251
238
|
|
|
@@ -256,102 +243,92 @@ var useGameboardContext = (consumerName) => {
|
|
|
256
243
|
return useRadixGameboardContext(consumerName);
|
|
257
244
|
};
|
|
258
245
|
var GameboardRoot = ({ children, model, moveNumber, onDrop }) => {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
} else {
|
|
322
|
-
onDrop?.(move);
|
|
323
|
-
}
|
|
246
|
+
const [dragging, setDragging] = useState3(false);
|
|
247
|
+
const [promoting, setPromoting] = useState3();
|
|
248
|
+
const handlePromotion = useCallback((move) => {
|
|
249
|
+
log3("onPromotion", {
|
|
250
|
+
move
|
|
251
|
+
}, {
|
|
252
|
+
F: __dxlog_file3,
|
|
253
|
+
L: 53,
|
|
254
|
+
S: void 0,
|
|
255
|
+
C: (f, a) => f(...a)
|
|
256
|
+
});
|
|
257
|
+
setPromoting(void 0);
|
|
258
|
+
onDrop?.(move);
|
|
259
|
+
}, []);
|
|
260
|
+
useEffect3(() => {
|
|
261
|
+
if (!model) {
|
|
262
|
+
return;
|
|
263
|
+
}
|
|
264
|
+
return monitorForElements({
|
|
265
|
+
onDragStart: ({ source }) => {
|
|
266
|
+
log3("onDragStart", {
|
|
267
|
+
source
|
|
268
|
+
}, {
|
|
269
|
+
F: __dxlog_file3,
|
|
270
|
+
L: 66,
|
|
271
|
+
S: void 0,
|
|
272
|
+
C: (f, a) => f(...a)
|
|
273
|
+
});
|
|
274
|
+
setDragging(true);
|
|
275
|
+
},
|
|
276
|
+
onDrop: ({ source, location }) => {
|
|
277
|
+
log3("onDrop", {
|
|
278
|
+
source,
|
|
279
|
+
location
|
|
280
|
+
}, {
|
|
281
|
+
F: __dxlog_file3,
|
|
282
|
+
L: 70,
|
|
283
|
+
S: void 0,
|
|
284
|
+
C: (f, a) => f(...a)
|
|
285
|
+
});
|
|
286
|
+
const target = location.current.dropTargets[0];
|
|
287
|
+
if (!target) {
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
const targetLocation = target.data.location;
|
|
291
|
+
const piece = source.data.piece;
|
|
292
|
+
if (!isLocation(targetLocation) || !isPiece(piece)) {
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
const move = {
|
|
296
|
+
from: piece.location,
|
|
297
|
+
to: targetLocation,
|
|
298
|
+
piece: piece.type
|
|
299
|
+
};
|
|
300
|
+
if (model.isValidMove(move)) {
|
|
301
|
+
if (model.canPromote?.(move)) {
|
|
302
|
+
setPromoting({
|
|
303
|
+
...piece,
|
|
304
|
+
location: targetLocation
|
|
305
|
+
});
|
|
306
|
+
} else {
|
|
307
|
+
onDrop?.(move);
|
|
324
308
|
}
|
|
325
|
-
setDragging(false);
|
|
326
309
|
}
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
}
|
|
310
|
+
setDragging(false);
|
|
311
|
+
}
|
|
312
|
+
});
|
|
313
|
+
}, [
|
|
314
|
+
model
|
|
315
|
+
]);
|
|
316
|
+
return /* @__PURE__ */ React3.createElement(GameboardContextProvider, {
|
|
317
|
+
model,
|
|
318
|
+
dragging,
|
|
319
|
+
promoting,
|
|
320
|
+
onPromotion: handlePromotion
|
|
321
|
+
}, children);
|
|
340
322
|
};
|
|
341
323
|
GameboardRoot.displayName = "Gameboard.Root";
|
|
342
324
|
var GameboardContent = /* @__PURE__ */ forwardRef(({ children, classNames, grow, contain }, forwardedRef) => {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
className: "is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]"
|
|
351
|
-
}, children) : children);
|
|
352
|
-
} finally {
|
|
353
|
-
_effect.f();
|
|
354
|
-
}
|
|
325
|
+
return /* @__PURE__ */ React3.createElement("div", {
|
|
326
|
+
role: "none",
|
|
327
|
+
className: mx3(grow && "grid is-full bs-full size-container place-content-center", classNames),
|
|
328
|
+
ref: forwardedRef
|
|
329
|
+
}, contain ? /* @__PURE__ */ React3.createElement("div", {
|
|
330
|
+
className: "is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]"
|
|
331
|
+
}, children) : children);
|
|
355
332
|
});
|
|
356
333
|
GameboardContent.displayName = "Gameboard.Content";
|
|
357
334
|
var Gameboard = {
|
|
@@ -362,7 +339,7 @@ var Gameboard = {
|
|
|
362
339
|
};
|
|
363
340
|
|
|
364
341
|
// src/components/Chessboard/chess.ts
|
|
365
|
-
import {
|
|
342
|
+
import { Atom } from "@effect-atom/atom-react";
|
|
366
343
|
import { Chess as ChessJS } from "chess.js";
|
|
367
344
|
import { invariant as invariant3 } from "@dxos/invariant";
|
|
368
345
|
import { log as log4 } from "@dxos/log";
|
|
@@ -385,276 +362,180 @@ __export(alpha_exports, {
|
|
|
385
362
|
});
|
|
386
363
|
|
|
387
364
|
// src/gen/pieces/chess/alpha/bB.tsx
|
|
388
|
-
import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
|
|
389
365
|
import * as React4 from "react";
|
|
390
|
-
var SvgBB = (props) => {
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
fill: "#101010",
|
|
402
|
-
d: "M768 1365q-5 39-26 82h564q-18-36-26-82zm495-73 46-73q-142-49-285-47-144-2-285 47l46 73q118-40 239-38 120-2 239 38m-432 227H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-207l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60zm146-701h-95v89h95v165h94V907h95v-89h-95V714h-94z"
|
|
403
|
-
}));
|
|
404
|
-
} finally {
|
|
405
|
-
_effect.f();
|
|
406
|
-
}
|
|
407
|
-
};
|
|
366
|
+
var SvgBB = (props) => /* @__PURE__ */ React4.createElement("svg", {
|
|
367
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
368
|
+
viewBox: "0 0 2048 2048",
|
|
369
|
+
...props
|
|
370
|
+
}, /* @__PURE__ */ React4.createElement("path", {
|
|
371
|
+
fill: "#f9f9f9",
|
|
372
|
+
d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
|
|
373
|
+
}), /* @__PURE__ */ React4.createElement("path", {
|
|
374
|
+
fill: "#101010",
|
|
375
|
+
d: "M768 1365q-5 39-26 82h564q-18-36-26-82zm495-73 46-73q-142-49-285-47-144-2-285 47l46 73q118-40 239-38 120-2 239 38m-432 227H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-207l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60zm146-701h-95v89h95v165h94V907h95v-89h-95V714h-94z"
|
|
376
|
+
}));
|
|
408
377
|
var bB_default = SvgBB;
|
|
409
378
|
|
|
410
379
|
// src/gen/pieces/chess/alpha/bK.tsx
|
|
411
|
-
import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
|
|
412
380
|
import * as React5 from "react";
|
|
413
|
-
var SvgBK = (props) => {
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
fill: "#101010",
|
|
425
|
-
d: "M1024 1769h489l-12-73H547l-12 73zm0-921q-25-60-62-111 31-48 62-65 30 17 62 65-38 51-62 111m-97 454q-154 11-303 58-123-108-200-213t-77-202q0-89 74-159t148-70q67 0 135 63t102 130q30 54 75 175t46 218m-350 217-26 156 145-84zm447-907q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m0 775q-1-126-42-267t-84-227l-14-27-12-23q-28-43-48-69-51-63-120-105t-134-42q-103 0-208 93T257 949q0 120 99 255t249 259q201-74 419-76m0 456H448l61-365q-325-280-326-535-1-159 125-274t267-116q78 0 159 47t142 119q61 74 99 165t49 150q12-60 49-150t99-165q61-72 142-119t159-47q140 0 266 116t126 274q-2 255-326 535l61 365zm97-541q0-97 45-218t76-175q34-68 102-130t135-63q74 0 148 70t74 159q0 96-77 202t-200 213q-150-47-303-58m350 217-119 72 145 84zm-447-132q217 2 419 76 150-125 249-259t99-255q0-136-105-229t-208-93q-66 0-135 42t-119 105q-21 26-48 69l-12 23-14 27q-44 85-85 227t-41 267m-139 159 139 86 139-84-139-86zm92-1248v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95z"
|
|
426
|
-
}));
|
|
427
|
-
} finally {
|
|
428
|
-
_effect.f();
|
|
429
|
-
}
|
|
430
|
-
};
|
|
381
|
+
var SvgBK = (props) => /* @__PURE__ */ React5.createElement("svg", {
|
|
382
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
383
|
+
viewBox: "0 0 2048 2048",
|
|
384
|
+
...props
|
|
385
|
+
}, /* @__PURE__ */ React5.createElement("path", {
|
|
386
|
+
fill: "#f9f9f9",
|
|
387
|
+
d: "m553 1485-55 320 1048 5-48-335s324-313 330-467c7-153-35-331-241-406-183-67-372 121-372 121l-182-161-190 160S658 586 587 592a373 373 0 0 0-362 333c10 331 328 560 328 560"
|
|
388
|
+
}), /* @__PURE__ */ React5.createElement("path", {
|
|
389
|
+
fill: "#101010",
|
|
390
|
+
d: "M1024 1769h489l-12-73H547l-12 73zm0-921q-25-60-62-111 31-48 62-65 30 17 62 65-38 51-62 111m-97 454q-154 11-303 58-123-108-200-213t-77-202q0-89 74-159t148-70q67 0 135 63t102 130q30 54 75 175t46 218m-350 217-26 156 145-84zm447-907q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m0 775q-1-126-42-267t-84-227l-14-27-12-23q-28-43-48-69-51-63-120-105t-134-42q-103 0-208 93T257 949q0 120 99 255t249 259q201-74 419-76m0 456H448l61-365q-325-280-326-535-1-159 125-274t267-116q78 0 159 47t142 119q61 74 99 165t49 150q12-60 49-150t99-165q61-72 142-119t159-47q140 0 266 116t126 274q-2 255-326 535l61 365zm97-541q0-97 45-218t76-175q34-68 102-130t135-63q74 0 148 70t74 159q0 96-77 202t-200 213q-150-47-303-58m350 217-119 72 145 84zm-447-132q217 2 419 76 150-125 249-259t99-255q0-136-105-229t-208-93q-66 0-135 42t-119 105q-21 26-48 69l-12 23-14 27q-44 85-85 227t-41 267m-139 159 139 86 139-84-139-86zm92-1248v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95z"
|
|
391
|
+
}));
|
|
431
392
|
var bK_default = SvgBK;
|
|
432
393
|
|
|
433
394
|
// src/gen/pieces/chess/alpha/bN.tsx
|
|
434
|
-
import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
|
|
435
395
|
import * as React6 from "react";
|
|
436
|
-
var SvgBN = (props) => {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
fill: "#101010",
|
|
448
|
-
d: "m502 868-52 1-26 64 69 21 46-55zm536-187q34 1-16-68t-80-42L826 680zm-338-98q6-39 116-107t220-144l115-154 96 217q342 172 433 418t47 603q-18 128 5 236t57 190l-1242 1q-9-178 39-301t183-238q50-11 83-39t53-59l63-1 138-29 139-97 66-207q0-17-8-34t-12-37q-62 228-161 289t-191 58q-236-42-292 60l-56 102-217-121 115-82-51-50-122 86-12-297zm981 1192q-102-130-85-308t27-363-50-351-316-276q220 164 253 342t16 351-12 329 167 276"
|
|
449
|
-
}));
|
|
450
|
-
} finally {
|
|
451
|
-
_effect.f();
|
|
452
|
-
}
|
|
453
|
-
};
|
|
396
|
+
var SvgBN = (props) => /* @__PURE__ */ React6.createElement("svg", {
|
|
397
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
398
|
+
viewBox: "0 0 2048 2048",
|
|
399
|
+
...props
|
|
400
|
+
}, /* @__PURE__ */ React6.createElement("path", {
|
|
401
|
+
fill: "#f9f9f9",
|
|
402
|
+
d: "M1658 1806c-408-301-71-920-452-1343l60-16s296 167 320 257c182 468 41 691 135 1077zM972 523l120 176-312-3zM498 981l-93-41 42-93 127 28z"
|
|
403
|
+
}), /* @__PURE__ */ React6.createElement("path", {
|
|
404
|
+
fill: "#101010",
|
|
405
|
+
d: "m502 868-52 1-26 64 69 21 46-55zm536-187q34 1-16-68t-80-42L826 680zm-338-98q6-39 116-107t220-144l115-154 96 217q342 172 433 418t47 603q-18 128 5 236t57 190l-1242 1q-9-178 39-301t183-238q50-11 83-39t53-59l63-1 138-29 139-97 66-207q0-17-8-34t-12-37q-62 228-161 289t-191 58q-236-42-292 60l-56 102-217-121 115-82-51-50-122 86-12-297zm981 1192q-102-130-85-308t27-363-50-351-316-276q220 164 253 342t16 351-12 329 167 276"
|
|
406
|
+
}));
|
|
454
407
|
var bN_default = SvgBN;
|
|
455
408
|
|
|
456
409
|
// src/gen/pieces/chess/alpha/bP.tsx
|
|
457
|
-
import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
|
|
458
410
|
import * as React7 from "react";
|
|
459
|
-
var SvgBP = (props) => {
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
fill: "#101010",
|
|
468
|
-
d: "M1024 1843H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74z"
|
|
469
|
-
}));
|
|
470
|
-
} finally {
|
|
471
|
-
_effect.f();
|
|
472
|
-
}
|
|
473
|
-
};
|
|
411
|
+
var SvgBP = (props) => /* @__PURE__ */ React7.createElement("svg", {
|
|
412
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
413
|
+
viewBox: "0 0 2048 2048",
|
|
414
|
+
...props
|
|
415
|
+
}, /* @__PURE__ */ React7.createElement("path", {
|
|
416
|
+
fill: "#101010",
|
|
417
|
+
d: "M1024 1843H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74z"
|
|
418
|
+
}));
|
|
474
419
|
var bP_default = SvgBP;
|
|
475
420
|
|
|
476
421
|
// src/gen/pieces/chess/alpha/bQ.tsx
|
|
477
|
-
import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
|
|
478
422
|
import * as React8 from "react";
|
|
479
|
-
var SvgBQ = (props) => {
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
fill: "#101010",
|
|
491
|
-
d: "M590 1519q4 72-15 158l134-86zm434 324H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zm0-450q109 0 222 28.5t213 67.5q2-41 11-89-108-42-221.5-68t-224.5-26-225 26-221 68q8 48 11 89 99-39 212-67.5t223-28.5m0 376h478q-15-34-24-73H570q-10 39-24 73zm434-250-119 72 134 86q-20-86-15-158m-573 47 139 87 139-84-139-86z"
|
|
492
|
-
}));
|
|
493
|
-
} finally {
|
|
494
|
-
_effect.f();
|
|
495
|
-
}
|
|
496
|
-
};
|
|
423
|
+
var SvgBQ = (props) => /* @__PURE__ */ React8.createElement("svg", {
|
|
424
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
425
|
+
viewBox: "0 0 2048 2048",
|
|
426
|
+
...props
|
|
427
|
+
}, /* @__PURE__ */ React8.createElement("path", {
|
|
428
|
+
fill: "#f9f9f9",
|
|
429
|
+
d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
|
|
430
|
+
}), /* @__PURE__ */ React8.createElement("path", {
|
|
431
|
+
fill: "#101010",
|
|
432
|
+
d: "M590 1519q4 72-15 158l134-86zm434 324H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zm0-450q109 0 222 28.5t213 67.5q2-41 11-89-108-42-221.5-68t-224.5-26-225 26-221 68q8 48 11 89 99-39 212-67.5t223-28.5m0 376h478q-15-34-24-73H570q-10 39-24 73zm434-250-119 72 134 86q-20-86-15-158m-573 47 139 87 139-84-139-86z"
|
|
433
|
+
}));
|
|
497
434
|
var bQ_default = SvgBQ;
|
|
498
435
|
|
|
499
436
|
// src/gen/pieces/chess/alpha/bR.tsx
|
|
500
|
-
import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
|
|
501
437
|
import * as React9 from "react";
|
|
502
|
-
var SvgBR = (props) => {
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
fill: "#101010",
|
|
514
|
-
d: "M1024 1843H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-989h333l-6-88H697l-6 88zm0 647h381l-6-87H649l-6 87z"
|
|
515
|
-
}));
|
|
516
|
-
} finally {
|
|
517
|
-
_effect.f();
|
|
518
|
-
}
|
|
519
|
-
};
|
|
438
|
+
var SvgBR = (props) => /* @__PURE__ */ React9.createElement("svg", {
|
|
439
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
440
|
+
viewBox: "0 0 2048 2048",
|
|
441
|
+
...props
|
|
442
|
+
}, /* @__PURE__ */ React9.createElement("path", {
|
|
443
|
+
fill: "#f9f9f9",
|
|
444
|
+
d: "m674 732-76 807 851 14-75-833z"
|
|
445
|
+
}), /* @__PURE__ */ React9.createElement("path", {
|
|
446
|
+
fill: "#101010",
|
|
447
|
+
d: "M1024 1843H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-989h333l-6-88H697l-6 88zm0 647h381l-6-87H649l-6 87z"
|
|
448
|
+
}));
|
|
520
449
|
var bR_default = SvgBR;
|
|
521
450
|
|
|
522
451
|
// src/gen/pieces/chess/alpha/wB.tsx
|
|
523
|
-
import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
|
|
524
452
|
import * as React10 from "react";
|
|
525
|
-
var SvgWB = (props) => {
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
fill: "#101010",
|
|
537
|
-
d: "M1024 356q66 0 64-66 1-55-64-55-66 0-64 55-3 66 64 66m0 1204q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60l10-16h76q-7 21-3 13-45 105-109 125t-146 19H409q-52 0-86 40t-34 53h424q66 0 159-65t93-185H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-341q0 120 93 185t159 65h424q0-13-34-53t-86-40h-240q-83 0-146-19t-109-125q4 8-3-13h76l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199m0-114h283q-28-84-29-154-120-41-254-38-135-3-254 38-2 70-29 154zm0-267q159-1 285 42 189-180 142-346-60-193-427-431-368 238-427 431-48 166 142 346 125-43 285-42m-47-361V714h94v104h95v89h-95v165h-94V907h-95v-89z"
|
|
538
|
-
}));
|
|
539
|
-
} finally {
|
|
540
|
-
_effect.f();
|
|
541
|
-
}
|
|
542
|
-
};
|
|
453
|
+
var SvgWB = (props) => /* @__PURE__ */ React10.createElement("svg", {
|
|
454
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
455
|
+
viewBox: "0 0 2048 2048",
|
|
456
|
+
...props
|
|
457
|
+
}, /* @__PURE__ */ React10.createElement("path", {
|
|
458
|
+
fill: "#f9f9f9",
|
|
459
|
+
d: "m948 366 1-139 148-7 1 147zM564 860c114-267 456-443 456-443s392 176 476 502c-9 209-183 332-183 332l27 221-653 6 46-233s-230-171-169-385m-101 790c175 6 355 23 425-142h92s0 190-88 246c-163 103-625 38-625 38s-15-146 196-142m631 37-36-185 102 5s22 153 315 131c381-17 318 153 318 153l-483 5z"
|
|
460
|
+
}), /* @__PURE__ */ React10.createElement("path", {
|
|
461
|
+
fill: "#101010",
|
|
462
|
+
d: "M1024 356q66 0 64-66 1-55-64-55-66 0-64 55-3 66 64 66m0 1204q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60l10-16h76q-7 21-3 13-45 105-109 125t-146 19H409q-52 0-86 40t-34 53h424q66 0 159-65t93-185H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-341q0 120 93 185t159 65h424q0-13-34-53t-86-40h-240q-83 0-146-19t-109-125q4 8-3-13h76l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199m0-114h283q-28-84-29-154-120-41-254-38-135-3-254 38-2 70-29 154zm0-267q159-1 285 42 189-180 142-346-60-193-427-431-368 238-427 431-48 166 142 346 125-43 285-42m-47-361V714h94v104h95v89h-95v165h-94V907h-95v-89z"
|
|
463
|
+
}));
|
|
543
464
|
var wB_default = SvgWB;
|
|
544
465
|
|
|
545
466
|
// src/gen/pieces/chess/alpha/wK.tsx
|
|
546
|
-
import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
|
|
547
467
|
import * as React11 from "react";
|
|
548
|
-
var SvgWK = (props) => {
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
fill: "#101010",
|
|
560
|
-
d: "M977 298v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95zm47 314q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m-447 907-26 156 145-84zm410-206q-1-147-36.5-274.5T870 845q-45-88-131.5-153T570 627q-103 0-208 93T257 949q0 109 86.5 236T546 1408q212-88 441-95m37 530H448l61-365q-325-280-326-535-1-159 125-274.5T575 553q78 0 158.5 47T876 719q61 74 98.5 164.5T1024 1034q12-60 49-150.5t99-164.5q61-72 142-119t159-47q140 0 266 115.5T1865 943q-2 255-326 535l61 365zm0-74h489l-50-298q-216-84-439-84t-439 84l-50 298zm447-250 26 156-145-84zm-410-206q229 7 441 95 115-96 202-223t87-236q0-136-105.5-229T1478 627q-83 0-169.5 65T1178 845q-46 66-81.5 193.5T1061 1313m-176 233 141-84 137 86-141 84z"
|
|
561
|
-
}));
|
|
562
|
-
} finally {
|
|
563
|
-
_effect.f();
|
|
564
|
-
}
|
|
565
|
-
};
|
|
468
|
+
var SvgWK = (props) => /* @__PURE__ */ React11.createElement("svg", {
|
|
469
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
470
|
+
viewBox: "0 0 2048 2048",
|
|
471
|
+
...props
|
|
472
|
+
}, /* @__PURE__ */ React11.createElement("path", {
|
|
473
|
+
fill: "#f9f9f9",
|
|
474
|
+
d: "m501.6 1811 48.4-354.4-260-269.2s-166.4-288.2 29.9-481C582.2 448.7 826 727.2 826 727.2l195.6-165.7 184 165.7s216.4-232.5 430.4-76 255.4 317.6 117.4 531.6c-138.1 214-250.9 280.7-250.9 280.7L1558 1811z"
|
|
475
|
+
}), /* @__PURE__ */ React11.createElement("path", {
|
|
476
|
+
fill: "#101010",
|
|
477
|
+
d: "M977 298v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95zm47 314q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m-447 907-26 156 145-84zm410-206q-1-147-36.5-274.5T870 845q-45-88-131.5-153T570 627q-103 0-208 93T257 949q0 109 86.5 236T546 1408q212-88 441-95m37 530H448l61-365q-325-280-326-535-1-159 125-274.5T575 553q78 0 158.5 47T876 719q61 74 98.5 164.5T1024 1034q12-60 49-150.5t99-164.5q61-72 142-119t159-47q140 0 266 115.5T1865 943q-2 255-326 535l61 365zm0-74h489l-50-298q-216-84-439-84t-439 84l-50 298zm447-250 26 156-145-84zm-410-206q229 7 441 95 115-96 202-223t87-236q0-136-105.5-229T1478 627q-83 0-169.5 65T1178 845q-46 66-81.5 193.5T1061 1313m-176 233 141-84 137 86-141 84z"
|
|
478
|
+
}));
|
|
566
479
|
var wK_default = SvgWK;
|
|
567
480
|
|
|
568
481
|
// src/gen/pieces/chess/alpha/wN.tsx
|
|
569
|
-
import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
|
|
570
482
|
import * as React12 from "react";
|
|
571
|
-
var SvgWN = (props) => {
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
fill: "#101010",
|
|
583
|
-
d: "m1151 178-115 154c-74 50-147 98-220 144-73 45-112 81-116 107L304 846l12 297 122-86 51 50-115 82 217 121 56-102c37-68 135-88 292-60l-55 85c-25 37-63 60-115 71a608 608 0 0 0-183 238c-32 82-45 182-39 301h1242c-23-55-42-118-57-190-15-73-17-152-5-237 29-239 13-440-47-603-61-164-205-303-433-418zm-17 145 59 133a664 664 0 0 1 262 188c55 72 100 150 134 234 27 97 40 181 41 253 0 71-3 140-9 205-7 65-11 131-13 199-2 67 9 145 32 234H621c-4-84 12-158 48-223s85-124 146-177c78-22 129-56 152-102s53-90 90-131c13-10 27-15 38-15 10-1 21 0 33-2 52-7 95-36 129-85 33-49 51-104 52-165l-19-67c-37 159-99 245-188 257l-45 6c-16 1-33 10-52 26-41-25-87-35-138-31q-111 9-165 27l-108 73-39 45-47-28 78-65-138-144-64 41-4-125 366-241c15-34 58-74 131-120l208-131zM960 564c-6 0-12 2-18 7L826 671l212 2c23 0 17-21-16-63-24-31-44-46-62-46M502 868l-33 4-33 56 57 26 46-55z"
|
|
584
|
-
}));
|
|
585
|
-
} finally {
|
|
586
|
-
_effect.f();
|
|
587
|
-
}
|
|
588
|
-
};
|
|
483
|
+
var SvgWN = (props) => /* @__PURE__ */ React12.createElement("svg", {
|
|
484
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
485
|
+
viewBox: "0 0 2048 2048",
|
|
486
|
+
...props
|
|
487
|
+
}, /* @__PURE__ */ React12.createElement("path", {
|
|
488
|
+
fill: "#f9f9f9",
|
|
489
|
+
d: "m352 861 787-569 94 148s336 103 398 388c63 286 51 974 51 974l-1088 9s-37-290 184-460c221-171 221-212 221-212s-226-71-295-16-117 138-117 138l-129-67 74-85-88-97-94 56z"
|
|
490
|
+
}), /* @__PURE__ */ React12.createElement("path", {
|
|
491
|
+
fill: "#101010",
|
|
492
|
+
d: "m1151 178-115 154c-74 50-147 98-220 144-73 45-112 81-116 107L304 846l12 297 122-86 51 50-115 82 217 121 56-102c37-68 135-88 292-60l-55 85c-25 37-63 60-115 71a608 608 0 0 0-183 238c-32 82-45 182-39 301h1242c-23-55-42-118-57-190-15-73-17-152-5-237 29-239 13-440-47-603-61-164-205-303-433-418zm-17 145 59 133a664 664 0 0 1 262 188c55 72 100 150 134 234 27 97 40 181 41 253 0 71-3 140-9 205-7 65-11 131-13 199-2 67 9 145 32 234H621c-4-84 12-158 48-223s85-124 146-177c78-22 129-56 152-102s53-90 90-131c13-10 27-15 38-15 10-1 21 0 33-2 52-7 95-36 129-85 33-49 51-104 52-165l-19-67c-37 159-99 245-188 257l-45 6c-16 1-33 10-52 26-41-25-87-35-138-31q-111 9-165 27l-108 73-39 45-47-28 78-65-138-144-64 41-4-125 366-241c15-34 58-74 131-120l208-131zM960 564c-6 0-12 2-18 7L826 671l212 2c23 0 17-21-16-63-24-31-44-46-62-46M502 868l-33 4-33 56 57 26 46-55z"
|
|
493
|
+
}));
|
|
589
494
|
var wN_default = SvgWN;
|
|
590
495
|
|
|
591
496
|
// src/gen/pieces/chess/alpha/wP.tsx
|
|
592
|
-
import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
|
|
593
497
|
import * as React13 from "react";
|
|
594
|
-
var SvgWP = (props) => {
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
fill: "#101010",
|
|
606
|
-
d: "M520 1769h1008q8-97-132-182-132-101-196-239t-80-309H928q-15 170-79 309t-197 239q-141 85-132 182m504 74H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74zM756 974h536l-225-191q134-31 134-171 0-76-52-126t-125-51q-73 0-125 51t-52 126q0 140 134 171z"
|
|
607
|
-
}));
|
|
608
|
-
} finally {
|
|
609
|
-
_effect.f();
|
|
610
|
-
}
|
|
611
|
-
};
|
|
498
|
+
var SvgWP = (props) => /* @__PURE__ */ React13.createElement("svg", {
|
|
499
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
500
|
+
viewBox: "0 0 2048 2048",
|
|
501
|
+
...props
|
|
502
|
+
}, /* @__PURE__ */ React13.createElement("path", {
|
|
503
|
+
fill: "#f9f9f9",
|
|
504
|
+
d: "m734 981 196-193s-189-82-79-288c79-149 303-114 361 50 63 179-113 240-113 240l226 197Zm-235 799s-8-107 50-154c196-173 338-386 371-599l210 2c33 206 182 447 321 561 101 59 99 199 99 199z"
|
|
505
|
+
}), /* @__PURE__ */ React13.createElement("path", {
|
|
506
|
+
fill: "#101010",
|
|
507
|
+
d: "M520 1769h1008q8-97-132-182-132-101-196-239t-80-309H928q-15 170-79 309t-197 239q-141 85-132 182m504 74H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74zM756 974h536l-225-191q134-31 134-171 0-76-52-126t-125-51q-73 0-125 51t-52 126q0 140 134 171z"
|
|
508
|
+
}));
|
|
612
509
|
var wP_default = SvgWP;
|
|
613
510
|
|
|
614
511
|
// src/gen/pieces/chess/alpha/wQ.tsx
|
|
615
|
-
import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
|
|
616
512
|
import * as React14 from "react";
|
|
617
|
-
var SvgWQ = (props) => {
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
fill: "#101010",
|
|
629
|
-
d: "M1024 1769h478q-53-130-43-280-100-39-213-67.5t-222-28.5q-110 0-223 28.5T589 1489q9 150-43 280zm0-450q111 0 223.5 26.5T1468 1413q17-105 60.5-212.5T1634 988l-220 155-123-601-267 555-267-555-123 601-220-155q61 105 104.5 212.5T580 1413q108-41 220.5-67.5T1024 1319m0 524H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zM276 746q-62 0-62 62t62 62q63 0 63-62t-63-62m466-394q-62 0-62 62t62 62 62-62-62-62M590 1519l119 72-134 86q19-86 15-158m1182-773q-63 0-63 62t63 62q62 0 62-62t-62-62m-466-394q-62 0-62 62t62 62 62-62-62-62m152 1167-119 72 134 86q-20-86-15-158m-573 47 139-83 139 86-139 84z"
|
|
630
|
-
}));
|
|
631
|
-
} finally {
|
|
632
|
-
_effect.f();
|
|
633
|
-
}
|
|
634
|
-
};
|
|
513
|
+
var SvgWQ = (props) => /* @__PURE__ */ React14.createElement("svg", {
|
|
514
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
515
|
+
viewBox: "0 0 2048 2048",
|
|
516
|
+
...props
|
|
517
|
+
}, /* @__PURE__ */ React14.createElement("path", {
|
|
518
|
+
fill: "#f9f9f9",
|
|
519
|
+
d: "m508.5 1815.6 48.4-356.7-216.3-554.6-135.8-20.7-16.1-126.5 112.7-43.8 78.3 73.7-18.4 99 246.2 197.8 112.8-568.3L635 428l78.3-108 112.8 43.7-23 161 223.2 474 244-490-66.8-105.9 92-92 105.9 73.6L1337 534l103.5 529.2 260-161-16-142.7 131-46 57.6 131.1-207 103.6-175 529.2 48.4 308.4z"
|
|
520
|
+
}), /* @__PURE__ */ React14.createElement("path", {
|
|
521
|
+
fill: "#101010",
|
|
522
|
+
d: "M1024 1769h478q-53-130-43-280-100-39-213-67.5t-222-28.5q-110 0-223 28.5T589 1489q9 150-43 280zm0-450q111 0 223.5 26.5T1468 1413q17-105 60.5-212.5T1634 988l-220 155-123-601-267 555-267-555-123 601-220-155q61 105 104.5 212.5T580 1413q108-41 220.5-67.5T1024 1319m0 524H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zM276 746q-62 0-62 62t62 62q63 0 63-62t-63-62m466-394q-62 0-62 62t62 62 62-62-62-62M590 1519l119 72-134 86q19-86 15-158m1182-773q-63 0-63 62t63 62q62 0 62-62t-62-62m-466-394q-62 0-62 62t62 62 62-62-62-62m152 1167-119 72 134 86q-20-86-15-158m-573 47 139-83 139 86-139 84z"
|
|
523
|
+
}));
|
|
635
524
|
var wQ_default = SvgWQ;
|
|
636
525
|
|
|
637
526
|
// src/gen/pieces/chess/alpha/wR.tsx
|
|
638
|
-
import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
|
|
639
527
|
import * as React15 from "react";
|
|
640
|
-
var SvgWR = (props) => {
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
fill: "#101010",
|
|
652
|
-
d: "M1024 1501H643l5-74h752l5 74zm0-661H692l5-74h654l5 74zm0 1003H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-74h557l-15-149-161-119-54-735 152-109 13-230h-138v148h-285V427H955v148H670V427H532l13 230 152 109-54 735-161 119-15 149z"
|
|
653
|
-
}));
|
|
654
|
-
} finally {
|
|
655
|
-
_effect.f();
|
|
656
|
-
}
|
|
657
|
-
};
|
|
528
|
+
var SvgWR = (props) => /* @__PURE__ */ React15.createElement("svg", {
|
|
529
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
530
|
+
viewBox: "0 0 2048 2048",
|
|
531
|
+
...props
|
|
532
|
+
}, /* @__PURE__ */ React15.createElement("path", {
|
|
533
|
+
fill: "#f9f9f9",
|
|
534
|
+
d: "m435 1804 16-212 152-115 51-688-148-115-7-276 210-2 4 138 198 2 7-140 212-3 14 145 193-4 5-138h204l-7 285-145 106 42 693 172 124 19 207z"
|
|
535
|
+
}), /* @__PURE__ */ React15.createElement("path", {
|
|
536
|
+
fill: "#101010",
|
|
537
|
+
d: "M1024 1501H643l5-74h752l5 74zm0-661H692l5-74h654l5 74zm0 1003H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-74h557l-15-149-161-119-54-735 152-109 13-230h-138v148h-285V427H955v148H670V427H532l13 230 152 109-54 735-161 119-15 149z"
|
|
538
|
+
}));
|
|
658
539
|
var wR_default = SvgWR;
|
|
659
540
|
|
|
660
541
|
// src/components/Chessboard/chess.ts
|
|
@@ -717,14 +598,16 @@ var createChess = (pgn) => {
|
|
|
717
598
|
return chess;
|
|
718
599
|
};
|
|
719
600
|
var ChessModel = class {
|
|
601
|
+
_registry;
|
|
720
602
|
_chess = new ChessJS();
|
|
721
|
-
_pieces =
|
|
722
|
-
_moveIndex =
|
|
723
|
-
constructor(pgn) {
|
|
603
|
+
_pieces = Atom.make({});
|
|
604
|
+
_moveIndex = Atom.make(0);
|
|
605
|
+
constructor(_registry, pgn) {
|
|
606
|
+
this._registry = _registry;
|
|
724
607
|
this.update(pgn);
|
|
725
608
|
}
|
|
726
609
|
get readonly() {
|
|
727
|
-
return this._moveIndex
|
|
610
|
+
return this._registry.get(this._moveIndex) !== this._chess.history().length;
|
|
728
611
|
}
|
|
729
612
|
get turn() {
|
|
730
613
|
return this._chess.turn() === "w" ? "white" : "black";
|
|
@@ -776,7 +659,7 @@ var ChessModel = class {
|
|
|
776
659
|
}
|
|
777
660
|
const current = this._chess.history();
|
|
778
661
|
if (!isValidNextMove(previous, current)) {
|
|
779
|
-
this._pieces
|
|
662
|
+
this._registry.set(this._pieces, {});
|
|
780
663
|
}
|
|
781
664
|
this._updateBoard(this._chess);
|
|
782
665
|
}
|
|
@@ -810,8 +693,8 @@ var ChessModel = class {
|
|
|
810
693
|
* Update pieces preserving identity.
|
|
811
694
|
*/
|
|
812
695
|
_updateBoard(chess) {
|
|
813
|
-
this._pieces
|
|
814
|
-
this._moveIndex
|
|
696
|
+
this._registry.set(this._pieces, createPieceMap(chess));
|
|
697
|
+
this._registry.set(this._moveIndex, chess.history().length);
|
|
815
698
|
}
|
|
816
699
|
};
|
|
817
700
|
var tryMove = (chess, move) => {
|
|
@@ -856,7 +739,7 @@ var createPieceMap = (chess) => {
|
|
|
856
739
|
Object.values(pieces).forEach((piece) => {
|
|
857
740
|
invariant3(!test.has(piece.id), "Duplicate: " + piece.id, {
|
|
858
741
|
F: __dxlog_file4,
|
|
859
|
-
L:
|
|
742
|
+
L: 255,
|
|
860
743
|
S: void 0,
|
|
861
744
|
A: [
|
|
862
745
|
"!test.has(piece.id)",
|
|
@@ -914,160 +797,152 @@ var _diffPieces = (before, after) => {
|
|
|
914
797
|
var createDate = (date = /* @__PURE__ */ new Date()) => date.toISOString().slice(0, 10).replace(/-/g, ".");
|
|
915
798
|
|
|
916
799
|
// src/components/Chessboard/Chessboard.tsx
|
|
917
|
-
import {
|
|
800
|
+
import { Atom as Atom2, useAtomValue } from "@effect-atom/atom-react";
|
|
918
801
|
import React16, { forwardRef as forwardRef2, memo as memo3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
|
|
919
802
|
import { useResizeDetector } from "react-resize-detector";
|
|
920
803
|
import { useForwardedRef } from "@dxos/react-ui";
|
|
921
|
-
import { mx as mx4 } from "@dxos/
|
|
804
|
+
import { mx as mx4 } from "@dxos/ui-theme";
|
|
922
805
|
import { isNonNullable } from "@dxos/util";
|
|
806
|
+
var EMPTY_PIECES_ATOM = Atom2.make({});
|
|
923
807
|
var ChessboardComponent = /* @__PURE__ */ forwardRef2(({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
return
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
["data-location"]: locationToString(location)
|
|
951
|
-
});
|
|
808
|
+
const targetRef = useForwardedRef(forwardedRef);
|
|
809
|
+
const { width, height } = useResizeDetector({
|
|
810
|
+
targetRef,
|
|
811
|
+
refreshRate: 200
|
|
812
|
+
});
|
|
813
|
+
const { model, promoting, onPromotion } = useGameboardContext(Chessboard.displayName);
|
|
814
|
+
const pieces = useAtomValue(model?.pieces ?? EMPTY_PIECES_ATOM);
|
|
815
|
+
const squares = useMemo(() => {
|
|
816
|
+
return Array.from({
|
|
817
|
+
length: rows
|
|
818
|
+
}, (_, i) => orientation === "black" ? i : rows - 1 - i).flatMap((row) => Array.from({
|
|
819
|
+
length: cols
|
|
820
|
+
}).map((_, col) => [
|
|
821
|
+
row,
|
|
822
|
+
col
|
|
823
|
+
]));
|
|
824
|
+
}, [
|
|
825
|
+
orientation,
|
|
826
|
+
rows,
|
|
827
|
+
cols
|
|
828
|
+
]);
|
|
829
|
+
const layout = useMemo(() => {
|
|
830
|
+
return squares.map((location) => {
|
|
831
|
+
return /* @__PURE__ */ React16.createElement("div", {
|
|
832
|
+
key: locationToString(location),
|
|
833
|
+
["data-location"]: locationToString(location)
|
|
952
834
|
});
|
|
953
|
-
}
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
}
|
|
967
|
-
},
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
const bounds = grid[locationToString(piece.location)];
|
|
981
|
-
return {
|
|
982
|
-
piece,
|
|
983
|
-
bounds
|
|
984
|
-
};
|
|
985
|
-
}).filter(isNonNullable);
|
|
986
|
-
}, [
|
|
987
|
-
grid,
|
|
988
|
-
model?.pieces.value,
|
|
989
|
-
promoting
|
|
990
|
-
]);
|
|
991
|
-
return /* @__PURE__ */ React16.createElement("div", {
|
|
992
|
-
ref: targetRef,
|
|
993
|
-
tabIndex: 0,
|
|
994
|
-
className: mx4("relative outline-none", classNames)
|
|
995
|
-
}, /* @__PURE__ */ React16.createElement("div", {
|
|
996
|
-
ref: gridRef,
|
|
997
|
-
className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
|
|
998
|
-
}, layout), /* @__PURE__ */ React16.createElement("div", null, squares.map((location) => /* @__PURE__ */ React16.createElement(Gameboard.Square, {
|
|
999
|
-
key: locationToString(location),
|
|
1000
|
-
location,
|
|
1001
|
-
label: showLabels ? locationToPos(location) : void 0,
|
|
1002
|
-
bounds: grid[locationToString(location)],
|
|
1003
|
-
classNames: getSquareColor(location)
|
|
1004
|
-
}))), /* @__PURE__ */ React16.createElement("div", {
|
|
1005
|
-
className: mx4(promoting && "opacity-50")
|
|
1006
|
-
}, positions.map(({ bounds, piece }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
|
|
1007
|
-
key: piece.id,
|
|
1008
|
-
piece,
|
|
1009
|
-
bounds,
|
|
1010
|
-
label: debug ? piece.id : void 0,
|
|
1011
|
-
orientation,
|
|
1012
|
-
Component: ChessPieces[piece.type]
|
|
1013
|
-
}))), promoting && /* @__PURE__ */ React16.createElement(PromotionSelector, {
|
|
1014
|
-
grid,
|
|
1015
|
-
piece: promoting,
|
|
1016
|
-
onSelect: (piece) => {
|
|
1017
|
-
onPromotion({
|
|
1018
|
-
from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
|
|
1019
|
-
to: piece.location,
|
|
1020
|
-
piece: promoting.type,
|
|
1021
|
-
promotion: piece.type
|
|
1022
|
-
});
|
|
835
|
+
});
|
|
836
|
+
}, [
|
|
837
|
+
squares
|
|
838
|
+
]);
|
|
839
|
+
const [grid, setGrid] = useState4({});
|
|
840
|
+
const gridRef = useRef3(null);
|
|
841
|
+
useEffect4(() => {
|
|
842
|
+
setGrid(squares.reduce((acc, location) => {
|
|
843
|
+
const square = getSquareLocation(gridRef.current, location);
|
|
844
|
+
const bounds = getRelativeBounds(gridRef.current, square);
|
|
845
|
+
return {
|
|
846
|
+
...acc,
|
|
847
|
+
[locationToString(location)]: bounds
|
|
848
|
+
};
|
|
849
|
+
}, {}));
|
|
850
|
+
}, [
|
|
851
|
+
squares,
|
|
852
|
+
width,
|
|
853
|
+
height
|
|
854
|
+
]);
|
|
855
|
+
const positions = useMemo(() => {
|
|
856
|
+
if (!gridRef.current) {
|
|
857
|
+
return [];
|
|
858
|
+
}
|
|
859
|
+
return Object.values(pieces).map((piece) => {
|
|
860
|
+
if (piece.id === promoting?.id) {
|
|
861
|
+
return null;
|
|
1023
862
|
}
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
863
|
+
const bounds = grid[locationToString(piece.location)];
|
|
864
|
+
return {
|
|
865
|
+
piece,
|
|
866
|
+
bounds
|
|
867
|
+
};
|
|
868
|
+
}).filter(isNonNullable);
|
|
869
|
+
}, [
|
|
870
|
+
grid,
|
|
871
|
+
pieces,
|
|
872
|
+
promoting
|
|
873
|
+
]);
|
|
874
|
+
return /* @__PURE__ */ React16.createElement("div", {
|
|
875
|
+
ref: targetRef,
|
|
876
|
+
tabIndex: 0,
|
|
877
|
+
className: mx4("relative outline-none", classNames)
|
|
878
|
+
}, /* @__PURE__ */ React16.createElement("div", {
|
|
879
|
+
ref: gridRef,
|
|
880
|
+
className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
|
|
881
|
+
}, layout), /* @__PURE__ */ React16.createElement("div", null, squares.map((location) => /* @__PURE__ */ React16.createElement(Gameboard.Square, {
|
|
882
|
+
key: locationToString(location),
|
|
883
|
+
location,
|
|
884
|
+
label: showLabels ? locationToPos(location) : void 0,
|
|
885
|
+
bounds: grid[locationToString(location)],
|
|
886
|
+
classNames: getSquareColor(location)
|
|
887
|
+
}))), /* @__PURE__ */ React16.createElement("div", {
|
|
888
|
+
className: mx4(promoting && "opacity-50")
|
|
889
|
+
}, positions.map(({ bounds, piece }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
|
|
890
|
+
key: piece.id,
|
|
891
|
+
piece,
|
|
892
|
+
bounds,
|
|
893
|
+
label: debug ? piece.id : void 0,
|
|
894
|
+
orientation,
|
|
895
|
+
Component: ChessPieces[piece.type]
|
|
896
|
+
}))), promoting && /* @__PURE__ */ React16.createElement(PromotionSelector, {
|
|
897
|
+
grid,
|
|
898
|
+
piece: promoting,
|
|
899
|
+
onSelect: (piece) => {
|
|
900
|
+
onPromotion({
|
|
901
|
+
from: Object.values(pieces).find((p) => p.id === promoting.id).location,
|
|
902
|
+
to: piece.location,
|
|
903
|
+
piece: promoting.type,
|
|
904
|
+
promotion: piece.type
|
|
905
|
+
});
|
|
906
|
+
}
|
|
907
|
+
}));
|
|
1028
908
|
});
|
|
1029
909
|
ChessboardComponent.displayName = "Chessboard";
|
|
1030
910
|
var Chessboard = /* @__PURE__ */ memo3(ChessboardComponent);
|
|
1031
911
|
var PromotionSelector = ({ grid, piece, onSelect }) => {
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
piece:
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
},
|
|
1051
|
-
bounds: grid[locationToString(location)]
|
|
1052
|
-
};
|
|
1053
|
-
});
|
|
1054
|
-
const handleSelect = (selected) => {
|
|
1055
|
-
onSelect({
|
|
1056
|
-
...piece,
|
|
1057
|
-
type: selected.type
|
|
1058
|
-
});
|
|
912
|
+
const positions = [
|
|
913
|
+
"Q",
|
|
914
|
+
"N",
|
|
915
|
+
"R",
|
|
916
|
+
"B"
|
|
917
|
+
].map((pieceType, i) => {
|
|
918
|
+
const location = [
|
|
919
|
+
piece.location[0] + (piece.location[0] === 0 ? i : -i),
|
|
920
|
+
piece.location[1]
|
|
921
|
+
];
|
|
922
|
+
return {
|
|
923
|
+
piece: {
|
|
924
|
+
id: `promotion-${pieceType}`,
|
|
925
|
+
type: (piece.side === "black" ? "B" : "W") + pieceType,
|
|
926
|
+
side: piece.side,
|
|
927
|
+
location
|
|
928
|
+
},
|
|
929
|
+
bounds: grid[locationToString(location)]
|
|
1059
930
|
};
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
piece
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
931
|
+
});
|
|
932
|
+
const handleSelect = (selected) => {
|
|
933
|
+
onSelect({
|
|
934
|
+
...piece,
|
|
935
|
+
type: selected.type
|
|
936
|
+
});
|
|
937
|
+
};
|
|
938
|
+
return /* @__PURE__ */ React16.createElement(React16.Fragment, null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
|
|
939
|
+
key: piece2.id,
|
|
940
|
+
classNames: mx4("border-2 border-neutral-700 rounded-full", boardStyles.promotion),
|
|
941
|
+
piece: piece2,
|
|
942
|
+
bounds,
|
|
943
|
+
Component: ChessPieces[piece2.type],
|
|
944
|
+
onClick: () => handleSelect(piece2)
|
|
945
|
+
})));
|
|
1071
946
|
};
|
|
1072
947
|
var getSquareLocation = (container, location) => {
|
|
1073
948
|
return container.querySelector(`[data-location="${locationToString(location)}"]`);
|