66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
import { useMemo } from 'react';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
import { DndProvider } from 'react-dnd';
|
|
import { Grid, GridItem } from '@chakra-ui/react';
|
|
import { TouchBackend } from 'react-dnd-touch-backend';
|
|
import { useDraughtsBoard } from '../DraughtsBoardContext';
|
|
import { useDraughtsSettings } from '../../settings/DraughtsSettingsContext';
|
|
import { DraughtsCell } from './DraughtsCell';
|
|
import { DraughtsGameOverModal } from './DraughtsGameOverModal';
|
|
import { Players } from '@draughts/core';
|
|
|
|
function isTouchDevice() {
|
|
return (
|
|
'ontouchstart' in window ||
|
|
navigator.maxTouchPoints > 0 ||
|
|
navigator.msMaxTouchPoints > 0
|
|
);
|
|
}
|
|
|
|
export function DraughtsBoard() {
|
|
const { board } = useDraughtsBoard();
|
|
const { userPlayer } = useDraughtsSettings();
|
|
|
|
const backend = useMemo(() => {
|
|
if (typeof window === 'undefined') return HTML5Backend;
|
|
return isTouchDevice() ? TouchBackend : HTML5Backend;
|
|
}, []);
|
|
|
|
const rows = useMemo(() => {
|
|
const entries = board.position.map((row, rowIndex) => ({
|
|
row,
|
|
rowIndex,
|
|
}));
|
|
if (userPlayer === Players.WHITE) {
|
|
return entries;
|
|
}
|
|
return entries.reverse();
|
|
}, [userPlayer, board.position]);
|
|
|
|
return (
|
|
<DndProvider backend={backend}>
|
|
<DraughtsGameOverModal />
|
|
<Grid
|
|
templateRows="repeat(8, 1fr)"
|
|
templateColumns="repeat(8, 1fr)"
|
|
w="100%"
|
|
h="100%"
|
|
style={{ aspectRatio: 1 }}
|
|
>
|
|
{rows.map(({ row, rowIndex }) =>
|
|
row.map((piece, colIndex) => (
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
<GridItem key={`${rowIndex}:${colIndex}:${piece}`}>
|
|
<DraughtsCell
|
|
piece={piece}
|
|
rowIndex={rowIndex}
|
|
colIndex={colIndex}
|
|
/>
|
|
</GridItem>
|
|
))
|
|
)}
|
|
</Grid>
|
|
</DndProvider>
|
|
);
|
|
}
|