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 { Badge } from "@/components/ui/badge";
import { Zap, Shield, Coins, HelpCircle } from "lucide-react";
import { SigviewRecord as Signature } from "@/lib/pbtypes";
import { getSignatureMeta } from "@/hooks/useSignatureCategories";
interface SignatureCardProps {
signature: Signature;
}
export const SignatureCard = ({ signature }: SignatureCardProps) => {
const getTypeIcon = (type: string) => {
const lowerType = type.toLowerCase();
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';
};
const meta = getSignatureMeta(signature.type);
const isGasSite = signature.type?.toLowerCase().includes('gas');
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">
<div className="space-y-3">
{/* Type Badge - Most Important */}
<div className="flex items-center justify-center">
<Badge
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'}
</Badge>
</div>

View File

@@ -43,13 +43,14 @@ export const SignatureListItem = ({ signature }: SignatureListItemProps) => {
};
const meta = getSignatureMeta(signature.type || "");
const isGasSite = signature.type?.toLowerCase().includes('gas');
const oldEntry = isOld();
return (
<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">
{/* Type Badge - Most Important */}

View File

@@ -43,8 +43,8 @@ const allCategories = new Map<string, SignatureCategoryMeta>([
matcher: /^gas/i,
id: "gas",
name: 'Gas Sites',
icon: <Gauge className="h-4 w-4 text-green-400" />,
color: "text-green-400 border-green-600"
icon: <Gauge className="h-4 w-4 text-emerald-400" />,
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", {
matcher: /^ore/i,