more info in tooltips

app/[gameID]/page.tsx

@@ -90,6 +90,7 @@ export default function GamePage() {
 						<div key={index} className="aspect-[2/3]}">
 							{card && (
 								<Card
+									dm={isDM}
 									card={card}
 									position={layout[cardMap[index]]}
 									flipAction={() => flipCard(cardMap[index])}

components/Card.tsx

@@ -1,22 +1,23 @@
 'use client';
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
 
-import { TarokkaGameCard } from '@/types';
 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: { text: string };
+	position: Layout;
 	flipAction: () => void;
 };
 
-export default function Card({
-	card: { aria, description, flipped, url },
-	position,
-	flipAction,
-}: CardProps) {
+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);
@@ -48,11 +49,32 @@ export default function Card({
 		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] cursor-pointer perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10"
-				onClick={flipAction}
+				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}
@@ -81,8 +103,7 @@ export default function Card({
 					left: `${tooltipPos.x + 20}px`,
 				}}
 			>
-				{!flipped && position.text}
-				{flipped && description}
+				{getTooltip()}
 			</div>
 		</>
 	);

tools/cardTypes.ts

@@ -0,0 +1,9 @@
+import { TarokkaGameCard, TarokkaGameHigh, TarokkaGameLow, TarokkaGameBase } from '@/types';
+
+export const isHighCard = (card: TarokkaGameCard): card is TarokkaGameHigh =>
+	'prophecy' in card && 'allies' in card.prophecy;
+
+export const isLowCard = (card: TarokkaGameCard): card is TarokkaGameLow =>
+	'prophecy' in card && 'playerText' in card.prophecy;
+
+export const isBaseCard = (card: TarokkaGameCard): card is TarokkaGameBase => !('prophecy' in card);

tools/getCardInfo.ts

@@ -0,0 +1,35 @@
+import { isHighCard, isLowCard } from '@/tools/cardTypes';
+import { Layout, TarokkaGameCard } from '@/types';
+
+export default function getTooltip(card: TarokkaGameCard, position: Layout, dm: boolean) {
+	const { card: cardName, description, flipped } = card;
+
+	let text: string[] = [position.text];
+
+	if (flipped) {
+		if (dm) text.push(`${cardName}: ${description}`);
+
+		if (isHighCard(card)) {
+			// High deck ally
+			if (position.id === 'ally') {
+				if (dm) text.push(`Ally: ${card.prophecy.allies[0].ally}`);
+				if (dm) text.push(card.prophecy.allies[0].dmText);
+				text.push(card.prophecy.allies[0].playerText);
+			}
+
+			// High deck Strahd
+			if (position.id === 'strahd') {
+				if (dm) text.push(card.prophecy.strahd.dmText);
+				text.push(card.prophecy.strahd.playerText);
+			}
+		}
+
+		// Low deck Tome, Ravenkind, or Sunsword
+		if (isLowCard(card)) {
+			if (dm) text.push(card.prophecy.dmText);
+			text.push(card.prophecy.playerText);
+		}
+	}
+
+	return text;
+}