diff --git a/src/components/game/GameCard.tsx b/src/components/game/GameCard.tsx index 1d3adc7..68df8f2 100644 --- a/src/components/game/GameCard.tsx +++ b/src/components/game/GameCard.tsx @@ -1,18 +1,11 @@ import { type GameCard as GameCardType } from "@/types/game"; -import { - Sparkles, - Zap, - Star, - Circle, - Coins, - Trophy, - RefreshCw, - Sword, - Leaf, - LucideIcon, -} from "lucide-react"; -import { formatNumber } from "@/lib/utils"; import { resolveCardStats } from "@/store/gameStore"; +import { RARITY_STYLES, getPrimaryType } from "@/config/rarityConfig"; +import { CardImage } from "./card-parts/CardImage"; +import { CardStatusBadge } from "./card-parts/CardStatusBadge"; +import { CardStats } from "./card-parts/CardStats"; +import { CardTypes } from "./card-parts/CardTypes"; +import { CardRarityOverlay } from "./card-parts/CardRarityOverlay"; interface GameCardProps { card: GameCardType; @@ -20,82 +13,14 @@ interface GameCardProps { isActive?: boolean; } -type RarityOrType = - | "COMMON" - | "NORMAL" - | "RARE" - | "HOLO" - | "FULL_ART" - | "SILVER" - | "GOLD" - | "REVERT" - | "SWORD"; - -const typeIcons = { - COMMON: Circle, - NORMAL: Circle, - RARE: Star, - HOLO: Sparkles, - FULL_ART: Zap, - SILVER: Coins, - GOLD: Trophy, - REVERT: RefreshCw, - SWORD: Sword, -} satisfies Record; - -const rarityConfig = { - COMMON: { border: "border-border", bg: "bg-card" }, - NORMAL: { border: "border-border", bg: "bg-card" }, - RARE: { border: "border-blue-400/60 animate-rare-pulse", bg: "bg-card" }, - HOLO: { border: "border-rarity-holo", bg: "bg-card" }, - FULL_ART: { border: "border-rarity-fullart", bg: "bg-card" }, - SILVER: { border: "border-slate-300", bg: "bg-slate-900/40" }, - GOLD: { border: "border-yellow-500", bg: "bg-yellow-900/20" }, - REVERT: { border: "border-red-500", bg: "bg-black" }, -} satisfies Record; - export function GameCard({ card, onClick, isActive }: GameCardProps) { const stats = resolveCardStats(card); const { character, income, power } = stats; const types = card.types || []; - const isHolo = types.includes("HOLO"); const isFullArt = types.includes("FULL_ART"); - const isGold = types.includes("GOLD"); - const isSilver = types.includes("SILVER"); - const isRevert = types.includes("REVERT"); - - const primaryType = types.includes("REVERT") - ? "REVERT" - : types.includes("GOLD") - ? "GOLD" - : types.includes("SILVER") - ? "SILVER" - : types.includes("FULL_ART") - ? "FULL_ART" - : types.includes("HOLO") - ? "HOLO" - : types.includes("RARE") - ? "RARE" - : types.includes("NORMAL") - ? "NORMAL" - : "COMMON"; - - const config = rarityConfig[primaryType] || rarityConfig.COMMON; - - let imgSrc = `https://rickandmortyapi.com/api/character/avatar/${character.avatarId}.jpeg`; - - if (character.customImage) { - imgSrc = character.customImage; - } - - const imageFilter = isRevert - ? "invert(1) hue-rotate(180deg)" - : isGold - ? "sepia(1) saturate(5) brightness(0.8) hue-rotate(-15deg)" - : isSilver - ? "grayscale(1) brightness(1.2) contrast(1.1)" - : ""; + const primaryType = getPrimaryType(types); + const config = RARITY_STYLES[primaryType] || RARITY_STYLES.COMMON; return (