42 lines
907 B
TypeScript
42 lines
907 B
TypeScript
import React from 'react'
|
|
|
|
import type {CardKey} from '../types.ts'
|
|
|
|
import {getCardAlt, getCardSrc} from './cards.ts'
|
|
|
|
const EMPTY_SPACE = '-'
|
|
|
|
interface CardTokenProps {
|
|
cardKey: CardKey | null
|
|
onSelect?: () => void
|
|
isSelected: boolean
|
|
disabled: boolean
|
|
}
|
|
|
|
export default function CardToken(props: CardTokenProps): JSX.Element {
|
|
const {onSelect, cardKey, isSelected, disabled} = props
|
|
if (cardKey == null) {
|
|
return (
|
|
<div className={`card-button card-back${isSelected ? ' selected' : ''}`}>
|
|
<div>
|
|
<span>{EMPTY_SPACE}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`card-button${isSelected ? ' selected' : ''}`}
|
|
onClick={onSelect}
|
|
disabled={disabled}
|
|
>
|
|
<img
|
|
className="card-image"
|
|
src={getCardSrc(cardKey)}
|
|
alt={getCardAlt(cardKey)}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|