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

UI tweaks

Browse Source
This commit is contained in:
Gavin McDonald
2025-06-12 10:36:14 -04:00
parent bc32adbdfd
commit d572bdcd0e
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/Card.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import ToolTip from '@/components/ToolTip';
import StackTheDeck from '@/components/StackTheDeck';
import tarokkaCards from '@/constants/tarokkaCards';
import getCardInfo from '@/tools/getCardInfo';
import getURL from '@/tools/getURL';
@@ -48,17 +49,20 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
onClick={handleClick}
>
<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" />}
<img
src={getURL(cardBack as TarokkaGameCard, settings)}
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 className="absolute group inset-0 backface-hidden rotate-y-180">
<div className="absolute inset-0 backface-hidden rotate-y-180">
<img
src={getURL(card, settings)}
alt={aria}