This commit is contained in:
Gavin McDonald
2025-06-26 14:39:04 -04:00
parent 12ae8dd6d8
commit 2c2e93649c
3 changed files with 16 additions and 18 deletions

View File

@@ -11,32 +11,33 @@ import getURL from '@/tools/getURL';
import tarokkaCards from '@/constants/tarokkaCards';
import { layout } from '@/constants/tarokka';
import { Settings, TarokkaGameCard } from '@/types';
import { TarokkaGameCard } from '@/types';
const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = {
dm: boolean;
card: TarokkaGameCard;
cardIndex: number;
settings: Settings;
};
export default function Card({ dm, card, cardIndex, settings }: CardProps) {
export default function Card({ card, cardIndex }: CardProps) {
const [tooltip, setTooltip] = useState<React.ReactNode>(null);
const { flipCard, redraw, setSelectCardIndex } = useAppContext();
const { flipCard, gameData, redraw, setSelectCardIndex } = useAppContext();
const { dmID, settings } = gameData;
const isDM = !!dmID;
const { aria, flipped } = card;
const position = layout[cardIndex];
const handleClick = () => {
if (dm) {
if (isDM) {
flipCard(cardIndex);
}
};
const getTooltip = () => {
const text = getCardInfo(card, position, dm, settings);
const text = getCardInfo(card, position, isDM, settings);
return text.length ? (
<>
@@ -53,7 +54,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
return (
<ToolTip content={tooltip || getTooltip()}>
<TiltCard
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${dm ? 'cursor-pointer' : ''} `}
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
cardID={position.id}
>
<div
@@ -61,7 +62,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
onClick={handleClick}
>
<div className="absolute inset-0 group backface-hidden">
{dm && (
{isDM && (
<>
<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
<img
@@ -74,9 +75,9 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
<img
src={getURL(cardBack as TarokkaGameCard, settings)}
alt="Card Back"
className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
className={`absolute rounded-lg ${isDM ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
/>
{dm && !flipped && (
{isDM && !flipped && (
<StackTheDeck
onRedraw={() => redraw(cardIndex)}
onSelect={() => setSelectCardIndex(cardIndex)}