137 lines
4.3 KiB
TypeScript
137 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { t } from "@/content/locales";
|
|
|
|
interface PowerSettings {
|
|
engines: number;
|
|
lasers: number;
|
|
shields: number;
|
|
}
|
|
|
|
interface PowerDistributorProps {
|
|
power: PowerSettings;
|
|
onUpdatePower: (newSettings: PowerSettings) => void;
|
|
disabled?: boolean;
|
|
isRerouting?: boolean;
|
|
}
|
|
|
|
export default function PowerDistributor({
|
|
power,
|
|
onUpdatePower,
|
|
disabled = false,
|
|
isRerouting = false,
|
|
}: PowerDistributorProps) {
|
|
const handleBoost = (system: keyof PowerSettings) => {
|
|
if (disabled || isRerouting) return;
|
|
|
|
const newSettings = { ...power };
|
|
if (power[system] <= 4) {
|
|
const otherSystems = (
|
|
Object.keys(power) as Array<keyof PowerSettings>
|
|
).filter((s) => s !== system);
|
|
|
|
if (power[otherSystems[0]] > 0 && power[otherSystems[1]] > 0) {
|
|
newSettings[system] += 2;
|
|
newSettings[otherSystems[0]] -= 1;
|
|
newSettings[otherSystems[1]] -= 1;
|
|
onUpdatePower(newSettings);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
if (disabled || isRerouting) return;
|
|
onUpdatePower({ engines: 3, lasers: 3, shields: 3 });
|
|
};
|
|
|
|
const systems = [
|
|
{
|
|
key: "engines" as const,
|
|
label: t.SYSTEMS.ENGINES,
|
|
color: "bg-blue-500",
|
|
glow: "shadow-[0_0_15px_#3b82f6]",
|
|
},
|
|
{
|
|
key: "lasers" as const,
|
|
label: t.SYSTEMS.LASERS,
|
|
color: "bg-red-600",
|
|
glow: "shadow-[0_0_15px_#dc2626]",
|
|
},
|
|
{
|
|
key: "shields" as const,
|
|
label: t.SYSTEMS.SHIELDS,
|
|
color: "bg-green-500",
|
|
glow: "shadow-[0_0_15px_#22c55e]",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="bg-[#080808]/90 border-2 border-blue-500/60 p-4 rounded-xl w-full h-full flex flex-col justify-between backdrop-blur-md relative overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<h3 className="font-aurebesh text-green-500 text-lg tracking-wider">
|
|
{t.SYSTEMS.POWER_MANAGEMENT}
|
|
</h3>
|
|
<div className="text-[10px] font-mono text-green-500/80 uppercase">
|
|
{t.SYSTEMS.SUB_LABEL}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleReset}
|
|
disabled={disabled || isRerouting}
|
|
className="text-[10px] font-mono px-3 py-1 border border-yellow-500/30 text-yellow-500/80 hover:text-yellow-500 hover:border-yellow-500 transition-all rounded uppercase disabled:opacity-60"
|
|
>
|
|
{t.SYSTEMS.RESET}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 flex-grow">
|
|
{systems.map((sys) => (
|
|
<div key={sys.key} className="flex flex-col items-center group">
|
|
<button
|
|
onClick={() => handleBoost(sys.key)}
|
|
disabled={disabled || isRerouting || power[sys.key] >= 6}
|
|
className="w-full mb-3 py-2 bg-yellow-500/5 border border-yellow-500/40 hover:bg-yellow-500/20 text-yellow-500 rounded-lg text-sm transition-all active:scale-95 disabled:opacity-50 group-hover:border-yellow-500/50"
|
|
>
|
|
{t.SYSTEMS.BOOST}
|
|
</button>
|
|
|
|
{/* Visual Bar */}
|
|
<div className="flex flex-col-reverse gap-1.5 h-40 w-full bg-black/60 border border-white/40 p-1.5 rounded-md shadow-inner">
|
|
{[...Array(6)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`h-full w-full rounded-sm transition-all duration-500 ${
|
|
i < power[sys.key]
|
|
? `${sys.color} ${sys.glow}`
|
|
: "bg-white/5"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<span className="mt-3 text-[10px] font-mono uppercase text-yellow-500 tracking-widest">
|
|
{sys.label}
|
|
</span>
|
|
<span className="text-[10px] font-mono text-white/60">
|
|
LVL {power[sys.key]}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Overlay */}
|
|
{isRerouting && (
|
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center z-10">
|
|
<div className="bg-black border border-red-500/50 text-red-500 text-[10px] font-mono px-4 py-2 rounded shadow-[0_0_20px_rgba(239,68,68,0.3)] animate-pulse uppercase tracking-[0.2em]">
|
|
{t.ENGINE.SYSTEMS.REROUTING}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|