Tile.tsx

Blame: the commit that last changed each line · file · history

`417dc266` 2022-03-23 Pavel Safronov	1	import * as React from 'react';
	2	import { Coord } from '../game/coord';
	3	import { IGame } from '../game/game';
	4	import { Piece } from './Piece';
	5	import './Tile.css';
	6
	7	export type Props = {
	8	pos: Coord,
	9	game: IGame,
	10	validMoves: Coord[],
	11	selectedPiecePos: Coord \| undefined,
	12	currentPlayerId: string,
	13	pieceClickCb: () => void,
	14	validMoveClickCb: () => void
	15	};
	16	export const Tile = (props: Props): React.ReactElement => {
	17
	18	const { pos, game, validMoves, selectedPiecePos, currentPlayerId } = props;
	19	const { player1Id } = game;
	20	const { row, col } = pos;
	21
	22	const isWhite = row % 2 === col % 2;
	23	const piece = game.getPiece(pos);
	24	const isPlayer1 = piece === player1Id;
	25	const isCurrentPlayer = piece === currentPlayerId;
	26	const isSelectedPiece = selectedPiecePos !== undefined && pos.equals(selectedPiecePos);
	27	const isValidMove = validMoves.findIndex(vm => vm.equals(pos)) >= 0;
	28	const classNames = [
	29	'tile',
	30	isWhite ? 'white' : 'black',
	31	isValidMove && 'possible-move'
	32	];
	33	return (
	34	<div
	35	className={classNames.join(' ')}
	36	onClick={() => { if (isValidMove) { props.validMoveClickCb(); } }}>
	37	{(piece !== null) &&
	38	<Piece
	39	isPlayer1={isPlayer1}
	40	isCurrentPlayer={isCurrentPlayer}
	41	clickCb={() => { if (isCurrentPlayer) { props.pieceClickCb() } }}
	42	isSelectedPiece={isSelectedPiece}
	43	/>}
	44	</div>
	45	);
	46	};