87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Planet } from "@/types/swapi";
|
|
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-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={{
|
|
backgroundImage:
|
|
"linear-gradient(#eab308 1px, transparent 1px), linear-gradient(90deg, #eab308 1px, transparent 1px)",
|
|
backgroundSize: "40px 40px",
|
|
}}
|
|
/>
|
|
|
|
{planets.map((planet) => {
|
|
const isCurrent = planet.id === currentLocationId;
|
|
const isSelected = planet.id === selectedPlanetId;
|
|
|
|
return (
|
|
<button
|
|
key={planet.id}
|
|
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}%` }}
|
|
>
|
|
<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"
|
|
: 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]"
|
|
}`}
|
|
/>
|
|
|
|
<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"
|
|
: isSelected
|
|
? "text-yellow-500"
|
|
: "text-yellow-500/60 group-hover:text-yellow-500"
|
|
}`}
|
|
>
|
|
{planet.name}
|
|
</span>
|
|
</div>
|
|
|
|
{isCurrent && (
|
|
<div className="absolute -inset-2 border border-blue-500/50 rounded-full animate-ping pointer-events-none" />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
<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-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}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|