File size: 2,419 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 | import { motion } from 'framer-motion';
import type { Player } from '@shared/types';
interface TargetSelectModalProps {
players: Player[];
onClose: () => void;
}
export function TargetSelectModal({ players, onClose }: TargetSelectModalProps) {
const handleSelect = (playerId: string) => {
// Call the callback set by GameBoard
// The callback returns true if we should NOT close (e.g., opening another modal)
const callback = (window as any).__targetSelectCallback;
if (callback) {
const keepOpen = callback(playerId);
if (keepOpen) return; // Don't close if another modal is being opened
}
onClose();
};
return (
<motion.div
className="modal-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
>
<motion.div
className="modal-content"
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">🎯 Select Target</h2>
<p className="text-papyrus text-center mb-4">Choose an opponent</p>
<div className="space-y-2 mb-6">
{players.map((player, index) => (
<motion.button
key={player.id}
className="w-full p-3 rounded-lg bg-nile-blue/50 border border-egyptian-gold/30 hover:border-egyptian-gold hover:bg-nile-blue transition-all flex items-center justify-between"
onClick={() => handleSelect(player.id)}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
<div className="flex items-center gap-3">
<div className="player-avatar w-10 h-10">
{player.name.charAt(0).toUpperCase()}
</div>
<span className="text-papyrus font-semibold">{player.name}</span>
</div>
<span className="text-egyptian-gold">{player.cardCount} cards</span>
</motion.button>
))}
</div>
<button onClick={onClose} className="btn btn-secondary w-full">
Cancel
</button>
</motion.div>
</motion.div>
);
}
|