92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
"use client";
|
|
import { useI18n } from "@/components/I18nProvider";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { api } from "./StartGame";
|
|
|
|
export function MapRefresh({
|
|
id,
|
|
disabled,
|
|
onQueued,
|
|
}: {
|
|
id: string;
|
|
disabled: boolean;
|
|
onQueued: () => void;
|
|
}) {
|
|
const { t, formatDate } = useI18n();
|
|
const [sources, setSources] = useState<
|
|
{ id: string; name: string; created_at: string }[]
|
|
>([]);
|
|
const [source, setSource] = useState(id);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
useEffect(() => {
|
|
let active = true;
|
|
api<{ sources: typeof sources }>(`datasets/${id}/refresh-map`)
|
|
.then((r) => {
|
|
if (active) setSources(r.sources);
|
|
})
|
|
.catch((e) => {
|
|
if (active) setError(e.message);
|
|
});
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [id]);
|
|
async function refresh() {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api(`datasets/${id}/refresh-map`, { sourceId: source });
|
|
onQueued();
|
|
} catch (e) {
|
|
setError((e as Error).message);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
return (
|
|
<section className="editor-panel">
|
|
<span className="eyebrow">{t("THE MAP PLAYERS GUESS ON")}</span>
|
|
<h2>{t("Refresh guessing map")}</h2>
|
|
<p className="muted">
|
|
{t(
|
|
"Rebuild the overhead map from a processed capture. To show new buildings, export the same area again and upload it first. Select that capture here; its boundaries must match this map exactly.",
|
|
)}
|
|
</p>
|
|
<label className="field">
|
|
{t("Terrain capture")}
|
|
<select
|
|
value={source}
|
|
onChange={(e) => setSource(e.target.value)}
|
|
disabled={disabled || busy}
|
|
>
|
|
{sources.map((s) => (
|
|
<option key={s.id} value={s.id}>
|
|
{s.id === id ? t("Original capture") : s.name} ·{" "}
|
|
{formatDate(s.created_at)} · {s.id.slice(0, 8)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<button
|
|
className="button"
|
|
disabled={disabled || busy || !sources.some((s) => s.id === source)}
|
|
onClick={refresh}
|
|
>
|
|
{busy ? t("Queueing…") : t("Refresh guessing map")}
|
|
</button>
|
|
<p className="muted">
|
|
{t(
|
|
"Panoramas stay unchanged. Refreshing uses no panorama slots, even at 24/24. Submit the finished map update for review to make it playable.",
|
|
)}
|
|
</p>
|
|
{error && (
|
|
<p role="alert" className="error-message">
|
|
{t(error)}
|
|
</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|