File size: 2,503 Bytes
a7b6b46 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import { useState } from 'react';
import { motion } from 'framer-motion';
import { Card } from '../game/Card';
import { emitBurnCard } from '../../socket/socket';
import type { CardInstance } from '@shared/types';
import { useGameStore } from '../../store/gameStore';
interface ViewHandModalProps {
cards: CardInstance[];
targetId?: string;
onClose: () => void;
}
export function ViewHandModal({ cards, targetId, onClose }: ViewHandModalProps) {
const [selectedCard, setSelectedCard] = useState<string | null>(null);
const gameState = useGameStore((state) => state.gameState);
const targetName = gameState?.players.find(p => p.id === targetId)?.name ?? 'Opponent';
const handleBurn = () => {
if (selectedCard) {
emitBurnCard(selectedCard);
onClose();
}
};
return (
<motion.div
className="modal-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
className="modal-content max-w-2xl"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.8, opacity: 0 }}
onClick={(e) => e.stopPropagation()}
>
<h2 className="modal-title">👁️ {targetName}'s Hand</h2>
<p className="text-papyrus text-center mb-2">
Select one card to BURN (discard)
</p>
<p className="text-mummy-red text-center text-sm mb-4">
🔥 The chosen card will be destroyed!
</p>
<div className="flex justify-center gap-3 flex-wrap mb-6">
{cards.map((card, index) => (
<motion.div
key={card.instanceId}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
onClick={() => setSelectedCard(card.instanceId)}
>
<Card
card={card}
size="medium"
selected={selectedCard === card.instanceId}
/>
</motion.div>
))}
</div>
<div className="flex gap-3">
<button onClick={onClose} className="btn btn-secondary flex-1">
Cancel
</button>
<button
onClick={handleBurn}
disabled={!selectedCard}
className="btn btn-danger flex-1"
>
🔥 Burn Card
</button>
</div>
</motion.div>
</motion.div>
);
}
|