111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
'use client';
|
|
import { useRef, useState } from 'react';
|
|
|
|
import tarokkaCards from '@/constants/tarokkaCards';
|
|
import getCardInfo from '@/tools/getCardInfo';
|
|
|
|
import { Layout, TarokkaGameCard } from '@/types';
|
|
|
|
const cardBack = tarokkaCards.find((card) => card.back)!;
|
|
|
|
type CardProps = {
|
|
dm: boolean;
|
|
card: TarokkaGameCard;
|
|
position: Layout;
|
|
flipAction: () => void;
|
|
};
|
|
|
|
export default function Card({ dm, card, position, flipAction }: CardProps) {
|
|
const { aria, card: cardName, description, flipped, url } = card;
|
|
|
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
|
|
const longPressTimeout = useRef<NodeJS.Timeout | null>(null);
|
|
const delayTimeout = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const handleMouseMove = (e: React.MouseEvent) => {
|
|
setTooltipPos({ x: e.clientX, y: e.clientY });
|
|
};
|
|
|
|
const handleMouseEnter = () => {
|
|
delayTimeout.current = setTimeout(() => {
|
|
setShowTooltip(true);
|
|
}, 1000);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
clearTimeout(delayTimeout.current!);
|
|
setShowTooltip(false);
|
|
};
|
|
|
|
const handleTouchStart = () => {
|
|
longPressTimeout.current = setTimeout(() => {
|
|
setShowTooltip(true);
|
|
}, 1000);
|
|
};
|
|
|
|
const handleTouchEnd = () => {
|
|
clearTimeout(longPressTimeout.current!);
|
|
setShowTooltip(false);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
if (dm) {
|
|
flipAction();
|
|
}
|
|
};
|
|
|
|
const getTooltip = () => {
|
|
const text = getCardInfo(card, position, dm);
|
|
|
|
return (
|
|
<>
|
|
{text.map((t, i) => (
|
|
<div key={i}>
|
|
<p>{t}</p>
|
|
{i < text.length - 1 && <hr className="my-2 border-gray-300" />}
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
|
|
onClick={handleClick}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onMouseMove={handleMouseMove}
|
|
onTouchStart={handleTouchStart}
|
|
onTouchEnd={handleTouchEnd}
|
|
>
|
|
<div
|
|
className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
|
|
>
|
|
<div className="absolute group inset-0 backface-hidden">
|
|
<img
|
|
src={cardBack.url}
|
|
alt="Card Back"
|
|
className="rounded-xl rounded border border-gray-500 "
|
|
/>
|
|
</div>
|
|
<div className="absolute group inset-0 backface-hidden rotate-y-180">
|
|
<img src={url} alt={aria} className="rounded-xl rounded border border-gray-500 " />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`fixed w-[25vh] pointer-events-none duration-300 ease-in z-50 text-xs bg-black text-white rounded border border-gray-300 px-2 py-1 rounded transition-opacity ${showTooltip ? 'opacity-100' : 'opacity-0'}`}
|
|
style={{
|
|
top: `${tooltipPos.y + 20}px`,
|
|
left: `${tooltipPos.x + 20}px`,
|
|
}}
|
|
>
|
|
{getTooltip()}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|