tooltips

app/[gameID]/page.tsx

@@ -5,22 +5,10 @@ import { useParams } from 'next/navigation';
 import { socket } from '@/socket';
 
 import Card from '@/components/Card';
+import { cardMap, layout } from '@/constants/tarokka';
 
 import type { GameUpdate, ClientUpdate, StandardGameCard, TarokkaGameCard } from '@/types';
 
-// map our five cards to their appropriate
-// locations in a 3x3 grid
-// █1█
-// 042
-// █3█
-const cardMap = {
-	3: 0,
-	1: 1,
-	5: 2,
-	7: 3,
-	4: 4,
-};
-
 export default function GamePage() {
 	const { gameID: gameIDParam } = useParams();
 
@@ -77,7 +65,13 @@ export default function GamePage() {
 					.map(arrangeCards)
 					.map((card, index) => (
 						<div key={index} className="aspect-[2/3]}">
-							{card && <Card card={card} flipAction={() => flipCard(cardMap[index])} />}
+							{card && (
+								<Card
+									card={card}
+									position={layout[cardMap[index]]}
+									flipAction={() => flipCard(cardMap[index])}
+								/>
+							)}
 						</div>
 					))}
 			</div>

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">
+				<div
-					<img src={cardBack.url} alt="Card Back" className="rounded-xl" />
+					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
-				</div>
+				>
-				<div className="absolute inset-0 backface-hidden rotate-y-180">
+					<div className="absolute group inset-0 backface-hidden">
-					<img src={url} alt={aria} className="rounded-xl" />
+						<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>
+		</>
 	);
 }

constants/tarokka.ts

@@ -0,0 +1,47 @@
+import { Layout } from '@/types';
+
+// map our five cards to their appropriate
+// locations in a 3x3 grid
+// 012    █1█
+// 345 -> 042
+// 678    █3█
+export const cardMap: Record<number, number> = {
+	3: 0,
+	1: 1,
+	5: 2,
+	7: 3,
+	4: 4,
+};
+
+export const layout: Layout[] = [
+	{
+		id: 'tome',
+		deck: 'low',
+		name: 'Tome of Strahd',
+		text: 'This card tells of history. Knowledge of the ancient will help you better understand your enemy.',
+	},
+	{
+		id: 'ravenkind',
+		deck: 'low',
+		name: 'Holy Symbol of Ravenkind',
+		text: 'This card tells of a powerful force for good and protection, a holy symbol of great hope.',
+	},
+	{
+		id: 'sunsword',
+		deck: 'low',
+		name: 'Sunsword',
+		text: 'This is a card of power and strength. It tells of a weapon of vengeance: a sword of sunlight.',
+	},
+	{
+		id: 'ally',
+		deck: 'high',
+		name: 'Strahd’s Enemy',
+		text: 'This card sheds light on one who will help you greatly in the battle against darkness.',
+	},
+	{
+		id: 'strahd',
+		deck: 'high',
+		name: 'Strahd',
+		text: 'Your enemy is a creature of darkness, whose powers are beyond mortality. This card will lead you to him!',
+	},
+];

types/index.ts

@@ -78,3 +78,10 @@ export interface ClientUpdate {
 	gameID: string;
 	cardIndex: number;
 }
+
+export interface Layout {
+	id: string;
+	deck: string;
+	name: string;
+	text: string;
+}