matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add hover source tracking for card preview in deck manager

Browse Source
This commit is contained in:
Matthieu
2025-11-26 14:00:56 +01:00
parent 8d0ce534f8
commit 7eb893ac63
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/DeckManager.tsx
View File

@@ -150,6 +150,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
const [isAddingAll, setIsAddingAll] = useState(false); const [isAddingAll, setIsAddingAll] = useState(false);
const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map()); const [cardFaceIndex, setCardFaceIndex] = useState<Map<string, number>>(new Map());
const [hoveredCard, setHoveredCard] = useState<Card | null>(null); const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
const [hoverSource, setHoverSource] = useState<'search' | 'deck' | null>(null);
const [selectedCard, setSelectedCard] = useState<Card | null>(null); const [selectedCard, setSelectedCard] = useState<Card | null>(null);
// Load user collection on component mount // Load user collection on component mount
@@ -623,8 +624,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
className={`bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors cursor-pointer ${ className={`bg-gray-800 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-750 transition-colors cursor-pointer ${
!isValidForCommander ? 'border border-yellow-500/50' : '' !isValidForCommander ? 'border border-yellow-500/50' : ''
}`} }`}
onMouseEnter={() => setHoveredCard(card)} onMouseEnter={() => {
onMouseLeave={() => setHoveredCard(null)} setHoveredCard(card);
setHoverSource('search');
}}
onMouseLeave={() => {
setHoveredCard(null);
setHoverSource(null);
}}
onClick={() => setSelectedCard(card)} onClick={() => setSelectedCard(card)}
> >
{/* Card Thumbnail */} {/* Card Thumbnail */}
@@ -842,8 +849,14 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
className={`flex items-center gap-3 p-2 rounded-lg bg-gray-700 cursor-pointer hover:bg-gray-650 transition-colors ${ className={`flex items-center gap-3 p-2 rounded-lg bg-gray-700 cursor-pointer hover:bg-gray-650 transition-colors ${
!isValidForCommander ? 'border border-yellow-500/50' : '' !isValidForCommander ? 'border border-yellow-500/50' : ''
}`} }`}
onMouseEnter={() => setHoveredCard(card)} onMouseEnter={() => {
onMouseLeave={() => setHoveredCard(null)} setHoveredCard(card);
setHoverSource('deck');
}}
onMouseLeave={() => {
setHoveredCard(null);
setHoverSource(null);
}}
onClick={() => setSelectedCard(card)} onClick={() => setSelectedCard(card)}
> >
<img <img
@@ -979,8 +992,11 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
const displayTypeLine = currentFace?.type_line || hoveredCard.type_line; const displayTypeLine = currentFace?.type_line || hoveredCard.type_line;
const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text; const displayOracleText = currentFace?.oracle_text || hoveredCard.oracle_text;
// Position preview based on hover source
const positionClass = hoverSource === 'deck' ? 'left-8' : 'right-8';
return ( return (
<div className="hidden lg:block fixed top-1/2 right-8 transform -translate-y-1/2 z-30 pointer-events-none"> <div className={`hidden lg:block fixed top-1/2 ${positionClass} transform -translate-y-1/2 z-30 pointer-events-none`}>
<div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md"> <div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
<div className="relative"> <div className="relative">
<img <img