gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

update Card tooltips for StackTheDeck

Browse Source
This commit is contained in:
Gavin McDonald
2025-06-12 11:04:05 -04:00
parent a3b2efac97
commit 6c7968110e
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Card.tsx
View File

@@ -1,5 +1,6 @@
'use client'; 'use client';
import { useState } from 'react';
import ToolTip from '@/components/ToolTip'; import ToolTip from '@/components/ToolTip';
import StackTheDeck from '@/components/StackTheDeck'; import StackTheDeck from '@/components/StackTheDeck';
import tarokkaCards from '@/constants/tarokkaCards'; import tarokkaCards from '@/constants/tarokkaCards';
@@ -19,6 +20,7 @@ type CardProps = {
}; };
export default function Card({ dm, card, position, settings, flipAction }: CardProps) { export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
const [tooltip, setTooltip] = useState<React.ReactNode>(null);
const { aria, flipped } = card; const { aria, flipped } = card;
const handleClick = () => { const handleClick = () => {
@@ -43,7 +45,7 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
}; };
return ( return (
<ToolTip content={getTooltip()}> <ToolTip content={tooltip || getTooltip()}>
<div <div
className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `} className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10 ${dm ? 'cursor-pointer' : ''} `}
onClick={handleClick} onClick={handleClick}
@@ -68,7 +70,11 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`} className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
/> />
{dm && !flipped && ( {dm && !flipped && (
<StackTheDeck onRedo={() => console.log('Redo')} onPick={() => console.log('Pick')} /> <StackTheDeck
onRedo={() => console.log('Redo')}
onPick={() => console.log('Pick')}
onHover={setTooltip}
/>
)} )}
</div> </div>
<div className="absolute inset-0 backface-hidden rotate-y-180"> <div className="absolute inset-0 backface-hidden rotate-y-180">