8-bit Enemy Health Display

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import HealthBar from "@/components/ui/8bit/health-bar";
6 
7import "@/components/ui/8bit/styles/retro.css";
8 
9export const enemyHealthDisplayVariants = cva("", {
10  variants: {
11    variant: {
12      default: "",
13      retro: "retro",
14    },
15    size: {
16      sm: "text-xs",
17      md: "text-sm",
18      lg: "text-base",
19    },
20    textColor: {
21      red: "text-red-500",
22      orange: "text-orange-500",
23      yellow: "text-yellow-500",
24      green: "text-green-500",
25      blue: "text-blue-500",
26      purple: "text-purple-500",
27    },
28  },
29  defaultVariants: {
30    variant: "retro",
31    size: "md",
32    textColor: "red",
33  },
34});
35 
36export interface EnemyHealthDisplayProps
37  extends React.ComponentProps<"div">,
38    VariantProps<typeof enemyHealthDisplayVariants> {
39  enemyName: string;
40  level?: number;
41  currentHealth: number;
42  maxHealth: number;
43  showLevel?: boolean;
44  showHealthText?: boolean;
45  healthBarVariant?: "retro" | "default";
46  healthBarColor?: string;
47  enemyNameColor?: string;
48}
49 
50export default function EnemyHealthDisplay({
51  className,
52  variant,
53  size,
54  textColor,
55  enemyName,
56  level,
57  currentHealth,
58  maxHealth,
59  showLevel = true,
60  showHealthText = true,
61  healthBarVariant = "retro",
62  healthBarColor = "bg-red-500",
63  enemyNameColor = "text-foreground",
64  ...props
65}: EnemyHealthDisplayProps) {
66  const healthPercentage = Math.max(
67    0,
68    Math.min(100, (currentHealth / maxHealth) * 100)
69  );
70  const healthText = `${currentHealth}/${maxHealth}`;
71 
72  return (
73    <div
74      className={cn(
75        "relative w-full space-y-2",
76        enemyHealthDisplayVariants({ variant, size, textColor }),
77        className
78      )}
79      {...props}
80    >
81      {/* Enemy Name and Level */}
82      <div className="flex items-center justify-between">
83        <div className="flex items-center gap-2">
84          <span className={cn("font-bold", enemyNameColor)}>{enemyName}</span>
85          {showLevel && level && (
86            <span className="text-muted-foreground">Lv.{level}</span>
87          )}
88        </div>
89        {showHealthText && (
90          <span className="text-muted-foreground text-[9px]">{healthText}</span>
91        )}
92      </div>
93 
94      {/* Health Bar Container */}
95      <div className="relative">
96        <HealthBar
97          value={healthPercentage}
98          variant={healthBarVariant}
99          className="w-full"
100// … truncated