| 1 | import { labelOf, SPRITE_COL, type Tile } from '../game/tiles'; |
| 2 | |
| 3 | interface Props { |
| 4 | tile?: Tile; |
| 5 | faceDown?: boolean; |
| 6 | size?: 'hand' | 'meld' | 'small'; |
| 7 | raised?: boolean; |
| 8 | dim?: boolean; |
| 9 | highlight?: boolean; |
| 10 | onClick?: () => void; |
| 11 | } |
| 12 | |
| 13 | export function TileView({ tile, faceDown, size = 'hand', raised, dim, highlight, onClick }: Props) { |
| 14 | const down = faceDown || tile === undefined; |
| 15 | const cls = [ |
| 16 | 'tile', |
| 17 | `t-${size}`, |
| 18 | down ? 'back' : 'face', |
| 19 | raised ? 'raised' : '', |
| 20 | dim ? 'dim' : '', |
| 21 | highlight ? 'hl' : '', |
| 22 | onClick ? 'tappable' : '', |
| 23 | ] |
| 24 | .filter(Boolean) |
| 25 | .join(' '); |
| 26 | |
| 27 | return ( |
| 28 | <div |
| 29 | className={cls} |
| 30 | onClick={onClick} |
| 31 | aria-label={down ? undefined : labelOf(tile!)} |
| 32 | style={down ? undefined : ({ '--col': SPRITE_COL[tile!] } as React.CSSProperties)} |
| 33 | /> |
| 34 | ); |
| 35 | } |