norman/smugglers-run
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update and polish

Browse Source
This commit is contained in:
StrangeD0s
2026-02-08 17:06:59 +01:00
parent 81a53e441e
commit fcd8cadf43
18 changed files with 915 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/GalaxyMap.tsx
+19 -15
View File
@@ -2,22 +2,24 @@
import React from "react";
import { Planet } from "@/types/swapi";
import { t } from "@/content/locales"; // Import der Locales
import { t } from "@/content/locales";
interface GalaxyMapProps {
planets: Planet[];
onSelectLocation: (planet: Planet) => void;
currentLocationId?: string;
selectedPlanetId?: string;
}
export default function GalaxyMap({
planets,
onSelectLocation,
currentLocationId,
selectedPlanetId,
}: 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="relative w-full max-w-4xl h-[500px] bg-[#080808] border-2 border-yellow-300 rounded-xl overflow-hidden shadow-[inset_0_0_50px_rgba(0,0,0,1)] z-10">
{/* Background-Grid */}
<div
className="absolute inset-0 opacity-10 pointer-events-none"
style={{
@@ -27,40 +29,43 @@ export default function GalaxyMap({
}}
/>
{/* Die Planeten (Nodes) aus der API */}
{planets.map((planet) => {
const isCurrent = planet.id === currentLocationId;
const isSelected = planet.id === selectedPlanetId;
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"}`}
onClick={() => onSelectLocation(planet)}
className="absolute group transform -translate-x-1/2 -translate-y-1/2 transition-all 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]"
: isSelected
? "bg-yellow-500 border-yellow-500 shadow-[0_0_10px_#eab308]"
: "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"}`}
${
isCurrent
? "text-blue-400 font-bold"
: isSelected
? "text-yellow-500"
: "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" />
)}
@@ -68,11 +73,10 @@ export default function GalaxyMap({
);
})}
{/* 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">
<div className="absolute bottom-4 left-4 text-[10px] text-red-500 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}