feat: add logistics pages for resources and vehicles
- Add resources list page with resource cards and detail pages - Add vehicles list page with vehicle cards, filters, and detail pages - Add ResourceCard, VehicleCard, and VehicleFilters components - Widen structure detail page max-width from 4xl to 7xl
This commit is contained in:
parent
28a148c06f
commit
3797cbcc03
9 changed files with 1221 additions and 1 deletions
292
src/app/(frontend)/logistics/resources/[id]/page.tsx
Normal file
292
src/app/(frontend)/logistics/resources/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,292 @@
|
||||||
|
import config from "@payload-config";
|
||||||
|
import { getPayload } from "payload";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import type { Resource, Structure, Asset } from "@/payload-types";
|
||||||
|
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||||
|
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
|
||||||
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
BoxIcon,
|
||||||
|
Building2Icon,
|
||||||
|
CoinsIcon,
|
||||||
|
Grid3x3Icon,
|
||||||
|
LayersIcon,
|
||||||
|
MoveIcon,
|
||||||
|
RotateCcwIcon,
|
||||||
|
ScaleIcon,
|
||||||
|
TagIcon,
|
||||||
|
WeightIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
Item,
|
||||||
|
ItemContent,
|
||||||
|
ItemDescription,
|
||||||
|
ItemHeader,
|
||||||
|
ItemMedia,
|
||||||
|
ItemTitle,
|
||||||
|
} from "@/components/ui/item";
|
||||||
|
|
||||||
|
interface ResourceDetailPageProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const rarityColors: Record<string, string> = {
|
||||||
|
common: "bg-muted text-muted-foreground",
|
||||||
|
uncommon: "bg-green-500/20 text-green-400",
|
||||||
|
rare: "bg-blue-500/20 text-blue-400",
|
||||||
|
epic: "bg-purple-500/20 text-purple-400",
|
||||||
|
legendary: "bg-amber-500/20 text-amber-400",
|
||||||
|
exotic: "bg-pink-500/20 text-pink-400",
|
||||||
|
unique: "bg-red-500/20 text-red-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const typeColors: Record<string, string> = {
|
||||||
|
physical: "bg-muted text-muted-foreground",
|
||||||
|
fluid: "bg-blue-500/20 text-blue-400",
|
||||||
|
energy: "bg-amber-500/20 text-amber-400",
|
||||||
|
abstract: "bg-purple-500/20 text-purple-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function ResourceDetailPage({
|
||||||
|
params,
|
||||||
|
}: ResourceDetailPageProps) {
|
||||||
|
const { id } = await params;
|
||||||
|
const payload = await getPayload({ config });
|
||||||
|
|
||||||
|
const resource = await payload
|
||||||
|
.findByID({
|
||||||
|
collection: "resources",
|
||||||
|
id: Number(id),
|
||||||
|
depth: 2,
|
||||||
|
})
|
||||||
|
.catch(() => null);
|
||||||
|
|
||||||
|
if (!resource) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
const [producersRes, autoGenRes, craftingRes] = await Promise.all([
|
||||||
|
payload
|
||||||
|
.find({
|
||||||
|
collection: "structures",
|
||||||
|
where: {
|
||||||
|
"canProduce.value": { equals: resource.id },
|
||||||
|
},
|
||||||
|
limit: 50,
|
||||||
|
depth: 1,
|
||||||
|
})
|
||||||
|
.catch(() => ({ docs: [] })),
|
||||||
|
payload
|
||||||
|
.find({
|
||||||
|
collection: "structures",
|
||||||
|
where: {
|
||||||
|
"autoGeneratedResources.resource": { equals: resource.id },
|
||||||
|
},
|
||||||
|
limit: 50,
|
||||||
|
depth: 1,
|
||||||
|
})
|
||||||
|
.catch(() => ({ docs: [] })),
|
||||||
|
payload
|
||||||
|
.find({
|
||||||
|
collection: "assets",
|
||||||
|
where: {
|
||||||
|
"crafting.craftingData.inputs.resource": { equals: resource.id },
|
||||||
|
},
|
||||||
|
limit: 50,
|
||||||
|
depth: 1,
|
||||||
|
})
|
||||||
|
.catch(() => ({ docs: [] })),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const producers = producersRes.docs as unknown as Structure[];
|
||||||
|
const autoGenStructures = autoGenRes.docs as unknown as Structure[];
|
||||||
|
const craftingAssets = craftingRes.docs as unknown as Asset[];
|
||||||
|
|
||||||
|
const allRelatedStructures = [
|
||||||
|
...producers,
|
||||||
|
...autoGenStructures.filter(
|
||||||
|
(s) => !producers.some((p) => p.id === s.id),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-5 flex flex-col gap-6 max-w-7xl">
|
||||||
|
<Link
|
||||||
|
href="/logistics/resources"
|
||||||
|
className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-3" />
|
||||||
|
Back to Resources
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{resource.color ? (
|
||||||
|
<div
|
||||||
|
className="size-5 rounded-sm"
|
||||||
|
style={{ backgroundColor: resource.color }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<BoxIcon className="size-5 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
<h1 className="text-lg font-semibold">{resource.name}</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${typeColors[resource.type] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{resource.type}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${rarityColors[resource.rarity] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{resource.rarity}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{resource.description && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle>Description</ItemTitle>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
|
||||||
|
<RichText data={resource.description} />
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<CoinsIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Base Value</ItemTitle>
|
||||||
|
<ItemDescription>{resource.baseValue.toLocaleString()}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<TagIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Unit of Measure</ItemTitle>
|
||||||
|
<ItemDescription>{resource.unitOfMeasure}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<WeightIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Mass Per Unit</ItemTitle>
|
||||||
|
<ItemDescription>{resource.massPerUnit.toLocaleString()} kg</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<LayersIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Stack Size</ItemTitle>
|
||||||
|
<ItemDescription>{resource.stackSize ?? 1}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<Grid3x3Icon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Grid</ItemTitle>
|
||||||
|
<ItemDescription>
|
||||||
|
{resource.gridWidth}×{resource.gridHeight}
|
||||||
|
</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<LayersIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Stackable</ItemTitle>
|
||||||
|
<ItemDescription>{resource.stackable ? "Yes" : "No"}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<RotateCcwIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Rotatable</ItemTitle>
|
||||||
|
<ItemDescription>{resource.rotatable ? "Yes" : "No"}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<ScaleIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Tradeable</ItemTitle>
|
||||||
|
<ItemDescription>{resource.tradeable ? "Yes" : "No"}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{allRelatedStructures.length > 0 && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Related Structures
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||||
|
{allRelatedStructures.map((structure) => (
|
||||||
|
<Link
|
||||||
|
key={structure.id}
|
||||||
|
href={`/logistics/structures/${structure.id}`}
|
||||||
|
>
|
||||||
|
<Item
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
|
||||||
|
>
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<Building2Icon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemTitle>{structure.name}</ItemTitle>
|
||||||
|
</div>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemDescription className="line-clamp-1">
|
||||||
|
{convertLexicalToPlaintext({ data: structure.description }).slice(0, 120)}
|
||||||
|
</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{craftingAssets.length > 0 && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Used in Crafting
|
||||||
|
</h2>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{craftingAssets.map((asset) => (
|
||||||
|
<Link key={asset.id} href={`/logistics/assets/${asset.id}`}>
|
||||||
|
<span className="text-xs font-medium bg-muted border border-border px-2.5 py-1 rounded-md hover:bg-accent/50 transition-colors">
|
||||||
|
{asset.name}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
47
src/app/(frontend)/logistics/resources/page.tsx
Normal file
47
src/app/(frontend)/logistics/resources/page.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import config from "@payload-config";
|
||||||
|
import { getPayload } from "payload";
|
||||||
|
import type { Resource } from "@/payload-types";
|
||||||
|
import { PackageOpenIcon } from "lucide-react";
|
||||||
|
import { ResourceCard } from "@/components/frontend/logistics/ResourceCard";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Resources — Polaris Task Force",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function ResourcesPage() {
|
||||||
|
const payload = await getPayload({ config });
|
||||||
|
|
||||||
|
const resourcesRes = await payload.find({
|
||||||
|
collection: "resources",
|
||||||
|
limit: 500,
|
||||||
|
depth: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
const resources = resourcesRes.docs as Resource[];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-5 flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PackageOpenIcon className="size-5 text-muted-foreground" />
|
||||||
|
<h1 className="text-lg font-semibold">Resources</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Resource catalog for the theater of operations.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{resources.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{resources.map((resource) => (
|
||||||
|
<ResourceCard key={resource.id} resource={resource as any} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground italic">
|
||||||
|
No resources available.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -74,7 +74,7 @@ export default async function StructureDetailPage({ params }: StructureDetailPag
|
||||||
}, 0);
|
}, 0);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-5 flex flex-col gap-6 max-w-4xl">
|
<div className="p-5 flex flex-col gap-6 max-w-7xl">
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<Link
|
<Link
|
||||||
href="/logistics"
|
href="/logistics"
|
||||||
|
|
|
||||||
45
src/app/(frontend)/logistics/vehicles/VehiclesList.tsx
Normal file
45
src/app/(frontend)/logistics/vehicles/VehiclesList.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useMemo } from "react";
|
||||||
|
import type { Vehicle } from "@/payload-types";
|
||||||
|
import { VehicleCard } from "@/components/frontend/logistics/VehicleCard";
|
||||||
|
import { VehicleFilters } from "@/components/frontend/logistics/VehicleFilters";
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
"civilian",
|
||||||
|
"utility",
|
||||||
|
"transport",
|
||||||
|
"weaponized",
|
||||||
|
"military",
|
||||||
|
];
|
||||||
|
|
||||||
|
export function VehiclesList({ vehicles }: { vehicles: Vehicle[] }) {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const filtered = useMemo(() => {
|
||||||
|
if (!selectedCategory) return vehicles;
|
||||||
|
return vehicles.filter(
|
||||||
|
(v) => v.category?.includes(selectedCategory as NonNullable<Vehicle["category"]>[number]),
|
||||||
|
);
|
||||||
|
}, [vehicles, selectedCategory]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<VehicleFilters
|
||||||
|
categories={categories}
|
||||||
|
onFilterChange={setSelectedCategory}
|
||||||
|
/>
|
||||||
|
{filtered.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||||
|
{filtered.map((vehicle) => (
|
||||||
|
<VehicleCard key={vehicle.id} vehicle={vehicle as any} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground italic">
|
||||||
|
No vehicles match the selected filters.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
401
src/app/(frontend)/logistics/vehicles/[id]/page.tsx
Normal file
401
src/app/(frontend)/logistics/vehicles/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,401 @@
|
||||||
|
import config from "@payload-config";
|
||||||
|
import { getPayload } from "payload";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import type { Vehicle, Resource, Technology, Structure } from "@/payload-types";
|
||||||
|
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||||
|
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
|
||||||
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
BoxIcon,
|
||||||
|
Building2Icon,
|
||||||
|
ClockIcon,
|
||||||
|
CrosshairIcon,
|
||||||
|
GaugeIcon,
|
||||||
|
HeartIcon,
|
||||||
|
ShieldIcon,
|
||||||
|
TruckIcon,
|
||||||
|
WrenchIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
Item,
|
||||||
|
ItemContent,
|
||||||
|
ItemDescription,
|
||||||
|
ItemHeader,
|
||||||
|
ItemMedia,
|
||||||
|
ItemTitle,
|
||||||
|
} from "@/components/ui/item";
|
||||||
|
|
||||||
|
interface VehicleDetailPageProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryColors: Record<string, string> = {
|
||||||
|
civilian: "bg-muted text-muted-foreground",
|
||||||
|
utility: "bg-blue-500/20 text-blue-400",
|
||||||
|
transport: "bg-green-500/20 text-green-400",
|
||||||
|
weaponized: "bg-red-500/20 text-red-400",
|
||||||
|
military: "bg-amber-500/20 text-amber-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const armorColors: Record<string, string> = {
|
||||||
|
none: "bg-muted text-muted-foreground",
|
||||||
|
light: "bg-green-500/20 text-green-400",
|
||||||
|
medium: "bg-amber-500/20 text-amber-400",
|
||||||
|
heavy: "bg-red-500/20 text-red-400",
|
||||||
|
composite: "bg-purple-500/20 text-purple-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function VehicleDetailPage({
|
||||||
|
params,
|
||||||
|
}: VehicleDetailPageProps) {
|
||||||
|
const { id } = await params;
|
||||||
|
const payload = await getPayload({ config });
|
||||||
|
|
||||||
|
const vehicle = await payload
|
||||||
|
.findByID({
|
||||||
|
collection: "vehicles",
|
||||||
|
id: Number(id),
|
||||||
|
depth: 2,
|
||||||
|
})
|
||||||
|
.catch(() => null);
|
||||||
|
|
||||||
|
if (!vehicle) {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
const materials = (vehicle.materials ?? []).map((m) => ({
|
||||||
|
resource: m.resource as Resource,
|
||||||
|
amount: m.amount ?? 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const requiredTech = (vehicle.requiredTech ?? []) as Technology[];
|
||||||
|
|
||||||
|
const scrapReturns = (vehicle.scrapReturns ?? []).map((s) => ({
|
||||||
|
resource: s.resource as Resource,
|
||||||
|
amount: s.amount ?? 0,
|
||||||
|
chance: s.chance ?? 100,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const upkeepCosts = (vehicle.upkeepCosts ?? []).map((u) => ({
|
||||||
|
resource: u.resource as Resource,
|
||||||
|
amount: u.amount ?? 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const producingStructures =
|
||||||
|
vehicle.requiredStructure?.docs?.filter(
|
||||||
|
(s): s is Structure => typeof s === "object" && s !== null,
|
||||||
|
) ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-5 flex flex-col gap-6 max-w-7xl">
|
||||||
|
<Link
|
||||||
|
href="/logistics/vehicles"
|
||||||
|
className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center gap-1 w-fit"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="size-3" />
|
||||||
|
Back to Vehicles
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<TruckIcon className="size-5 text-muted-foreground" />
|
||||||
|
<h1 className="text-lg font-semibold">{vehicle.name}</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{(vehicle.category ?? []).map((cat) => (
|
||||||
|
<span
|
||||||
|
key={cat}
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${categoryColors[cat] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{vehicle.description && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle>Description</ItemTitle>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent className="prose-invert prose-sm max-w-none [&_p]:mb-2 [&_ul]:list-disc [&_ul]:ml-4 [&_ol]:list-decimal [&_ol]:ml-4 [&_strong]:text-foreground [&_em]:italic">
|
||||||
|
<RichText data={vehicle.description} />
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{materials.length > 0 && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle className="flex items-center gap-2">
|
||||||
|
<WrenchIcon className="size-4 text-muted-foreground" />
|
||||||
|
Construction Materials
|
||||||
|
</ItemTitle>
|
||||||
|
{vehicle.constructionTime && (
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
||||||
|
<ClockIcon className="size-3" />
|
||||||
|
{vehicle.constructionTime} tick{vehicle.constructionTime !== 1 ? "s" : ""}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{materials.map((mat, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="text-sm bg-muted px-2.5 py-1 rounded-md"
|
||||||
|
>
|
||||||
|
{mat.resource.name}: {mat.amount.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{requiredTech.length > 0 && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Required Technologies
|
||||||
|
</h2>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{requiredTech.map((tech) => (
|
||||||
|
<span
|
||||||
|
key={tech.id}
|
||||||
|
className="text-xs font-medium bg-muted border border-border px-2.5 py-1 rounded-md"
|
||||||
|
>
|
||||||
|
{tech.name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(vehicle.maxHealth ||
|
||||||
|
vehicle.armorRating ||
|
||||||
|
vehicle.maxSpeedOnRoad ||
|
||||||
|
vehicle.maxSpeedOffRoad ||
|
||||||
|
vehicle.maxAirspeed ||
|
||||||
|
vehicle.maxKnots) && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Combat & Performance
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{vehicle.maxHealth && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<HeartIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Max Health</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxHealth.toLocaleString()}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.armorRating && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<ShieldIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Armor Rating</ItemTitle>
|
||||||
|
<ItemDescription className="capitalize">
|
||||||
|
{vehicle.armorRating}
|
||||||
|
</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.maxSpeedOnRoad && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<GaugeIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Speed (Road)</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxSpeedOnRoad} km/h</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.maxSpeedOffRoad && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<GaugeIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Speed (Off-Road)</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxSpeedOffRoad} km/h</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.maxAirspeed && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<GaugeIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Airspeed</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxAirspeed} km/h</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.maxKnots && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<GaugeIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Max Knots</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxKnots} kn</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(vehicle.width || vehicle.height || vehicle.maxMass || vehicle.aceCargoSlots) && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Logistics
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
|
{(vehicle.width || vehicle.height) && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<BoxIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Grid Dimensions</ItemTitle>
|
||||||
|
<ItemDescription>
|
||||||
|
{vehicle.width ?? "—"}×{vehicle.height ?? "—"}
|
||||||
|
</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.maxMass && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<TruckIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>Cargo Capacity</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.maxMass.toLocaleString()} kg</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
{vehicle.aceCargoSlots != null && (
|
||||||
|
<Item variant="muted" size="sm">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<BoxIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemTitle>ACE Cargo Slots</ItemTitle>
|
||||||
|
<ItemDescription>{vehicle.aceCargoSlots}</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(scrapReturns.length > 0 || upkeepCosts.length > 0) && (
|
||||||
|
<section className="flex flex-col gap-4">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Maintenance
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{scrapReturns.length > 0 && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle className="flex items-center gap-2">
|
||||||
|
<WrenchIcon className="size-4 text-muted-foreground" />
|
||||||
|
Scrap Returns
|
||||||
|
</ItemTitle>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{scrapReturns.map((scrap, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="text-sm bg-muted px-2.5 py-1 rounded-md"
|
||||||
|
>
|
||||||
|
{scrap.resource.name}: {scrap.amount.toLocaleString()}
|
||||||
|
{scrap.chance < 100 && (
|
||||||
|
<span className="text-muted-foreground ml-1">
|
||||||
|
({scrap.chance}%)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{upkeepCosts.length > 0 && (
|
||||||
|
<Item variant="outline">
|
||||||
|
<ItemHeader>
|
||||||
|
<ItemTitle className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="size-4 text-muted-foreground" />
|
||||||
|
Upkeep Costs
|
||||||
|
</ItemTitle>
|
||||||
|
<ItemDescription>Per game tick (every hour)</ItemDescription>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{upkeepCosts.map((upkeep, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="text-sm bg-muted px-2.5 py-1 rounded-md"
|
||||||
|
>
|
||||||
|
{upkeep.resource.name}: {upkeep.amount.toLocaleString()}/tick
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{producingStructures.length > 0 && (
|
||||||
|
<section className="flex flex-col gap-3">
|
||||||
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
Produced By
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||||
|
{producingStructures.map((structure) => (
|
||||||
|
<Link
|
||||||
|
key={structure.id}
|
||||||
|
href={`/logistics/structures/${structure.id}`}
|
||||||
|
>
|
||||||
|
<Item
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01]"
|
||||||
|
>
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<Building2Icon />
|
||||||
|
</ItemMedia>
|
||||||
|
<ItemTitle>{structure.name}</ItemTitle>
|
||||||
|
</div>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<ItemDescription className="line-clamp-1">
|
||||||
|
{convertLexicalToPlaintext({ data: structure.description }).slice(0, 120)}
|
||||||
|
</ItemDescription>
|
||||||
|
</ItemContent>
|
||||||
|
</Item>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
src/app/(frontend)/logistics/vehicles/page.tsx
Normal file
37
src/app/(frontend)/logistics/vehicles/page.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
import config from "@payload-config";
|
||||||
|
import { getPayload } from "payload";
|
||||||
|
import type { Vehicle } from "@/payload-types";
|
||||||
|
import { TruckIcon } from "lucide-react";
|
||||||
|
import { VehiclesList } from "./VehiclesList";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Vehicles — Polaris Task Force",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function VehiclesPage() {
|
||||||
|
const payload = await getPayload({ config });
|
||||||
|
|
||||||
|
const vehiclesRes = await payload.find({
|
||||||
|
collection: "vehicles",
|
||||||
|
limit: 500,
|
||||||
|
depth: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
const vehicles = vehiclesRes.docs as Vehicle[];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-5 flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<TruckIcon className="size-5 text-muted-foreground" />
|
||||||
|
<h1 className="text-lg font-semibold">Vehicles</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Vehicle catalog for deployment and operations.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VehiclesList vehicles={vehicles} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
178
src/components/frontend/logistics/ResourceCard.tsx
Normal file
178
src/components/frontend/logistics/ResourceCard.tsx
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
Item,
|
||||||
|
ItemContent,
|
||||||
|
ItemDescription,
|
||||||
|
ItemHeader,
|
||||||
|
ItemMedia,
|
||||||
|
ItemTitle,
|
||||||
|
} from "@/components/ui/item";
|
||||||
|
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
|
||||||
|
import {
|
||||||
|
BrainIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
DropletIcon,
|
||||||
|
HandshakeIcon,
|
||||||
|
PackageOpenIcon,
|
||||||
|
ScaleIcon,
|
||||||
|
ZapIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface ResourceCardProps {
|
||||||
|
resource: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
codeName: string;
|
||||||
|
type: "physical" | "fluid" | "energy" | "abstract";
|
||||||
|
rarity: string;
|
||||||
|
baseValue: number;
|
||||||
|
unitOfMeasure: string;
|
||||||
|
massPerUnit: number;
|
||||||
|
icon?: { url: string } | number | null;
|
||||||
|
color?: string | null;
|
||||||
|
tradeable?: boolean | null;
|
||||||
|
description?: {
|
||||||
|
root: {
|
||||||
|
type: string;
|
||||||
|
children: {
|
||||||
|
type: any;
|
||||||
|
version: number;
|
||||||
|
[k: string]: unknown;
|
||||||
|
}[];
|
||||||
|
direction: ("ltr" | "rtl") | null;
|
||||||
|
format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
|
||||||
|
indent: number;
|
||||||
|
version: number;
|
||||||
|
};
|
||||||
|
[k: string]: unknown;
|
||||||
|
} | null;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeColors: Record<string, string> = {
|
||||||
|
physical: "bg-stone-500/20 text-stone-400",
|
||||||
|
fluid: "bg-blue-500/20 text-blue-400",
|
||||||
|
energy: "bg-amber-500/20 text-amber-400",
|
||||||
|
abstract: "bg-purple-500/20 text-purple-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const typeIcons: Record<string, React.ReactNode> = {
|
||||||
|
physical: <PackageOpenIcon className="size-4" />,
|
||||||
|
fluid: <DropletIcon className="size-4" />,
|
||||||
|
energy: <ZapIcon className="size-4" />,
|
||||||
|
abstract: <BrainIcon className="size-4" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
const rarityColors: Record<string, string> = {
|
||||||
|
common: "bg-muted text-muted-foreground",
|
||||||
|
uncommon: "bg-green-500/20 text-green-400",
|
||||||
|
rare: "bg-blue-500/20 text-blue-400",
|
||||||
|
epic: "bg-purple-500/20 text-purple-400",
|
||||||
|
legendary: "bg-amber-500/20 text-amber-400",
|
||||||
|
exotic: "bg-pink-500/20 text-pink-400",
|
||||||
|
unique: "bg-red-500/20 text-red-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const rarityLabels: Record<string, string> = {
|
||||||
|
common: "Common",
|
||||||
|
uncommon: "Uncommon",
|
||||||
|
rare: "Rare",
|
||||||
|
epic: "Epic",
|
||||||
|
legendary: "Legendary",
|
||||||
|
exotic: "Exotic",
|
||||||
|
unique: "Unique",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ResourceCard({ resource }: ResourceCardProps) {
|
||||||
|
const icon =
|
||||||
|
resource.icon && typeof resource.icon === "object" ? resource.icon : null;
|
||||||
|
const description = resource.description
|
||||||
|
? convertLexicalToPlaintext({ data: resource.description })
|
||||||
|
: null;
|
||||||
|
const truncatedDescription =
|
||||||
|
description && description.length > 150
|
||||||
|
? description.slice(0, 150) + "…"
|
||||||
|
: description;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={`/logistics/resources/${resource.id}`}>
|
||||||
|
<Item
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01] hover:[box-shadow:inset_0_2px_8px_rgba(255,255,255,0.33)]"
|
||||||
|
>
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{icon ? (
|
||||||
|
<ItemMedia variant="image">
|
||||||
|
<img
|
||||||
|
src={icon.url}
|
||||||
|
alt={resource.name}
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</ItemMedia>
|
||||||
|
) : resource.color ? (
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<span
|
||||||
|
className="size-4 rounded-full shrink-0"
|
||||||
|
style={{ backgroundColor: resource.color }}
|
||||||
|
/>
|
||||||
|
</ItemMedia>
|
||||||
|
) : (
|
||||||
|
<ItemMedia variant="icon">{typeIcons[resource.type]}</ItemMedia>
|
||||||
|
)}
|
||||||
|
<ItemTitle className="flex flex-col">
|
||||||
|
<span className="font-mono text-xs text-muted-foreground">
|
||||||
|
{resource.codeName}
|
||||||
|
</span>
|
||||||
|
<span>{resource.name}</span>
|
||||||
|
</ItemTitle>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${typeColors[resource.type] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{resource.type}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${rarityColors[resource.rarity] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{rarityLabels[resource.rarity] ?? resource.rarity}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-col gap-3 w-full">
|
||||||
|
{truncatedDescription && (
|
||||||
|
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||||
|
{truncatedDescription}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
|
||||||
|
<span className="flex items-center gap-1 font-medium text-foreground">
|
||||||
|
{resource.baseValue.toLocaleString()} credits
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<ScaleIcon className="size-3" />
|
||||||
|
{resource.massPerUnit.toLocaleString()} kg/{resource.unitOfMeasure}
|
||||||
|
</span>
|
||||||
|
{resource.tradeable && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<HandshakeIcon className="size-3" />
|
||||||
|
Tradeable
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
<ItemDescription>
|
||||||
|
{truncatedDescription ?? `${resource.type} resource — ${resource.unitOfMeasure}`}
|
||||||
|
</ItemDescription>
|
||||||
|
<span className="text-xs text-muted-foreground group-hover:text-primary transition-colors flex items-center gap-1">
|
||||||
|
View details <ChevronRightIcon className="size-3" />
|
||||||
|
</span>
|
||||||
|
</Item>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
170
src/components/frontend/logistics/VehicleCard.tsx
Normal file
170
src/components/frontend/logistics/VehicleCard.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import {
|
||||||
|
Item,
|
||||||
|
ItemContent,
|
||||||
|
ItemDescription,
|
||||||
|
ItemHeader,
|
||||||
|
ItemMedia,
|
||||||
|
ItemTitle,
|
||||||
|
} from "@/components/ui/item";
|
||||||
|
import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
|
||||||
|
import {
|
||||||
|
ChevronRightIcon,
|
||||||
|
HeartIcon,
|
||||||
|
TimerIcon,
|
||||||
|
TruckIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
interface VehicleCardProps {
|
||||||
|
vehicle: {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
classname?: string | null;
|
||||||
|
category?: string[] | null;
|
||||||
|
description?: {
|
||||||
|
root: {
|
||||||
|
type: string;
|
||||||
|
children: {
|
||||||
|
type: any;
|
||||||
|
version: number;
|
||||||
|
[k: string]: unknown;
|
||||||
|
}[];
|
||||||
|
direction: ("ltr" | "rtl") | null;
|
||||||
|
format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
|
||||||
|
indent: number;
|
||||||
|
version: number;
|
||||||
|
};
|
||||||
|
[k: string]: unknown;
|
||||||
|
} | null;
|
||||||
|
image?: { url: string } | number | null;
|
||||||
|
construction?: {
|
||||||
|
materials?: { resource: { name: string } | number; amount: number }[];
|
||||||
|
constructionTime?: number;
|
||||||
|
};
|
||||||
|
combat?: {
|
||||||
|
maxHealth?: number;
|
||||||
|
maxSpeedOnRoad?: number;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryColors: Record<string, string> = {
|
||||||
|
civilian: "bg-stone-500/20 text-stone-400",
|
||||||
|
utility: "bg-emerald-500/20 text-emerald-400",
|
||||||
|
transport: "bg-blue-500/20 text-blue-400",
|
||||||
|
weaponized: "bg-red-500/20 text-red-400",
|
||||||
|
military: "bg-amber-500/20 text-amber-400",
|
||||||
|
};
|
||||||
|
|
||||||
|
const categoryLabels: Record<string, string> = {
|
||||||
|
civilian: "Civilian",
|
||||||
|
utility: "Utility",
|
||||||
|
transport: "Transport",
|
||||||
|
weaponized: "Weaponized",
|
||||||
|
military: "Military",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function VehicleCard({ vehicle }: VehicleCardProps) {
|
||||||
|
const image =
|
||||||
|
vehicle.image && typeof vehicle.image === "object" ? vehicle.image : null;
|
||||||
|
const description = vehicle.description
|
||||||
|
? convertLexicalToPlaintext({ data: vehicle.description })
|
||||||
|
: null;
|
||||||
|
const truncatedDescription =
|
||||||
|
description && description.length > 150
|
||||||
|
? description.slice(0, 150) + "…"
|
||||||
|
: description;
|
||||||
|
|
||||||
|
const materialCount = vehicle.construction?.materials?.length ?? 0;
|
||||||
|
const constructionTime = vehicle.construction?.constructionTime;
|
||||||
|
const maxHealth = vehicle.combat?.maxHealth;
|
||||||
|
const maxSpeed = vehicle.combat?.maxSpeedOnRoad;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={`/logistics/vehicles/${vehicle.id}`}>
|
||||||
|
<Item
|
||||||
|
variant="outline"
|
||||||
|
className="cursor-pointer group transition-all duration-200 hover:scale-[1.01] hover:[box-shadow:inset_0_2px_8px_rgba(255,255,255,0.33)]"
|
||||||
|
>
|
||||||
|
<ItemHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{image ? (
|
||||||
|
<ItemMedia variant="image">
|
||||||
|
<img
|
||||||
|
src={image.url}
|
||||||
|
alt={vehicle.name}
|
||||||
|
className="size-full object-cover"
|
||||||
|
/>
|
||||||
|
</ItemMedia>
|
||||||
|
) : (
|
||||||
|
<ItemMedia variant="icon">
|
||||||
|
<TruckIcon />
|
||||||
|
</ItemMedia>
|
||||||
|
)}
|
||||||
|
<ItemTitle className="flex flex-col">
|
||||||
|
{vehicle.classname && (
|
||||||
|
<span className="font-mono text-xs text-muted-foreground">
|
||||||
|
{vehicle.classname}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span>{vehicle.name}</span>
|
||||||
|
</ItemTitle>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{vehicle.category?.map((cat) => (
|
||||||
|
<span
|
||||||
|
key={cat}
|
||||||
|
className={`text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded ${categoryColors[cat] ?? "bg-muted text-muted-foreground"}`}
|
||||||
|
>
|
||||||
|
{categoryLabels[cat] ?? cat}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ItemHeader>
|
||||||
|
<ItemContent>
|
||||||
|
<div className="flex flex-col gap-3 w-full">
|
||||||
|
{truncatedDescription && (
|
||||||
|
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||||
|
{truncatedDescription}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
|
||||||
|
{materialCount > 0 && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
{materialCount} material{materialCount !== 1 ? "s" : ""}
|
||||||
|
{constructionTime != null && (
|
||||||
|
<>
|
||||||
|
,{" "}
|
||||||
|
<TimerIcon className="size-3" />
|
||||||
|
{constructionTime} tick{constructionTime !== 1 ? "s" : ""}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{maxHealth != null && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<HeartIcon className="size-3" />
|
||||||
|
{maxHealth.toLocaleString()} HP
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{maxSpeed != null && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<TruckIcon className="size-3" />
|
||||||
|
{maxSpeed} km/h
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ItemContent>
|
||||||
|
<ItemDescription>
|
||||||
|
{truncatedDescription ?? vehicle.classname ?? "Vehicle"}
|
||||||
|
</ItemDescription>
|
||||||
|
<span className="text-xs text-muted-foreground group-hover:text-primary transition-colors flex items-center gap-1">
|
||||||
|
View details <ChevronRightIcon className="size-3" />
|
||||||
|
</span>
|
||||||
|
</Item>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
50
src/components/frontend/logistics/VehicleFilters.tsx
Normal file
50
src/components/frontend/logistics/VehicleFilters.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface VehicleFiltersProps {
|
||||||
|
categories: string[];
|
||||||
|
onFilterChange: (category: string | null) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryLabels: Record<string, string> = {
|
||||||
|
civilian: "Civilian",
|
||||||
|
utility: "Utility",
|
||||||
|
transport: "Transport",
|
||||||
|
weaponized: "Weaponized",
|
||||||
|
military: "Military",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function VehicleFilters({ categories, onFilterChange }: VehicleFiltersProps) {
|
||||||
|
const [selected, setSelected] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const handleChange = (category: string | null) => {
|
||||||
|
const next = selected === category ? null : category;
|
||||||
|
setSelected(next);
|
||||||
|
onFilterChange(next);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button
|
||||||
|
variant={selected === null ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleChange(null)}
|
||||||
|
>
|
||||||
|
All
|
||||||
|
</Button>
|
||||||
|
{categories.map((cat) => (
|
||||||
|
<Button
|
||||||
|
key={cat}
|
||||||
|
variant={selected === cat ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleChange(cat)}
|
||||||
|
>
|
||||||
|
{categoryLabels[cat] ?? cat}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue