231 lines
8.3 KiB
TypeScript
231 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Planet, Starship } from "@/types/swapi";
|
|
import { t } from "@/content/locales";
|
|
|
|
interface ActionPanelProps {
|
|
planet?: Planet | null;
|
|
enemy?: Starship | null;
|
|
onAction: () => void;
|
|
onEscape?: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const getPlanetTheme = (terrain: string = "", climate: string = "") => {
|
|
const terr = terrain.toLowerCase();
|
|
const clim = climate.toLowerCase();
|
|
|
|
if (terr.includes("ocean") || terr.includes("water"))
|
|
return {
|
|
color: "text-blue-400",
|
|
border: "border-blue-500",
|
|
glow: "shadow-[0_0_20px_#3b82f6]",
|
|
label: t.ACTION_PANEL.MODES.AQUATIC,
|
|
};
|
|
if (terr.includes("forest") || terr.includes("jungle"))
|
|
return {
|
|
color: "text-green-400",
|
|
border: "border-green-500",
|
|
glow: "shadow-[0_0_20px_#22c55e]",
|
|
label: t.ACTION_PANEL.MODES.VERDANT,
|
|
};
|
|
if (terr.includes("desert") || clim.includes("arid"))
|
|
return {
|
|
color: "text-orange-400",
|
|
border: "border-orange-500",
|
|
glow: "shadow-[0_0_20px_#f97316]",
|
|
label: t.ACTION_PANEL.MODES.ARID,
|
|
};
|
|
if (
|
|
terr.includes("ice") ||
|
|
terr.includes("glacier") ||
|
|
clim.includes("frozen")
|
|
)
|
|
return {
|
|
color: "text-cyan-200",
|
|
border: "border-cyan-300",
|
|
glow: "shadow-[0_0_20px_#a5f3fc]",
|
|
label: t.ACTION_PANEL.MODES.CRYO,
|
|
};
|
|
if (terr.includes("city") || terr.includes("urban"))
|
|
return {
|
|
color: "text-purple-400",
|
|
border: "border-purple-500",
|
|
glow: "shadow-[0_0_20px_#a855f7]",
|
|
label: t.ACTION_PANEL.MODES.ECUMENOPOLIS,
|
|
};
|
|
|
|
return {
|
|
color: "text-yellow-500",
|
|
border: "border-yellow-500",
|
|
glow: "shadow-[0_0_20px_#eab308]",
|
|
label: t.ACTION_PANEL.MODES.STANDARD,
|
|
};
|
|
};
|
|
|
|
export default function ActionPanel({
|
|
planet,
|
|
enemy,
|
|
onAction,
|
|
onEscape,
|
|
isLoading,
|
|
}: ActionPanelProps) {
|
|
const isCombat = !!enemy;
|
|
const theme =
|
|
!isCombat && planet
|
|
? getPlanetTheme(planet.terrain, planet.climate)
|
|
: {
|
|
color: "text-red-500",
|
|
border: "border-red-600",
|
|
glow: "shadow-[0_0_30px_#dc2626]",
|
|
label: t.ACTION_PANEL.MODES.HOSTILE,
|
|
};
|
|
|
|
const displayName = isCombat ? enemy.name : planet?.name;
|
|
const displaySubtitle = isCombat
|
|
? `${t.ACTION_PANEL.LABELS.CLASS}: ${enemy.starship_class} // ${t.ACTION_PANEL.LABELS.CREW}: ${enemy.crew}`
|
|
: `${t.ACTION_PANEL.LABELS.SECTOR}: ${planet?.climate} // ${planet?.terrain}`;
|
|
|
|
return (
|
|
<div
|
|
className={`w-full max-w-4xl mt-6 bg-black/90 backdrop-blur-md border-2 rounded-lg p-6 shadow-2xl animate-in fade-in slide-in-from-bottom-4 relative overflow-hidden transition-colors duration-500 ${theme.border}`}
|
|
>
|
|
<div
|
|
className={`absolute inset-0 bg-[linear-gradient(transparent_0%,${isCombat ? "rgba(220,38,38,0.1)" : "rgba(234,179,8,0.05)"}_50%,transparent_100%)] bg-[length:100%_4px] animate-pulse pointer-events-none`}
|
|
/>
|
|
|
|
<div className="flex flex-col md:flex-row gap-8 items-center relative z-10">
|
|
<div className="relative shrink-0">
|
|
<div
|
|
className={`w-32 h-32 rounded-full border-4 ${theme.border} ${theme.glow} flex items-center justify-center transition-all duration-700 bg-black overflow-hidden relative`}
|
|
>
|
|
{isCombat ? (
|
|
<div className="text-red-600 animate-pulse font-black text-5xl drop-shadow-[0_0_10px_rgba(220,38,38,0.8)]">
|
|
!
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
className="w-full h-full transition-colors duration-1000"
|
|
style={{
|
|
background: `radial-gradient(circle at 30% 30%, ${theme.color.replace("text-", "")}, #000)`,
|
|
backgroundColor: theme.color.includes("blue")
|
|
? "#60a5fa"
|
|
: theme.color.includes("green")
|
|
? "#4ade80"
|
|
: theme.color.includes("orange")
|
|
? "#fb923c"
|
|
: theme.color.includes("cyan")
|
|
? "#22d3ee"
|
|
: theme.color.includes("purple")
|
|
? "#c084fc"
|
|
: "#eab308",
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-black/60 via-transparent to-white/20 pointer-events-none" />
|
|
<div className="absolute inset-0 opacity-20 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] animate-spin-slow mix-blend-overlay" />
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className={`absolute -top-2 -right-2 bg-black border px-2 py-0.5 text-[8px] uppercase tracking-widest ${isCombat ? "border-red-600 text-red-600" : "border-yellow-500/50 text-yellow-500"}`}
|
|
>
|
|
{theme.label}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 text-center md:text-left space-y-3">
|
|
<div>
|
|
<h3
|
|
className={`text-3xl font-black tracking-widest uppercase ${isCombat ? "text-red-600" : "text-white"}`}
|
|
>
|
|
{displayName}
|
|
</h3>
|
|
<p
|
|
className={`${theme.color} text-xs font-bold uppercase tracking-widest opacity-80`}
|
|
>
|
|
{displaySubtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`grid grid-cols-2 gap-4 border-t border-b py-3 ${isCombat ? "border-red-900/30" : "border-yellow-500/10"}`}
|
|
>
|
|
<div className="text-[10px] uppercase">
|
|
<span
|
|
className={isCombat ? "text-red-500/50" : "text-yellow-500/50"}
|
|
>
|
|
{isCombat
|
|
? t.ACTION_PANEL.LABELS.MANUFACTURER
|
|
: t.ACTION_PANEL.LABELS.POPULATION}
|
|
</span>
|
|
<p className="text-white font-mono truncate">
|
|
{isCombat
|
|
? enemy.manufacturer
|
|
: planet?.population.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="text-[10px] uppercase">
|
|
<span
|
|
className={isCombat ? "text-red-500/50" : "text-yellow-500/50"}
|
|
>
|
|
{isCombat
|
|
? t.ACTION_PANEL.LABELS.COST
|
|
: t.ACTION_PANEL.LABELS.GRAVITY}
|
|
</span>
|
|
<p className="text-white font-mono">
|
|
{isCombat ? `${enemy.cost_in_credits} Cr` : planet?.gravity}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p
|
|
className={`text-xs italic leading-relaxed ${isCombat ? "text-red-400/60" : "text-yellow-500/60"}`}
|
|
>
|
|
{isCombat
|
|
? t.ACTION_PANEL.STATUS.COMBAT_WARNING
|
|
: t.ACTION_PANEL.STATUS.PLANET_SCAN}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 shrink-0 w-full md:w-auto">
|
|
<button
|
|
onClick={onAction}
|
|
disabled={isLoading}
|
|
className={`w-full md:w-auto px-10 py-5 border-2 font-black uppercase tracking-[0.3em] transition-all relative group
|
|
${
|
|
isCombat
|
|
? "border-red-600 text-red-600 hover:bg-red-600 hover:text-white shadow-[0_0_15px_rgba(220,38,38,0.3)]"
|
|
: "border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-black hover:shadow-[0_0_30px_#eab308]"
|
|
} ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
|
|
>
|
|
{isLoading ? (
|
|
<span className="flex items-center gap-2">
|
|
<span
|
|
className={`animate-ping inline-flex h-2 w-2 rounded-full ${isCombat ? "bg-red-600" : "bg-yellow-500"}`}
|
|
></span>
|
|
{t.ACTION_PANEL.STATUS.ENGAGING}
|
|
</span>
|
|
) : isCombat ? (
|
|
t.ACTION_PANEL.BUTTONS.FIRE
|
|
) : (
|
|
t.ACTION_PANEL.BUTTONS.JUMP
|
|
)}
|
|
</button>
|
|
|
|
{isCombat && (
|
|
<button
|
|
onClick={onEscape}
|
|
className="px-10 py-2 border border-white/20 text-white/40 text-[10px] uppercase tracking-widest hover:bg-white/5 hover:text-white transition-all"
|
|
>
|
|
{t.ACTION_PANEL.BUTTONS.ESCAPE}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|