42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PatienceMeterProps {
|
|
patience: number;
|
|
className?: string;
|
|
}
|
|
|
|
const TONES = {
|
|
green: "bg-emerald-500/20 [&>[data-slot=progress-indicator]]:bg-emerald-500",
|
|
amber: "bg-amber-500/20 [&>[data-slot=progress-indicator]]:bg-amber-500",
|
|
red: "bg-red-500/20 [&>[data-slot=progress-indicator]]:bg-red-500",
|
|
} as const;
|
|
|
|
/**
|
|
* The vendor's willingness to keep negotiating (NPC vendors only). Rises with
|
|
* every bargaining round and sharply for lowball offers; at 100 the
|
|
* negotiation closes and the buyer can only buy at the asking price.
|
|
*/
|
|
export function PatienceMeter({ patience, className }: PatienceMeterProps) {
|
|
const value = Math.max(0, Math.min(100, patience));
|
|
const tone = value >= 80 ? "red" : value >= 50 ? "amber" : "green";
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-1.5", className)}>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">Vendor patience</span>
|
|
<span
|
|
className={cn(
|
|
"font-mono text-xs",
|
|
value >= 80 ? "text-red-400" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
{value}%
|
|
</span>
|
|
</div>
|
|
<Progress value={value} className={TONES[tone]} />
|
|
</div>
|
|
);
|
|
}
|