68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ArrowRight, Timer, ZoomIn } from "lucide-react";
|
|
import { difficulties, type Difficulty } from "@/shared/protocol";
|
|
import { api } from "@/lib/client-api";
|
|
export { api } from "@/lib/client-api";
|
|
export function StartGame({ datasetId }: { datasetId: string }) {
|
|
const [difficulty, setDifficulty] = useState<Difficulty>("normal"),
|
|
[loading, setLoading] = useState(false),
|
|
[error, setError] = useState("");
|
|
const router = useRouter();
|
|
async function start() {
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const session = await api<{ id: string }>("sessions", {
|
|
datasetId,
|
|
difficulty,
|
|
});
|
|
router.push("/play/" + session.id);
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
setLoading(false);
|
|
}
|
|
}
|
|
return (
|
|
<div className="start-panel">
|
|
<span className="eyebrow">YOUR EXPEDITION</span>
|
|
<h2>Choose your challenge.</h2>
|
|
<div className="difficulty-options">
|
|
{Object.entries(difficulties).map(([key, value]) => (
|
|
<button
|
|
key={key}
|
|
aria-pressed={difficulty === key}
|
|
className={difficulty === key ? "selected" : ""}
|
|
onClick={() => setDifficulty(key as Difficulty)}
|
|
>
|
|
<strong>{value.label}</strong>
|
|
<span>
|
|
<Timer size={13} />
|
|
{value.seconds}s per round
|
|
</span>
|
|
<span>
|
|
<ZoomIn size={13} />
|
|
{value.zoom ? "Zoom allowed" : "No zoom"}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="muted">5 rounds · 25,000 possible points · No movement</p>
|
|
<button
|
|
className="button primary full"
|
|
onClick={start}
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Preparing your world…" : "Start exploring"}
|
|
<ArrowRight size={17} />
|
|
</button>
|
|
{error && (
|
|
<p role="alert" className="error-message">
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|