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

stack-the-deck #1

Merged
gavin merged 10 commits from stack-the-deck into trunk 2025-06-13 07:38:52 -04:00
Conversation 0 Commits 10 Files Changed 14 +10 -6
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d572bdcd0e - Show all commits

12
components/Card.tsx
View File

@@ -1,6 +1,7 @@
'use client'; 'use client';
import ToolTip from '@/components/ToolTip'; import ToolTip from '@/components/ToolTip';
import StackTheDeck from '@/components/StackTheDeck';
import tarokkaCards from '@/constants/tarokkaCards'; import tarokkaCards from '@/constants/tarokkaCards';
import getCardInfo from '@/tools/getCardInfo'; import getCardInfo from '@/tools/getCardInfo';
import getURL from '@/tools/getURL'; import getURL from '@/tools/getURL';
@@ -48,17 +49,20 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
onClick={handleClick} onClick={handleClick}
> >
<div <div
className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`} className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
> >
<div className="absolute group inset-0 backface-hidden"> <div className="absolute inset-0 group backface-hidden">
{dm && <img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />} {dm && <img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />}
<img <img
src={getURL(cardBack as TarokkaGameCard, settings)} src={getURL(cardBack as TarokkaGameCard, settings)}
alt="Card Back" alt="Card Back"
className={`absolute rounded-lg ${dm ? 'transition duration-500 hover:opacity-40' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`} className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-30' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
/> />
{dm && !flipped && (
<StackTheDeck onRedo={() => console.log('Redo')} onPick={() => console.log('Pick')} />
)}
</div> </div>
<div className="absolute group inset-0 backface-hidden rotate-y-180"> <div className="absolute inset-0 backface-hidden rotate-y-180">
<img <img
src={getURL(card, settings)} src={getURL(card, settings)}
alt={aria} alt={aria}

4
components/ToolTip.tsx
View File

@@ -15,8 +15,8 @@ type TooltipProps = {
export default function Tooltip({ export default function Tooltip({
children, children,
content, content,
delay = 500, delay = 250,
mobileDelay = 500, mobileDelay = 250,
offsetX = 20, offsetX = 20,
offsetY = 20, offsetY = 20,
edgeBuffer = 10, edgeBuffer = 10,