33 lines
979 B
TypeScript
33 lines
979 B
TypeScript
import React, {FunctionComponent} from "react";
|
|
|
|
interface Props {
|
|
cardString: string;
|
|
handleClick?: (cardString: string) => void;
|
|
isHidden?: boolean;
|
|
isClickable?: boolean;
|
|
}
|
|
|
|
const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
|
|
const cardType = cardString.split(' ')[0].toLowerCase();
|
|
const cardValue = cardString.split(' ')[1].toLowerCase();
|
|
|
|
const cardSource = isHidden ?
|
|
require(`../../assets/cards/back.png`) :
|
|
require(`../../assets/cards/${cardType}_${cardValue}.png`);
|
|
const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
|
|
|
|
const handleCardClick = () => {
|
|
if (handleClick) {
|
|
handleClick(cardString);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={`card ${isClickable && 'card-clickable'}`}>
|
|
<img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Card;
|