218 lines
8.4 KiB
TypeScript
218 lines
8.4 KiB
TypeScript
import { BookOpenText, Languages, Settings } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { ChangeEvent, useState } from "react";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { BoardingMissionForm, startVoyage } from "@/features/boarding";
|
|
import { useI18n } from "@/features/i18n/model/useI18n";
|
|
import { useLobbyRedirect } from "@/features/lobby-session/model/useLobbyRedirect";
|
|
import { LOCALE_LABELS, Locale, SUPPORTED_LOCALES } from "@/shared/config/i18n";
|
|
import { ROUTES } from "@/shared/config/routes";
|
|
|
|
function RouteCard({
|
|
route,
|
|
isCTA = false,
|
|
onLaunch,
|
|
}: {
|
|
route: (typeof ROUTES)[number];
|
|
isCTA?: boolean;
|
|
onLaunch: (route: (typeof ROUTES)[number]) => void;
|
|
}) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div
|
|
className={`group relative flex h-full flex-col rounded-2xl border border-slate-800 bg-slate-900/60 p-6 shadow-lg backdrop-blur-md transition-all duration-300 hover:border-indigo-500/50 hover:bg-slate-800/80 hover:shadow-indigo-900/20 ${isCTA ? "min-h-[200px] items-center justify-center text-center" : ""}`}
|
|
>
|
|
<div
|
|
className={`relative z-10 flex w-full ${isCTA ? "flex-col items-center gap-4" : "mb-4 items-start justify-between"}`}
|
|
>
|
|
<div className={isCTA ? "flex flex-col items-center" : ""}>
|
|
<h3
|
|
className={`font-bold text-indigo-100 transition-colors group-hover:text-white ${isCTA ? "text-3xl" : "text-xl"}`}
|
|
>
|
|
{t(route.nameKey, undefined, route.id)}
|
|
</h3>
|
|
<span className="mt-2 inline-block rounded-full border border-slate-800 bg-slate-950/50 px-2 py-0.5 text-xs font-medium text-slate-400">
|
|
{t(route.tagKey)}
|
|
</span>
|
|
</div>
|
|
{route.durationMinutes !== 0 && (
|
|
<span
|
|
className={`font-light text-slate-300 transition-colors group-hover:text-white ${isCTA ? "mt-2 text-4xl" : "text-3xl"}`}
|
|
>
|
|
{route.durationMinutes !== 0 && route.durationMinutes}
|
|
<span className="ml-1 text-sm text-slate-500">
|
|
{route.durationMinutes !== 0 && t("common.minuteShort")}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{!isCTA && (
|
|
<p className="relative z-10 mb-8 w-full flex-1 text-left text-sm leading-relaxed text-slate-400">
|
|
{t(route.descriptionKey)}
|
|
</p>
|
|
)}
|
|
|
|
{isCTA && (
|
|
<p className="relative z-10 mt-2 mb-6 max-w-lg text-left text-base text-slate-400">
|
|
{t(route.descriptionKey)}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => onLaunch(route)}
|
|
className={`relative z-10 flex items-center justify-center rounded-xl bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-900/30 transition-all hover:bg-indigo-500 active:scale-[0.98] ${isCTA ? "w-full max-w-md py-4 text-lg" : "w-full py-4"}`}
|
|
>
|
|
{isCTA ? t("lobby.cta.station") : t("lobby.cta.launch")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LobbyRoutesPanel() {
|
|
const { locale, setLocale, t } = useI18n();
|
|
useLobbyRedirect();
|
|
const router = useRouter();
|
|
const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
|
|
const [isBoardingOpen, setIsBoardingOpen] = useState(false);
|
|
|
|
const stationRoute = ROUTES[0];
|
|
const normalRoutes = ROUTES.slice(1);
|
|
const selectedRoute =
|
|
ROUTES.find((route) => route.id === selectedRouteId) ?? stationRoute;
|
|
|
|
const handleOpenBoarding = (route: (typeof ROUTES)[number]) => {
|
|
setSelectedRouteId(route.id);
|
|
setIsBoardingOpen(true);
|
|
};
|
|
|
|
const handleDocking = (mission: string) => {
|
|
const started = startVoyage({
|
|
route: selectedRoute,
|
|
mission,
|
|
routeName: t(selectedRoute.nameKey, undefined, selectedRoute.id),
|
|
});
|
|
|
|
if (!started) return;
|
|
|
|
setIsBoardingOpen(false);
|
|
router.push("/flight");
|
|
};
|
|
|
|
const handleLocaleChange = (event: ChangeEvent<HTMLSelectElement>) => {
|
|
setLocale(event.target.value as Locale);
|
|
};
|
|
|
|
return (
|
|
<div className="relative z-10 flex min-h-[calc(100vh-80px)] w-full flex-col p-6 md:p-12 lg:min-h-screen lg:flex-row lg:items-stretch lg:gap-0 lg:p-0">
|
|
<aside className="hidden w-72 shrink-0 border-r border-slate-700/80 bg-slate-800/65 px-7 py-8 shadow-[2px_0_24px_rgba(2,6,23,0.45)] backdrop-blur lg:flex lg:min-h-screen lg:flex-col lg:justify-between">
|
|
<div className="flex flex-col gap-10">
|
|
<h1 className="text-lg font-bold tracking-[0.14em] text-indigo-300">
|
|
FOCUSTELLA
|
|
</h1>
|
|
<nav className="flex flex-col gap-2">
|
|
<Link
|
|
href="/log"
|
|
className="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-slate-100"
|
|
>
|
|
<BookOpenText className="h-4 w-4 text-indigo-300" aria-hidden />
|
|
<span>{t("layout.nav.log")}</span>
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
className="flex items-center gap-3 rounded-lg border border-transparent px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:border-slate-700 hover:bg-slate-900/70 hover:text-slate-100"
|
|
>
|
|
<Settings className="h-4 w-4 text-indigo-300" aria-hidden />
|
|
<span>{t("layout.nav.settings")}</span>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
<label className="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2 text-xs text-slate-300">
|
|
<span className="inline-flex items-center gap-2">
|
|
<Languages className="h-4 w-4 text-indigo-300" aria-hidden />
|
|
{t("layout.nav.language")}
|
|
</span>
|
|
<select
|
|
value={locale}
|
|
onChange={handleLocaleChange}
|
|
className="rounded border border-slate-700 bg-slate-900/80 px-2 py-1 text-xs text-slate-200 outline-none transition-colors focus:border-indigo-400"
|
|
>
|
|
{SUPPORTED_LOCALES.map((item) => (
|
|
<option key={item} value={item}>
|
|
{LOCALE_LABELS[item]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</aside>
|
|
|
|
<div className="w-full flex-1 lg:min-h-screen lg:bg-slate-950/68 lg:px-10 lg:pt-10 lg:shadow-[inset_0_1px_0_rgba(148,163,184,0.06)]">
|
|
<div className="mx-auto mb-12 max-w-2xl space-y-4 rounded-3xl border border-slate-800/40 bg-slate-950/35 p-6 text-center backdrop-blur-sm">
|
|
<h1 className="text-3xl font-bold tracking-tight text-slate-100 md:text-5xl">
|
|
{t("lobby.title")}
|
|
</h1>
|
|
<p className="text-lg text-slate-300">{t("lobby.subtitle")}</p>
|
|
</div>
|
|
|
|
<div className="mx-auto flex w-full max-w-5xl flex-col gap-6 pb-8">
|
|
<div className="w-full">
|
|
<RouteCard
|
|
route={stationRoute}
|
|
isCTA={true}
|
|
onLaunch={handleOpenBoarding}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
|
|
{normalRoutes.map((route) => (
|
|
<RouteCard
|
|
key={route.id}
|
|
route={route}
|
|
onLaunch={handleOpenBoarding}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={isBoardingOpen} onOpenChange={setIsBoardingOpen}>
|
|
<DialogContent
|
|
className="max-w-xl border-slate-800 bg-slate-950 text-slate-100"
|
|
showCloseButton={true}
|
|
>
|
|
<DialogHeader className="mb-2">
|
|
<h2 className="mb-1 text-sm font-semibold uppercase tracking-widest text-indigo-400">
|
|
{t("lobby.modal.boardingCheck")}
|
|
</h2>
|
|
<DialogTitle className="text-2xl font-bold text-white">
|
|
{t("lobby.modal.routeBoarding", {
|
|
routeName: t(selectedRoute.nameKey, undefined, selectedRoute.id),
|
|
})}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-slate-400">
|
|
{t("lobby.modal.description")}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<BoardingMissionForm
|
|
onDock={handleDocking}
|
|
onCancel={() => setIsBoardingOpen(false)}
|
|
autoFocus={true}
|
|
compact={true}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|