services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: export FoilOverlay component and apply it universally to foil cards in PackCard and StackView for consistent animation.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 01:13:49 +01:00
parent f7d22377fa
commit 58288e5195
5 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/src/components/CardPreview.tsx
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import { DraftCard } from '../services/PackGeneratorService';
// --- Floating Preview Component ---
const FoilOverlay = () => (
export const FoilOverlay = () => (
<div className="absolute inset-0 z-20 pointer-events-none rounded-xl overflow-hidden">
{/* CSS-based Holographic Pattern */}
<div className="absolute inset-0 foil-holo" />

4
src/client/src/components/PackCard.tsx
View File

@@ -8,7 +8,7 @@ interface PackCardProps {
viewMode: 'list' | 'grid' | 'stack';
}
import { CardHoverWrapper } from './CardPreview';
import { CardHoverWrapper, FoilOverlay } from './CardPreview';
const ListItem: React.FC<{ card: DraftCard }> = ({ card }) => {
@@ -103,7 +103,7 @@ export const PackCard: React.FC<PackCardProps> = ({ pack, viewMode }) => {
<div className="relative group bg-slate-900 rounded-lg">
{/* Visual Card */}
<div className={`relative aspect-[2.5/3.5] overflow-hidden rounded-lg shadow-xl border transition-all duration-200 group-hover:ring-2 group-hover:ring-purple-400 group-hover:shadow-purple-500/30 cursor-pointer ${isFoil(card) ? 'border-purple-400 shadow-purple-500/20' : 'border-slate-800'}`}>
{isFoil(card) && <div className="absolute inset-0 z-20 bg-gradient-to-tr from-purple-500/10 via-transparent to-pink-500/10 mix-blend-color-dodge pointer-events-none" />}
{isFoil(card) && <FoilOverlay />}
{isFoil(card) && <div className="absolute top-1 right-1 z-30 text-[10px] font-bold text-white bg-purple-600/80 px-1 rounded backdrop-blur-sm">FOIL</div>}
{card.image ? (

4
src/client/src/components/StackView.tsx
View File

@@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { DraftCard } from '../services/PackGeneratorService';
import { CardHoverWrapper } from './CardPreview';
import { CardHoverWrapper, FoilOverlay } from './CardPreview';
interface StackViewProps {
cards: DraftCard[];
@@ -86,7 +86,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards }) => {
>
<img src={card.image} alt={card.name} className="w-full h-full object-cover" />
{/* Optional: Shine effect for foils if visible? */}
{card.finish === 'foil' && <div className="absolute inset-0 bg-white/10 opacity-30 pointer-events-none" />}
{card.finish === 'foil' && <FoilOverlay />}
</div>
</CardHoverWrapper>
)