Files
MineGeo/components/MapRefresh.tsx

88 lines
2.4 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { api } from "./StartGame";
export function MapRefresh({
id,
disabled,
onQueued,
}: {
id: string;
disabled: boolean;
onQueued: () => void;
}) {
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">THE MAP PLAYERS GUESS ON</span>
<h2>Refresh guessing map</h2>
<p className="muted">
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">
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 ? "Original capture" : s.name} ·{" "}
{new Date(s.created_at).toLocaleDateString()} · {s.id.slice(0, 8)}
</option>
))}
</select>
</label>
<button
className="button"
disabled={disabled || busy || !sources.some((s) => s.id === source)}
onClick={refresh}
>
{busy ? "Queueing…" : "Refresh guessing map"}
</button>
<p className="muted">
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">
{error}
</p>
)}
</section>
);
}