update and polish

2026-02-08 17:06:59 +01:00
parent 81a53e441e
commit fcd8cadf43
18 changed files with 915 additions and 354 deletions
@@ -0,0 +1,136 @@
+"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>
+  );
+}