73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useNavigate } from "react-router";
|
|
import { useApi } from "../api/context";
|
|
import { PLAYER_STATE_KEY } from "../state/player";
|
|
import { Art, Button, Icon } from "../ui";
|
|
import { RestoreCompany } from "./BackupSettings";
|
|
|
|
/** First launch: create a guest account (decision: guests first, accounts later). */
|
|
export function StartScreen() {
|
|
const api = useApi();
|
|
const queryClient = useQueryClient();
|
|
const navigate = useNavigate();
|
|
const start = useMutation({
|
|
mutationFn: () => api.call("createGuest", {}),
|
|
onSuccess: ({ state }) => {
|
|
// The session cookie is now set; the response already holds the new state.
|
|
queryClient.setQueryData(PLAYER_STATE_KEY, state);
|
|
// Straight to work: the first company run is one tap away (CR-001).
|
|
void navigate("/contracts");
|
|
},
|
|
});
|
|
|
|
return (
|
|
<main className="relative flex min-h-dvh flex-col items-center justify-center gap-8 overflow-hidden p-6 text-center text-ink-50">
|
|
<div aria-hidden="true" className="pointer-events-none absolute inset-0">
|
|
<Art
|
|
sprite="sun"
|
|
className="absolute -top-24 -right-24 size-72 opacity-80 blur-[1px] sm:size-96"
|
|
/>
|
|
<Art sprite="body-earth" className="absolute bottom-[14%] -left-10 size-40 sm:size-56" />
|
|
<Art
|
|
sprite="body-moon"
|
|
className="absolute bottom-[34%] left-[30%] size-10 sm:left-[18%]"
|
|
/>
|
|
<Art
|
|
sprite="ship-courier"
|
|
className="absolute top-[22%] left-[12%] size-16 rotate-[60deg] drop-shadow-[0_0_10px_rgb(251_191_36/0.5)]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative animate-rise">
|
|
<h1 className="bg-linear-to-b from-amber-100 via-amber-300 to-amber-600 bg-clip-text font-display text-5xl font-bold tracking-[0.2em] text-transparent drop-shadow-[0_0_24px_rgb(251_191_36/0.35)] sm:text-7xl">
|
|
DEADHEAD
|
|
</h1>
|
|
<p className="mt-2 font-display text-sm tracking-[0.45em] text-cyan-300/80 uppercase">
|
|
Space Freight Tycoon
|
|
</p>
|
|
</div>
|
|
<p className="relative max-w-sm animate-rise text-base text-ink-200">
|
|
Fly company runs between Earth and the Moon, save up for your own ship, and build a freight
|
|
empire across the solar system.
|
|
</p>
|
|
<Button
|
|
size="lg"
|
|
onClick={() => start.mutate()}
|
|
disabled={start.isPending}
|
|
className="relative animate-rise px-10"
|
|
>
|
|
<Icon name="send" className="size-5" />
|
|
{start.isPending ? "Starting…" : "Start your company"}
|
|
</Button>
|
|
<div className="relative">
|
|
<RestoreCompany pastTutorial={false} />
|
|
</div>
|
|
{start.isError && (
|
|
<p role="alert" className="relative text-sm text-rose-300">
|
|
Could not start a company. Check your connection and try again.
|
|
</p>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|