65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import { useDrag } from 'react-dnd';
|
|
import { Center } from '@chakra-ui/react';
|
|
import PropTypes from 'prop-types';
|
|
import { useDraughtsBoard } from '../DraughtsBoardContext';
|
|
import { useDraughtsSettings } from '../../settings/DraughtsSettingsContext';
|
|
import { DraughtsCrown } from './DraughtsCrown';
|
|
import {
|
|
compareCells,
|
|
pieceIsPlayer,
|
|
pieceIsQueen,
|
|
Pieces,
|
|
Players,
|
|
} from '@draughts/core';
|
|
|
|
export function DraughtsPiece(props) {
|
|
const { board } = useDraughtsBoard();
|
|
const { userPlayer } = useDraughtsSettings();
|
|
|
|
const isWhite = pieceIsPlayer(props.piece, Players.WHITE);
|
|
const activePlayer =
|
|
pieceIsPlayer(props.piece, userPlayer) &&
|
|
pieceIsPlayer(props.piece, board.playerToMove);
|
|
|
|
const currentCell = { col: props.colIndex, row: props.rowIndex };
|
|
|
|
const canDrag =
|
|
activePlayer &&
|
|
board.moves.some((move) => compareCells(move.path.at(0), currentCell));
|
|
|
|
const [, dragRef] = useDrag(
|
|
() => ({
|
|
canDrag: () => canDrag,
|
|
isDragging: (monitor) => compareCells(monitor.getItem(), currentCell),
|
|
item: currentCell,
|
|
type: 'piece',
|
|
}),
|
|
[board, canDrag, currentCell]
|
|
);
|
|
|
|
return (
|
|
<Center
|
|
ref={dragRef}
|
|
zIndex="1"
|
|
w="100%"
|
|
h="100%"
|
|
opacity={canDrag ? 1 : 0.8}
|
|
borderWidth="0.2em"
|
|
borderStyle="solid"
|
|
borderColor={isWhite ? 'gray.400' : 'gray.600'}
|
|
borderRadius="50%"
|
|
bgColor={isWhite ? 'yellow.50' : 'gray.900'}
|
|
>
|
|
{pieceIsQueen(props.piece) && (
|
|
<DraughtsCrown w="70%" h="70%" opacity="0.6" userSelect="none" />
|
|
)}
|
|
</Center>
|
|
);
|
|
}
|
|
|
|
DraughtsPiece.propTypes = {
|
|
colIndex: PropTypes.number,
|
|
piece: PropTypes.oneOf(Object.values(Pieces)).isRequired,
|
|
rowIndex: PropTypes.number,
|
|
};
|