74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"use client";
|
|
import { useI18n } from "@/components/I18nProvider";
|
|
|
|
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 { t } = useI18n();
|
|
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">{t("YOUR EXPEDITION")}</span>
|
|
<h2>{t("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>{t(value.label)}</strong>
|
|
<span>
|
|
<Timer size={13} />
|
|
{value.seconds}
|
|
{t("s per round")}
|
|
</span>
|
|
<span>
|
|
<ZoomIn size={13} />
|
|
{value.zoom ? t("Zoom allowed") : t("No zoom")}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="muted">
|
|
{t("5 rounds · 25,000 possible points · No movement")}
|
|
</p>
|
|
<button
|
|
className="button primary full"
|
|
onClick={start}
|
|
disabled={loading}
|
|
>
|
|
{loading ? t("Preparing your world…") : t("Start exploring")}
|
|
<ArrowRight size={17} />
|
|
</button>
|
|
{error && (
|
|
<p role="alert" className="error-message">
|
|
{t(error)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|