tooltips

components/Card.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { useState, useEffect, useRef } from 'react';
 
 import { StandardGameCard, TarokkaGameCard } from '@/types';
 import tarokkaCards from '@/constants/tarokkaCards';
@@ -7,25 +8,77 @@ const cardBack = tarokkaCards.find((card) => card.back)!;
 
 type CardProps = {
 	card: StandardGameCard | TarokkaGameCard;
+	position: { text: string };
 	flipAction: () => void;
 };
 
-export default function Card({ card: { aria, flipped, url }, flipAction }: CardProps) {
+export default function Card({ card: { aria, flipped, url }, position, flipAction }: CardProps) {
+	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);
+	};
+
 	return (
-		<div
-			className="relative h-[21vh] w-[15vh] cursor-pointer perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10"
-			onClick={flipAction}
-		>
+		<>
 			<div
-				className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
+				className="relative h-[21vh] w-[15vh] cursor-pointer perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10"
+				onClick={flipAction}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onMouseMove={handleMouseMove}
+				onTouchStart={handleTouchStart}
+				onTouchEnd={handleTouchEnd}
 			>
-				<div className="absolute inset-0 backface-hidden">
-					<img src={cardBack.url} alt="Card Back" className="rounded-xl" />
-				</div>
-				<div className="absolute inset-0 backface-hidden rotate-y-180">
-					<img src={url} alt={aria} className="rounded-xl" />
+				<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>
+			<div
+				className={`fixed w-[20vh] 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`,
+				}}
+			>
+				{position.text}
+			</div>
+		</>
 	);
 }