69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { CircleX } from 'lucide-react';
|
|
import { useAppContext } from '@/app/AppContext';
|
|
import TarokkaDeck from '@/lib/TarokkaDeck';
|
|
import getURL from '@/tools/getURL';
|
|
|
|
import { Deck } from '@/types';
|
|
|
|
const tarokkaDeck = new TarokkaDeck();
|
|
|
|
type CardSelectProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export default function CardSelect({ className = '' }: CardSelectProps) {
|
|
const { gameData, select, selectCardIndex, setSelectCardIndex } = useAppContext();
|
|
const { cards: hand, settings } = gameData;
|
|
|
|
const handIDs = hand.map(({ id }) => id);
|
|
const selectDeck: Deck | null = selectCardIndex >= 0 ? hand[selectCardIndex].deck : null;
|
|
|
|
const close = () => setSelectCardIndex(-1);
|
|
|
|
const handleClose = (event: React.MouseEvent<HTMLElement>) => {
|
|
if (event.target === event.currentTarget) {
|
|
close();
|
|
}
|
|
};
|
|
|
|
if (!selectDeck) return null;
|
|
|
|
const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
|
|
|
|
return (
|
|
<div
|
|
onClick={handleClose}
|
|
className={`fixed inset-0 flex justify-center items-center p-4 bg-black/20 backdrop-blur-sm z-40 ${className}`}
|
|
>
|
|
<button
|
|
className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
|
|
onClick={close}
|
|
>
|
|
<CircleX className="w-6 h-6" />
|
|
</button>
|
|
<div
|
|
onClick={handleClose}
|
|
className={`flex flex-wrap justify-center items-center gap-3 h-dvh w-2/3 overflow-scroll scrollbar-hide p-4`}
|
|
>
|
|
{cards
|
|
.filter(({ id }) => !handIDs.includes(id))
|
|
.map((card) => (
|
|
<div
|
|
key={card.id}
|
|
className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
|
|
onClick={() => select(card.id)}
|
|
>
|
|
<img
|
|
src={getURL(card, settings)}
|
|
alt={card.aria}
|
|
className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|