46 lines
1.7 KiB
TypeScript
46 lines
1.7 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";
|
|
|
|
/** 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);
|
|
void navigate("/");
|
|
},
|
|
});
|
|
|
|
return (
|
|
<main className="flex min-h-dvh flex-col items-center justify-center gap-6 bg-slate-950 p-6 text-center text-slate-100">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-wide">DEADHEAD</h1>
|
|
<p className="mt-1 text-slate-400">Space Freight Tycoon</p>
|
|
</div>
|
|
<p className="max-w-xs text-sm text-slate-300">
|
|
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
|
|
type="button"
|
|
onClick={() => start.mutate()}
|
|
disabled={start.isPending}
|
|
className="rounded-lg bg-amber-500 px-6 py-3 font-semibold text-slate-950 disabled:opacity-60"
|
|
>
|
|
{start.isPending ? "Starting…" : "Start your company"}
|
|
</button>
|
|
{start.isError && (
|
|
<p role="alert" className="text-sm text-red-400">
|
|
Could not start a company. Check your connection and try again.
|
|
</p>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|