mvp
This commit is contained in:
StrangeD0s
@@ -0,0 +1,230 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user