mvp

2026-02-07 20:11:26 +01:00
parent 817cdc7906
commit 81a53e441e
15 changed files with 1069 additions and 86 deletions
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { Planet } from "@/types/swapi";
+import { t } from "@/content/locales"; // Import der Locales
+
+interface GalaxyMapProps {
+  planets: Planet[];
+  onSelectLocation: (planet: Planet) => void;
+  currentLocationId?: string;
+}
+
+export default function GalaxyMap({
+  planets,
+  onSelectLocation,
+  currentLocationId,
+}: GalaxyMapProps) {
+  return (
+    <div className="relative w-full max-w-4xl h-[500px] bg-[#080808] border-2 border-yellow-500/20 rounded-xl overflow-hidden shadow-[inset_0_0_50px_rgba(0,0,0,1)] z-10">
+      {/* Hintergrund-Raster (Grid) */}
+      <div
+        className="absolute inset-0 opacity-10 pointer-events-none"
+        style={{
+          backgroundImage:
+            "linear-gradient(#eab308 1px, transparent 1px), linear-gradient(90deg, #eab308 1px, transparent 1px)",
+          backgroundSize: "40px 40px",
+        }}
+      />
+
+      {/* Die Planeten (Nodes) aus der API */}
+      {planets.map((planet) => {
+        const isCurrent = planet.id === currentLocationId;
+
+        return (
+          <button
+            key={planet.id}
+            onClick={() => !isCurrent && onSelectLocation(planet)}
+            disabled={isCurrent}
+            className={`absolute group transform -translate-x-1/2 -translate-y-1/2 transition-all 
+        ${isCurrent ? "cursor-default" : "cursor-pointer hover:scale-110"}`}
+            style={{ left: `${planet.x}%`, top: `${planet.y}%` }}
+          >
+            {/* Planet Visuell */}
+            <div
+              className={`w-4 h-4 rounded-full border-2 transition-all duration-300 
+              ${
+                isCurrent
+                  ? "bg-blue-500 border-white shadow-[0_0_15px_#3b82f6] scale-125"
+                  : "bg-yellow-500/20 border-yellow-500 group-hover:bg-yellow-500 group-hover:shadow-[0_0_10px_#eab308]"
+              }`}
+            />
+
+            {/* Label */}
+            <div className="absolute top-6 left-1/2 -translate-x-1/2 whitespace-nowrap">
+              <span
+                className={`text-[10px] font-mono uppercase tracking-tighter px-1 rounded bg-black/50
+                ${isCurrent ? "text-blue-400 font-bold" : "text-yellow-500/60 group-hover:text-yellow-500"}`}
+              >
+                {planet.name}
+              </span>
+            </div>
+
+            {/* Pulsierender Ring für aktuellen Standort */}
+            {isCurrent && (
+              <div className="absolute -inset-2 border border-blue-500/50 rounded-full animate-ping pointer-events-none" />
+            )}
+          </button>
+        );
+      })}
+
+      {/* Scan-Linie Effekt */}
+      <div className="absolute top-0 left-0 w-full h-1 bg-yellow-500/5 opacity-20 animate-scan pointer-events-none" />
+
+      {/* Info Overlay */}
+      <div className="absolute bottom-4 left-4 text-[10px] text-yellow-500/40 font-mono uppercase pointer-events-none bg-black/40 p-2 rounded">
+        {t.GALAXY_MAP.SCAN_STATUS} <br />
+        {t.GALAXY_MAP.OBJECTS_DETECTED(planets.length)} <br />
+        {t.GALAXY_MAP.HOLONET_STATUS}
+      </div>
+    </div>
+  );
+}