Tile.tsx

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	};