77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { t } from "@/content/locales";
|
|
|
|
interface HUDProps {
|
|
credits: number;
|
|
hp: number;
|
|
maxHp: number;
|
|
location: string;
|
|
targetCredits: number;
|
|
}
|
|
|
|
export default function HUD({
|
|
credits,
|
|
hp,
|
|
maxHp,
|
|
location,
|
|
targetCredits,
|
|
}: HUDProps) {
|
|
const progress = Math.min((credits / targetCredits) * 100, 100);
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 w-full bg-black border-b-2 border-yellow-500/50 p-4 font-mono text-yellow-500 z-50 shadow-[0_0_15px_rgba(234,179,8,0.2)]">
|
|
<div className="max-w-7xl mx-auto flex flex-wrap justify-between items-center gap-4">
|
|
{/* LORE & LOCATION */}
|
|
<div className="flex flex-col">
|
|
<span className="text-xs uppercase opacity-70">
|
|
{t.HUD.SECTOR_LABEL}
|
|
</span>
|
|
<span className="text-xl font-bold tracking-widest">
|
|
{location.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
|
|
{/* SHIP STATUS (HEALTH) */}
|
|
<div className="flex flex-col min-w-[200px]">
|
|
<div className="flex justify-between text-xs uppercase mb-1">
|
|
<span>{t.HUD.HULL_LABEL}</span>
|
|
<span className={hp <= 3 ? "text-red-500 animate-pulse" : ""}>
|
|
{hp} / {maxHp}
|
|
</span>
|
|
</div>
|
|
<div className="w-full h-3 bg-gray-900 border border-yellow-500/30">
|
|
<div
|
|
className={`h-full transition-all duration-500 ${hp <= 3 ? "bg-red-600" : "bg-yellow-500"}`}
|
|
style={{ width: `${(hp / maxHp) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ECONOMY (CREDITS) */}
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-xs uppercase opacity-70">
|
|
{t.HUD.GOAL_LABEL}
|
|
</span>
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="text-2xl font-bold text-green-400">
|
|
{credits.toLocaleString()}
|
|
</span>
|
|
<span className="text-xs opacity-50">
|
|
/ {targetCredits.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{/* Progress Bar for the Goal */}
|
|
<div className="w-32 h-1 bg-gray-800 mt-1">
|
|
<div
|
|
className="h-full bg-green-500 shadow-[0_0_5px_#22c55e]"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|