Moon Patel
95 lines
2.9 KiB
React
95 lines
2.9 KiB
React
import { Image, createStyles } from '@mantine/core';
|
|
import React, { useContext, useEffect } from 'react';
|
|
import { useDraggable } from '@dnd-kit/core'
|
|
import { ChessGameContext } from '../context/chess-game-context';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const useStyles = createStyles(() => ({
|
|
'chess-piece': {
|
|
outlineStyle: 'none',
|
|
boxShadow: 'none',
|
|
borderColor: 'transparent'
|
|
}
|
|
}));
|
|
|
|
const Piece = ({ cell }) => {
|
|
const { classes } = useStyles();
|
|
const { selectPiece, isSquareMarked } = useContext(ChessGameContext)
|
|
let { square, type, color } = cell;
|
|
let marked = isSquareMarked(square);
|
|
let logo = null;
|
|
|
|
switch (type) {
|
|
case 'p':
|
|
logo = color === 'w' ? 'pawn_white' : 'pawn_black';
|
|
break;
|
|
case 'r':
|
|
logo = color === 'w' ? 'rook_white' : 'rook_black';
|
|
break;
|
|
case 'n':
|
|
logo = color === 'w' ? 'knight_white' : 'knight_black';
|
|
break;
|
|
case 'b':
|
|
logo = color === 'w' ? 'bishop_white' : 'bishop_black';
|
|
break;
|
|
case 'q':
|
|
logo = color === 'w' ? 'queen_white' : 'queen_black';
|
|
break;
|
|
case 'k':
|
|
logo = color === 'w' ? 'king_white' : 'king_black';
|
|
break;
|
|
}
|
|
|
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
|
id: square, data: {
|
|
...cell
|
|
}
|
|
});
|
|
|
|
let borderColor = marked ? '#77777744' : 'transparent'
|
|
|
|
const style = transform ? {
|
|
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
|
|
cursor: isDragging ? 'grabbing' : 'pointer',
|
|
zIndex: 1000,
|
|
aspectRatio: '1',
|
|
touchAction: 'none',
|
|
borderRadius: '10px',
|
|
outline: 'none'
|
|
} : {
|
|
zIndex: 10
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isDragging) {
|
|
selectPiece(cell);
|
|
}
|
|
}, [isDragging])
|
|
|
|
|
|
if (logo) {
|
|
return (
|
|
<div style={{ position: 'relative', width: '100%', height: '100%' }}>
|
|
<div style={{ borderRadius: '50%', position: 'absolute', boxSizing: 'border-box', borderWidth: '7px', width: '100%', height: '100%', borderStyle: 'solid', borderColor }}>
|
|
</div>
|
|
<div style={{ width: '100%', height: '100%' }}>
|
|
<Image classNames={{ root: classes['chess-piece'] }} ref={setNodeRef} style={style} sx={{ cursor: 'pointer' }} {...listeners} {...attributes} src={`/src/assets/images/${logo}.png`} />
|
|
</div>
|
|
</div>
|
|
)
|
|
} else {
|
|
return (
|
|
<div style={{ width: '100%' }}></div>
|
|
)
|
|
}
|
|
}
|
|
|
|
Piece.propTypes = {
|
|
cell: PropTypes.shape({
|
|
square: PropTypes.string.isRequired,
|
|
type: PropTypes.oneOf(['p', 'r', 'n', 'b', 'q', 'k']),
|
|
color: PropTypes.oneOf(['w', 'b'])
|
|
})
|
|
}
|
|
|
|
export default Piece |