diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
index 4564230..d25ca59 100644
--- a/app/[gameID]/page.tsx
+++ b/app/[gameID]/page.tsx
@@ -90,6 +90,7 @@ export default function GamePage() {
{card && (
flipCard(cardMap[index])}
diff --git a/components/Card.tsx b/components/Card.tsx
index 16b36ce..c27900b 100644
--- a/components/Card.tsx
+++ b/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(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) => (
+
+
{t}
+ {i < text.length - 1 &&
}
+
+ ))}
+ >
+ );
+ };
+
return (
<>
- {!flipped && position.text}
- {flipped && description}
+ {getTooltip()}
>
);
diff --git a/tools/cardTypes.ts b/tools/cardTypes.ts
new file mode 100644
index 0000000..f00e005
--- /dev/null
+++ b/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);
diff --git a/tools/getCardInfo.ts b/tools/getCardInfo.ts
new file mode 100644
index 0000000..b611567
--- /dev/null
+++ b/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;
+}