import React , { useRef } from "react" ; import { createUseStyles } from "react-jss" ; import classNames from "classnames" ; import { useBoardState } from "../../context" ; import { ClickBoardTileEvent } from "../../events" ; import { useTileWidth } from "./useTileWidth" ; type TileProps = { x : number ; y : number ; onClick ? : ( event : ClickBoardTileEvent ) => void ; } ; const isBoardTileDark = ( x , y ) => ( ( y ^ x ) & 1 ) !== 0 ; const useStyles = createUseStyles < string , { boardWidth : number ; tileWidth : number ; } > ( { tile : props => ( { width : `${ ( 100 / props . boardWidth ) . toFixed ( 2 ) }%` , height : `${ props . tileWidth }px` , position : "relative" , display : "inline-block" , boxSizing : "border-box" , userSelect : "none" } ) , tileInner : { width : "100%" , height : "100%" } } ) ; export const Tile = React . forwardRef < any , TileProps > ( ( { x , y , onClick } , ref ) => { const { size : { width : boardWidth } } = useBoardState ( ) ; const tileInnerRef = useRef < HTMLDivElement > ( null ) ; const tileWidth = useTileWidth ( tileInnerRef ) ; const styles = useStyles ( { boardWidth , tileWidth } ) ; const isDark = isBoardTileDark ( x , y ) ; const handleClick = onClick ? ( ) => onClick ( { x , y } ) : undefined ; const className = classNames ( styles . tile , "tile" , { dark : isDark , light : ! isDark } ) ; return ( < div ref = { ref } className = { className } touch - action = "none" onPointerUp = { handleClick } > < div ref = { tileInnerRef } className = { styles . tileInner } / > < /div>); } ) ;