Refactor a bit more shit and make gas sites GLOW

This commit is contained in:
2025-06-16 16:46:24 +02:00
parent 0fa035601f
commit 4108ad80d4
3 changed files with 12 additions and 25 deletions

View File

@@ -1,41 +1,27 @@
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
import { SigviewRecord as Signature } from "@/lib/pbtypes"; import { SigviewRecord as Signature } from "@/lib/pbtypes";
import { getSignatureMeta } from "@/hooks/useSignatureCategories";
interface SignatureCardProps { interface SignatureCardProps {
signature: Signature; signature: Signature;
} }
export const SignatureCard = ({ signature }: SignatureCardProps) => { export const SignatureCard = ({ signature }: SignatureCardProps) => {
const getTypeIcon = (type: string) => { const meta = getSignatureMeta(signature.type);
const lowerType = type.toLowerCase(); const isGasSite = signature.type?.toLowerCase().includes('gas');
if (lowerType.includes('combat')) return <Zap className="h-4 w-4" />;
if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return <Shield className="h-4 w-4" />;
if (lowerType.includes('ore') || lowerType.includes('gas')) return <Coins className="h-4 w-4" />;
return <HelpCircle className="h-4 w-4" />;
};
const getTypeColor = (type: string) => {
const lowerType = type.toLowerCase();
if (lowerType.includes('combat')) return 'bg-red-900/30 text-red-300 border-red-600';
if (lowerType.includes('exploration') || lowerType.includes('relic') || lowerType.includes('data')) return 'bg-blue-900/30 text-blue-300 border-blue-600';
if (lowerType.includes('ore') || lowerType.includes('gas')) return 'bg-yellow-900/30 text-yellow-300 border-yellow-600';
if (!type || type === '') return 'bg-slate-700 text-slate-300 border-slate-600';
return 'bg-purple-900/30 text-purple-300 border-purple-600';
};
return ( return (
<Card className="bg-slate-800/40 border-slate-700 hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600"> <Card className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600`}>
<CardContent className="pt-6"> <CardContent className="pt-6">
<div className="space-y-3"> <div className="space-y-3">
{/* Type Badge - Most Important */} {/* Type Badge - Most Important */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<Badge <Badge
variant="outline" variant="outline"
className={`${getTypeColor(signature.type)} px-3 py-1 text-sm font-semibold flex items-center gap-2`} className={`${meta.color} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
> >
{getTypeIcon(signature.type)} {meta.icon}
{signature.type || 'Unknown Type'} {signature.type || 'Unknown Type'}
</Badge> </Badge>
</div> </div>

View File

@@ -43,13 +43,14 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
}; };
const meta = getSignatureMeta(signature.type || ""); const meta = getSignatureMeta(signature.type || "");
const isGasSite = signature.type?.toLowerCase().includes('gas');
const oldEntry = isOld(); const oldEntry = isOld();
return ( return (
<div <div
className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${oldEntry ? "opacity-50" : "" className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors ${
}`} oldEntry ? "opacity-50" : ""
} ${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : ''}`}
> >
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 flex-1">
{/* Type Badge - Most Important */} {/* Type Badge - Most Important */}

View File

@@ -43,8 +43,8 @@ const allCategories = new Map<string, SignatureCategoryMeta>([
matcher: /^gas/i, matcher: /^gas/i,
id: "gas", id: "gas",
name: 'Gas Sites', name: 'Gas Sites',
icon: <Gauge className="h-4 w-4 text-green-400" />, icon: <Gauge className="h-4 w-4 text-emerald-400" />,
color: "text-green-400 border-green-600" color: "bg-emerald-900/40 text-emerald-200 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)] transition-all duration-300"
}], }],
["ore", { ["ore", {
matcher: /^ore/i, matcher: /^ore/i,